github/Ombi
1
0
Fork 0
mirror of https://github.com/Ombi-app/Ombi.git synced 2025-08-20 13:23:20 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Sorted out the create/manage user page

Browse source
This commit is contained in:
Jamie Rees 2019-03-20 13:56:05 +00:00
commit 7ffc26ed23
4 changed files with 190 additions and 239 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/Ombi/ClientApp/src/app/shared/shared.module.ts
View file

@ -10,7 +10,8 @@ import { IssuesReportComponent } from "./issues-report.component";
import { InputSwitchModule, SidebarModule } from "primeng/primeng"; import { InputSwitchModule, SidebarModule } from "primeng/primeng";
import { import {
MatButtonModule, MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule, MatTooltipModule, MatSelectModule, MatTableModule, MatPaginatorModule, MatSortModule, MatTreeModule} from '@angular/material'; MatButtonModule, MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule, MatTooltipModule, MatSelectModule, MatTableModule, MatPaginatorModule, MatSortModule,
MatTreeModule, MatStepperModule} from '@angular/material';
import { MatCardModule, MatInputModule, MatTabsModule, MatAutocompleteModule, MatCheckboxModule, MatExpansionModule, MatDialogModule, MatProgressSpinnerModule, import { MatCardModule, MatInputModule, MatTabsModule, MatAutocompleteModule, MatCheckboxModule, MatExpansionModule, MatDialogModule, MatProgressSpinnerModule,
MatChipsModule } from "@angular/material"; MatChipsModule } from "@angular/material";
import { EpisodeRequestComponent } from "./episode-request/episode-request.component"; import { EpisodeRequestComponent } from "./episode-request/episode-request.component";
@ -48,6 +49,7 @@ import { EpisodeRequestComponent } from "./episode-request/episode-request.compo
MatPaginatorModule, MatPaginatorModule,
MatSortModule, MatSortModule,
MatTreeModule, MatTreeModule,
MatStepperModule,
], ],
entryComponents: [ entryComponents: [
EpisodeRequestComponent EpisodeRequestComponent
@ -83,6 +85,7 @@ import { EpisodeRequestComponent } from "./episode-request/episode-request.compo
MatTableModule, MatTableModule,
MatPaginatorModule, MatPaginatorModule,
MatSortModule, MatSortModule,
MatStepperModule,
], ],
}) })
export class SharedModule {} export class SharedModule {}

379
src/Ombi/ClientApp/src/app/usermanagement/usermanagement-user.component.html
View file

