Feat/reset password (#1566)

* feat: reset password with recovery key

* perf: formatting and multi language

pkg/api/http/controller/groups/user.py

@@ -1,5 +1,6 @@
 import quart
 import argon2
+import asyncio
 
 from .. import group
 
@@ -40,3 +41,29 @@ class UserRouterGroup(group.RouterGroup):
             token = await self.ap.user_service.generate_jwt_token(user_email)
 
             return self.success(data={'token': token})
+
+        @self.route('/reset-password', methods=['POST'], auth_type=group.AuthType.NONE)
+        async def _() -> str:
+            json_data = await quart.request.json
+
+            user_email = json_data['user']
+            recovery_key = json_data['recovery_key']
+            new_password = json_data['new_password']
+
+            # hard sleep 3s for security
+            await asyncio.sleep(3)
+
+            if not await self.ap.user_service.is_initialized():
+                return self.http_status(400, -1, 'system not initialized')
+
+            user_obj = await self.ap.user_service.get_user_by_email(user_email)
+
+            if user_obj is None:
+                return self.http_status(400, -1, 'user not found')
+
+            if recovery_key != self.ap.instance_config.data['system']['recovery_key']:
+                return self.http_status(403, -1, 'invalid recovery key')
+
+            await self.ap.user_service.reset_password(user_email, new_password)
+
+            return self.success(data={'user': user_email})

pkg/api/http/service/user.py

@@ -73,3 +73,12 @@ class UserService:
         jwt_secret = self.ap.instance_config.data['system']['jwt']['secret']
 
         return jwt.decode(token, jwt_secret, algorithms=['HS256'])['user']
+
+    async def reset_password(self, user_email: str, new_password: str) -> None:
+        ph = argon2.PasswordHasher()
+
+        hashed_password = ph.hash(new_password)
+
+        await self.ap.persistence_mgr.execute_async(
+            sqlalchemy.update(user.User).where(user.User.user == user_email).values(password=hashed_password)
+        )

pkg/core/stages/genkeys.py

@@ -15,3 +15,10 @@ class GenKeysStage(stage.BootingStage):
         if not ap.instance_config.data['system']['jwt']['secret']:
             ap.instance_config.data['system']['jwt']['secret'] = secrets.token_hex(16)
             await ap.instance_config.dump_config()
+
+        if 'recovery_key' not in ap.instance_config.data['system']:
+            ap.instance_config.data['system']['recovery_key'] = ''
+
+        if not ap.instance_config.data['system']['recovery_key']:
+            ap.instance_config.data['system']['recovery_key'] = secrets.token_hex(3).upper()
+            await ap.instance_config.dump_config()

templates/config.yaml

@@ -15,6 +15,7 @@ proxy:
     http: ''
     https: ''
 system:
+    recovery_key: ''
     jwt:
         expire: 604800
         secret: ''

web/package.json

@@ -40,6 +40,7 @@
     "clsx": "^2.1.1",
     "i18next": "^25.1.2",
     "i18next-browser-languagedetector": "^8.1.0",
+    "input-otp": "^1.4.2",
     "lodash": "^4.17.21",
     "lucide-react": "^0.507.0",
     "next": "15.2.4",

web/src/app/infra/http/HttpClient.ts

@@ -492,6 +492,18 @@ class HttpClient {
   public checkUserToken(): Promise<ApiRespUserToken> {
     return this.get('/api/v1/user/check-token');
   }
+
+  public resetPassword(
+    user: string,
+    recoveryKey: string,
+    newPassword: string,
+  ): Promise<{ user: string }> {
+    return this.post('/api/v1/user/reset-password', {
+      user,
+      recovery_key: recoveryKey,
+      new_password: newPassword,
+    });
+  }
 }
 
 const getBaseURL = (): string => {

web/src/app/login/page.tsx

@@ -34,6 +34,7 @@ import langbotIcon from '@/app/assets/langbot-logo.webp';
 import { toast } from 'sonner';
 import { useTranslation } from 'react-i18next';
 import i18n from '@/i18n';
+import Link from 'next/link';
 
 const formSchema = (t: (key: string) => string) =>
   z.object({
@@ -209,7 +210,16 @@ export default function Login() {
                 name="password"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>{t('common.password')}</FormLabel>
+                    <div className="flex justify-between">
+                      <FormLabel>{t('common.password')}</FormLabel>
+                      <Link
+                        href="/reset-password"
+                        className="text-sm text-blue-500"
+                      >
+                        {t('common.forgotPassword')}
+                      </Link>
+                    </div>
+
                     <FormControl>
                       <div className="relative">
                         <Lock className="absolute left-3 top-3 h-4 w-4 text-gray-400" />

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

@@ -0,0 +1,15 @@
+'use client';
+
+import React from 'react';
+
+export default function ResetPasswordLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <div className="min-h-screen bg-background">
+      <main className="min-h-screen">{children}</main>
+    </div>
+  );
+}

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

@@ -0,0 +1,205 @@
+'use client';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  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';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  FormDescription,
+} from '@/components/ui/form';
+import { useState } from 'react';
+import { httpClient } from '@/app/infra/http/HttpClient';
+import { useRouter } from 'next/navigation';
+import { Mail, Lock, ArrowLeft } from 'lucide-react';
+import { toast } from 'sonner';
+import { useTranslation } from 'react-i18next';
+import Link from 'next/link';
+
+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')),
+    recoveryKey: z.string().min(1, t('resetPassword.recoveryKeyRequired')),
+    newPassword: z.string().min(1, t('resetPassword.newPasswordRequired')),
+  });
+
+export default function ResetPassword() {
+  const router = useRouter();
+  const { t } = useTranslation();
+  const [isResetting, setIsResetting] = useState(false);
+
+  const form = useForm<z.infer<ReturnType<typeof formSchema>>>({
+    resolver: zodResolver(formSchema(t)),
+    defaultValues: {
+      email: '',
+      recoveryKey: '',
+      newPassword: '',
+    },
+  });
+
+  function onSubmit(values: z.infer<ReturnType<typeof formSchema>>) {
+    handleResetPassword(values.email, values.recoveryKey, values.newPassword);
+  }
+
+  function handleResetPassword(
+    email: string,
+    recoveryKey: string,
+    newPassword: string,
+  ) {
+    setIsResetting(true);
+    httpClient
+      .resetPassword(email, recoveryKey, newPassword)
+      .then((res) => {
+        console.log('reset password success: ', res);
+        toast.success(t('resetPassword.resetSuccess'));
+        router.push('/login');
+      })
+      .catch((err) => {
+        console.log('reset password error: ', err);
+        toast.error(t('resetPassword.resetFailed'));
+      })
+      .finally(() => {
+        setIsResetting(false);
+      });
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <Card className="w-[375px]">
+        <CardHeader>
+          <div className="flex justify-between items-center mb-6">
+            <Link
+              href="/login"
+              className="flex items-center text-sm text-gray-600 hover:text-gray-900 transition-colors"
+            >
+              <ArrowLeft className="h-4 w-4 mr-1" />
+              {t('resetPassword.backToLogin')}
+            </Link>
+          </div>
+          <CardTitle className="text-2xl text-center">
+            {t('resetPassword.title')}
+          </CardTitle>
+          <CardDescription className="text-center">
+            {t('resetPassword.description')}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('common.email')}</FormLabel>
+                    <FormControl>
+                      <div className="relative">
+                        <Mail className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
+                        <Input
+                          placeholder={t('common.enterEmail')}
+                          className="pl-10"
+                          {...field}
+                        />
+                      </div>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="recoveryKey"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('resetPassword.recoveryKey')}</FormLabel>
+                    <FormDescription>
+                      {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>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="newPassword"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('resetPassword.newPassword')}</FormLabel>
+                    <FormControl>
+                      <div className="relative">
+                        <Lock className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
+                        <Input
+                          type="password"
+                          placeholder={t('resetPassword.enterNewPassword')}
+                          className="pl-10"
+                          {...field}
+                        />
+                      </div>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <Button
+                type="submit"
+                className="w-full mt-4 cursor-pointer"
+                disabled={isResetting}
+              >
+                {isResetting
+                  ? t('resetPassword.resetting')
+                  : t('resetPassword.resetPassword')}
+              </Button>
+            </form>
+          </Form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

