mirror of
https://github.com/Ombi-app/Ombi.git
synced 2025-07-31 03:50:08 -07:00
WIP2 Wizard
This commit is contained in:
twanariens
parent
a12e02bd39
commit
bd20cef16d
9 changed files with 235 additions and 130 deletions
|
|
@ -1,31 +1,39 @@
|
|||
|
||||
<div *ngIf="embySettings">
|
||||
<div *ngIf="embySettings.servers">
|
||||
<div *ngFor="let server of embySettings.servers">
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<input type="text" matInput [(ngModel)]="server.ip" id="Ip" name="Ip" placeholder="Emby Hostname or IP Address">
|
||||
</mat-form-field>
|
||||
<div class="mediaserver-container">
|
||||
<div class="left-container mediaserver">
|
||||
<img src="https://emby.media/resources/logowhite_1881.png">
|
||||
</div>
|
||||
<div class="right-container mediaserver">
|
||||
<div class="right-container-content mediaserver">
|
||||
<div *ngIf="embySettings">
|
||||
<div *ngIf="embySettings.servers">
|
||||
<div *ngFor="let server of embySettings.servers">
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<input type="text" matInput [(ngModel)]="server.ip" id="Ip" name="Ip" placeholder="Emby Hostname or IP Address">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<mat-form-field>
|
||||
<input type="text" matInput [(ngModel)]="server.port" id="portNumber" name="Port" value="{{server.port}}">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div>
|
||||
<mat-slide-toggle [(ngModel)]="server.ssl">Enable SSL</mat-slide-toggle>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<mat-form-field>
|
||||
<input type="text" matInput [(ngModel)]="server.apiKey" id="apiKey" name="ApiKey" placeholder="Emby API Key">
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<mat-form-field>
|
||||
<input type="text" matInput [(ngModel)]="server.port" id="portNumber" name="Port" value="{{server.port}}">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div>
|
||||
<mat-slide-toggle [(ngModel)]="server.ssl">Enable SSL</mat-slide-toggle>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<mat-form-field>
|
||||
<input type="text" matInput [(ngModel)]="server.apiKey" id="apiKey" name="ApiKey" placeholder="Emby API Key">
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import { IEmbySettings } from "../../interfaces";
|
|||
@Component({
|
||||
selector: "wizard-emby",
|
||||
templateUrl: "./emby.component.html",
|
||||
styleUrls: ["../welcome/welcome.component.scss"],
|
||||
})
|
||||
export class EmbyComponent implements OnInit {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,31 +1,39 @@
|
|||
|
||||
<div *ngIf="jellyfinSettings">
|
||||
<div *ngIf="jellyfinSettings.servers">
|
||||
<div *ngFor="let server of jellyfinSettings.servers">
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<input type="text" matInput [(ngModel)]="server.ip" id="Ip" name="Ip" placeholder="Jellyfin Hostname or IP Address">
|
||||
</mat-form-field>
|
||||
<div class="mediaserver-container">
|
||||
<div class="left-container mediaserver">
|
||||
<img src="https://jellyfin.org/images/banner-dark.svg">
|
||||
</div>
|
||||
<div class="right-container mediaserver">
|
||||
<div class="right-container-content mediaserver">
|
||||
<div *ngIf="jellyfinSettings">
|
||||
<div *ngIf="jellyfinSettings.servers">
|
||||
<div *ngFor="let server of jellyfinSettings.servers">
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<input type="text" matInput [(ngModel)]="server.ip" id="Ip" name="Ip" placeholder="Jellyfin Hostname or IP Address">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<mat-form-field>
|
||||
<input type="text" matInput [(ngModel)]="server.port" id="portNumber" name="Port" value="{{server.port}}">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div>
|
||||
<mat-slide-toggle [(ngModel)]="server.ssl">Enable SSL</mat-slide-toggle>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<mat-form-field>
|
||||
<input type="text" matInput [(ngModel)]="server.apiKey" id="apiKey" name="ApiKey" placeholder="Jellyfin API Key">
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<mat-form-field>
|
||||
<input type="text" matInput [(ngModel)]="server.port" id="portNumber" name="Port" value="{{server.port}}">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div>
|
||||
<mat-slide-toggle [(ngModel)]="server.ssl">Enable SSL</mat-slide-toggle>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<mat-form-field>
|
||||
<input type="text" matInput [(ngModel)]="server.apiKey" id="apiKey" name="ApiKey" placeholder="Jellyfin API Key">
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import { IJellyfinSettings } from "../../interfaces";
|
|||
@Component({
|
||||
selector: "wizard-jellyfin",
|
||||
templateUrl: "./jellyfin.component.html",
|
||||
styleUrls: ["../welcome/welcome.component.scss"]
|
||||
})
|
||||
export class JellyfinComponent implements OnInit {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,24 +1,35 @@
|
|||
<div class="form-group">
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<input matInput type="text" [(ngModel)]="login" id="username" placeholder="Username">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<input matInput type="password" [(ngModel)]="password" placeholder="Password">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<small>Please note we do not store this information, we only store your Plex Authorization Token that will allow Ombi to view your media and users</small>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-center">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>
|
||||
<div class="mediaserver-container">
|
||||
<div class="left-container mediaserver">
|
||||
<img src="https://i.redd.it/5czvsiboj9g51.png">
|
||||
</div>
|
||||
<div class="right-container mediaserver">
|
||||
<div class="right-container-content mediaserver">
|
||||
<div class="form-group">
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<input matInput type="text" [(ngModel)]="login" id="username" placeholder="Username">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<input matInput type="password" [(ngModel)]="password" placeholder="Password">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<small>Please note we do not store this information, we only store your Plex Authorization Token that will allow Ombi to view your media and users</small>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import { StorageService } from "../../shared/storage/storage-service";
|
|||
@Component({
|
||||
selector: "wizard-plex",
|
||||
templateUrl: "./plex.component.html",
|
||||
styleUrls: ["../welcome/welcome.component.scss"],
|
||||
})
|
||||
export class PlexComponent implements OnInit, OnDestroy {
|
||||
|
||||
|
|
|
|||
|
|
@ -11,11 +11,16 @@
|
|||
</div>
|
||||
<div class="right-container">
|
||||
<div class="right-container-content">
|
||||
<p>Welcome to Ombi, this wizard will quickly take you through the inital setup!</p>
|
||||
<br />
|
||||
<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>
|
||||
<br />
|
||||
<div class="social-media">
|
||||
<a href="https://discord.gg/Sa7wNWb" target="_blank"><i class="fab fa-discord"></i></a>
|
||||
<ul class="fa-ul">
|
||||
<li><a href="https://discord.gg/Sa7wNWb" target="_blank"><span class="fa-li"><i class="fab fa-discord"></i></span>Ombi Discord</a>
|
||||
<li><a href="https://github.com/Ombi-app/Ombi" target="_blank"><span class="fa-li"><i class="fab fa-github"></i></span>Ombi Github</a>
|
||||
<li><a href="https://docs.ombi.app/" target="_blank"><span class="fa-li"><i class="fas fa-book"></i></span>Ombi Documentation</a>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -27,48 +32,35 @@
|
|||
</mat-step>
|
||||
|
||||
<mat-step [optional]="true">
|
||||
<form >
|
||||
<ng-template matStepLabel>Plex</ng-template>
|
||||
<wizard-plex></wizard-plex>
|
||||
<div>
|
||||
<button mat-button matStepperPrevious>Back</button>
|
||||
<button mat-button matStepperNext>Next</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-step>
|
||||
|
||||
<mat-step [optional]="true">
|
||||
<form >
|
||||
<ng-template matStepLabel>Emby</ng-template>
|
||||
<wizard-emby></wizard-emby>
|
||||
<div>
|
||||
<button mat-button matStepperPrevious>Back</button>
|
||||
<button mat-button matStepperNext>Next</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-step>
|
||||
|
||||
<mat-step [optional]="true">
|
||||
<form >
|
||||
<ng-template matStepLabel>Jellyfin</ng-template>
|
||||
<wizard-jellyfin></wizard-jellyfin>
|
||||
<div>
|
||||
<button mat-button matStepperPrevious>Back</button>
|
||||
<button mat-button matStepperNext>Next</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-step>
|
||||
|
||||
<mat-step>
|
||||
<form >
|
||||
<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>
|
||||
</div>
|
||||
</form>
|
||||
</mat-step>
|
||||
<form >
|
||||
<ng-template matStepLabel>Media Server</ng-template>
|
||||
<mat-tab-group>
|
||||
<mat-tab label="Plex"><wizard-plex></wizard-plex></mat-tab>
|
||||
<mat-tab label="Emby"><wizard-emby></wizard-emby></mat-tab>
|
||||
<mat-tab label="Jellyfin"><wizard-jellyfin></wizard-jellyfin></mat-tab>
|
||||
</mat-tab-group>
|
||||
</form>
|
||||
</mat-step>
|
||||
<mat-step>
|
||||
<form >
|
||||
<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>
|
||||
</div>
|
||||
</form>
|
||||
</mat-step>
|
||||
<mat-step [optional]="true">
|
||||
<form >
|
||||
<ng-template matStepLabel>Ombi config</ng-template>
|
||||
<wizard-local-admin [user]="localUser"></wizard-local-admin>
|
||||
<div>
|
||||
<button mat-button matStepperPrevious>Back</button>
|
||||
<button mat-button matStepperNext>Next</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-step>
|
||||
|
||||
<mat-step>
|
||||
<ng-template matStepLabel>Done</ng-template>
|
||||
|
|
|
|||
|
|
@ -18,13 +18,19 @@
|
|||
min-height: 300px;
|
||||
}
|
||||
|
||||
.welcome-container .left-container{
|
||||
width:20%;
|
||||
//border: 1px solid $ombi-background-primary;
|
||||
.left-container{
|
||||
width:30%;
|
||||
}
|
||||
|
||||
.right-container{
|
||||
width:70%;
|
||||
}
|
||||
|
||||
.right-container-content{
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.welcome-container .right-container{
|
||||
width:70%;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -34,14 +40,87 @@
|
|||
float:right;
|
||||
}
|
||||
|
||||
.fab {
|
||||
.fab:before {
|
||||
font-family: 'Font Awesome 5 Brands';
|
||||
font-size: 28px !important;
|
||||
padding: 5px;
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.fa-discord:before {
|
||||
content: "\f392";
|
||||
.social-media .fab{
|
||||
font-family: Roboto, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
.fas:before {
|
||||
font-family:"Font Awesome 5 Free";
|
||||
font-weight:800;
|
||||
}
|
||||
|
||||
.social-media .fas{
|
||||
font-family: Roboto, "Helvetica Neue", sans-serif;
|
||||
font-weight:400;
|
||||
}
|
||||
|
||||
.social-media a{
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.social-media{
|
||||
display:grid;
|
||||
}
|
||||
|
||||
.fa-ul {
|
||||
list-style-type: none;
|
||||
margin-left: 2.5em;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.fa-li {
|
||||
left: -2em;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 2em;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.social-media ul li{
|
||||
font-size:16px;
|
||||
padding:5px;
|
||||
}
|
||||
|
||||
|
||||
.left-container.mediaserver img{
|
||||
object-fit: contain;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.left-container.mediaserver{
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
height:300px;
|
||||
padding:20px;
|
||||
}
|
||||
|
||||
.right-container.mediaserver{
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.right-container-content .mediaserver{
|
||||
display:block;
|
||||
}
|
||||
|
||||
.mediaserver-container{
|
||||
display:flex;
|
||||
height:100%;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.plex-buttons{
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
p.space-or{
|
||||
padding:20px;
|
||||
margin-top:20px;
|
||||
}
|
||||
|
|
@ -132,3 +132,7 @@
|
|||
background-color:$ombi-active;
|
||||
color: $ombi-active-text;
|
||||
}
|
||||
|
||||
.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
|
||||
background-color: $ombi-active;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue