Add profile page

Author: mythz

MyApp.Client/src/app/app.routes.ts

@@ -7,6 +7,8 @@ import { MarkdownPageComponent } from './markdown-page.component';
 import { SignInComponent } from './signin/signin.component';
 import { SignUpComponent } from './signup/signup.component';
 import { SignupConfirmComponent } from './signup/signup-confirm.component';
+import { ProfileComponent } from './profile/profile.component';
+import { authGuard } from 'src/guards';
 
 import { BOOKING_ROUTES } from './bookings/booking.routes';
 
@@ -18,6 +20,7 @@ export const routes: Routes = [
     { path:'signin', component: SignInComponent },
     { path:'signup', component: SignUpComponent },
     { path:'signup-confirm', component: SignupConfirmComponent },
+    { path:'profile', component: ProfileComponent, canActivate: [authGuard] },
     { path:'about', component: MarkdownPageComponent, data: { page: 'about.md' } },
     { path:'privacy', component: MarkdownPageComponent, data: { page: 'privacy.md' } },
     ...BOOKING_ROUTES,

MyApp.Client/src/app/profile/profile.component.html

@@ -0,0 +1,23 @@
+<app-page title="Profile">
+
+    <div class="flex flex-col items-center justify-center gap-2">
+        <img class="w-36 h-36 text-gray-700 rounded-full" [src]="user()!.profileUrl" alt=""
+            (error)="onIconError($event)" />
+        @if (user()!.displayName != user()!.userName) {
+            <div>{{user()!.displayName}}</div>
+        }
+        <div>{{user()!.userName}}</div>
+        <div class="mt-2">
+            @for (role of user()!.roles || []; track $index) {
+            <span class="ml-3 inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-indigo-100 text-indigo-800">
+                {{role}}
+            </span>
+            }
+        </div>
+        <secondary-button mat-button class="mt-8" (click)="signout()">Sign Out</secondary-button>
+    </div>
+
+    <div class="mt-8 flex justify-center gap-x-4">
+        <src-page path="profile/profile.component.html"></src-page>
+    </div>
+</app-page>

MyApp.Client/src/app/profile/profile.component.ts

@@ -0,0 +1,33 @@
+import { Component, computed, inject } from "@angular/core";
+import { PageComponent } from "../page.component";
+import { SrcPageComponent } from "src/shared/src-page.component";
+import { tailwindComponents } from "src/components";
+import { AuthService } from "src/services/auth.service";
+import { MetadataService } from "src/components/services/metadata.service";
+import { svgToDataUri } from "src/components/files";
+
+@Component({
+    selector: 'app-profile',
+    templateUrl: './profile.component.html',
+    imports: [
+        PageComponent,
+        SrcPageComponent,
+        ...tailwindComponents(),
+    ],
+})
+export class ProfileComponent {
+    authService = inject(AuthService);
+    meta = inject(MetadataService);
+    user = computed(() => this.authService.user());
+
+    signout(): void {
+        this.authService.signOut();
+    }
+
+    onIconError(event: Event): void {
+        const svg = this.meta.ui().userIcon?.svg
+        if (svg) {
+            (event.currentTarget as HTMLImageElement).src = svgToDataUri(svg);
+        }
+    }
+}