web/src/components/ui/input-otp.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import * as React from 'react';
+import { OTPInput, OTPInputContext } from 'input-otp';
+import { MinusIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string;
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        'flex items-center gap-2 has-disabled:opacity-50',
+        containerClassName,
+      )}
+      className={cn('disabled:cursor-not-allowed', className)}
+      {...props}
+    />
+  );
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn('flex items-center', className)}
+      {...props}
+    />
+  );
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<'div'> & {
+  index: number;
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]',
+        className,
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div data-slot="input-otp-separator" role="separator" {...props}>
+      <MinusIcon />
+    </div>
+  );
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

web/src/i18n/locales/en-US.ts

@@ -39,6 +39,7 @@ const enUS = {
     addRound: 'Add Round',
     copySuccess: 'Copy Successfully',
     test: 'Test',
+    forgotPassword: 'Forgot Password?',
   },
   notFound: {
     title: 'Page not found',
@@ -239,6 +240,25 @@ const enUS = {
     initSuccess: 'Initialization successful, please login',
     initFailed: 'Initialization failed: ',
   },
+  resetPassword: {
+    title: 'Reset Password 🔐',
+    description:
+      'Enter your recovery key and new password to reset your account password',
+    recoveryKey: 'Recovery Key',
+    recoveryKeyDescription:
+      'Stored in `system.recovery_key` of config file `data/config.yaml`',
+    newPassword: 'New Password',
+    enterRecoveryKey: 'Enter recovery key',
+    enterNewPassword: 'Enter new password',
+    recoveryKeyRequired: 'Recovery key cannot be empty',
+    newPasswordRequired: 'New password cannot be empty',
+    resetPassword: 'Reset Password',
+    resetting: 'Resetting...',
+    resetSuccess: 'Password reset successfully, please login',
+    resetFailed:
+      'Password reset failed, please check your email and recovery key',
+    backToLogin: 'Back to Login',
+  },
 };
 
 export default enUS;

