frontend/RecoveryDataComponent: be more penetrant

Be more penetrant to force the user to download their recovery file
fix #225

Author: ffreddow

frontend/src/components/RecoveryDataComponent.tsx

@@ -1,6 +1,6 @@
 import { Signal, useSignal } from "@preact/signals";
 import { Base64 } from "js-base64";
-import { Button, Modal } from "react-bootstrap";
+import { Button, Modal, Form } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 
 interface RecoveryDataProps {
@@ -36,27 +36,56 @@ export async function saveRecoveryData(secret: Uint8Array, email: string) {
 export function RecoveryDataComponent(props: RecoveryDataProps) {
     const {t} = useTranslation("", {useSuspense: false, keyPrefix: "register"});
     const saved = useSignal(false);
+    const confirmed = useSignal(false);
 
     return <Modal show={props.show.value} onHide={() => {
-                    props.show.value = false;
-                    window.location.replace("/");
+                    // Only allow closing if user has saved and confirmed
+                    if (saved.value && confirmed.value) {
+                        props.show.value = false;
+                        window.location.replace("/");
+                    }
                 }}>
-            <Modal.Header closeButton>
+            <Modal.Header closeButton={saved.value && confirmed.value}>
                 <Modal.Title>{t("save_recovery_data")}</Modal.Title>
             </Modal.Header>
 
             <Modal.Body>
                 <p className="mb-3">{t("save_recovery_data_text")}</p>
-                <Button variant="primary" onClick={() => {
-                    saveRecoveryData(props.secret, props.email);
-                    saved.value = true;
-                }}>{t("save")}</Button>
+                <div className="mb-3">
+                    <Button 
+                        variant="primary" 
+                        size="lg"
+                        className="w-100"
+                        onClick={() => {
+                            saveRecoveryData(props.secret, props.email);
+                            saved.value = true;
+                        }}>
+                        {t("save")}
+                    </Button>
+                </div>
+                {saved.value && (
+                    <Form.Check
+                        type="checkbox"
+                        id="recovery-confirmation"
+                        label={t("save_recovery_data_confirmation")}
+                        checked={confirmed.value}
+                        onChange={(e: any) => { confirmed.value = e.target.checked; }}
+                        className="mt-3"
+                    />
+                )}
             </Modal.Body>
 
             <Modal.Footer>
-                <Button variant={saved.value ? "primary" : "danger"} onClick={() => {
-                    props.show.value = false;
-                }}>{t("close")}</Button>
+                <Button 
+                    variant={saved.value && confirmed.value ? "primary" : "secondary"} 
+                    disabled={!saved.value || !confirmed.value}
+                    onClick={() => {
+                        if (saved.value && confirmed.value) {
+                            props.show.value = false;
+                        }
+                    }}>
+                    {t("close")}
+                </Button>
             </Modal.Footer>
     </Modal>
 }

frontend/src/components/__tests__/RecoveryDataComponent.test.tsx

@@ -10,7 +10,7 @@ describe('RecoveryDataComponent', () => {
     vi.clearAllMocks();
   });
 
-  it('renders modal content when shown and triggers save', async () => {
+  it('renders modal content when shown and triggers save with confirmation', async () => {
     const mod = await importComponent();
     const { RecoveryDataComponent } = mod;
 
@@ -25,34 +25,65 @@ describe('RecoveryDataComponent', () => {
     const footer = screen.getByTestId('modal-footer');
     const closeButton = within(footer).getByRole('button', { name: 'close' });
 
-    expect(closeButton.className).toContain('btn-danger');
+    // Initially close button should be disabled
+    expect(closeButton).toBeDisabled();
+    expect(closeButton.className).toContain('btn-secondary');
 
     const saveButton = screen.getByRole('button', { name: 'save' });
     fireEvent.click(saveButton);
 
+    // After saving, confirmation checkbox should appear
     await waitFor(() => {
+      expect(screen.getByLabelText('save_recovery_data_confirmation')).toBeInTheDocument();
+    });
+
+    // Close button should still be disabled until checkbox is checked
+    expect(closeButton).toBeDisabled();
+
+    // Check the confirmation checkbox
+    const confirmationCheckbox = screen.getByLabelText('save_recovery_data_confirmation');
+    fireEvent.click(confirmationCheckbox);
+
+    await waitFor(() => {
+      expect(closeButton).not.toBeDisabled();
       expect(closeButton.className).toContain('btn-primary');
     });
 
     fireEvent.click(closeButton);
     expect(show.value).toBe(false);
   });
 
-  it('calls onHide and navigates on modal close', async () => {
-  const { RecoveryDataComponent } = await importComponent();
+  it('prevents closing modal until file is saved and confirmed', async () => {
+    const { RecoveryDataComponent } = await importComponent();
 
     const show = signal(true);
 
     render(<RecoveryDataComponent email={'[email protected]'} secret={new Uint8Array()} show={show} />);
 
-  const closeButtons = screen.getAllByTestId('modal-close');
-  const bottomClose = closeButtons[closeButtons.length - 1];
-  fireEvent.click(bottomClose);
+    // Try to close the modal without saving/confirming - should not close
+    const closeButton = screen.getByRole('button', { name: 'close' });
+    fireEvent.click(closeButton);
+
+    // Modal should still be open
+    expect(show.value).toBe(true);
 
+    // Save the file first
+    const saveButton = screen.getByRole('button', { name: 'save' });
+    fireEvent.click(saveButton);
+
+    // Check the confirmation checkbox
     await waitFor(() => {
-      expect(show.value).toBe(false);
-      expect(window.location.replace).toHaveBeenCalledWith('/');
+      const confirmationCheckbox = screen.getByLabelText('save_recovery_data_confirmation');
+      fireEvent.click(confirmationCheckbox);
     });
+
+    // Now try to close - should work
+    await waitFor(() => {
+      expect(closeButton).not.toBeDisabled();
+    });
+    
+    fireEvent.click(closeButton);
+    expect(show.value).toBe(false);
   });
 });
 

frontend/src/locales/de.ts

@@ -130,6 +130,7 @@ export const de ={
         "save_recovery_data": "Wiederhestellungsdatei speichern",
         "save": "Speichern",
         "save_recovery_data_text": "Da die Zugangsdaten für die Geräte nur mithilfe des korrekten Passworts entschlüsselt werden können brauchst du, falls du dein Passwort vergessen solltest, diese Datei um den Zugang zu deinen Geräten wiederherzustellen. Bewahre diese Datei sicher und für niemanden sonst zugänglich auf, da sie mit deinem Passwort gleichzustellen ist.",
+        "save_recovery_data_confirmation": "Ich habe die Wiederherstellungsdatei heruntergeladen und sicher gespeichert",
         "close": "Schließen",
         "registration_successful": "Die Registrierung war erfolgreich. Du solltest innerhalb der nächsten paar Minuten eine Email mit einem Bestätigungslink erhalten"
     ,"resend_verification": "Bestätigungs-E-Mail erneut senden"

frontend/src/locales/en.ts

@@ -130,6 +130,7 @@ export const en = {
         "save_recovery_data": "Save recovery file",
         "save": "Save",
         "save_recovery_data_text": "Since the access data for the devices can only be decrypted with the correct password, you need this file to restore access to your devices if you forget your password. Keep this file safe and inaccessible to others, as it is equivalent to your password.",
+        "save_recovery_data_confirmation": "I have downloaded and safely stored the recovery file",
         "close": "Close",
         "registration_successful": "Registration was successful. You should receive an email with a confirmation link within the next few minutes."
     ,"resend_verification": "Resend verification email"