open-source-mirrors
/
Ombi
mirror of https://github.com/Ombi-app/Ombi
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

WIP3 wizard

Browse Source
pull/4019/head
twanariens 3 years ago
parent bf5a17ad05
commit e5ee021139
10 changed files with 126 additions and 25 deletions
Show Stats Download Patch File Download Diff File

30
src/Ombi/ClientApp/src/app/wizard/createadmin/createadmin.component.html
Unescape View File

@ -1,12 +1,22 @@

<small>This account will be used to configure your settings and also manage all of the requests.</small>
<div>
<mat-form-field>
<input matInput type="text" id="adminUsername" name="Username" [(ngModel)]="user.username" placeholder="Username">
</mat-form-field>
</div> <div>
<mat-form-field>
<input type="password" matInput id="adminPassword" name="Password" [(ngModel)]="user.password" placeholder="Password">
</mat-form-field>
<div class="mediaserver-container">
<div class="left-container mediaserver">
<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>
</div> <div>
<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>

1
src/Ombi/ClientApp/src/app/wizard/createadmin/createadmin.component.ts
Unescape View File

@ -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 {

3
src/Ombi/ClientApp/src/app/wizard/emby/emby.component.html
Unescape View File

@ -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>

3
src/Ombi/ClientApp/src/app/wizard/jellyfin/jellyfin.component.html
Unescape View File

@ -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>

27
src/Ombi/ClientApp/src/app/wizard/ombiconfig/ombiconfig.component.html
Unescape View File

@ -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>

11
src/Ombi/ClientApp/src/app/wizard/ombiconfig/ombiconfig.component.ts
Unescape View File

@ -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() { }
}

5
src/Ombi/ClientApp/src/app/wizard/plex/plex.component.html
Unescape View File

@ -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>

14
src/Ombi/ClientApp/src/app/wizard/welcome/welcome.component.html
Unescape View File

@ -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 matStepperNext>Next</button>
<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>
</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 matStepperNext>Next</button>
<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>
</div>
</form>
</mat-step>

54
src/Ombi/ClientApp/src/app/wizard/welcome/welcome.component.scss
Unescape View File

@ -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;
min-height: 300px;
display:flex;
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;
}
@ -125,4 +125,48 @@
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;
}

3
src/Ombi/ClientApp/src/app/wizard/wizard.module.ts
Unescape View File

@ -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,

Write Preview
Loading…
Cancel
Save