@ -1,224 +1,175 @@
<h3 *ngIf="!edit">Create User</h3> 
<h3 *ngIf="edit && user"> User: {{user.userName}}</h3> <div class="small-middle-container" *ngIf="!edit || edit && user">
<p-confirmDialog></p-confirmDialog> <mat-horizontal-stepper #stepper>
<mat-step>
<ng-template matStepLabel>User Details</ng-template>
<div>
<mat-form-field>
<input matInput placeholder="Username" [(ngModel)]="user.userName" required>
</mat-form-field>
</div>
<div>
<mat-form-field>
<input matInput placeholder="Alias" [(ngModel)]="user.alias" matTooltip="This is used as a display value instead of the users username, so think of it as a more friendly username">
</mat-form-field>
</div>
<div>
<mat-form-field>
<input matInput placeholder="Email Address" type="email" [(ngModel)]="user.emailAddress" required>
</mat-form-field>
</div>
<div>
<mat-form-field>
<input matInput placeholder="Password" type="password" [(ngModel)]="user.password" required>
</mat-form-field>
</div>
<div>
<mat-form-field>
<input matInput placeholder="Confirm Password" type="password" [(ngModel)]="confirmPass" required>
</mat-form-field>
</div>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</mat-step>
<button type="button" class="btn btn-primary-outline" style="float:right;" [routerLink]="['/usermanagement/']">Back</button>
<div *ngIf="!edit || edit && user">
<div class="modal-body" style="margin-top: 45px;">
<div class="col-md-6">
<h4>User Details</h4> <mat-step>
<ng-template matStepLabel>Choose the Roles</ng-template>
<div *ngIf="!edit">
<div *ngFor="let c of availableClaims">
<mat-checkbox [(ngModel)]="c.enabled">{{c.value | humanize}}</mat-checkbox>
</div> </div>
<div class="col-md-6"> </div>
<h4>User Settings</h4>
<div *ngIf="edit">
<div *ngFor="let c of user.claims">
<mat-checkbox [(ngModel)]="c.enabled">{{c.value | humanize}}</mat-checkbox>
</div> </div>
<div class="row"> </div>
<div class="col-md-6"> <div>
<div class="form-group"> <button mat-button matStepperPrevious>Back</button>
<label for="username" class="control-label">Username</label> <button mat-button matStepperNext>Next</button>
<div> </div>
<input type="text" [(ngModel)]="user.userName" class="form-control form-control-custom " id="username" </mat-step>
name="username" value="{{user?.userName}}"> <mat-step>
</div> <ng-template matStepLabel>Set Request Limits</ng-template>
</div>
<div class="form-group">
<label for="alias" class="control-label">Alias</label>
<div>
<input type="text" [(ngModel)]="user.alias" class="form-control form-control-custom " id="alias"
name="alias" value="{{user?.alias}}">
</div>
</div>
<div class="form-group"> <div>
<label for="emailAddress" class="control-label">Email Address</label> <mat-form-field>
<div> <input matInput placeholder="Movie Request Limit" [(ngModel)]="user.movieRequestLimit">
<input type="text" [(ngModel)]="user.emailAddress" class="form-control form-control-custom " id="emailAddress" </mat-form-field>
name="emailAddress" value="{{user?.emailAddress}}"> </div>
</div> <div>
</div> <mat-form-field>
<input matInput placeholder="Episode Request Limit" [(ngModel)]="user.episodeRequestLimit">
<div class="form-group"> </mat-form-field>
<label for="password" class="control-label">Password</label> </div>
<div> <div>
<input type="password" [(ngModel)]="user.password" class="form-control form-control-custom " id="password" <mat-form-field>
name="password"> <input matInput placeholder="Music Request Limit" [(ngModel)]="user.musicRequestLimit">
</div> </mat-form-field>
</div> </div>
<div class="form-group" *ngIf="!edit">
<label for="confirmPass" class="control-label">Confirm Password</label>
<div>
<input type="password" [(ngModel)]="confirmPass" class="form-control form-control-custom " id="confirmPass"
name="confirmPass">
</div>
</div>
</div>
<div class="col-md-6">
<ngb-accordion [closeOthers]="true" activeIds="0-header">
<ngb-panel title="Roles">
<ng-template ngbPanelContent>
<div class="panel panel-default a">
<div class="panel-body">
<div *ngIf="!edit">
<div *ngFor="let c of availableClaims">
<div class="form-group">
<div class="checkbox">
<input type="checkbox" [(ngModel)]="c.enabled" [value]="c.value" id="create{{c.value}}"
[attr.name]="'create' + c.value" ng-checked="c.enabled">
<label id="label{{c.value}}" for="create{{c.value}}">{{c.value | humanize}}</label>
</div>
</div>
</div>
</div>
<div *ngIf="edit">
<div *ngFor="let c of user.claims">
<div class="form-group">
<div class="checkbox">
<input type="checkbox" [(ngModel)]="c.enabled" [value]="c.value" id="create{{c.value}}"
[attr.name]="'create' + c.value" ng-checked="c.enabled">
<label id="label{{c.value}}" for="create{{c.value}}">{{c.value | humanize}}</label>
</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</ngb-panel>
<ngb-panel title="Request Limits">
<ng-template ngbPanelContent>
<div class="panel panel-default a">
<div class="panel-body">
<div class="form-group">
<label for="movieRequestLimit" class="control-label">Movie Request Limit</label>
<div>
<input type="text" [(ngModel)]="user.movieRequestLimit" class="form-control form-small form-control-custom "
id="movieRequestLimit" name="movieRequestLimit" value="{{user?.movieRequestLimit}}">
</div>
</div>
<div class="form-group">
<label for="episodeRequestLimit" class="control-label">Episode Request Limit</label>
<div>
<input type="text" [(ngModel)]="user.episodeRequestLimit" class="form-control form-small form-control-custom "
id="episodeRequestLimit" name="episodeRequestLimit" value="{{user?.episodeRequestLimit}}">
</div>
</div>
<div class="form-group">
<label for="musicRequestLimit" class="control-label">Music Request Limit</label>
<div>
<input type="text" [(ngModel)]="user.musicRequestLimit" class="form-control form-small form-control-custom "
id="musicRequestLimit" name="musicRequestLimit" value="{{user?.musicRequestLimit}}">
</div>
</div>
</div>
</div>
</ng-template>
</ngb-panel>
<ngb-panel title="Notification Preferences" *ngIf="notificationPreferences">
<ng-template ngbPanelContent>
<div class="panel panel-default a">
<div class="panel-body">
<div *ngFor="let pref of notificationPreferences">
<div class="form-group">
<label for="{{pref.agent}}" class="control-label">{{NotificationAgent[pref.agent]
| humanize}}</label>
<div>
<input type="text" [attr.data-test]="NotificationAgent[pref.agent]" [(ngModel)]="pref.value" class="form-control form-control-custom"
name="{{pref.agent}}" value="{{pref?.value}}">
</div>
</div>
</div>
</div>
</div>
</ng-template>
</ngb-panel>
<ngb-panel title="Quality & Root Path Preferences" *ngIf="user.userQualityProfiles">
<ng-template ngbPanelContent>
<div class="panel panel-default a">
<div class="panel-body">
<div class="form-group" *ngIf="sonarrQualities">
<label for="sonarrQualities" class="control-label">Sonarr Quality Profile</label>
<div id="sonarrQualities">
<select class="form-control form-control-custom" [(ngModel)]="user.userQualityProfiles.sonarrQualityProfile">
<option *ngFor="let folder of sonarrQualities" value="{{folder.id}}">{{folder.name}}</option>
</select>
</div>
</div>
<div class="form-group" *ngIf="sonarrQualities">
<label for="sonarrQualityProfileAnime" class="control-label">Sonarr Quality Profile (Anime)</label>
<div id="sonarrQualityProfileAnime">
<select class="form-control form-control-custom" [(ngModel)]="user.userQualityProfiles.sonarrQualityProfileAnime">
<option *ngFor="let folder of sonarrQualities" value="{{folder.id}}">{{folder.name}}</option>
</select>
</div>
</div>
<div class="form-group" *ngIf="sonarrRootFolders">
<label for="sonarrRootPath" class="control-label">Sonarr Root Folder</label>
<div id="sonarrRootPath">
<select class="form-control form-control-custom" [(ngModel)]="user.userQualityProfiles.sonarrRootPath">
<option *ngFor="let folder of sonarrRootFolders" value="{{folder.id}}">{{folder.path}}</option>
</select>
</div>
</div>
<div class="form-group" *ngIf="sonarrRootFolders">
<label for="sonarrRootPathAnime" class="control-label">Sonarr Root Folder (Anime)</label>
<div id="sonarrRootPathAnime">
<select class="form-control form-control-custom" [(ngModel)]="user.userQualityProfiles.sonarrRootPathAnime">
<option *ngFor="let folder of sonarrRootFolders" value="{{folder.id}}">{{folder.path}}</option>
</select>
</div>
</div>
<div class="form-group" *ngIf="radarrQualities">
<label for="radarrQualityProfile" class="control-label">Radarr Quality Profiles</label>
<div id="radarrQualityProfile">
<select class="form-control form-control-custom" [(ngModel)]="user.userQualityProfiles.radarrQualityProfile">
<option *ngFor="let folder of radarrQualities" value="{{folder.id}}">{{folder.name}}</option>
</select>
</div>
</div>
<div class="form-group" *ngIf="radarrRootFolders">
<label for="radarrRootPath" class="control-label">Radarr Root Folder</label>
<div id="radarrRootPath">
<select class="form-control form-control-custom" [(ngModel)]="user.userQualityProfiles.radarrRootPath">
<option *ngFor="let folder of radarrRootFolders" value="{{folder.id}}">{{folder.path}}</option>
</select>
</div>
</div>
</div>
</div>
</ng-template>
</ngb-panel>
</ngb-accordion>
</div>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</mat-step>
<mat-step>
<ng-template matStepLabel>Notification Preferences</ng-template>
<div *ngFor="let pref of notificationPreferences">
<div>
<mat-form-field>
<input matInput placeholder="{{NotificationAgent[pref.agent] | humanize}}" [(ngModel)]="pref.value">
</mat-form-field>
</div> </div>
</div> </div>
<div class="row"> <div>
<div class="col-md-12"> <button mat-button matStepperPrevious>Back</button>
<button *ngIf="!edit" type="button" data-test="createuserbtn" class="btn btn-danger-outline" (click)="create()">Create</button> <button mat-button matStepperNext>Next</button>
<div *ngIf="edit"> </div>
<button type="button" data-test="updatebtn" class="btn btn-primary-outline" (click)="update()">Update</button> </mat-step>
<button type="button" data-test="deletebtn" class="btn btn-danger-outline" (click)="delete()">Delete</button>
<button type="button" style="float:right;" class="btn btn-info-outline" (click)="resetPassword()" <mat-step *ngIf="user.userQualityProfiles && (sonarrQualities || sonarrRootFolders || radarrQualities || radarrRootFolders)">
pTooltip="You need your SMTP settings setup">Send Reset Password Link</button> <ng-template matStepLabel>Quality & Root Path Preferences</ng-template>
<mat-form-field *ngIf="sonarrQualities">
<mat-label>Sonarr Quality Profile</mat-label>
<mat-select [(ngModel)]="user.userQualityProfiles.sonarrQualityProfile">
<mat-option *ngFor="let folder of sonarrQualities" [value]="folder.id">
{{folder.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="sonarrQualities">
<mat-label>Sonarr Quality Profile (Anime)</mat-label>
<mat-select [(ngModel)]="user.userQualityProfiles.sonarrQualityProfileAnime">
<mat-option *ngFor="let folder of sonarrQualities" [value]="folder.id">
{{folder.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="sonarrRootFolders">
<mat-label>Sonarr Root Folder</mat-label>
<mat-select [(ngModel)]="user.userQualityProfiles.sonarrRootPath">
<mat-option *ngFor="let folder of sonarrRootFolders" [value]="folder.id">
{{folder.path}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="sonarrRootFolders">
<mat-label>Sonarr Root Folder (Anime)</mat-label>
<mat-select [(ngModel)]="user.userQualityProfiles.sonarrRootPathAnime">
<mat-option *ngFor="let folder of sonarrRootFolders" [value]="folder.id">
{{folder.path}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="radarrQualities">
<mat-label>Radarr Quality Profiles</mat-label>
<mat-select [(ngModel)]="user.userQualityProfiles.radarrQualityProfile">
<mat-option *ngFor="let folder of radarrQualities" [value]="folder.id">
{{folder.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="radarrRootFolders">
<mat-label>Radarr Root Folder</mat-label>
<mat-select [(ngModel)]="user.userQualityProfiles.radarrRootPath">
<mat-option *ngFor="let folder of radarrRootFolders" [value]="folder.id">
{{folder.path}}
</mat-option>
</mat-select>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</mat-step>
<mat-step>
<ng-template matStepLabel>Actions</ng-template>
<button *ngIf="!edit" type="button" mat-raised-button color="accent" data-test="createuserbtn" (click)="create()">Create</button>
<div *ngIf="edit">
<button type="button" data-test="updatebtn" mat-raised-button color="warn" class="btn btn-primary-outline" (click)="update()">Update</button>
<button type="button" data-test="deletebtn" mat-raised-button color="warn" class="btn btn-danger-outline" (click)="delete()">Delete</button>
<button type="button" style="float:right;" mat-raised-button color="primary" class="btn btn-info-outline" (click)="resetPassword()" pTooltip="You need your SMTP settings setup">Send
Reset Password Link</button>
</div>
</mat-step>
</mat-horizontal-stepper>
</div>
</div>
</div>
</div> </div>

6
src/Ombi/ClientApp/src/app/usermanagement/usermanagement-user.component.scss Normal file
View file

@ -0,0 +1,6 @@

.small-middle-container{
margin: auto;
width: 95%;
margin-top:5%;
}

37
src/Ombi/ClientApp/src/app/usermanagement/usermanagement-user.component.ts
View file

@ -2,22 +2,13 @@
import { ActivatedRoute, Router } from "@angular/router"; import { ActivatedRoute, Router } from "@angular/router";
import { ICheckbox, INotificationAgent, INotificationPreferences, IRadarrProfile, IRadarrRootFolder, ISonarrProfile, ISonarrRootFolder, IUser, UserType } from "../interfaces"; import { ICheckbox, INotificationAgent, INotificationPreferences, IRadarrProfile, IRadarrRootFolder, ISonarrProfile, ISonarrRootFolder, IUser, UserType } from "../interfaces";
import { IdentityService, NotificationService, RadarrService, SonarrService } from "../services"; import { IdentityService, NotificationService, RadarrService, SonarrService, MessageService } from "../services";
import { ConfirmationService } from "primeng/primeng"; import { ConfirmationService } from "primeng/primeng";
@Component({ @Component({
templateUrl: "./usermanagement-user.component.html", templateUrl: "./usermanagement-user.component.html",
styles: [` styleUrls: ["./usermanagement-user.component.scss"],
::ng-deep ngb-accordion > div.card > div.card-header {
padding:0px;
}
::ng-deep ngb-accordion > div.card {
color:white;
padding-top: 0px;
}
`],
}) })
export class UserManagementUserComponent implements OnInit { export class UserManagementUserComponent implements OnInit {
@ -36,7 +27,7 @@ export class UserManagementUserComponent implements OnInit {
public edit: boolean; public edit: boolean;
constructor(private identityService: IdentityService, constructor(private identityService: IdentityService,
private notificationService: NotificationService, private notificationService: MessageService,
private router: Router, private router: Router,
private route: ActivatedRoute, private route: ActivatedRoute,
private confirmationService: ConfirmationService, private confirmationService: ConfirmationService,
@ -102,7 +93,7 @@ export class UserManagementUserComponent implements OnInit {
if (this.user.password) { if (this.user.password) {
if (this.user.password !== this.confirmPass) { if (this.user.password !== this.confirmPass) {
this.notificationService.error("Passwords do not match"); this.notificationService.send("Passwords do not match");
return; return;
} }
} }
@ -113,17 +104,17 @@ export class UserManagementUserComponent implements OnInit {
}); });
if (!hasClaims) { if (!hasClaims) {
this.notificationService.error("Please assign a role"); this.notificationService.send("Please assign a role");
return; return;
} }
this.identityService.createUser(this.user).subscribe(x => { this.identityService.createUser(this.user).subscribe(x => {
if (x.successful) { if (x.successful) {
this.notificationService.success(`The user ${this.user.userName} has been created successfully`); this.notificationService.send(`The user ${this.user.userName} has been created successfully`);
this.router.navigate(["usermanagement"]); this.router.navigate(["usermanagement"]);
} else { } else {
x.errors.forEach((val) => { x.errors.forEach((val) => {
this.notificationService.error(val); this.notificationService.send(val);
}); });
} }
}); });
@ -138,11 +129,11 @@ export class UserManagementUserComponent implements OnInit {
accept: () => { accept: () => {
this.identityService.deleteUser(this.user).subscribe(x => { this.identityService.deleteUser(this.user).subscribe(x => {
if (x.successful) { if (x.successful) {
this.notificationService.success(`The user ${this.user.userName} was deleted`); this.notificationService.send(`The user ${this.user.userName} was deleted`);
this.router.navigate(["usermanagement"]); this.router.navigate(["usermanagement"]);
} else { } else {
x.errors.forEach((val) => { x.errors.forEach((val) => {
this.notificationService.error(val); this.notificationService.send(val);
}); });
} }
@ -157,11 +148,11 @@ export class UserManagementUserComponent implements OnInit {
public resetPassword() { public resetPassword() {
this.identityService.submitResetPassword(this.user.emailAddress).subscribe(x => { this.identityService.submitResetPassword(this.user.emailAddress).subscribe(x => {
if (x.successful) { if (x.successful) {
this.notificationService.success(`Sent reset password email to ${this.user.emailAddress}`); this.notificationService.send(`Sent reset password email to ${this.user.emailAddress}`);
this.router.navigate(["usermanagement"]); this.router.navigate(["usermanagement"]);
} else { } else {
x.errors.forEach((val) => { x.errors.forEach((val) => {
this.notificationService.error(val); this.notificationService.send(val);
}); });
} }
@ -176,18 +167,18 @@ export class UserManagementUserComponent implements OnInit {
}); });
if (!hasClaims) { if (!hasClaims) {
this.notificationService.error("Please assign a role"); this.notificationService.send("Please assign a role");
return; return;
} }
this.identityService.updateUser(this.user).subscribe(x => { this.identityService.updateUser(this.user).subscribe(x => {
if (x.successful) { if (x.successful) {
this.identityService.updateNotificationPreferences(this.notificationPreferences).subscribe(); this.identityService.updateNotificationPreferences(this.notificationPreferences).subscribe();
this.notificationService.success(`The user ${this.user.userName} has been updated successfully`); this.notificationService.send(`The user ${this.user.userName} has been updated successfully`);
this.router.navigate(["usermanagement"]); this.router.navigate(["usermanagement"]);
} else { } else {
x.errors.forEach((val) => { x.errors.forEach((val) => {
this.notificationService.error(val); this.notificationService.send(val);
}); });
} }
}); });