fix(security): harden password recovery with usable eight-character codes (#2477)

Use eight securely random recovery-code characters with concurrency-safe online throttling. Preserve existing keys and verify recovery through browser and real SQLite integration tests.

Co-authored-by: zhangjinpeng@mail.tuchong.com <zhangjinpeng@mail.tuchong.com>
Co-authored-by: dadachann <185672915+dadachann@users.noreply.github.com>

web/src/app/reset-password/page.tsx

@@ -7,12 +7,6 @@ import {
   CardTitle,
   CardDescription,
 } from '@/components/ui/card';
-import {
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSlot,
-  InputOTPSeparator,
-} from '@/components/ui/input-otp';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import * as z from 'zod';
@@ -28,14 +22,12 @@ import {
 import { useState } from 'react';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import { useNavigate } from 'react-router-dom';
-import { Mail, Lock, ArrowLeft } from 'lucide-react';
+import { Mail, Lock, ArrowLeft, KeyRound } from 'lucide-react';
 import { toast } from 'sonner';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { ThemeToggle } from '@/components/ui/theme-toggle';
 
-const REGEXP_ONLY_DIGITS_AND_CHARS = /^[0-9a-zA-Z]+$/;
-
 const formSchema = (t: (key: string) => string) =>
   z.object({
     email: z.string().email(t('common.invalidEmail')),
@@ -136,28 +128,17 @@ export default function ResetPassword() {
                       {t('resetPassword.recoveryKeyDescription')}
                     </FormDescription>
                     <FormControl>
-                      <InputOTP
-                        maxLength={6}
-                        value={field.value}
-                        pattern={REGEXP_ONLY_DIGITS_AND_CHARS.source}
-                        onChange={(value) => {
-                          // 将输入的值转换为大写
-                          const upperValue = value.toUpperCase();
-                          field.onChange(upperValue);
-                        }}
-                      >
-                        <InputOTPGroup>
-                          <InputOTPSlot index={0} />
-                          <InputOTPSlot index={1} />
-                          <InputOTPSlot index={2} />
-                        </InputOTPGroup>
-                        <InputOTPSeparator />
-                        <InputOTPGroup>
-                          <InputOTPSlot index={3} />
-                          <InputOTPSlot index={4} />
-                          <InputOTPSlot index={5} />
-                        </InputOTPGroup>
-                      </InputOTP>
+                      {/* Recovery keys are case-sensitive base64url strings; send them verbatim */}
+                      <div className="relative">
+                        <KeyRound className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
+                        <Input
+                          placeholder={t('resetPassword.enterRecoveryKey')}
+                          className="pl-10 font-mono"
+                          autoComplete="off"
+                          spellCheck={false}
+                          {...field}
+                        />
+                      </div>
                     </FormControl>
                     <FormMessage />
                   </FormItem>

web/tests/e2e/reset-password.spec.ts

@@ -0,0 +1,122 @@
+import { expect, test, type Page } from '@playwright/test';
+
+import { installLangBotApiMocks } from './fixtures/langbot-api';
+
+const resetEndpoint = '**/api/v1/user/reset-password';
+const email = 'reset-password@example.com';
+const newPassword = 'Regression-password-2026!';
+const successMessage = 'Password reset successfully, please login';
+const failureMessage =
+  'Password reset failed, please check your email and recovery key';
+
+async function fillResetForm(page: Page, recoveryKey: string) {
+  await page.goto('/reset-password');
+  await page.getByPlaceholder('Enter email address').fill(email);
+  const recoveryInput = page.getByPlaceholder('Enter recovery key');
+  await recoveryInput.fill(recoveryKey);
+  await expect(recoveryInput).toHaveValue(recoveryKey);
+  await page.getByPlaceholder('Enter new password').fill(newPassword);
+}
+
+test.beforeEach(async ({ page }) => {
+  await installLangBotApiMocks(page, { authenticated: false });
+});
+
+const recoveryKeys = [
+  { name: 'eight-character recovery code', value: '2A3B4C5D' },
+  { name: 'six-character legacy recovery key', value: 'ABC123' },
+  {
+    name: '43-character mixed-case base64url recovery key',
+    value: 'aB-_'.repeat(10) + 'xYz',
+  },
+];
+
+for (const { name, value } of recoveryKeys) {
+  test(`submits the ${name} verbatim and returns to login`, async ({
+    page,
+  }) => {
+    const requests: { method: string; body: unknown }[] = [];
+    await page.route(resetEndpoint, async (route) => {
+      requests.push({
+        method: route.request().method(),
+        body: route.request().postDataJSON(),
+      });
+      await route.fulfill({
+        status: 200,
+        json: { code: 0, msg: 'ok', data: { user: email } },
+      });
+    });
+
+    await fillResetForm(page, value);
+    await page
+      .getByRole('button', { name: 'Reset Password', exact: true })
+      .click();
+
+    await expect(page).toHaveURL(/\/login$/);
+    await expect(page.getByText(successMessage, { exact: true })).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: 'Login with password', exact: true }),
+    ).toBeVisible();
+    expect(requests).toEqual([
+      {
+        method: 'POST',
+        body: { user: email, recovery_key: value, new_password: newPassword },
+      },
+    ]);
+    await expect(page.getByText(failureMessage, { exact: true })).toHaveCount(
+      0,
+    );
+  });
+}
+
+test('HTTP 429 shows failure, stays on reset-password, and reenables submission', async ({
+  page,
+}) => {
+  const recoveryKey = '2A3B4C5D';
+  const requests: { method: string; body: unknown }[] = [];
+  let releaseResponse!: () => void;
+  const responseGate = new Promise<void>((resolve) => {
+    releaseResponse = resolve;
+  });
+  await page.route(resetEndpoint, async (route) => {
+    requests.push({
+      method: route.request().method(),
+      body: route.request().postDataJSON(),
+    });
+    await responseGate;
+    await route.fulfill({
+      status: 429,
+      json: { code: -1, msg: 'Too many attempts, try again later' },
+    });
+  });
+
+  await fillResetForm(page, recoveryKey);
+  const submit = page.locator('button[type="submit"]');
+  await submit.click();
+  try {
+    await expect.poll(() => requests.length).toBe(1);
+    await expect(submit).toBeDisabled();
+    await expect(submit).toHaveText('Resetting...');
+  } finally {
+    releaseResponse();
+  }
+
+  await expect(page.getByText(failureMessage, { exact: true })).toBeVisible();
+  await expect(submit).toBeEnabled();
+  await expect(submit).toHaveText('Reset Password');
+  await expect(page).toHaveURL(/\/reset-password$/);
+  await expect(page.getByText(successMessage, { exact: true })).toHaveCount(0);
+  await expect(page.getByPlaceholder('Enter recovery key')).toHaveValue(
+    recoveryKey,
+  );
+  expect(requests).toEqual([
+    {
+      method: 'POST',
+      body: {
+        user: email,
+        recovery_key: recoveryKey,
+        new_password: newPassword,
+      },
+    },
+  ]);
+});