web/src/i18n/locales/ja-JP.ts

@@ -40,6 +40,7 @@ const jaJP = {
     addRound: 'ラウンドを追加',
     copySuccess: 'コピーに成功しました',
     test: 'テスト',
+    forgotPassword: 'パスワードを忘れた？',
   },
   notFound: {
     title: 'ページが見つかりません',
@@ -240,6 +241,25 @@ const jaJP = {
     initSuccess: '初期化に成功しました。ログインしてください',
     initFailed: '初期化に失敗しました：',
   },
+  resetPassword: {
+    title: 'パスワードをリセット 🔐',
+    description:
+      '復旧キーと新しいパスワードを入力して、アカウントのパスワードをリセットします',
+    recoveryKey: '復旧キー',
+    recoveryKeyDescription:
+      '設定ファイル `data/config.yaml` の `system.recovery_key` に保存されています',
+    newPassword: '新しいパスワード',
+    enterRecoveryKey: '復旧キーを入力',
+    enterNewPassword: '新しいパスワードを入力',
+    recoveryKeyRequired: '復旧キーは必須です',
+    newPasswordRequired: '新しいパスワードは必須です',
+    resetPassword: 'パスワードをリセット',
+    resetting: 'リセット中...',
+    resetSuccess: 'パスワードのリセットに成功しました。ログインしてください',
+    resetFailed:
+      'パスワードのリセットに失敗しました。メールアドレスと復旧キーを確認してください',
+    backToLogin: 'ログインに戻る',
+  },
 };
 
 export default jaJP;

web/src/i18n/locales/zh-Hans.ts

@@ -39,6 +39,7 @@ const zhHans = {
     addRound: '添加回合',
     copySuccess: '复制成功',
     test: '测试',
+    forgotPassword: '忘记密码？',
   },
   notFound: {
     title: '页面不存在',
@@ -233,6 +234,23 @@ const zhHans = {
     initSuccess: '初始化成功 请登录',
     initFailed: '初始化失败：',
   },
+  resetPassword: {
+    title: '重置密码 🔐',
+    description: '输入恢复密钥和新的密码来重置您的账户密码',
+    recoveryKey: '恢复密钥',
+    recoveryKeyDescription:
+      '存储在配置文件`data/config.yaml`的`system.recovery_key`中',
+    newPassword: '新密码',
+    enterRecoveryKey: '输入恢复密钥',
+    enterNewPassword: '输入新密码',
+    recoveryKeyRequired: '恢复密钥不能为空',
+    newPasswordRequired: '新密码不能为空',
+    resetPassword: '重置密码',
+    resetting: '重置中...',
+    resetSuccess: '密码重置成功，请登录',
+    resetFailed: '密码重置失败，请检查邮箱和恢复密钥是否正确',
+    backToLogin: '返回登录',
+  },
 };
 
 export default zhHans;