frontend/Recovery: Warn user about losing devices

Add a warning when the user tries to reset their password without providing a recovery file, informing them that they will lose access to all their devices and will need to re-add them manually.
part of #255

Author: ffreddow

frontend/src/locales/de.ts

@@ -47,10 +47,17 @@ export const de ={
     "recovery": {
         "recovery": "Passwort zurücksetzen",
         "new_password": "Neues Passwort",
+        "confirm_password": "Passwort bestätigen",
+        "confirm_password_error_message": "Passwörter stimmen nicht überein",
         "recovery_file": "Wiederhestellungsdatei",
         "submit": "Abschicken",
         "invalid_file": "Datei ist beschädigt oder falsch",
-        "token_expired": "Das Token ist abgelaufen. Bitte starte den Vorgang erneut."
+        "token_expired": "Das Token ist abgelaufen. Bitte starte den Vorgang erneut.",
+        "no_file_warning_heading": "Bist du sicher?",
+        "no_file_warning_body": "Du hast keine Wiederherstellungsdatei angegeben. Wenn du fortfährst, wird ein neues Geräte-Secret erzeugt. Dadurch verlierst du den Zugriff auf alle deine Geräte und musst sie manuell erneut hinzufügen. Wenn du noch Zugriff auf deine Wiederherstellungsdatei hast, empfehlen wir dringend, diese zu verwenden.",
+        "no_file_warning_cancel": "Abbrechen",
+        "no_file_warning_proceed": "Ohne Datei fortfahren",
+        "no_file_warning_ack": "Ich verstehe, dass das Fortfahren ohne Wiederherstellungsdatei meine Geräte trennt und ich sie erneut hinzufügen muss."
     },
     "chargers": {
         "charger_name": "Name",

frontend/src/locales/en.ts

@@ -47,10 +47,17 @@ export const en = {
     "recovery": {
         "recovery": "Password recovery",
         "new_password": "New password",
+        "confirm_password": "Confirm password",
+        "confirm_password_error_message": "Passwords do not match",
         "recovery_file": "Recovery File",
         "submit": "Submit",
         "invalid_file": "File is invalid",
-        "token_expired": "The token has expired. Please start the process again."
+        "token_expired": "The token has expired. Please start the process again.",
+        "no_file_warning_heading": "Are you sure?",
+        "no_file_warning_body": "You did not provide a recovery file. If you continue, we will generate a new device secret. This will cause you to lose access to all devices that are currently linked to your account and you will have to re-add them manually. If you still have access to your recovery file, we strongly recommend using it instead.",
+        "no_file_warning_cancel": "Cancel",
+        "no_file_warning_proceed": "Continue without file",
+        "no_file_warning_ack": "I understand that continuing without a recovery file will disconnect my devices and require re-adding them."
     },
     "chargers": {
         "charger_name": "Name",

frontend/src/pages/Recovery.tsx

@@ -1,5 +1,5 @@
 import { Base64 } from "js-base64";
-import { Button, Card, Form } from "react-bootstrap";
+import { Button, Card, Form, Modal } from "react-bootstrap";
 import { AppState, PASSWORD_PATTERN, concat_salts, fetchClient, generate_hash, generate_random_bytes, get_salt, loggedIn } from "../utils";
 import { crypto_box_keypair, crypto_secretbox_KEYBYTES, crypto_secretbox_NONCEBYTES, crypto_secretbox_easy } from "libsodium-wrappers";
 import { showAlert } from "../components/Alert";
@@ -36,42 +36,47 @@ export function Recovery() {
     }, [])
 
     const [state, setState] = useState({
-        recovery_key: query.token,
-        email: query.email,
+        recovery_key: query.token as string,
+        email: query.email as string,
         new_password: "",
+        confirm_password: "",
         passwordValid: true,
+        confirmPasswordValid: true,
         fileValid: true,
         validated: false,
     });
+
     const secret = useSignal<Uint8Array>(new Uint8Array());
     const showModal = useSignal(false);
+    const showNoFileWarning = useSignal(false);
+    const acknowledgeNoFile = useSignal(false);
 
     const validateForm = () => {
         let ret = true;
         let passworValid = true;
+        let confirmValid = true;
 
         if (!PASSWORD_PATTERN.test(state.new_password)) {
             passworValid = false;
             ret = false;
         }
 
+        if (state.confirm_password !== state.new_password) {
+            confirmValid = false;
+            ret = false;
+        }
+
+        // If user touched file input and it became invalid, block submit.
         if (!state.fileValid) {
             ret = false;
         }
 
-        setState({...state, validated: true, passwordValid: passworValid});
+        setState({...state, validated: true, passwordValid: passworValid, confirmPasswordValid: confirmValid});
 
         return ret;
     }
 
-    const onSubmit = async (e: SubmitEvent) => {
-        e.preventDefault();
-
-        if (!validateForm()) {
-            e.stopPropagation();
-            return;
-        }
-
+    const executeRecovery = async () => {
         const salt1 = await get_salt();
         const secret_salt = concat_salts(salt1);
         const secret_key = await generate_hash(state.new_password, secret_salt, crypto_secretbox_KEYBYTES);
@@ -84,7 +89,7 @@ export function Recovery() {
 
         let secret_reuse: boolean;
         let encrypted_secret: Uint8Array;
-        if (secret.value.length == 0) {
+        if (secret.value.length === 0) {
             const key_pair = crypto_box_keypair();
             const new_secret = key_pair.privateKey;
             secret.value = new Uint8Array(new_secret);
@@ -114,8 +119,52 @@ export function Recovery() {
         }
     }
 
+    const onSubmit = async (e: SubmitEvent) => {
+        e.preventDefault();
+
+        if (!validateForm()) {
+            e.stopPropagation();
+            return;
+        }
+
+        // If no recovery file was provided, ask for explicit confirmation first.
+        if (secret.value.length === 0) {
+            showNoFileWarning.value = true;
+            return;
+        }
+
+        await executeRecovery();
+    }
+
     return <>
-    <RecoveryDataComponent email={state.email} secret={secret.value as Uint8Array} show={showModal} />
+        {/* Strong confirmation if no recovery file is provided */}
+        <Modal show={showNoFileWarning.value} onHide={() => { showNoFileWarning.value = false; }} centered>
+            <Modal.Header closeButton>
+                <Modal.Title>
+                    {t("recovery.no_file_warning_heading")}
+                </Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                <p>{t("recovery.no_file_warning_body")}</p>
+                <Form.Check
+                    type="checkbox"
+                    id="no-file-ack"
+                    label={t("recovery.no_file_warning_ack")}
+                    checked={acknowledgeNoFile.value}
+                    onChange={(e: any) => { acknowledgeNoFile.value = e.target.checked; }}
+                />
+            </Modal.Body>
+            <Modal.Footer>
+                <Button variant="outline-secondary" onClick={() => { showNoFileWarning.value = false; }}>
+                    {t("recovery.no_file_warning_cancel")}
+                </Button>
+                <Button variant="danger" disabled={!acknowledgeNoFile.value} onClick={async () => { showNoFileWarning.value = false; acknowledgeNoFile.value = false; await executeRecovery(); }}>
+                    {t("recovery.no_file_warning_proceed")}
+                </Button>
+            </Modal.Footer>
+        </Modal>
+
+        <RecoveryDataComponent email={state.email} secret={secret.value as Uint8Array} show={showModal} />
 
         <Card className="p-0 col-10 col-lg-5 col-xl-3">
             <Form onSubmit={(e: SubmitEvent) => onSubmit(e)} noValidate>
@@ -133,6 +182,14 @@ export function Recovery() {
                             setState({...state, new_password: e});
                         }} />
                     </Form.Group>
+                    <Form.Group className="mb-3" controlId="confirmPassword">
+                        <Form.Label>
+                            {t("recovery.confirm_password")}
+                        </Form.Label>
+                        <PasswordComponent isInvalid={!state.confirmPasswordValid} invalidMessage={t("recovery.confirm_password_error_message")} onChange={(e) => {
+                            setState({...state, confirm_password: e});
+                        }} />
+                    </Form.Group>
                     <Form.Group className="mb-3" controlId="recoveryFile">
                         <Form.Label>
                             {t("recovery.recovery_file")}

frontend/src/pages/__tests__/Recovery.test.tsx

@@ -0,0 +1,73 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/preact';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+vi.mock('../../components/Alert', async () => {
+  return {
+    showAlert: vi.fn(),
+  };
+});
+
+vi.mock('../../components/RecoveryDataComponent', async () => {
+  return {
+    RecoveryDataComponent: () => null,
+  };
+});
+
+vi.mock('preact-iso', async () => ({
+  useLocation: () => ({ route: vi.fn(), query: { token: 'tok', email: '[email protected]' } }),
+}));
+
+// Mock utils to avoid crypto and network
+vi.mock('../../utils', async () => {
+  return {
+    AppState: { LoggedOut: 2 },
+    PASSWORD_PATTERN: /.+/,
+    concat_salts: vi.fn((a: Uint8Array) => a),
+    fetchClient: { POST: vi.fn().mockResolvedValue({ response: { status: 200 } }) },
+    generate_hash: vi.fn(async () => new Uint8Array([1,2,3])),
+    generate_random_bytes: vi.fn(() => new Uint8Array([4,5,6])),
+    get_salt: vi.fn(async () => new Uint8Array([7,8,9])),
+    loggedIn: { value: 0 },
+  };
+});
+
+vi.mock('libsodium-wrappers', async () => ({
+  crypto_box_keypair: () => ({ publicKey: new Uint8Array([1]), privateKey: new Uint8Array([2,3,4]) }),
+  crypto_secretbox_KEYBYTES: 32,
+  crypto_secretbox_NONCEBYTES: 24,
+  crypto_secretbox_easy: vi.fn(() => new Uint8Array([9,9,9]))
+}));
+
+import { Recovery } from '../Recovery';
+
+describe('Recovery page', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('shows warning modal when submitting without recovery file', async () => {
+    render(<Recovery />);
+
+    // Fill password and confirm password to satisfy validation
+    const passInputs = screen.getAllByTestId('password-input') as HTMLInputElement[];
+    fireEvent.change(passInputs[0], { target: { value: 'ValidPass123!' } });
+    fireEvent.change(passInputs[1], { target: { value: 'ValidPass123!' } });
+
+        const form = screen.getByTestId('form');
+    fireEvent.submit(form);
+
+    // Modal should appear with heading and proceed button
+    await waitFor(() => {
+      expect(screen.getByText('recovery.no_file_warning_heading')).toBeTruthy();
+      expect(screen.getByText('recovery.no_file_warning_proceed')).toBeTruthy();
+    });
+
+    const proceed = screen.getByText('recovery.no_file_warning_proceed') as HTMLButtonElement;
+    expect(proceed.disabled).toBe(true);
+
+    // Check the acknowledgment checkbox to enable proceed
+    const ack = screen.getByLabelText('recovery.no_file_warning_ack');
+    fireEvent.click(ack);
+    expect(proceed.disabled).toBe(false);
+  });
+});