sdcb · sdcb · Apr 29, 2025 · Apr 29, 2025
diff --git a/src/FE/components/ui/form/passwordInput.tsx b/src/FE/components/ui/form/passwordInput.tsx
@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import { IconEye, IconEyeOff } from '@/components/Icons';
+import { Button } from '@/components/ui/button';
+import {
+  FormControl,
+  FormDescription,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '../form';
+import { Input } from '../input';
+import { FormFieldType, IFormFieldOption } from './type';
+
+const FormPasswordInput = ({
+  label,
+  options,
+  field,
+  hidden,
+  disabled,
+  autocomplete,
+}: {
+  label?: string;
+  options?: IFormFieldOption;
+  field: FormFieldType;
+  hidden?: boolean;
+  disabled?: boolean;
+  autocomplete?: string;
+}) => {
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+    <FormItem className="py-2" hidden={hidden}>
+      <FormLabel>{options?.label || label}</FormLabel>
+      <FormControl>
+        <div className="relative">
+          <Input
+            autoComplete={autocomplete}
+            disabled={disabled}
+            type={showPassword ? 'text' : 'password'}
+            placeholder={options?.placeholder}
+            {...field}
+          />
+          <Button
+            type="button"
+            variant="ghost"
+            className="absolute right-0 top-0 h-full px-3"
+             => setShowPassword(!showPassword)}
+            tabIndex={-1}
+          >
+            {showPassword ? <IconEye /> : <IconEyeOff />}
+          </Button>
+        </div>
+      </FormControl>
+      <FormMessage />
+      <FormDescription>{options?.description}</FormDescription>
+    </FormItem>
+  );
+};
+
+export default FormPasswordInput; 
diff --git a/src/FE/locales/en.json b/src/FE/locales/en.json
@@ -154,6 +154,7 @@
   "Confirm Password": "Confirm Password",
   "The two password inputs are inconsistent": "The two password inputs are inconsistent",
   "Old password incorrect": "Old password incorrect",
+  "New password should be different from the old one": "New password should be different from the old one",
   "Must contain at least {{length}} character(s)": "Must contain at least {{length}} character(s)",
   "Contain at most {{length}} character(s)": "Contain at most {{length}} character(s)",
   "It must contain at least 6 characters, and 3 of the 4 must be upper case, lower case, special characters, and numbers.": "It must contain at least 6 characters, and 3 of the 4 must be upper case, lower case, special characters, and numbers.",

diff --git a/src/FE/locales/zh-CN.json b/src/FE/locales/zh-CN.json
@@ -154,6 +154,7 @@
   "Confirm Password": "确认密码",
   "The two password inputs are inconsistent": "俩次密码输入不一致",
   "Old password incorrect": "旧密码不正确",
+  "New password should be different from the old one": "新密码不能与旧密码相同",
   "Must contain at least {{length}} character(s)": "必须至少包含{{length}}个字符",
   "Contain at most {{length}} character(s)": "最多包含{{length}}个字符",
   "It must contain at least 6 characters, and 3 of the 4 must be upper case, lower case, special characters, and numbers.": "必须至少包含6个字符，大写、小写、特殊字符、数字四者必须有3种。",

diff --git a/src/FE/pages/login/_components/AccountLoginCard.tsx b/src/FE/pages/login/_components/AccountLoginCard.tsx
@@ -7,19 +7,15 @@ import useTranslation from '@/hooks/useTranslation';
 
 import { saveUserInfo, setUserSession } from '@/utils/user';
 
-import { IconEye, IconEyeOff } from '@/components/Icons';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import {
   Form,
-  FormControl,
   FormField,
-  FormItem,
-  FormLabel,
 } from '@/components/ui/form';
 import FormInput from '@/components/ui/form/input';
+import FormPasswordInput from '@/components/ui/form/passwordInput';
 import { FormFieldType, IFormFieldOption } from '@/components/ui/form/type';
