frontend: add component to resend verification token. fix #212

Author: ffreddow

frontend/src/components/RecoveryDataComponent.tsx

@@ -56,7 +56,6 @@ export function RecoveryDataComponent(props: RecoveryDataProps) {
             <Modal.Footer>
                 <Button variant={saved.value ? "primary" : "danger"} onClick={() => {
                     props.show.value = false;
-                    window.location.replace("/");
                 }}>{t("close")}</Button>
             </Modal.Footer>
     </Modal>

frontend/src/components/Register.tsx

@@ -7,6 +7,7 @@ import { Trans, useTranslation } from "react-i18next";
 import i18n from "../i18n";
 import { PasswordComponent } from "./PasswordComponent";
 import { RecoveryDataComponent } from "./RecoveryDataComponent";
+import { ResendVerification } from "./ResendVerification";
 import { Signal, signal } from "@preact/signals";
 import { privacy_notice, terms_of_use } from "links";
 
@@ -37,6 +38,7 @@ interface RegisterState {
     recoverySafed: boolean,
     encryptedSecret: Uint8Array,
     secret: Uint8Array,
+    registrationSuccess: boolean,
 }
 
 export class Register extends Component<{}, RegisterState> {
@@ -59,6 +61,7 @@ export class Register extends Component<{}, RegisterState> {
             recoverySafed: false,
             encryptedSecret: new Uint8Array(),
             secret: new Uint8Array(),
+            registrationSuccess: false,
         }
 
         this.showModal = signal(false);
@@ -202,18 +205,18 @@ export class Register extends Component<{}, RegisterState> {
             showAlert(text, "danger");
             return;
         }
-
-        this.setState({encryptedSecret: new Uint8Array(encrypted_secret), secret: keypair.privateKey});
-        this.showModal.value = true;
+        this.setState({
+            encryptedSecret: new Uint8Array(encrypted_secret),
+            secret: keypair.privateKey,
+            registrationSuccess: true,
+        });
+        this.showModal.value = true; // keep existing behavior of showing recovery modal
     }
 
     render() {
         const {t} = useTranslation("", {useSuspense: false, keyPrefix: "register"})
 
-        return (<>
-            <RecoveryDataComponent email={this.state.email} secret={this.state.secret} show={this.showModal} />
-
-            <Form onSubmit={(e: SubmitEvent) => this.onSubmit(e)} noValidate>
+        const form = <Form onSubmit={(e: SubmitEvent) => this.onSubmit(e)} noValidate>
                 <Form.Group className="mb-3" controlId="registerName">
                     <Form.Label>{t("name")}</Form.Label>
                     <Form.Control name="Name" type="text" placeholder="John Doe" value={this.state.name} isInvalid={!this.state.nameValid} onChange={(e) => {
@@ -263,7 +266,14 @@ export class Register extends Component<{}, RegisterState> {
                 <Button variant="primary" type="submit">
                     {t("register")}
                 </Button>
-            </Form>
+            </Form>;
+
+        return (<>
+            <RecoveryDataComponent email={this.state.email} secret={this.state.secret} show={this.showModal} />
+
+            { !this.state.registrationSuccess && form}
+
+            { this.state.registrationSuccess && this.state.email && <ResendVerification email={this.state.email} /> }
         </>)
     }
 }

frontend/src/components/ResendVerification.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'preact/hooks';
+import { Button, Alert, Spinner } from 'react-bootstrap';
+import { fetchClient } from '../utils';
+import { useTranslation } from 'react-i18next';
+
+interface Props { email: string; }
+
+export function ResendVerification(props: Props) {
+  const { t, i18n } = useTranslation('', { useSuspense: false });
+  const [sending, setSending] = useState(false);
+  const [done, setDone] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function resend() {
+    if (sending) return;
+    setSending(true);
+    setError(null);
+    const { response } = await fetchClient.POST('/auth/resend_verification', { body: { email: props.email }, headers: { 'X-Lang': i18n.language }});
+    if (response.status === 200) {
+      setDone(true);
+    } else {
+      setError(t('register.resend_error'));
+    }
+    setSending(false);
+  }
+
+  if (!props.email) return null;
+
+  return (
+    <div className="mt-3" data-testid="resend-verification">
+      {done && <Alert variant="success" data-testid="resend-success">{t('register.resend_success')}</Alert>}
+      {error && <Alert variant="danger" data-testid="resend-error">{error}</Alert>}
+      {!done && <Button variant="secondary" size="sm" onClick={resend} disabled={sending} data-testid="resend-button">
+        {sending && <Spinner as="span" animation="border" size="sm" className="me-1" />}
+        {t('register.resend_verification')}
+      </Button>}
+    </div>
+  );
+}

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

@@ -334,6 +334,31 @@ describe('Register Component', () => {
     });
   });
 
+  it('renders ResendVerification component after successful registration', async () => {
+    render(<Register />);
+
+    const nameInput = screen.getByRole('textbox', { name: 'name' });
+    const emailInput = screen.getByRole('textbox', { name: 'email' });
+    const passwordInput = screen.getByRole('textbox', { name: 'password' });
+    const confirmPasswordInput = screen.getByRole('textbox', { name: 'confirm_password' });
+    const checkboxes = screen.getAllByRole('checkbox');
+
+    fireEvent.change(nameInput, { target: { value: 'Jane Doe' } });
+    fireEvent.change(emailInput, { target: { value: '[email protected]' } });
+    fireEvent.change(passwordInput, { target: { value: 'ValidPass123!' } });
+    fireEvent.change(confirmPasswordInput, { target: { value: 'ValidPass123!' } });
+    fireEvent.click(checkboxes[0]);
+    fireEvent.click(checkboxes[1]);
+
+    const submitButton = screen.getByTestId('submit-button');
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      // ResendVerification wrapper div
+      expect(screen.getByTestId('resend-verification')).toBeTruthy();
+    });
+  });
+
   it('handles registration error correctly', async () => {
     mockUtils.fetchClient.POST.mockResolvedValue({
       response: { status: 400 },

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

@@ -0,0 +1,97 @@
+import { render, fireEvent, waitFor, screen } from '@testing-library/preact';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { ResendVerification } from '../ResendVerification';
+
+// Mock utils (fetchClient) – path resolution to actual file used by component
+vi.mock('../../utils', () => ({
+  fetchClient: {
+    POST: vi.fn(),
+  },
+}));
+
+// Mock i18n
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+    i18n: { language: 'en' },
+  }),
+}));
+
+describe('ResendVerification', () => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let mockUtils: any;
+
+  beforeEach(async () => {
+    vi.clearAllMocks();
+    mockUtils = await import('../../utils');
+  });
+
+  it('returns null when email prop is empty', () => {
+    const { container } = render(<ResendVerification email="" />);
+    expect(container.firstChild).toBeNull();
+    expect(screen.queryByTestId('resend-verification')).toBeNull();
+  });
+
+  it('renders resend button when email provided', () => {
+    render(<ResendVerification email="[email protected]" />);
+    expect(screen.getByTestId('submit-button')).toBeTruthy();
+  });
+
+  it('calls API and shows success alert on 200', async () => {
+    mockUtils.fetchClient.POST.mockResolvedValue({ response: { status: 200 } });
+
+    render(<ResendVerification email="[email protected]" />);
+  const btn = screen.getByTestId('submit-button');
+    fireEvent.click(btn);
+
+    await waitFor(() => {
+      expect(mockUtils.fetchClient.POST).toHaveBeenCalledWith('/auth/resend_verification', {
+        body: { email: '[email protected]' },
+        headers: { 'X-Lang': 'en' },
+      });
+      expect(screen.getByTestId('resend-success')).toBeTruthy();
+      // Button should disappear after success
+  expect(screen.queryByTestId('submit-button')).toBeNull();
+    });
+  });
+
+  it('calls API and shows error alert on non-200', async () => {
+    mockUtils.fetchClient.POST.mockResolvedValue({ response: { status: 500 } });
+
+    render(<ResendVerification email="[email protected]" />);
+  const btn = screen.getByTestId('submit-button');
+    fireEvent.click(btn);
+
+    await waitFor(() => {
+      expect(mockUtils.fetchClient.POST).toHaveBeenCalledTimes(1);
+      expect(screen.getByTestId('resend-error')).toBeTruthy();
+      // Button still present (still can retry) since done=false
+  expect(screen.getByTestId('submit-button')).toBeTruthy();
+    });
+  });
+
+  it('shows spinner and prevents double submission while sending', async () => {
+    let resolvePromise: (value: unknown) => void;
+    const pending = new Promise(resolve => { resolvePromise = resolve; });
+    mockUtils.fetchClient.POST.mockReturnValue(pending);
+
+    render(<ResendVerification email="[email protected]" />);
+  const btn = screen.getByTestId('submit-button');
+    fireEvent.click(btn);
+    // Immediate second click attempt
+    fireEvent.click(btn);
+
+    expect(mockUtils.fetchClient.POST).toHaveBeenCalledTimes(1);
+
+    // Spinner should be visible while pending (mocked Spinner renders 'Loading...')
+    expect(screen.getByText('Loading...')).toBeTruthy();
+
+    // Finish request with non-success to keep button
+    // @ts-expect-error resolvePromise defined above
+    resolvePromise({ response: { status: 500 } });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('resend-error')).toBeTruthy();
+    });
+  });
+});

