refactor more routes

frontend/src/app/routes/settings/roles/settings-roles-edit/settings-roles-edit.component.scss

@@ -0,0 +1,3 @@
+mat-form-field {
+  width: 100%;
+}

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;

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

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%;
 }

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

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>

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

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

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;
     }
 

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

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(['/']);

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 {