refine Semi UI identity workflow
This commit is contained in:
@@ -15,7 +15,7 @@ import {
|
||||
IconUser,
|
||||
IconExit
|
||||
} from '@douyinfe/semi-icons';
|
||||
import { Avatar, Banner, Button, Card, Dropdown, Input, Layout, Modal, Nav, SideSheet, Tag, Typography } from '@douyinfe/semi-ui';
|
||||
import { Avatar, Banner, Button, Card, Dropdown, Layout, Modal, Nav, SideSheet, Tag, Typography } from '@douyinfe/semi-ui';
|
||||
import { type CSSProperties, FormEvent, type MouseEvent, useEffect, useLayoutEffect, useState } from 'react';
|
||||
import { NavLink, Outlet, useLocation, useNavigate } from 'react-router-dom';
|
||||
import { api } from '../../api/client';
|
||||
@@ -24,6 +24,7 @@ import { hasMenu } from '../auth/session';
|
||||
import { useMobileLayout } from '../hooks/useMobileLayout';
|
||||
import { useSideSheetA11y } from '../hooks/useSideSheetA11y';
|
||||
import { preloadRoute, scheduleIdleRoutePreloads, shouldPreloadRouteOnIntent } from '../routing/routeModules';
|
||||
import { PasswordInput } from '../shared/PasswordInput';
|
||||
|
||||
const { Header, Sider, Content } = Layout;
|
||||
const { Text, Title } = Typography;
|
||||
@@ -226,7 +227,7 @@ function PasswordDialog({ onClose, onChanged }: { onClose: () => void; onChanged
|
||||
return <Modal
|
||||
className="v2-password-modal"
|
||||
visible
|
||||
title={<div className="v2-password-title"><span aria-hidden="true"><IconLock /></span><div><Title heading={4}>修改登录密码</Title><Text aria-hidden="true" type="tertiary" size="small">更新账号安全凭据</Text></div></div>}
|
||||
title={<div className="v2-password-title"><span aria-hidden="true"><IconLock /></span><div><strong>修改登录密码</strong><Text aria-hidden="true" type="tertiary" size="small">更新账号安全凭据</Text></div></div>}
|
||||
aria-label="修改登录密码"
|
||||
onCancel={onClose}
|
||||
closeOnEsc={!pending}
|
||||
@@ -234,14 +235,14 @@ function PasswordDialog({ onClose, onChanged }: { onClose: () => void; onChanged
|
||||
footer={null}
|
||||
>
|
||||
<form className="v2-password-dialog" onSubmit={submit}>
|
||||
<Banner type="warning" bordered title="修改后需要重新登录" description="为保护账号安全,当前设备和其他设备上的旧会话都会失效。" />
|
||||
<label><span>当前密码</span><Input autoFocus required type="password" autoComplete="current-password" value={currentPassword} onChange={setCurrentPassword} size="large" /></label>
|
||||
<label><span>新密码</span><Input required minLength={10} type="password" autoComplete="new-password" value={newPassword} onChange={setNewPassword} placeholder="至少 10 位,包含三类字符" size="large" /></label>
|
||||
<Banner type="warning" bordered closeIcon={null} title="修改后需要重新登录" description="为保护账号安全,当前设备和其他设备上的旧会话都会失效。" />
|
||||
<label><span>当前密码</span><PasswordInput aria-label="当前密码" autoFocus required autoComplete="current-password" visibilityLabel="当前密码" value={currentPassword} onChange={setCurrentPassword} size="large" /></label>
|
||||
<label><span>新密码</span><PasswordInput aria-label="新密码" required minLength={10} autoComplete="new-password" visibilityLabel="新密码" value={newPassword} onChange={setNewPassword} placeholder="至少 10 位,包含三类字符" size="large" /></label>
|
||||
<div className="v2-password-rules" aria-label="新密码安全规则">
|
||||
<span className={lengthValid ? 'is-valid' : ''}><IconTickCircle />10–128 位字符</span>
|
||||
<span className={categoriesValid ? 'is-valid' : ''}><IconTickCircle />大小写字母、数字、特殊字符至少三类</span>
|
||||
</div>
|
||||
<label><span>确认新密码</span><Input required minLength={10} type="password" autoComplete="new-password" value={confirmPassword} onChange={setConfirmPassword} size="large" /></label>
|
||||
<label><span>确认新密码</span><PasswordInput aria-label="确认新密码" required minLength={10} autoComplete="new-password" visibilityLabel="确认新密码" value={confirmPassword} onChange={setConfirmPassword} size="large" /></label>
|
||||
{confirmationStarted ? <Text className={`v2-password-match${passwordsMatch ? ' is-valid' : ' is-error'}`} role="status">{passwordsMatch ? '两次输入一致' : '两次输入的新密码不一致'}</Text> : null}
|
||||
{error ? <Banner className="v2-password-error" type="danger" bordered title="无法修改密码" description={error} /> : null}
|
||||
<footer><Button type="tertiary" onClick={onClose} disabled={pending}>取消</Button><Button htmlType="submit" theme="solid" type="primary" loading={pending} disabled={pending || !currentPassword || !passwordValid || !passwordsMatch}>{pending ? '正在修改…' : '确认修改'}</Button></footer>
|
||||
|
||||
Reference in New Issue
Block a user