Personal-Test-Ground-NG/src/app/webauthn-register/webauthn-register.component.html

<mat-card class="login-card">
  <h2>Register</h2>

  <!-- WebAuthn (Passkey) Registration -->
  <form (ngSubmit)="register()" #registerForm="ngForm">
    <mat-form-field appearance="outline" class="full-width">
      <mat-label>Username</mat-label>
      <input
        matInput
        [(ngModel)]="username"
        name="username"
        required
        #usernameInput="ngModel"
      />
      <mat-error *ngIf="usernameInput.invalid && usernameInput.touched">
        Username is required
      </mat-error>
    </mat-form-field>

    <mat-form-field appearance="outline" class="full-width">
      <mat-label>Email</mat-label>
      <input
        matInput
        type="email"
        [(ngModel)]="email"
        name="email"
        required
        email
        #emailInput="ngModel"
      />
      <mat-error *ngIf="emailInput.invalid && emailInput.touched">
        Valid email is required
      </mat-error>
    </mat-form-field>

    <button
      mat-raised-button
      color="primary"
      type="submit"
      class="full-width"
      [disabled]="loading || registerForm.invalid"
    >
      Register with Passkey
    </button>
  </form>

  <mat-divider class="divider"></mat-divider>

  <!-- Alternate Registration Option -->
  <button
    mat-stroked-button
    color="accent"
    class="full-width"
    (click)="goToStandardRegister()"
  >
    Register with Email & Password
  </button>

  <button
    mat-button
    type="button"
    class="full-width"
    (click)="goBack()"
  >
    Back to Login
  </button>

  <mat-hint *ngIf="message">{{ message }}</mat-hint>
</mat-card>