Added the start of the user page

packages/bridge-ui/src/app/app.routes.ts

@@ -2,10 +2,12 @@ import { Routes } from '@angular/router';
 import { SeasonsComponent } from './pages/seasons/seasons.component';
 import { SeasonDetailsComponent } from './pages/season-details/season-details.component';
 import { GettingStartedComponent } from './pages/getting-started/getting-started.component';
+import { UserComponent } from './pages/user/user.component';
 
 export const routes: Routes = [
     { path: '', redirectTo: '/seasons', pathMatch:'full' },
     { path: 'seasons', component: SeasonsComponent },
     { path: 'seasons/:id', component: SeasonDetailsComponent },
     { path: 'getting-started', component: GettingStartedComponent },
+    { path: 'user/:id', component: UserComponent },
 ];

packages/bridge-ui/src/app/components/top-bar/top-bar.component.html

@@ -19,7 +19,7 @@
     }
     @else {
     {{usersService.getUserName()}}
-    <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon" matTooltip="Profile">
+    <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon" matTooltip="Profile" [routerLink]="['/user/'+usersService.getUserId()]">
         <mat-icon>person_pin</mat-icon>
     </button>
     <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon" (click)="onLogoutClick()" matTooltip="Logout">

packages/bridge-ui/src/app/pages/seasons/seasons.component.html

@@ -1,5 +1,5 @@
 <div class="season-grid-list docs-guide-list">
-    @if(userService.canCreateSeasons()){
+    @if(usersService.canCreateSeasons()){
         <app-season-card-new></app-season-card-new>
     }
     @for (season of seasons; track season) {

packages/bridge-ui/src/app/pages/seasons/seasons.component.ts

@@ -26,7 +26,7 @@ export class SeasonsComponent {
 
   constructor(
     private seasonService: SeasonsService,
-    public userService: UsersService
+    public usersService: UsersService
     ) {}
 
   ngOnInit() {

packages/bridge-ui/src/app/pages/user/user.component.html

@@ -0,0 +1,22 @@
+<div class="container">
+    <div class="column side">
+        <mat-card>
+            <mat-card-header>
+              <mat-card-title>{{usersService.getUserName()}}</mat-card-title>
+            </mat-card-header>
+            <img mat-card-image src={{usersService.getUserPicture()}}>
+            <mat-card-content>
+              <p>Real Name:</p><p>{{usersService.getUserRealName()}}</p>
+              <p>Email:</p><p>{{usersService.getUserEmail()}}</p>
+            </mat-card-content>
+            <mat-card-actions>
+              <button mat-button>Edit</button>
+            </mat-card-actions>
+          </mat-card>
+    </div>
+
+    <div class="column middle">
+        <h1 style="text-align: center;">Tournament History</h1>
+        <p>Not much going on yet...</p>
+    </div>
+</div>

packages/bridge-ui/src/app/pages/user/user.component.scss

@@ -0,0 +1,21 @@
+.container {
+    margin: 1rem auto;
+    width: 80%;
+}
+
+.column {
+    float: left;
+}
+
+.column.side {
+    width: 30%
+}
+
+.column.middle {
+    width: 68%;
+    margin-left: 1rem;
+}
+
+.user-image {
+    width: 200px;
+}

packages/bridge-ui/src/app/pages/user/user.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserComponent } from './user.component';
+
+describe('UserComponent', () => {
+  let component: UserComponent;
+  let fixture: ComponentFixture<UserComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [UserComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(UserComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

packages/bridge-ui/src/app/pages/user/user.component.ts

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+
+import { UsersService } from '../../services/users.service';
+
+@Component({
+  selector: 'app-user',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatCardModule,
+    MatIconModule,
+    MatButtonModule
+  ],
+  templateUrl: './user.component.html',
+  styleUrl: './user.component.scss'
+})
+export class UserComponent {
+  constructor(
+    public usersService: UsersService,
+    ) {}
+}

packages/bridge-ui/src/app/services/users.service.ts

@@ -13,6 +13,7 @@ export class UsersService {
   isAuthenticated = false;
   permissions: string[] = [];
   user: User | null | undefined = null;
+  additionalInfo : any = null;
 
   constructor(
     public authService: AuthService,
@@ -58,12 +59,36 @@ export class UsersService {
     this.httpClient.post(this.serverEndpointService.getCurrentEndpoint()+"users/login", {id, nickname, picture, time}).subscribe();
   }
 
-  getUserName() :string {
+  getUserName() : string {
     if(!this.isAuthenticated || !this.user) {return ""}
 
     return this.user.nickname || "";
   }
 
+  getUserId() : string {
+    if(!this.isAuthenticated || !this.user) {return ""}
+
+    return this.user.sub?.replace("auth0|", "") || "";
+  }
+
+  getUserPicture() : string {
+    if(!this.isAuthenticated || !this.user) {return ""}
+
+    return this.user.picture || "";
+  }
+
+  getUserEmail() : string {
+    if(!this.isAuthenticated || !this.user) {return ""}
+
+    return this.user.email || "";
+  }
+
+  getUserRealName() : string {
+    if(!this.isAuthenticated || !this.user || !this.additionalInfo) {return ""}
+
+    return "";
+  }
+
   canCreateSeasons() : boolean {
     return this.hasPermission("create:seasons")
   }