[#5864] Add MFA enrollment UI with self-contained QR rendering

This patch adds a "Two-Factor Authentication" card to the user profile
page, providing the complete MFA lifecycle management UI, and adds
client-side QR code generation.

QR code rendering - qrcode library (v1.5.4, MIT license):
The QR code for the TOTP provisioning URI is generated entirely
client-side using a <canvas> element. No external services (Google
Charts API, QR Server, etc.) are involved. This is a deliberate
decision: academic tools aimed at digital preservation must not depend
on third-party services subject to arbitrary policy changes,
deprecation, or rate limits. The qrcode library is pure JavaScript
with zero runtime dependencies.

Profile page MFA card features:
- Setup mode: generates secret via POST /mfa/setup, renders QR code
  from the otpauth:// provisioning URI on a canvas element
- Enrollment confirmation: validates first TOTP code, displays
  recovery codes (shown once, never stored in plaintext client-side)
- Status display: shows enabled badge + remaining recovery code count
- Disable: requires current TOTP code (prevents unauthorized disable)
- Regenerate recovery codes: requires current TOTP code

Design decisions:

1. QR rendered in ngAfterViewChecked (not ngOnInit):
   The canvas element is inside an @if block. It only exists in the
   DOM after provisioningUri$ emits. AfterViewChecked ensures the
   canvas is available when we call QRCode.toCanvas().

2. BehaviorSubjects (not NgRx) for profile component state:
   The profile MFA card is self-contained and does not need cross-
   component coordination. Local reactive state with BehaviorSubjects
   keeps it simple and testable without NgRx boilerplate.

3. All destructive operations require TOTP code:
   Disable and regenerate-codes both require a valid current code.
   This prevents a session-hijacker from removing MFA protection.

4. Custom theme compatibility:
   ProfilePageMfaFormComponent added to custom theme's imports array.

New dependencies:
- qrcode@1.5.4 (MIT) - client-side QR generation
- @types/qrcode (devDep) - TypeScript type definitions

i18n keys added: login.mfa.*, profile.mfa.* (25 keys total)

Test plan:
1. Apply patch
2. Login, navigate to /profile
=> SUCCESS: "Two-Factor Authentication" card visible
3. Click setup, verify QR code renders (no network requests to external)
4. Scan with authenticator app, enter code
=> SUCCESS: Recovery codes displayed
5. Run: npm run lint
=> SUCCESS: 0 errors
6. Sign off :-D

Author: tomascohen

package-lock.json

@@ -100,6 +100,7 @@
     "@ngrx/store": "^20.1.0",
     "@ngx-translate/core": "^17.0.0",
     "@nicky-lenaers/ngx-scroll-to": "^14.0.0",
+    "@popperjs/core": "^2.11.8",
     "@terraformer/wkt": "^2.2.2",
     "altcha": "^2.3.0",
     "angulartics2": "^12.2.0",
@@ -147,6 +148,7 @@
     "nouislider": "^15.7.1",
     "orejime": "^2.3.3",
     "pem": "1.14.8",
+    "qrcode": "^1.5.4",
     "reflect-metadata": "^0.2.2",
     "rxjs": "^7.8.0",
     "uuid": "^14.0.1",
@@ -179,6 +181,7 @@
     "@types/js-cookie": "3.0.6",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.19.43",
+    "@types/qrcode": "^1.5.6",
     "@typescript-eslint/eslint-plugin": "^8.62.1",
     "@typescript-eslint/parser": "^8.62.1",
     "@typescript-eslint/rule-tester": "^8.62.1",

package.json

@@ -72,10 +72,10 @@ export interface AuthState {
   idle: boolean;
 
   // MFA state
-  mfaRequired: boolean;
+  mfaRequired?: boolean;
   mfaPendingToken?: AuthTokenInfo;
   mfaError?: string;
-  mfaVerifying: boolean;
+  mfaVerifying?: boolean;
 
 }
 
@@ -164,13 +164,6 @@ export function authReducer(state: any = initialState, action: AuthActions | Mfa
       });
 
     case AuthActionTypes.AUTHENTICATE_SUCCESS:
-      return Object.assign({}, state, {
-        mfaRequired: false,
-        mfaPendingToken: undefined,
-        mfaError: undefined,
-        mfaVerifying: false,
-      });
-
     case AuthActionTypes.LOG_OUT:
       return state;
 

src/app/core/auth/auth.reducer.ts

@@ -1,4 +1,7 @@
-import { HttpResponse } from '@angular/common/http';
+import {
+  HttpErrorResponse,
+  HttpResponse,
+} from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import {
   Actions,
@@ -79,7 +82,8 @@ export class MfaEffects {
           return new MfaVerifySuccessAction(null);
         }),
         catchError((error: unknown) => {
-          const message = error?.error?.error || 'mfa.verify.error';
+          const err = error as HttpErrorResponse;
+          const message = err?.error?.error || 'mfa.verify.error';
           return of(new MfaVerifyErrorAction(message));
         }),
       ),