WIP3 wizard

src/Ombi/ClientApp/src/app/wizard/createadmin/createadmin.component.html

@@ -1,6 +1,12 @@
-
+<div class="mediaserver-container">
-<small>This account will be used to configure your settings and also manage all of the requests.</small>
+    <div class="left-container mediaserver">
-<div>
+        <i class="fas fa-user-shield text-logo"></i>
+    </div>
+    <div class="right-container mediaserver">
+        <div class="right-container-content mediaserver">
+            <h1>Protect your Ombi</h1>
+            <small>Create an Admin account to make sure you are always able to access your Ombi.</small>
+            <div>
                 <mat-form-field>
                     <input matInput type="text" id="adminUsername" name="Username" [(ngModel)]="user.username" placeholder="Username">
                 </mat-form-field>
@@ -8,5 +14,9 @@
                 <mat-form-field>
                     <input type="password" matInput id="adminPassword" name="Password" [(ngModel)]="user.password" placeholder="Password">
                 </mat-form-field>
+            </div>
+            <small class="important">You'll need to configure e-mail to recover any lost password!</small>
+        </div>
+    </div>
 </div>
 

src/Ombi/ClientApp/src/app/wizard/createadmin/createadmin.component.ts

@@ -4,6 +4,7 @@ import { ICreateWizardUser } from "../../interfaces";
 @Component({
     selector: "wizard-local-admin",
     templateUrl: "./createadmin.component.html",
+    styleUrls: ["../welcome/welcome.component.scss"]
 })
 export class CreateAdminComponent {
 

src/Ombi/ClientApp/src/app/wizard/emby/emby.component.html

@@ -4,6 +4,7 @@
     </div>
     <div class="right-container mediaserver">
         <div class="right-container-content mediaserver">
+            <H1 class="wizard-title">Emby Configuration</H1>
             <div *ngIf="embySettings">
                 <div *ngIf="embySettings.servers">
                     <div *ngFor="let server of embySettings.servers">
@@ -29,7 +30,7 @@
                             </mat-form-field>
                         </div>
                         <div style="text-align: center; margin-top: 20px">
-                            <a (click)="save()" id="embyApiKeySave" mat-raised-button color="primary">Save <div id="spinner"></div></a>
+                            <button (click)="save()" id="embyApiKeySave" mat-raised-button color="accent" type="button" class="viewon-btn emby">Save</button><div id="spinner"></div>
                         </div>
                     </div>
                 </div>

src/Ombi/ClientApp/src/app/wizard/jellyfin/jellyfin.component.html

@@ -4,6 +4,7 @@
     </div>
     <div class="right-container mediaserver">
         <div class="right-container-content mediaserver">
+            <H1 class="wizard-title">Jellyfin Configuration</H1>
             <div *ngIf="jellyfinSettings">
                 <div *ngIf="jellyfinSettings.servers">
                     <div *ngFor="let server of jellyfinSettings.servers">
@@ -29,7 +30,7 @@
                             </mat-form-field>
                         </div>
                         <div style="text-align: center; margin-top: 20px">
-                            <a (click)="save()" id="jellyfinApiKeySave" mat-raised-button color="primary">Save <div id="spinner"></div></a>
+                            <button (click)="save()" id="jellyfinApiKeySave" mat-raised-button color="accent" type="button" class="viewon-btn jellyfin">Save</button><div id="spinner"></div>
                         </div>
                     </div>
                 </div>

src/Ombi/ClientApp/src/app/wizard/ombiconfig/ombiconfig.component.html

@@ -0,0 +1,27 @@
+<div class="mediaserver-container">
+    <div class="left-container mediaserver">
+        <i class="fas fa-user-astronaut text-logo"></i>
+    </div>
+    <div class="right-container mediaserver">
+        <div class="right-container-content mediaserver">
+            <h1>Customize your Ombi</h1>
+            <div>
+                <mat-form-field>
+                    <input type="text" matInput id="applicationname" name="Application Name" placeholder="Application Name">
+                </mat-form-field>
+            </div>
+            <div>
+                <mat-form-field>
+                    <input matInput type="text" id="applicationurl" name="Application URL" placeholder="Application URL">
+                </mat-form-field>
+            </div> 
+            <div>
+                <mat-form-field>
+                    <mat-label>Custom Logo</mat-label>
+                    <input  matInput  type="url" id="customlogo" name="Custom Logo" placeholder="Input the URL of your custom logo">
+                </mat-form-field>
+            </div>
+        </div>
+    </div>
+</div>
+

src/Ombi/ClientApp/src/app/wizard/ombiconfig/ombiconfig.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+    selector: "wizard-ombi",
+    templateUrl: "./ombiconfig.component.html",
+    styleUrls: ["../welcome/welcome.component.scss"]
+})
+export class OmbiConfigComponent {
+
+    constructor() { }
+}

src/Ombi/ClientApp/src/app/wizard/plex/plex.component.html

@@ -4,6 +4,7 @@
     </div>
     <div class="right-container mediaserver">
         <div class="right-container-content mediaserver">
+            <H1 class="wizard-title">Plex Configuration</H1>
             <div class="form-group">
                 <div>
                 <mat-form-field>
@@ -20,13 +21,13 @@
             <div class="plex-buttons">
                 <div class="form-group">
                     <div style="text-align: center; margin-top: 20px">
