Added pages to see, create, modify & delete redeemable actions. User card top right with disconnect & log out. Code clean up.

src/app/auth/user-card/user-card.component.html

@@ -0,0 +1,20 @@
+@if (auth.isAuthenticated()) {
+<main>
+  <mat-card appearance="outlined" class="card">
+    <mat-card-header>
+      <mat-card-title>{{username}}</mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+      <impersonation />
+    </mat-card-content>
+    <mat-card-actions class="actions">
+      <div>
+        @if (isTTSLoggedIn) {
+        <button mat-raised-button (click)="client.disconnect()"><span class="disconnect">Disconnect</span></button>
+        }
+        <button mat-raised-button (click)="auth.logout()"><span class="logoff">Log Off</span></button>
+      </div>
+    </mat-card-actions>
+  </mat-card>
+</main>
+}

src/app/auth/user-card/user-card.component.scss

@@ -0,0 +1,23 @@
+main {
+  display: flex;
+  justify-content: center;
+  padding: 0.5em 0;
+}
+
+.card {
+  padding: 0 0 0.5em;
+}
+
+.actions {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.disconnect, .logoff {
+  color: red;
+}
+
+.mdc-button ~ .mdc-button {
+  margin-left: 1em;
+}

src/app/auth/user-card/user-card.component.spec.ts

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

src/app/auth/user-card/user-card.component.ts

@@ -0,0 +1,26 @@
+import { Component, inject } from '@angular/core';
+import { ImpersonationComponent } from '../impersonation/impersonation.component';
+import { MatCardModule } from '@angular/material/card';
+import { ApiAuthenticationService } from '../../shared/services/api/api-authentication.service';
+import { MatButtonModule } from '@angular/material/button';
+import { HermesClientService } from '../../hermes-client.service';
+
+@Component({
+  selector: 'user-card',
+  standalone: true,
+  imports: [ImpersonationComponent, MatButtonModule, MatCardModule],
+  templateUrl: './user-card.component.html',
+  styleUrl: './user-card.component.scss'
+})
+export class UserCardComponent {
+  auth = inject(ApiAuthenticationService);
+  client = inject(HermesClientService);
+
+  get isTTSLoggedIn() {
+    return this.client.logged_in;
+  }
+
+  get username() {
+    return this.auth.getUsername();
+  }
+}