refactor(admin): 接入 PasswordInput,删除分类改用 Modal 确认
- 登录弹窗与系统改密统一用 @stash/ui 的 PasswordInput(改密页补上显隐切换) - 删除分类不再用 window.confirm,改用 Modal + 危险按钮(组件库推荐的组合) - 删除页面私有的 PasswordInput 组件与 .password-field 样式
This commit is contained in:
@@ -1,7 +1,6 @@
|
||||
import { Button, FormField, Icon, Modal, Notice, Space, Text } from '@stash/ui'
|
||||
import { Button, FormField, Icon, Modal, Notice, PasswordInput, Space, Text } from '@stash/ui'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { login, setup, type SessionState } from '../../auth'
|
||||
import { PasswordInput } from './PasswordInput'
|
||||
|
||||
/**
|
||||
* 登录弹窗:首次使用显示「设置密码 + 确认」,之后只显示密码。
|
||||
@@ -88,10 +87,13 @@ export function LoginDialog({ open, hasAdmin, onClose, onSuccess }: LoginDialogP
|
||||
<PasswordInput
|
||||
id="login-password"
|
||||
placeholder="输入密码"
|
||||
autoComplete={isSetup ? 'new-password' : 'current-password'}
|
||||
value={password}
|
||||
autoFocus
|
||||
onChange={setPassword}
|
||||
onEnter={() => void submit()}
|
||||
onChange={(event) => setPassword(event.target.value)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter') void submit()
|
||||
}}
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
@@ -100,9 +102,12 @@ export function LoginDialog({ open, hasAdmin, onClose, onSuccess }: LoginDialogP
|
||||
<PasswordInput
|
||||
id="login-confirm"
|
||||
placeholder="再输入一次"
|
||||
autoComplete="new-password"
|
||||
value={confirm}
|
||||
onChange={setConfirm}
|
||||
onEnter={() => void submit()}
|
||||
onChange={(event) => setConfirm(event.target.value)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter') void submit()
|
||||
}}
|
||||
/>
|
||||
</FormField>
|
||||
)}
|
||||
|
||||
@@ -1,48 +0,0 @@
|
||||
import { Icon, IconButton, Input } from '@stash/ui'
|
||||
import { useState } from 'react'
|
||||
|
||||
/**
|
||||
* 语言无关的密码可见切换:右侧一个眼睛按钮,切换 input type。
|
||||
* 错误提示后再点仍然有效(状态在组件里,不会被错误重置)。
|
||||
*/
|
||||
type PasswordInputProps = {
|
||||
id: string
|
||||
value: string
|
||||
placeholder?: string
|
||||
autoFocus?: boolean
|
||||
onChange: (value: string) => void
|
||||
onEnter?: () => void
|
||||
}
|
||||
|
||||
export function PasswordInput({
|
||||
id,
|
||||
value,
|
||||
placeholder,
|
||||
autoFocus = false,
|
||||
onChange,
|
||||
onEnter,
|
||||
}: PasswordInputProps) {
|
||||
const [visible, setVisible] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="password-field">
|
||||
<Input
|
||||
id={id}
|
||||
type={visible ? 'text' : 'password'}
|
||||
icon="lock_line"
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
autoFocus={autoFocus}
|
||||
onChange={(event) => onChange(event.target.value)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter') onEnter?.()
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
label={visible ? '隐藏密码' : '显示密码'}
|
||||
icon={<Icon name={visible ? 'eye_close_line' : 'eye_line'} />}
|
||||
onClick={() => setVisible((current) => !current)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user