frontend/src/locales/de.ts

@@ -114,6 +114,9 @@ export const de ={
         "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.",
         "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"
+    ,"resend_success": "Bestätigungs-E-Mail gesendet (falls noch nicht bestätigt)."
+    ,"resend_error": "Bestätigungs-E-Mail konnte nicht gesendet werden. Bitte versuche es später erneut."
     },
     "login": {
         "password_recovery": "Passwort zurücksetzen",

frontend/src/locales/en.ts

@@ -114,6 +114,9 @@ export const en = {
         "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.",
         "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"
+    ,"resend_success": "Verification email sent (if the address is not yet verified)."
+    ,"resend_error": "Could not resend verification email. Please try again later."
     },
     "login": {
         "password_recovery": "Password reset",

frontend/src/schema.d.ts

@@ -139,6 +139,23 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/auth/resend_verification": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Resend a verification email if user exists and not verified yet. */
+        post: operations["resend_verification"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/auth/start_recovery": {
         parameters: {
             query?: never;
@@ -663,6 +680,9 @@ export interface components {
             secret_nonce: number[];
             secret_salt: number[];
         };
+        ResendSchema: {
+            email: string;
+        };
         ResponseAuthorizationToken: {
             /** Format: int64 */
             created_at: number;
@@ -682,8 +702,9 @@ export interface components {
         SendChargelogSchema: {
             chargelog: number[];
             charger_uuid: string;
+            filename: string;
             password: string;
-            user_email: string;
+            user_uuid: string;
         };
         /** @enum {string} */
         TokenType: "Recovery" | "Verification";
@@ -949,6 +970,35 @@ export interface operations {
             };
         };
     };
+    resend_verification: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["ResendSchema"];
+            };
+        };
+        responses: {
+            /** @description Verification email resent (or already verified but hidden). */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description User not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
     start_recovery: {
         parameters: {
             query: {