-                        <button (click)="requestAuthToken()" mat-raised-button color="primary" >Request Token <i class="fas fa-key"></i></button>
+                        <button (click)="requestAuthToken()" mat-raised-button color="primary" class="viewon-btn standard">Request Token <i class="fas fa-key"></i></button>
                     </div>
                 </div>
                 <p class="text-center space-or">OR</p>
                 <div class="form-group">
                     <div style="text-align: center; margin-top: 20px">
-                        <button (click)="oauth()" mat-raised-button color="accent" type="button">Continue With Plex</button>
+                        <button (click)="oauth()" mat-raised-button color="accent" type="button" class="viewon-btn plex">Login With Plex</button>
                     </div>
                 </div>
             </div>

src/Ombi/ClientApp/src/app/wizard/welcome/welcome.component.html

@@ -13,7 +13,7 @@
                 <div class="right-container-content">
                   <h1>Welcome to Ombi!</h1>
                   <p>This wizard will quickly take you through the inital setup!</p>
-                  <p>If you encounter any problems you can find help on the following platforms:</p>
+                  <p>If you encounter any problems, please reach out on the following platforms:</p>
                   <br />
                   <div class="social-media">
                     <ul class="fa-ul">
@@ -39,6 +39,8 @@
               <mat-tab label="Emby"><wizard-emby></wizard-emby></mat-tab>
               <mat-tab label="Jellyfin"><wizard-jellyfin></wizard-jellyfin></mat-tab>
             </mat-tab-group>
+              <button mat-button matStepperPrevious class="mat-raised-button mat-error left">Back</button>
+              <button mat-button matStepperNext class="mat-raised-button mat-accent right">Next</button>
           </form>
         </mat-step>
         <mat-step>
@@ -46,18 +48,18 @@
             <ng-template matStepLabel>Create a local admin</ng-template>
             <wizard-local-admin [user]="localUser"></wizard-local-admin>
             <div>
-              <button mat-button matStepperPrevious>Back</button>
+              <button mat-button matStepperPrevious class="mat-raised-button mat-error left">Back</button>
-              <button mat-button matStepperNext>Next</button>
+              <button mat-button matStepperNext class="mat-raised-button mat-accent right">Next</button>
             </div>
           </form>
         </mat-step>
         <mat-step [optional]="true">
           <form >
             <ng-template matStepLabel>Ombi config</ng-template>
-            <wizard-local-admin [user]="localUser"></wizard-local-admin>
+            <wizard-ombi></wizard-ombi>
             <div>
-              <button mat-button matStepperPrevious>Back</button>
+              <button mat-button matStepperPrevious class="mat-raised-button mat-error left">Back</button>
-              <button mat-button matStepperNext>Next</button>
+              <button mat-button matStepperNext class="mat-raised-button mat-accent right">Next</button>
             </div>
           </form>
         </mat-step>

src/Ombi/ClientApp/src/app/wizard/welcome/welcome.component.scss

@@ -6,16 +6,15 @@
 }
 
 .welcome-container .logo{
-    display:flex;
     font-family: Montserrat,sans-serif;
     text-transform: uppercase;
     color: #62d2fa;
-    align-items: center;
-    justify-content: center;
     font-weight: 700;
     font-size: 5em;
-    padding: 40px 20px;
+    display:flex;
-    min-height: 300px;
+    justify-content: center;
+    align-items: center;
+    height:300px;
 }
 
 .left-container{
@@ -95,6 +94,7 @@
 .left-container.mediaserver{
     display:flex;
     justify-content: center;
+    align-items: center;
     height:300px;
     padding:20px;
 }
@@ -126,3 +126,47 @@ p.space-or{
     padding:20px;
     margin-top:20px;
 }
+
+.viewon-btn.plex {
+    border: 1px solid #e5a00d;
+    color: #e5a00d;
+}
+
+.viewon-btn {
+    background-color: transparent;
+    text-decoration: none;
+}
+
+.viewon-btn.standard {
+    border: 1px solid #FFF;
+}
+
+.viewon-btn.emby {
+    border: 1px solid #52B54B;
+    color: #52B54B;
+}
+
+.viewon-btn.jellyfin {
+    border: 1px solid #A45FC4;
+    color: #A45FC4;
+}
+
+.text-logo{
+    font-size:12em;
+}
+
+.left{
+    float:left;
+}
+
+.right{
+    float:right;
+}
+
+small.important{
+    color:red;
+}
+
+h1.wizard-title{
+    margin-top:30px;
+}

src/Ombi/ClientApp/src/app/wizard/wizard.module.ts

@@ -11,6 +11,7 @@ import { JellyfinComponent } from "./jellyfin/jellyfin.component";
 import { MediaServerComponent } from "./mediaserver/mediaserver.component";
 import { PlexComponent } from "./plex/plex.component";
 import { WelcomeComponent } from "./welcome/welcome.component";
+import { OmbiConfigComponent } from "./ombiconfig/ombiconfig.component";
 
 import { EmbyService } from "../services";
 import { JellyfinService } from "../services";
@@ -28,6 +29,7 @@ const routes: Routes = [
     { path: "Emby", component: EmbyComponent},
     { path: "Jellyfin", component: JellyfinComponent},
     { path: "CreateAdmin", component: CreateAdminComponent},
+    { path: "OmbiConfig", component: OmbiConfigComponent},
 ];
 @NgModule({
     imports: [
@@ -45,6 +47,7 @@ const routes: Routes = [
         CreateAdminComponent,
         EmbyComponent,
         JellyfinComponent,
+        OmbiConfigComponent,
     ],
     exports: [
         RouterModule,