add admin page with guard

webapp/src/app/admin/admin.component.html

@@ -0,0 +1,17 @@
+<h1 class="text-3xl font-bold">Admin</h1>
+<div>
+  <div>User:</div>
+  {{ user() | json }}
+</div>
+
+@if (query.isPending()) {
+  <div>Loading...</div>
+} @else if (query.error()) {
+  <div>Something went wrong...</div>
+}
+@if (query.data(); as data) {
+  <div>
+    <div>Greeting:</div>
+    {{ data | json }}
+  </div>
+}

webapp/src/app/admin/admin.component.ts

@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import { AdminService } from '@app/core/modules/openapi/api/admin.service';
+import { SecurityStore } from '@app/core/security/security-store.service';
+import { injectQuery } from '@tanstack/angular-query-experimental';
+import { lastValueFrom } from 'rxjs';
+
+@Component({
+  selector: 'app-admin',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './admin.component.html'
+})
+export class AdminComponent {
+  adminService = inject(AdminService);
+  securityStore = inject(SecurityStore);
+
+  signedIn = this.securityStore.signedIn;
+  user = this.securityStore.loadedUser;
+
+  query = injectQuery(() => ({
+    enabled: this.signedIn(),
+    queryKey: ['admin', 'greeting'],
+    queryFn: async () => lastValueFrom(this.adminService.getGretting())
+  }));
+}

webapp/src/app/admin/admin.stories.ts

@@ -0,0 +1,18 @@
+import { type Meta, type StoryObj } from '@storybook/angular';
+import { AdminComponent } from './admin.component';
+
+const meta: Meta<AdminComponent> = {
+  title: 'pages/admin',
+  component: AdminComponent,
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryObj<AdminComponent>;
+
+export const Default: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<app-admin />`
+  })
+};

webapp/src/app/app.routes.ts

@@ -1,8 +1,15 @@
 import { Routes } from '@angular/router';
-import { AboutComponent } from 'app/about/about.component';
-import { HomeComponent } from 'app/home/home.component';
+import { AboutComponent } from '@app/about/about.component';
+import { HomeComponent } from '@app/home/home.component';
+import { AdminComponent } from '@app/admin/admin.component';
+import { AdminGuard } from '@app/core/security/admin.guard';
 
 export const routes: Routes = [
   { path: '', component: HomeComponent },
-  { path: 'about', component: AboutComponent }
+  { path: 'about', component: AboutComponent },
+  {
+    path: 'admin',
+    component: AdminComponent,
+    canActivate: [AdminGuard]
+  }
 ];

webapp/src/app/core/security/admin.guard.ts

@@ -0,0 +1,26 @@
+import { inject, Injectable, Injector } from '@angular/core';
+import { toObservable } from '@angular/core/rxjs-interop';
+import { CanActivate, Router, UrlTree } from '@angular/router';
+import { SecurityStore } from '@app/core/security/security-store.service';
+import { filter, map, Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AdminGuard implements CanActivate {
+  injector = inject(Injector);
+  securityStore = inject(SecurityStore);
+  router = inject(Router);
+
+  canActivate(): Observable<boolean | UrlTree> {
+    return toObservable(this.securityStore.loadedUser, { injector: this.injector }).pipe(
+      filter(Boolean),
+      map((user) => {
+        if (user && user.roles.includes('ADMIN')) {
+          return true;
+        }
+        return this.router.createUrlTree(['/']);
+      })
+    );
+  }
+}

webapp/src/app/core/security/keycloak.service.ts

@@ -6,7 +6,9 @@ export interface UserProfile {
   email: string;
   given_name: string;
   family_name: string;
+  realmAccess: { roles: string[] };
   token: string;
+  roles: string[];
 }
 
 @Injectable({ providedIn: 'root' })
@@ -36,6 +38,7 @@ export class KeycloakService {
     }
     this.profile = (await this.keycloak.loadUserInfo()) as unknown as UserProfile;
     this.profile.token = this.keycloak.token || '';
+    this.profile.roles = this.keycloak.realmAccess?.roles || [];
     return true;
   }
 

webapp/src/app/core/security/models.ts

@@ -4,14 +4,16 @@ export interface User {
   name: string;
   anonymous: boolean;
   bearer: string;
+  roles: string[];
 }
 
 export const ANONYMOUS_USER: User = {
   id: '',
   email: 'nomail',
   name: 'no user',
   anonymous: true,
-  bearer: ''
+  bearer: '',
+  roles: []
 };
 
 export interface SecurityState {

webapp/src/app/core/security/security-store.service.ts

@@ -28,13 +28,14 @@ export class SecurityStore {
 
     const isLoggedIn = await keycloakService.init();
     if (isLoggedIn && keycloakService.profile) {
-      const { sub, email, given_name, family_name, token } = keycloakService.profile;
+      const { sub, email, given_name, family_name, token, roles } = keycloakService.profile;
       const user = {
         id: sub,
         email,
         name: `${given_name} ${family_name}`,
         anonymous: false,
-        bearer: token
+        bearer: token,
+        roles
       };
       this.user.set(user);
       this.loaded.set(true);

webapp/src/app/home/home.component.html

@@ -3,10 +3,7 @@
     <div class="grid grid-cols-1 xl:grid-cols-4 gap-4 xl:gap-8">
       <div class="space-y-2 col-span-1">
         <div class="flex flex-col gap-2 mb-4">
-          <h1 class="text-3xl font-bold">
-            Artemis<br class="hidden md:visible" />
-            Leaderboard
-          </h1>
+          <h1 class="text-3xl font-bold">Artemis Leaderboard</h1>
           @if (signedIn() && user(); as userValue) {
             <h2 class="text-xl text-muted-foreground">Hi {{ userValue.name }} 👋</h2>
           }

webapp/src/app/home/home.component.ts

@@ -1,16 +1,15 @@
+import dayjs from 'dayjs';
+import { combineLatest, timer, lastValueFrom, map } from 'rxjs';
 import { Component, computed, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { injectQuery } from '@tanstack/angular-query-experimental';
-import { LeaderboardService } from 'app/core/modules/openapi/api/leaderboard.service';
-import { LeaderboardComponent } from 'app/home/leaderboard/leaderboard.component';
-import { combineLatest, timer, lastValueFrom, map } from 'rxjs';
 import { toSignal } from '@angular/core/rxjs-interop';
+import { LucideAngularModule, CircleX } from 'lucide-angular';
+import { injectQuery } from '@tanstack/angular-query-experimental';
+import { LeaderboardService } from '@app/core/modules/openapi/api/leaderboard.service';
+import { LeaderboardComponent } from '@app/home/leaderboard/leaderboard.component';
 import { LeaderboardFilterComponent } from './leaderboard/filter/filter.component';
-import dayjs from 'dayjs';
-import { AdminService } from '@app/core/modules/openapi/api/admin.service';
 import { SecurityStore } from '@app/core/security/security-store.service';
 import { HlmAlertModule } from '@spartan-ng/ui-alert-helm';
-import { LucideAngularModule, CircleX } from 'lucide-angular';
 
 @Component({
   selector: 'app-home',
@@ -22,7 +21,6 @@ export class HomeComponent {
   protected CircleX = CircleX;
 
   securityStore = inject(SecurityStore);
-  adminService = inject(AdminService);
   leaderboardService = inject(LeaderboardService);
 
   signedIn = this.securityStore.signedIn;