From 6f5f68ab0ef43191da96c6711b8165d0823ac922 Mon Sep 17 00:00:00 2001
From: rubikscraft <contact@rubikscraft.nl>
Date: Tue, 29 Mar 2022 20:55:39 +0200
Subject: [PATCH] refactor more routes

---
 .../settings-roles-edit.component.scss        |  3 ++
 .../settings-roles-edit.component.ts          |  1 +
 .../app/routes/settings/settings.module.ts    |  6 ++--
 .../settings-users-edit.component.scss        |  2 +-
 .../settings-users-edit.component.ts          | 27 +++++++++++++---
 .../app/routes/upload/upload.component.html   |  4 +--
 .../src/app/routes/upload/upload.component.ts | 16 ++++------
 .../routes/user/login/login.component.html    |  8 ++---
 .../app/routes/user/login/login.component.ts  | 18 ++++-------
 .../user/register/register.component.html     |  7 ++--
 .../user/register/register.component.ts       | 32 ++++++++++---------
 .../app/services/api/usermanage.service.ts    |  2 +-
 12 files changed, 70 insertions(+), 56 deletions(-)
 create mode 100644 frontend/src/app/routes/settings/roles/settings-roles-edit/settings-roles-edit.component.scss

diff --git a/frontend/src/app/routes/settings/roles/settings-roles-edit/settings-roles-edit.component.scss b/frontend/src/app/routes/settings/roles/settings-roles-edit/settings-roles-edit.component.scss
new file mode 100644
index 0000000..c7acb4b
--- /dev/null
+++ b/frontend/src/app/routes/settings/roles/settings-roles-edit/settings-roles-edit.component.scss
@@ -0,0 +1,3 @@
+mat-form-field {
+  width: 100%;
+}
diff --git a/frontend/src/app/routes/settings/roles/settings-roles-edit/settings-roles-edit.component.ts b/frontend/src/app/routes/settings/roles/settings-roles-edit/settings-roles-edit.component.ts
index 7b9c4b3..b8a4c62 100644
--- a/frontend/src/app/routes/settings/roles/settings-roles-edit/settings-roles-edit.component.ts
+++ b/frontend/src/app/routes/settings/roles/settings-roles-edit/settings-roles-edit.component.ts
@@ -14,6 +14,7 @@ enum EditMode {
 @Component({
   selector: 'app-settings-roles-edit',
   templateUrl: './settings-roles-edit.component.html',
+  styleUrls: ['./settings-roles-edit.component.scss'],
 })
 export class SettingsRolesEditComponent implements OnInit {
   private mode: EditMode = EditMode.edit;
diff --git a/frontend/src/app/routes/settings/settings.module.ts b/frontend/src/app/routes/settings/settings.module.ts
index babf072..b87d77c 100644
--- a/frontend/src/app/routes/settings/settings.module.ts
+++ b/frontend/src/app/routes/settings/settings.module.ts
@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Injector, NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import { SettingsRoutingModule } from './settings.routing.module';
@@ -15,6 +15,4 @@ import { SettingsSidebarComponent } from './sidebar/settings-sidebar.component';
   ],
   exports: [SettingsRoutingModule],
 })
