frontend skeleton

packages/frontend/src/app/app.routes.ts

@@ -1,3 +1,50 @@
-import { Routes } from '@angular/router';
+import { inject } from '@angular/core';
+import {
+  ActivatedRouteSnapshot,
+  CanActivateFn,
+  Router,
+  RouterStateSnapshot,
+  Routes,
+  UrlTree,
+} from '@angular/router';
+import { AuthGuardData, createAuthGuard } from 'keycloak-angular';
+import { Login } from './components/login/login';
+import { MissingPage } from './components/missing-page/missing-page';
 
-export const routes: Routes = [];
+export const roles = {
+  UserAdmin: 'useradmin',
+  MemberAdmin: 'memberadmin',
+};
+
+function requireRoles(roles: string[], any: boolean = false): CanActivateFn {
+  const isAllowed = async (
+    _: ActivatedRouteSnapshot,
+    __: RouterStateSnapshot,
+    authData: AuthGuardData
+  ): Promise<boolean | UrlTree> => {
+    const { authenticated, grantedRoles } = authData;
+    const allRoles = Object.values(grantedRoles).flat();
+
+    const hasRequiredRoles = any
+      ? roles.some((role) => allRoles.includes(role))
+      : roles.every((role) => allRoles.includes(role));
+
+    if (authenticated && hasRequiredRoles) {
+      return true;
+    }
+    const router = inject(Router);
+    return router.parseUrl('/login');
+  };
+
+  return createAuthGuard<CanActivateFn>(isAllowed);
+}
+
+export const routes: Routes = [
+  { path: 'login', component: Login },
+  {
+    path: '',
+    loadComponent: () => import('./components/home/home').then((mod) => mod.Home),
+    canActivate: [requireRoles([roles.MemberAdmin, roles.UserAdmin], true)],
+  },
+  { path: '**', component: MissingPage },
+];