feat:新增密码框组件，控制显隐

dataelement · Jul 10, 2024 · ead1233 · ead1233
1 parent d4e7761
commit ead1233
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 34 deletions.
diff --git a/src/frontend/src/components/bs-ui/input/index.tsx b/src/frontend/src/components/bs-ui/input/index.tsx
@@ -3,6 +3,9 @@ import { cname } from "../utils"
 import { SearchIcon } from "../../bs-icons/search"
 import { generateUUID } from "../utils"
 import { MinusCircledIcon } from "@radix-ui/react-icons"
+import { EyeOpenIcon, EyeNoneIcon } from "@radix-ui/react-icons"
+import { useState } from "react"
+
 export interface InputProps
     extends React.InputHTMLAttributes<HTMLInputElement> { }
 
@@ -36,6 +39,25 @@ const SearchInput = React.forwardRef<HTMLInputElement, InputProps & { inputClass
 SearchInput.displayName = "SearchInput"
 
 
+const PasswordInput = React.forwardRef<HTMLInputElement, InputProps & { inputClassName?: string, iconClassName?: string }>(
+    ({ className, inputClassName, iconClassName, ...props }, ref) => {
+        const [type, setType] = useState('password')
+        const handleShowPwd = () => {
+            type === 'password' ? setType('text') : setType('password')
+        }
+        return <div className={cname("relative flex place-items-center", className)}>
+            <Input type={type} ref={ref} className={cname("pr-8 bg-search-input", inputClassName)} {...props}></Input>
+            {
+                type === 'password'
+                ? <EyeNoneIcon onClick={handleShowPwd} className={cname("absolute right-2 text-gray-950 dark:text-gray-500 cursor-pointer", iconClassName)}/>
+                : <EyeOpenIcon onClick={handleShowPwd} className={cname("absolute right-2 text-gray-950 dark:text-gray-500 cursor-pointer", iconClassName)}/>
+            }
+        </div>
+    }
+)
+
+PasswordInput.displayName = 'PasswordInput'
+
 
 /**
  * 多行文本
@@ -144,4 +166,4 @@ const InputList = React.forwardRef<HTMLDivElement, InputProps & {
     }
 )
 
-export { Input, SearchInput, Textarea, InputList }
+export { Input, SearchInput, PasswordInput, Textarea, InputList }
diff --git a/src/frontend/src/pages/LoginPage/UserPwdModal.tsx b/src/frontend/src/pages/LoginPage/UserPwdModal.tsx
@@ -1,6 +1,6 @@
 import { Button } from "@/components/bs-ui/button";
 import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/bs-ui/dialog";
-import { Input } from "@/components/bs-ui/input";
+import { PasswordInput } from "@/components/bs-ui/input";
 import { forwardRef, useImperativeHandle, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 // import { resetUserPasswordApi } from "../controllers/API/user"; // 假设这是重置密码的API函数
@@ -66,11 +66,10 @@ const UserPwdModal = forwardRef<UserPwdModalRef, UserPwdModalProps>((props, ref)
                 <div className="flex flex-col gap-8 py-6">
                     <div>
                         <label htmlFor="password" className="bisheng-label">{t('resetPassword.newPassword')}<span className="bisheng-tip">*</span></label>
-                        <Input
+                        <PasswordInput
                             ref={passwordRef}
                             id="password"
                             name="password"
-                            type="password"
                             placeholder={t('resetPassword.newPassword')}
                             className="mt-2"
                             onChange={(e) => passwordRef.current.value = e.target.value}

diff --git a/src/frontend/src/pages/LoginPage/resetPwd.tsx b/src/frontend/src/pages/LoginPage/resetPwd.tsx
@@ -4,7 +4,7 @@ import { useEffect, useRef } from "react";
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { Button } from "../../components/bs-ui/button";
-import { Input } from "../../components/bs-ui/input";
+import { PasswordInput } from "../../components/bs-ui/input";
 import { loggedChangePasswordApi, changePasswordApi } from "../../controllers/API/user";
 import { captureAndAlertRequestErrorHoc } from "../../controllers/request";
 import { PWD_RULE, handleEncrypt } from './utils';
@@ -89,30 +89,27 @@ export const ResetPwdPage = () => {
                     </div>
                     <div className="grid gap-[12px] mt-[68px]">
                         <div className="grid">
-                            <Input
+                            <PasswordInput
                                 id="currentPassword"
-                                className='h-[48px] dark:bg-login-input'
+                                inputClassName='h-[48px] dark:bg-login-input'
                                 ref={currentPwdRef}
                                 placeholder={t('resetPassword.currentPassword')}
-                                type="password"
                             />
                         </div>
                         <div className="grid">
-                            <Input
+                            <PasswordInput
                                 id="newPassword"
-                                className='h-[48px] dark:bg-login-input'
+                                inputClassName='h-[48px] dark:bg-login-input'
                                 ref={newPwdRef}
                                 placeholder={t('resetPassword.newPassword')}
-                                type="password"
                             />
                         </div>
                         <div className="grid">
-                            <Input
+                            <PasswordInput
                                 id="confirmNewPassword"
-                                className='h-[48px] dark:bg-login-input'
+                                inputClassName='h-[48px] dark:bg-login-input'
                                 ref={confirmPwdRef}
                                 placeholder={t('resetPassword.confirmNewPassword')}
-                                type="password"
                             />
                         </div>
                         <Button

diff --git a/src/frontend/src/pages/SystemPage/components/CreateUser.tsx b/src/frontend/src/pages/SystemPage/components/CreateUser.tsx
@@ -1,24 +1,18 @@
 import { Button } from "@/components/bs-ui/button"
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/bs-ui/dialog"
-import { Input } from "@/components/bs-ui/input"
+import { Input, PasswordInput } from "@/components/bs-ui/input"
 import { Label } from "@/components/bs-ui/label"
 import { useToast } from "@/components/bs-ui/toast/use-toast"
 import { generateUUID } from "@/components/bs-ui/utils"
 import { createUserApi } from "@/controllers/API/user"
 import { captureAndAlertRequestErrorHoc } from "@/controllers/request"
 import { handleEncrypt, PWD_RULE } from "@/pages/LoginPage/utils"
 import { copyText } from "@/utils"
-import { EyeNoneIcon, EyeOpenIcon, PlusIcon } from "@radix-ui/react-icons"
+import { PlusIcon } from "@radix-ui/react-icons"
 import { useState } from "react"
 import { useTranslation } from "react-i18next"
 import UserRoleItem from "./UserRoleItem"
 
-enum inputType {
-    PASSWORD = 'password',
-    TEXT = 'text'
-}
-const EyeIconStyle = 'absolute right-7 cursor-pointer'
-
 export default function CreateUser({open, onClose, onSave}) {
     const { t } = useTranslation()
     const { message } = useToast()
@@ -65,11 +59,6 @@ export default function CreateUser({open, onClose, onSave}) {
         }))
     }
 
-    const [type, setType] = useState(inputType.PASSWORD)
-    const handleShowPwd = () => {
-        type === inputType.PASSWORD ? setType(inputType.TEXT) : setType(inputType.PASSWORD)
-    }
-
     return <Dialog open={open} onOpenChange={b => onClose(b)}>
         <DialogContent className="sm:max-w-[625px]">
             <DialogHeader>
@@ -79,16 +68,12 @@ export default function CreateUser({open, onClose, onSave}) {
                 <div>
                     <Label htmlFor="user" className="bisheng-label">{t('log.username')}</Label>
                     <Input id="user" value={form.user_name} onChange={(e) => setForm({...form, user_name:e.target.value})}
-                    placeholder="后续使用此用户名进行登录，用户名不可修改" className="h-[50px]"/>
+                    placeholder="后续使用此用户名进行登录，用户名不可修改" className="h-[48px]"/>
                 </div>
                 <div>
                     <Label htmlFor="password" className="bisheng-label">初始密码</Label>
-                    <div className="flex place-items-center">
-                        <Input type={type} id="password" value={form.password} placeholder="至少 8 个字符，必须包含大写字母、小写字母、数字和符号的组合"
-                        onChange={(e) => setForm({...form, password:e.target.value})} className="h-[50px]"/>
-                        {type === inputType.PASSWORD ? <EyeNoneIcon onClick={handleShowPwd} className={EyeIconStyle}/>
-                        : <EyeOpenIcon onClick={handleShowPwd} className={EyeIconStyle}/>}
-                    </div>
+                    <PasswordInput id="password" value={form.password} placeholder="至少 8 个字符，必须包含大写字母、小写字母、数字和符号的组合"
+                    onChange={(e) => setForm({...form, password:e.target.value})} inputClassName="h-[48px]"/>
                 </div>
                 <div className="flex flex-col gap-2">
                     <Label className="bisheng-label">用户组/角色选择</Label>