-import { Input } from '@/components/ui/input';
 
 import { singIn } from '@/apis/clientApis';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -33,7 +29,6 @@ const AccountLoginCard = (props: {
   const { loginLoading, openLoading, closeLoading } = props;
   const { t } = useTranslation();
   const router = useRouter();
-  const [showPassword, setShowPassword] = useState(false);
 
   useEffect(() => {
     form.formState.isValid;
@@ -45,37 +40,19 @@ const AccountLoginCard = (props: {
       label: t('Your username'),
       defaultValue: '',
       render: (options: IFormFieldOption, field: FormFieldType) => (
-        <FormInput autocomplete="on" options={options} field={field} />
+        <FormInput autocomplete="username" options={options} field={field} />
       ),
     },
     {
       name: 'password',
       label: t('Your password'),
       defaultValue: '',
       render: (options: IFormFieldOption, field: FormFieldType) => (
-        <FormItem className="pb-4 pt-2">
-          <FormLabel>{options.label}</FormLabel>
-          <FormControl>
-            <div className="flex">
-              <Input
-                autoComplete="on"
-                type={showPassword ? 'text' : 'password'}
-                placeholder={options?.placeholder}
-                {...field}
-              />
-              <Button
-                type="button"
-                variant="link"
-                className="absolute right-10 text-center px-2 pt-2.5"
-                 => {
-                  setShowPassword(!showPassword);
-                }}
-              >
-                {showPassword ? <IconEye /> : <IconEyeOff />}{' '}
-              </Button>
-            </div>
-          </FormControl>
-        </FormItem>
+        <FormPasswordInput 
+          autocomplete="current-password" 
+          label={options.label} 
+          field={field}
+        />
       ),
     },
   ];

diff --git a/src/FE/pages/settings/_components/tabs/AccountTab.tsx b/src/FE/pages/settings/_components/tabs/AccountTab.tsx
@@ -11,7 +11,7 @@ import { clearUserInfo, clearUserSession, getLoginUrl } from '@/utils/user';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Form, FormField } from '@/components/ui/form';
-import FormInput from '@/components/ui/form/input';
+import FormPasswordInput from '@/components/ui/form/passwordInput';
 import { FormFieldType, IFormFieldOption } from '@/components/ui/form/type';
 
 import { changeUserPassword } from '@/apis/clientApis';
@@ -21,33 +21,6 @@ const AccountTab = () => {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
 
-  const formFields: IFormFieldOption[] = [
-    {
-      name: 'oldPassword',
-      label: t('Old Password'),
-      defaultValue: '',
-      render: (options: IFormFieldOption, field: FormFieldType) => (
-        <FormInput type="password" options={options} field={field} />
-      ),
-    },
-    {
-      name: 'newPassword',
-      label: t('New Password'),
-      defaultValue: '',
-      render: (options: IFormFieldOption, field: FormFieldType) => (
-        <FormInput type="password" options={options} field={field} />
-      ),
-    },
-    {
-      name: 'confirmPassword',
-      label: t('Confirm Password'),
-      defaultValue: '',
-      render: (options: IFormFieldOption, field: FormFieldType) => (
-        <FormInput type="password" options={options} field={field} />
-      ),
-    },
-  ];
-
   const formSchema = z.object({
     oldPassword: z.string(),
     newPassword: z
@@ -84,14 +57,14 @@ const AccountTab = () => {
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
-    defaultValues: formFields.reduce((obj: any, field) => {
-      obj[field.name] = field.defaultValue;
-      return obj;
-    }, {}),
+    defaultValues: {
+      oldPassword: '',
+      newPassword: '',
+      confirmPassword: '',
+    },
   });
 
   const  z.infer<typeof formSchema>) => {
-    if (!form.formState.isValid) return;
     const { newPassword, confirmPassword } = values;
     if (confirmPassword !== newPassword) {
       toast.error(t('The two password inputs are inconsistent'));
@@ -118,14 +91,39 @@ const AccountTab = () => {
         <CardContent>
           <Form {...form}>
             <form  className="space-y-1">
-              {formFields.map((item) => (
-                <FormField
-                  key={item.name}
-                  control={form.control}
-                  name={item.name as never}
-                  render={({ field }) => item.render(item, field)}
-                />
-              ))}
+              <FormField
+                control={form.control}
+                name="oldPassword"
+                render={({ field }) => (
+                  <FormPasswordInput 
+                    label={t('Old Password')} 
+                    field={field}
+                    autocomplete="current-password"
+                  />
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="newPassword"
+                render={({ field }) => (
+                  <FormPasswordInput 
+                    label={t('New Password')} 
+                    field={field}
+                    autocomplete="new-password"
+                  />
+                )}
+              />
+              <FormField
+                control={form.control}
+                    name="confirmPassword"
+                render={({ field }) => (
+                  <FormPasswordInput 
+                    label={t('Confirm Password')} 
+                    field={field}
+                    autocomplete="new-password"
+                  />
+                )}
+              />
               <div className="pt-4">
                 <Button disabled={loading} type="submit" className="w-full sm:w-auto">
                   {t('Confirm')}