feat: create human user v2 page (#9506)

# Which Problems Are Solved
Allows users to be created using the V2 User API

# How the Problems Are Solved
I added a seperate V2 create user page with the new code using the new
apis.

# Additional Changes
I did some refactorings arround our interceptors as they used an
obselete syntax.
The password complexity form takes the Buf definitions.

# Additional Context
- Closes #9430

---------

Co-authored-by: Max Peintner <[email protected]>

console/src/app/guards/auth.guard.ts

@@ -1,34 +1,26 @@
-import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { inject } from '@angular/core';
+import { CanActivateFn } from '@angular/router';
 import { AuthConfig } from 'angular-oauth2-oidc';
-import { Observable } from 'rxjs';
 
 import { AuthenticationService } from '../services/authentication.service';
 
-@Injectable({
-  providedIn: 'root',
-})
-export class AuthGuard {
-  constructor(private auth: AuthenticationService) {}
+export const authGuard: CanActivateFn = (route) => {
+  const auth = inject(AuthenticationService);
 
-  public canActivate(
-    route: ActivatedRouteSnapshot,
-    state: RouterStateSnapshot,
-  ): Observable<boolean> | Promise<boolean> | Promise<any> | boolean {
-    if (!this.auth.authenticated) {
-      if (route.queryParams && route.queryParams['login_hint']) {
-        const hint = route.queryParams['login_hint'];
-        const configWithPrompt: Partial<AuthConfig> = {
-          customQueryParams: {
-            login_hint: hint,
-          },
-        };
-        console.log(`authenticate with login_hint: ${hint}`);
-        this.auth.authenticate(configWithPrompt);
-      } else {
-        return this.auth.authenticate();
-      }
+  if (!auth.authenticated) {
+    if (route.queryParams && route.queryParams['login_hint']) {
+      const hint = route.queryParams['login_hint'];
+      const configWithPrompt: Partial<AuthConfig> = {
+        customQueryParams: {
+          login_hint: hint,
+        },
+      };
+      console.log(`authenticate with login_hint: ${hint}`);
+      auth.authenticate(configWithPrompt).then();
+    } else {
+      return auth.authenticate();
     }
-    return this.auth.authenticated;
   }
-}
+
+  return auth.authenticated;
+};

console/src/app/guards/role-guard.ts

@@ -0,0 +1,9 @@
+import { inject } from '@angular/core';
+import { CanActivateFn } from '@angular/router';
+
+import { GrpcAuthService } from '../services/grpc-auth.service';
+
+export const roleGuard: CanActivateFn = (route) => {
+  const authService = inject(GrpcAuthService);
+  return authService.isAllowed(route.data['roles'], route.data['requiresAll']);
+};

console/src/app/guards/role.guard.ts

@@ -1,16 +0,0 @@
-import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
-import { Observable } from 'rxjs';
-
-import { GrpcAuthService } from '../services/grpc-auth.service';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class RoleGuard {
-  constructor(private authService: GrpcAuthService) {}
-
-  public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
-    return this.authService.isAllowed(route.data['roles'], route.data['requiresAll']);
-  }
-}

console/src/app/guards/user-guard.ts

@@ -0,0 +1,21 @@
+import { inject } from '@angular/core';
+import { CanActivateFn, Router } from '@angular/router';
+import { map, take } from 'rxjs';
+
+import { GrpcAuthService } from '../services/grpc-auth.service';
+
+export const userGuard: CanActivateFn = (route) => {
+  const authService = inject(GrpcAuthService);
+  const router = inject(Router);
+
+  return authService.user.pipe(
+    take(1),
+    map((user) => {
+      const isMe = user?.id === route.params['id'];
+      if (isMe) {
+        router.navigate(['/users', 'me']).then();
+      }
+      return !isMe;
+    }),
+  );
+};

console/src/app/guards/user.guard.ts

@@ -1,31 +0,0 @@
-import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Router, RouterStateSnapshot } from '@angular/router';
-import { map, Observable, take } from 'rxjs';
-
-import { GrpcAuthService } from '../services/grpc-auth.service';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class UserGuard {
-  constructor(
-    private authService: GrpcAuthService,
-    private router: Router,
-  ) {}
-
-  public canActivate(
-    route: ActivatedRouteSnapshot,
-    state: RouterStateSnapshot,
-  ): Observable<boolean> | Promise<boolean> | boolean {
-    return this.authService.user.pipe(
-      take(1),
-      map((user) => {
-        const isMe = user?.id === route.params['id'];
-        if (isMe) {
-          this.router.navigate(['/users', 'me']);
-        }
-        return !isMe;
-      }),
-    );
-  }
-}