-export class SettingsRouteModule {
-  constructor(private injector: Injector) {}
-}
+export class SettingsRouteModule {}
diff --git a/frontend/src/app/routes/settings/users/settings-users-edit/settings-users-edit.component.scss b/frontend/src/app/routes/settings/users/settings-users-edit/settings-users-edit.component.scss
index 0779a03..c7acb4b 100644
--- a/frontend/src/app/routes/settings/users/settings-users-edit/settings-users-edit.component.scss
+++ b/frontend/src/app/routes/settings/users/settings-users-edit/settings-users-edit.component.scss
@@ -1,3 +1,3 @@
-values-picker {
+mat-form-field {
   width: 100%;
 }
diff --git a/frontend/src/app/routes/settings/users/settings-users-edit/settings-users-edit.component.ts b/frontend/src/app/routes/settings/users/settings-users-edit/settings-users-edit.component.ts
index 900654b..081f630 100644
--- a/frontend/src/app/routes/settings/users/settings-users-edit/settings-users-edit.component.ts
+++ b/frontend/src/app/routes/settings/users/settings-users-edit/settings-users-edit.component.ts
@@ -47,12 +47,17 @@ export class SettingsUsersEditComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    Promise.all([this.initUser(), this.initRoles()]).catch(console.error);
+    Promise.all([
+      this.initUser(),
+      this.initRoles(),
+      this.initImmutableUsersList(),
+    ]).catch(console.error);
   }
 
   private async initUser() {
     const username = this.route.snapshot.paramMap.get('username');
 
+    // Get special roles
     const SpecialRoles = await this.rolesService.getSpecialRoles();
     if (HasFailed(SpecialRoles)) {
       this.utilService.showSnackBar(
@@ -61,9 +66,9 @@ export class SettingsUsersEditComponent implements OnInit {
       );
       return;
     }
-
     this.soulBoundRoles = SpecialRoles.SoulBoundRoles;
 
+    // Check if edit or add
     if (!username) {
       this.mode = EditMode.add;
 
@@ -71,21 +76,33 @@ export class SettingsUsersEditComponent implements OnInit {
       return;
     }
 
+    // Set known data
     this.mode = EditMode.edit;
     this.model.putUsername(username);
 
+    // Fetch more data
     const user = await this.userManageService.getUser(username);
     if (HasFailed(user)) {
       this.utilService.showSnackBar('Failed to get user', SnackBarType.Error);
       return;
     }
 
+    // Set that data instead
     this.model.putUsername(user.username);
     this.model.putRoles(user.roles);
+  }
 
-    const { ImmutableUsersList } =
-      await this.userManageService.getSpecialRolesOptimistic();
-    this.ImmutableUsersList = ImmutableUsersList;
+  private async initImmutableUsersList() {
+    const SpecialUsers = await this.userManageService.getSpecialUsers();
+    if (HasFailed(SpecialUsers)) {
+      this.utilService.showSnackBar(
+        'Failed to get special users',
+        SnackBarType.Error
+      );
+      return;
+    }
+
+    this.ImmutableUsersList = SpecialUsers.ImmutableUsersList;
   }
 
   private async initRoles() {
diff --git a/frontend/src/app/routes/upload/upload.component.html b/frontend/src/app/routes/upload/upload.component.html
index 157b244..db647ec 100644
--- a/frontend/src/app/routes/upload/upload.component.html
+++ b/frontend/src/app/routes/upload/upload.component.html
@@ -1,12 +1,12 @@
 <div class="content-border">
-  <ngx-dropzone *ngIf="hasUploadPermission" (change)="onSelect($event)">
+  <ngx-dropzone *ngIf="canUpload" (change)="onSelect($event)">
     <div class="centered">
       <h1>Upload Image</h1>
       <p>Drag and drop an image here, or click to select an image</p>
     </div>
   </ngx-dropzone>
 
-  <div class="centered" *ngIf="!hasUploadPermission">
+  <div class="centered" *ngIf="!canUpload">
     <h1>Please Log In</h1>
     <p>You do not yet have permission to upload</p>
   </div>
diff --git a/frontend/src/app/routes/upload/upload.component.ts b/frontend/src/app/routes/upload/upload.component.ts
index f990869..f3ae7a1 100644
--- a/frontend/src/app/routes/upload/upload.component.ts
+++ b/frontend/src/app/routes/upload/upload.component.ts
@@ -3,6 +3,7 @@ import { Router } from '@angular/router';
 import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator';
 import { NgxDropzoneChangeEvent } from 'ngx-dropzone';
 import { Permission } from 'picsur-shared/dist/dto/permissions.dto';
+import { debounceTime } from 'rxjs';
 import { PermissionService } from 'src/app/services/api/permission.service';
 import { UtilService } from 'src/app/util/util.service';
 import { ProcessingViewMetadata } from '../../models/dto/processing-view-metadata.dto';
@@ -12,12 +13,7 @@ import { ProcessingViewMetadata } from '../../models/dto/processing-view-metadat
   styleUrls: ['./upload.component.scss'],
 })
 export class UploadComponent implements OnInit {
-  private permissions: string[] = [];
-
-  // Lets be optimistic here, this makes for a better ux
-  public get hasUploadPermission() {
-    return this.permissions.includes(Permission.ImageUpload);
-  }
+  canUpload = true;
 
   constructor(
     private utilService: UtilService,
@@ -31,9 +27,11 @@ export class UploadComponent implements OnInit {
 
   @AutoUnsubscribe()
   onPermission() {
-    return this.permissionService.live.subscribe((permissions) => {
-      this.permissions = permissions;
-    });
+    return this.permissionService.live
+      .pipe(debounceTime(100))
+      .subscribe((permissions) => {
+        this.canUpload = permissions.includes(Permission.ImageUpload);
+      });
   }
 
   onSelect(event: NgxDropzoneChangeEvent) {
diff --git a/frontend/src/app/routes/user/login/login.component.html b/frontend/src/app/routes/user/login/login.component.html
index 5d5fcf1..2dc8a16 100644
--- a/frontend/src/app/routes/user/login/login.component.html
+++ b/frontend/src/app/routes/user/login/login.component.html
@@ -4,11 +4,7 @@
       <div class="col-12 py-2">
         <h1>Login</h1>
       </div>
-      <div class="col-12 py-2" *ngIf="loginFail">
-        <mat-error>
-          Failed to login. Please check your username and password.
-        </mat-error>
-      </div>
+
       <div class="col-12 py-2">
         <mat-form-field appearance="outline" color="accent">
           <mat-label>Username</mat-label>
@@ -26,6 +22,7 @@
           </mat-error>
         </mat-form-field>
       </div>
+
       <div class="col-12 py-2">
         <mat-form-field appearance="outline" color="accent">
           <mat-label>Password</mat-label>
@@ -41,6 +38,7 @@
           </mat-error>
         </mat-form-field>
       </div>
+
       <div class="col-12 py-2">
         <button mat-raised-button color="accent" class="mx-2" type="submit">
           Login
diff --git a/frontend/src/app/routes/user/login/login.component.ts b/frontend/src/app/routes/user/login/login.component.ts
index 7577486..0eea7d5 100644
--- a/frontend/src/app/routes/user/login/login.component.ts
+++ b/frontend/src/app/routes/user/login/login.component.ts
@@ -15,16 +15,9 @@ import { LoginControl } from '../../../models/forms/login.control';
   styleUrls: ['./login.component.scss'],
 })
 export class LoginComponent implements OnInit {
-  private readonly logger = console;
-
-  private permissions: string[] = [];
-
-  public get showRegister() {
-    return this.permissions.includes(Permission.UserRegister);
-  }
+  showRegister = false;
 
   model = new LoginControl();
-  loginFail = false;
 
   constructor(
     private userService: UserService,
@@ -46,7 +39,7 @@ export class LoginComponent implements OnInit {
   @AutoUnsubscribe()
   onPermissions() {
     return this.permissionService.live.subscribe((permissions) => {
-      this.permissions = permissions;
+      this.showRegister = permissions.includes(Permission.UserRegister);
     });
   }
 
@@ -58,8 +51,11 @@ export class LoginComponent implements OnInit {
 
     const user = await this.userService.login(data.username, data.password);
     if (HasFailed(user)) {
-      this.logger.warn(user);
-      this.loginFail = true;
+      console.warn(user);
+      this.utilService.showSnackBar(
+        'Login failed, please try again',
+        SnackBarType.Error
+      );
       return;
     }
 
diff --git a/frontend/src/app/routes/user/register/register.component.html b/frontend/src/app/routes/user/register/register.component.html
index d753b74..1137a3b 100644
--- a/frontend/src/app/routes/user/register/register.component.html
+++ b/frontend/src/app/routes/user/register/register.component.html
@@ -4,9 +4,7 @@
       <div class="col-12 py-2">
         <h1>Register</h1>
       </div>
-      <div class="col-12 py-2" *ngIf="registerFail">
-        <mat-error> Failed to register. </mat-error>
-      </div>
+
       <div class="col-12 py-2">
         <mat-form-field appearance="outline" color="accent">
           <mat-label>Username</mat-label>
@@ -24,6 +22,7 @@
           </mat-error>
         </mat-form-field>
       </div>
+
       <div class="col-12 py-2">
         <mat-form-field appearance="outline" color="accent">
           <mat-label>Password</mat-label>
@@ -39,6 +38,7 @@
           </mat-error>
         </mat-form-field>
       </div>
+
       <div class="col-12 py-2">
         <mat-form-field appearance="outline" color="accent">
           <mat-label>Confirm Password</mat-label>
@@ -54,6 +54,7 @@
           </mat-error>
         </mat-form-field>
       </div>
+
       <div class="col-12 py-2">
         <button mat-raised-button color="accent" class="mx-2" type="submit">
           Register
diff --git a/frontend/src/app/routes/user/register/register.component.ts b/frontend/src/app/routes/user/register/register.component.ts
index b0667b9..5757bb9 100644
--- a/frontend/src/app/routes/user/register/register.component.ts
+++ b/frontend/src/app/routes/user/register/register.component.ts
@@ -15,16 +15,9 @@ import { RegisterControl } from '../../../models/forms/register.control';
   styleUrls: ['./register.component.scss'],
 })
 export class RegisterComponent implements OnInit {
-  private readonly logger = console;
-
-  private permissions: string[] = [];
-
-  public get showLogin() {
-    return this.permissions.includes(Permission.UserLogin);
-  }
+  showLogin = false;
 
   model = new RegisterControl();
-  registerFail = false;
 
   constructor(
     private userService: UserService,
@@ -46,7 +39,7 @@ export class RegisterComponent implements OnInit {
   @AutoUnsubscribe()
   onPermissions() {
     return this.permissionService.live.subscribe((permissions) => {
-      this.permissions = permissions;
+      this.showLogin = permissions.includes(Permission.UserLogin);
     });
   }
 
@@ -58,19 +51,28 @@ export class RegisterComponent implements OnInit {
 
     const user = await this.userService.register(data.username, data.password);
     if (HasFailed(user)) {
-      this.logger.warn(user);
-      this.registerFail = true;
+      console.warn(user);
+      this.utilService.showSnackBar(
+        'Register failed, please try again',
+        SnackBarType.Error
+      );
       return;
     }
 
-    this.utilService.showSnackBar('Register successful', SnackBarType.Success);
-
     if (!this.userService.isLoggedIn) {
       const loginResult = this.userService.login(data.username, data.password);
       if (HasFailed(loginResult)) {
-        this.logger.warn(loginResult);
-        this.utilService.showSnackBar('Failed to login', SnackBarType.Error);
+        console.warn(loginResult);
+        this.utilService.showSnackBar(
+          'Failed to login after register',
+          SnackBarType.Error
+        );
       }
+    } else {
+      this.utilService.showSnackBar(
+        'Register successful',
+        SnackBarType.Success
+      );
     }
 
     this.router.navigate(['/']);
diff --git a/frontend/src/app/services/api/usermanage.service.ts b/frontend/src/app/services/api/usermanage.service.ts
index d4eb871..86dbd92 100644
--- a/frontend/src/app/services/api/usermanage.service.ts
+++ b/frontend/src/app/services/api/usermanage.service.ts
@@ -120,7 +120,7 @@ export class UserManageService {
     return result;
   }
 
-  public async getSpecialRolesOptimistic(): Promise<GetSpecialUsersResponse> {
+  public async getSpecialUsersOptimistic(): Promise<GetSpecialUsersResponse> {
     const result = await this.getSpecialUsers();
     if (HasFailed(result)) {
       return {