Improved look and behaviour of login user journey pages.

Fixed RouterLink not working for registration page
Fixed TOS URL in Registration page
Additional improvements for header and footer navbars

.vscode/settings.json

@@ -1,6 +1,7 @@
 {
   "window.title": "Data Portal - ${dirty}${activeEditorShort}${separator}${rootName}${separator}${profileName}${separator}${appName}",
   "cSpell.words": ["devcontainer", "devkit", "metldata", "TOTP", "ghga"],
+  "cSpell.language": "en-GB",
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "[html]": {

src/app/app.config.ts

@@ -3,6 +3,7 @@ import {
   provideExperimentalZonelessChangeDetection,
 } from '@angular/core';
 import { provideNoopAnimations } from '@angular/platform-browser/animations';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { provideRouter } from '@angular/router';
 
 import {
@@ -20,6 +21,7 @@ export const appConfig: ApplicationConfig = {
     provideRouter(routes),
     provideHttpClient(withFetch(), withInterceptorsFromDi()),
     provideNoopAnimations(),
+    provideAnimationsAsync(),
     { provide: HTTP_INTERCEPTORS, useClass: CsrfInterceptor, multi: true },
   ],
 };

src/app/auth/features/confirm-totp/confirm-totp.component.html

@@ -2,21 +2,24 @@ <h2>Two-factor authentication</h2>
 
 <p>Please enter the 6-digit authentication code generated by your authenticator app</p>
 
-<mat-form-field>
-  <mat-label> Authentication Code</mat-label>
-  <input
-    type="text"
-    matInput
-    [formControl]="codeControl"
-    (input)="onInput()"
-    maxlength="6"
-  />
-</mat-form-field>
-
-<button mat-raised-button (click)="onSubmit()">Submit</button>
+<form defaultButton="submit_auth" class="mb-4 flex items-center">
+  <mat-form-field class="mr-2">
+    <mat-label> Authentication code</mat-label>
+    <input
+      type="text"
+      matInput
+      [formControl]="codeControl"
+      (input)="onInput()"
+      maxlength="6"
+    />
+  </mat-form-field>
+  <div class="mb-4">
+    <button id="submit_auth" mat-raised-button (click)="onSubmit()">Submit</button>
+  </div>
+</form>
+<p class="flex items-center text-sm">Difficulty signing in?</p>
+<button mat-button (click)="onLostToken()">Get new 2FA setup</button>
 
 @if (verificationError) {
   <mat-error>The entered authentication code was not valid.</mat-error>
 }
-
-<button mat-button (click)="onLostToken()">Get new 2FA setup</button>

src/app/auth/features/confirm-totp/confirm-totp.component.scss

@@ -0,0 +1,12 @@
+@use '@angular/material' as mat;
+
+button {
+  @include mat.button-overrides(
+    (
+      text-label-text-size: small,
+      text-label-text-color: var(--mat-sys-secondary),
+      text-container-height: 2em,
+      text-horizontal-padding: 0.5em,
+    )
+  );
+}

src/app/auth/features/confirm-totp/confirm-totp.component.ts

@@ -25,6 +25,7 @@ import { AuthService } from '@app/auth/services/auth.service';
     MatInputModule,
   ],
   templateUrl: './confirm-totp.component.html',
+  styleUrl: './confirm-totp.component.scss',
 })
 export class ConfirmTotpComponent {
   #authService = inject(AuthService);

src/app/auth/features/register/register.component.html

@@ -6,7 +6,7 @@ <h1>Registration with GHGA</h1>
   }
   @case (null) {
     <p>You are currently not logged in.</p>
-    <p><a routerLink="/">Go back to the home page.</a></p>
+    <a mat-raised-button routerLink="/">Return to the home page</a>
   }
   @default {
     <h2>Welcome, {{ u.full_name }}!</h2>
@@ -33,7 +33,7 @@ <h2>Welcome, {{ u.full_name }}!</h2>
       <span class="label">Life Science ID:</span>
       <span>{{ u.ext_id }}</span>
     </p>
-    <p>
+    <p class="mb-0">
       <span class="label">Academic title:</span>
       <mat-form-field>
         <mat-select [formControl]="titleControl">
@@ -43,22 +43,30 @@ <h2>Welcome, {{ u.full_name }}!</h2>
         </mat-select>
       </mat-form-field>
     </p>
-    <p>
+    <p class="mb-4">
       <mat-checkbox [(ngModel)]="accepted">
         I accept the
         <a
-          href="https://www.ghga.de/Downloads/Terms_of_Use_-_GHGA_Data_Infrastructure_V1.0.pdf"
+          href="https://zenodo.org/records/11146387"
           target="_blank"
-          rel="noreferrer"
+          rel="noreferrer noopener"
+          class="underline"
           >terms of use</a
         >
         and the
-        <a href="https://www.ghga.de/data-protection" target="_blank" rel="noreferrer">
+        <a
+          href="https://www.ghga.de/data-protection"
+          target="_blank"
+          rel="noreferrer noopener"
+          class="underline"
+        >
           privacy policy</a
         >.
       </mat-checkbox>
     </p>
-    <button mat-button (click)="cancel()">Cancel and log out</button>
+    <button mat-stroked-button class="mr-2" (click)="cancel()">
+      Cancel and log out
+    </button>
     <button mat-raised-button (click)="register()" [disabled]="!accepted">
       {{ u?.id ? 'Confirm' : 'Register' }}
     </button>

src/app/auth/features/register/register.component.scss

@@ -1,3 +1,5 @@
+@use '@angular/material' as mat;
+
 .label {
   display: inline-block;
   font-weight: bold;

src/app/auth/features/register/register.component.ts

@@ -7,6 +7,7 @@ import { MatSelectModule } from '@angular/material/select';
 import { AcademicTitle, UserBasicData } from '@app/auth/models/user';
 
 import { MatButtonModule } from '@angular/material/button';
+import { RouterLink } from '@angular/router';
 import { AuthService } from '@app/auth/services/auth.service';
 
 // TODO: Polish this component
@@ -23,6 +24,7 @@ import { AuthService } from '@app/auth/services/auth.service';
     MatCheckboxModule,
     MatFormFieldModule,
     MatSelectModule,
+    RouterLink,
   ],
   templateUrl: './register.component.html',
   styleUrl: './register.component.scss',

src/app/auth/features/setup-totp/setup-totp.component.html

@@ -19,8 +19,8 @@ <h2>Set up two-factor authentication</h2>
     However, all contact addresses that had been verified before will need to be
     verified again.
   </p>
+  <button mat-stroked-button (click)="cancelLostToken()" class="mr-2">Cancel</button>
   <button mat-raised-button (click)="lostTokenConfirmed.set(true)">Continue</button>
-  <button mat-button (click)="cancelLostToken()">Cancel</button>
 } @else {
   @let uri = setupUri() | async;
   @if (uri) {
@@ -34,23 +34,45 @@ <h2>Set up two-factor authentication</h2>
       In order to set up the authenticator app to produce the authentication codes for
       the GHGA data portal, please scan this QR code with your authenticator app:
     </p>
-    <qrcode [qrdata]="uri" [width]="160"></qrcode>
-    <button mat-button (click)="showManualSetup = !showManualSetup">
+    <qrcode [qrdata]="uri" [width]="256"></qrcode>
+
+    @if (showManualSetup) {
+      <p>
+        If you have trouble scanning the QR Code, please manually input the following
+        setup key in your authenticator app:
+      </p>
+      <p class="flex content-center">
+        <input
+          type="text"
+          size="33"
+          readonly
+          [value]="getSecret(uri)"
+          class="mb-2 mr-2 h-10 text-center font-mono"
+        />
+        <button
+          mat-icon-button
+          (click)="copySecret(uri)"
+          class="relative"
+          matTooltip="Copy setup key"
+          matTooltipPosition="right"
+          matTooltipHideDelay="100000"
+        >
+          <mat-icon>content_copy</mat-icon>
+        </button>
+      </p>
+    }
+    <button
+      mat-stroked-button
+      class="manual-setup-button mr-2"
+      (click)="showManualSetup = !showManualSetup"
+    >
       @if (showManualSetup) {
         Hide
       } @else {
         Show
       }
       manual setup instructions
     </button>
-    @if (showManualSetup) {
-      <p>
-        If you have trouble scanning the QR Code, please manually input the following
-        setup key in your authenticator app:
-      </p>
-      <p><input type="text" size="35" readonly [value]="getSecret(uri)" /></p>
-      <button mat-button (click)="copySecret(uri)">Copy the setup key</button>
-    }
     <button mat-raised-button (click)="completeSetup()">Continue</button>
   } @else if (uri === undefined) {
     <p>Generating the TOTP setup...</p>

src/app/auth/features/setup-totp/setup-totp.component.ts

@@ -1,6 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { Component, computed, inject, signal } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { AuthService } from '@app/auth/services/auth.service';
 import { QRCodeComponent } from 'angularx-qrcode';
 
@@ -12,7 +15,14 @@ import { QRCodeComponent } from 'angularx-qrcode';
  */
 @Component({
   selector: 'app-setup-totp',
-  imports: [CommonModule, QRCodeComponent, MatButtonModule],
+  imports: [
+    CommonModule,
+    QRCodeComponent,
+    MatButtonModule,
+    MatInputModule,
+    MatIcon,
+    MatTooltipModule,
+  ],
   templateUrl: './setup-totp.component.html',
 })
 export class SetupTotpComponent {

src/app/portal/features/home-page/home-page.component.scss

@@ -1,7 +1,6 @@
 @use '@angular/material' as mat;
 
 p {
-  margin-bottom: 0.5em;
   text-align: justify;
 }
 

src/app/portal/features/site-footer/site-footer.component.html

@@ -4,8 +4,10 @@
       ><div class="flex w-full justify-center">
         <img src="assets/images/GHGA_logo.png" alt="GHGA Logo" class="max-h-12" />
       </div>
-      <div class="mt-3 grow-0 border-t pt-2 text-center text-4xl uppercase">
-        Data Portal
+      <div class="flex w-full justify-center">
+        <div class="mt-3 w-fit border-t pt-1.5 text-center text-4xl uppercase">
+          Data Portal
+        </div>
       </div></a
     ><a
       target="_blank"

src/app/portal/features/site-header/site-header.component.html

@@ -1,7 +1,7 @@
-<mat-toolbar class="py-2">
-  <mat-toolbar-row class="align-center flex justify-between">
+<mat-toolbar>
+  <mat-toolbar-row class="align-center flex h-fit justify-between">
     <div class="flex h-full basis-1/4">
-      <a routerLink="/" class="flex h-full flex-nowrap items-center p-3"
+      <a routerLink="/" class="flex h-full flex-nowrap items-center px-4 py-3"
         ><img
           src="assets/images/GHGA_logo_clean.png"
           class="max-h-12"
@@ -15,34 +15,46 @@
       >
     </div>
 
-    <mat-nav-list class="basis-1/2 text-center">
+    <mat-nav-list class="my-8 basis-1/2 text-center">
       <a
-        [id]="route === '/' ? 'activePage' : ''"
-        mat-flat-button
+        [id]="route !== '/browse' ? 'activePage' : ''"
+        mat-button
+        disableRipple="true"
         routerLink="/"
         class="homeLink mx-1"
         >Home</a
       ><a
         [id]="route === '/browse' ? 'activePage' : ''"
-        mat-flat-button
+        mat-button
+        disableRipple="true"
         routerLink="/browse"
         class="mx-1"
         >Browse Data</a
       >
-      <a mat-flat-button href="https://docs.ghga.de/faq/" class="mx-1 flex-row-reverse"
+      <a
+        mat-button
+        disableRipple="true"
+        href="https://docs.ghga.de/faq/"
+        class="mx-1 flex-row-reverse"
         >FAQ<mat-icon class="float-right">open_in_new</mat-icon></a
       >
-      <a mat-flat-button href="https://docs.ghga.de/" class="mx-1 flex-row-reverse"
+      <a
+        mat-button
+        disableRipple="true"
+        href="https://docs.ghga.de/"
+        class="mx-1 flex-row-reverse"
         >Docs<mat-icon class="float-right">open_in_new</mat-icon></a
       ></mat-nav-list
     >
     <div class="basis-1/4 text-right">
       @if (isLoggedIn()) {
-        <button mat-icon-button (click)="onLogout()">
+        <button mat-icon-button disableRipple="true" (click)="onLogout()">
           <mat-icon>logout</mat-icon>
         </button>
       } @else {
-        <button mat-icon-button (click)="onLogin()"><mat-icon>login</mat-icon></button>
+        <button mat-icon-button disableRipple="true" (click)="onLogin()">
+          <mat-icon>login</mat-icon>
+        </button>
       }
     </div></mat-toolbar-row
   >

src/app/portal/features/site-header/site-header.component.scss

@@ -9,6 +9,11 @@ mat-toolbar {
   );
 }
 
+mat-toolbar-row {
+  padding-left: 0;
+  height: fit-content;
+}
+
 mat-toolbar-row div div {
   color: var(--mat-sys-quinary);
   border-color: var(--mat-sys-quinary);
@@ -37,7 +42,11 @@ mat-toolbar-row div a:focus {
 }
 
 mat-nav-list a {
-  font-size: medium;
+  @include mat.button-overrides(
+    (
+      text-state-layer-color: var(--mat-sys-on-primary),
+    )
+  );
 }
 
 mat-nav-list a mat-icon {