fix ui bug
This commit is contained in:
parent
31fc03a654
commit
ba416a7271
@ -31,9 +31,9 @@ export function DeleteUser() {
|
||||
verifyCode: '',
|
||||
token: '',
|
||||
},
|
||||
validateOnChange: false,
|
||||
validationSchema: yup.object({
|
||||
verifyCode: yup.verifyCodeSchema,
|
||||
password: yup.string().required('请输入密码'),
|
||||
}),
|
||||
onSubmit: async (values) => {
|
||||
await api.user.deleteUser(values)
|
||||
@ -62,6 +62,7 @@ export function DeleteUser() {
|
||||
<Button color="error" onClick={() => setOpen(true)}>
|
||||
删除用户
|
||||
</Button>
|
||||
|
||||
<Dialog
|
||||
open={open}
|
||||
fullWidth
|
||||
@ -70,16 +71,17 @@ export function DeleteUser() {
|
||||
>
|
||||
<DialogTitle>删除用户</DialogTitle>
|
||||
<DialogContent dividers>
|
||||
<Grid container spacing={[2, 1]}>
|
||||
<Grid xs={12}>
|
||||
<TextField
|
||||
{...formik.getFieldProps('email')}
|
||||
disabled
|
||||
helperText={' '}
|
||||
helperText=" "
|
||||
fullWidth
|
||||
label="邮箱"
|
||||
sx={{ mt: 1 }}
|
||||
/>
|
||||
<Grid container spacing={2}>
|
||||
<Grid>
|
||||
</Grid>
|
||||
<Grid xs={8}>
|
||||
<TextField
|
||||
{...formik.getFieldProps('verifyCode')}
|
||||
required
|
||||
@ -90,22 +92,21 @@ export function DeleteUser() {
|
||||
fullWidth
|
||||
label="验证码"
|
||||
autoComplete="verifyCode"
|
||||
autoFocus
|
||||
sx={{ mt: 1 }}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid mt={2} sx={{ flexGrow: 1 }}>
|
||||
<Grid xs={4}>
|
||||
<Button
|
||||
size="large"
|
||||
fullWidth
|
||||
variant="contained"
|
||||
disabled={countdown > 0}
|
||||
sx={{ mt: 1 }}
|
||||
onClick={sendVerifyCode}
|
||||
>
|
||||
{countdown > 0 ? countdown : '发送验证码'}
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid xs={12}>
|
||||
<TextField
|
||||
{...formik.getFieldProps('password')}
|
||||
required
|
||||
@ -117,8 +118,9 @@ export function DeleteUser() {
|
||||
label="密码"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
sx={{ mt: 1 }}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpen(false)}>取消</Button>
|
||||
@ -127,16 +129,18 @@ export function DeleteUser() {
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
{/* 二次确认对话框 */}
|
||||
<Dialog maxWidth="xs" open={confirm}>
|
||||
<DialogTitle>确定删除？</DialogTitle>
|
||||
<DialogContent dividers>
|
||||
<DialogContent>
|
||||
<DialogContentText>
|
||||
该用户的所有数据将被不可逆地抹除！
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setConfrim(false)}>取消</Button>
|
||||
<Button color="error" type="submit" onClick={formik.submitForm}>
|
||||
<Button color="error" onClick={formik.submitForm}>
|
||||
确定删除
|
||||
</Button>
|
||||
</DialogActions>
|
||||
|
||||
@ -3,7 +3,6 @@ import Button from '@mui/material/Button'
|
||||
import TextField from '@mui/material/TextField'
|
||||
import Link from '@mui/material/Link'
|
||||
import Grid from '@mui/material/Unstable_Grid2'
|
||||
import Box from '@mui/material/Box'
|
||||
import KeyIcon from '@mui/icons-material/Key'
|
||||
import Typography from '@mui/material/Typography'
|
||||
import Container from '@mui/material/Container'
|
||||
@ -28,7 +27,6 @@ export default function ForgetPassword() {
|
||||
token: '',
|
||||
userId: '',
|
||||
},
|
||||
validateOnChange: false,
|
||||
validationSchema: yup.object({
|
||||
email: yup.emailSchema,
|
||||
password: yup.passwordSchema,
|
||||
@ -46,7 +44,6 @@ export default function ForgetPassword() {
|
||||
|
||||
async function sendVerifyCode() {
|
||||
await formik.validateField('email')
|
||||
if (formik.errors.email) return
|
||||
setCountdown(COUNTDOWN_SECONDS)
|
||||
try {
|
||||
const res = await api.email.sendEmailVerifyCode({
|
||||
@ -61,8 +58,9 @@ export default function ForgetPassword() {
|
||||
}
|
||||
|
||||
return (
|
||||
<Container component="main" sx={{ width: 400 }}>
|
||||
<Box
|
||||
<Container
|
||||
component="main"
|
||||
maxWidth="xs"
|
||||
sx={{
|
||||
marginTop: '20vh',
|
||||
display: 'flex',
|
||||
@ -70,18 +68,19 @@ export default function ForgetPassword() {
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Avatar sx={{ m: 1, bgcolor: 'primary.main' }}>
|
||||
<Avatar sx={{ bgcolor: 'primary.main' }}>
|
||||
<KeyIcon />
|
||||
</Avatar>
|
||||
<Typography component="h1" variant="h5">
|
||||
<Typography component="h1" variant="h5" mt={1} mb={3}>
|
||||
找回密码
|
||||
</Typography>
|
||||
<Box
|
||||
<Grid
|
||||
container
|
||||
component="form"
|
||||
spacing={[2, 1]}
|
||||
onSubmit={formik.handleSubmit}
|
||||
noValidate
|
||||
sx={{ mt: 1, width: '100%' }}
|
||||
>
|
||||
<Grid xs={12}>
|
||||
<TextField
|
||||
{...formik.getFieldProps('email')}
|
||||
required
|
||||
@ -93,8 +92,8 @@ export default function ForgetPassword() {
|
||||
autoFocus
|
||||
sx={{ mt: 1 }}
|
||||
/>
|
||||
<Grid container spacing={2}>
|
||||
<Grid>
|
||||
</Grid>
|
||||
<Grid xs={8}>
|
||||
<TextField
|
||||
{...formik.getFieldProps('verifyCode')}
|
||||
required
|
||||
@ -105,11 +104,9 @@ export default function ForgetPassword() {
|
||||
fullWidth
|
||||
label="验证码"
|
||||
autoComplete="verifyCode"
|
||||
autoFocus
|
||||
sx={{ mt: 1 }}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid mt={2} sx={{ flexGrow: 1 }}>
|
||||
<Grid xs={4} mt={1}>
|
||||
<Button
|
||||
size="large"
|
||||
fullWidth
|
||||
@ -120,7 +117,7 @@ export default function ForgetPassword() {
|
||||
{countdown > 0 ? countdown : '发送验证码'}
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid xs={12}>
|
||||
<TextField
|
||||
{...formik.getFieldProps('password')}
|
||||
required
|
||||
@ -132,18 +129,17 @@ export default function ForgetPassword() {
|
||||
label="新密码"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
sx={{ mt: 1 }}
|
||||
/>
|
||||
<Button type="submit" fullWidth variant="contained" sx={{ mt: 1 }}>
|
||||
</Grid>
|
||||
<Grid xs={12}>
|
||||
<Button type="submit" fullWidth variant="contained">
|
||||
重置密码
|
||||
</Button>
|
||||
<Grid container justifyContent="flex-end" sx={{ mt: 2 }}>
|
||||
<Grid>
|
||||
</Grid>
|
||||
<Grid xs={12} container justifyContent="flex-end" sx={{ mt: 2 }}>
|
||||
<Link href="/login">登录</Link>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@ import Avatar from '@mui/material/Avatar'
|
||||
import Button from '@mui/material/Button'
|
||||
import TextField from '@mui/material/TextField'
|
||||
import Link from '@mui/material/Link'
|
||||
import Grid from '@mui/material/Grid'
|
||||
import Grid from '@mui/material/Unstable_Grid2'
|
||||
import Box from '@mui/material/Box'
|
||||
import LoginIcon from '@mui/icons-material/Login'
|
||||
import Typography from '@mui/material/Typography'
|
||||
@ -20,10 +20,9 @@ export default function Login() {
|
||||
email: '',
|
||||
password: '',
|
||||
},
|
||||
validateOnChange: false,
|
||||
validationSchema: yup.object({
|
||||
email: yup.emailSchema,
|
||||
// password: yup.passwordSchema,
|
||||
password: yup.string().required('请输入密码'),
|
||||
}),
|
||||
onSubmit: async (values) => {
|
||||
const res = await api.user.login(values)
|
||||
@ -34,8 +33,9 @@ export default function Login() {
|
||||
})
|
||||
|
||||
return (
|
||||
<Container component="main" sx={{ width: 400 }}>
|
||||
<Box
|
||||
<Container
|
||||
component="main"
|
||||
maxWidth="xs"
|
||||
sx={{
|
||||
marginTop: '20vh',
|
||||
display: 'flex',
|
||||
@ -43,18 +43,13 @@ export default function Login() {
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Avatar sx={{ m: 1, bgcolor: 'primary.main' }}>
|
||||
<Avatar sx={{ bgcolor: 'primary.main' }}>
|
||||
<LoginIcon />
|
||||
</Avatar>
|
||||
<Typography component="h1" variant="h5">
|
||||
<Typography component="h1" variant="h5" mt={1} mb={3}>
|
||||
登录
|
||||
</Typography>
|
||||
<Box
|
||||
component="form"
|
||||
onSubmit={formik.handleSubmit}
|
||||
noValidate
|
||||
sx={{ mt: 1 }}
|
||||
>
|
||||
<Box component="form" onSubmit={formik.handleSubmit}>
|
||||
<TextField
|
||||
{...formik.getFieldProps('email')}
|
||||
required
|
||||
@ -83,12 +78,12 @@ export default function Login() {
|
||||
登录
|
||||
</Button>
|
||||
<Grid container sx={{ mt: 2 }}>
|
||||
<Grid item xs>
|
||||
<Grid xs>
|
||||
<Link href="/forget-password" variant="body2">
|
||||
忘记密码？
|
||||
</Link>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Grid>
|
||||
<Typography component="span" variant="body2">
|
||||
没有账号？
|
||||
</Typography>
|
||||
@ -96,7 +91,6 @@ export default function Login() {
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
@ -3,7 +3,6 @@ import Button from '@mui/material/Button'
|
||||
import TextField from '@mui/material/TextField'
|
||||
import Link from '@mui/material/Link'
|
||||
import Grid from '@mui/material/Unstable_Grid2'
|
||||
import Box from '@mui/material/Box'
|
||||
import AppRegistrationIcon from '@mui/icons-material/AppRegistration'
|
||||
import Typography from '@mui/material/Typography'
|
||||
import Container from '@mui/material/Container'
|
||||
@ -26,7 +25,6 @@ export default function Register() {
|
||||
verifyCode: '',
|
||||
token: '',
|
||||
},
|
||||
validateOnChange: false,
|
||||
validationSchema: yup.object({
|
||||
email: yup.emailSchema,
|
||||
password: yup.passwordSchema,
|
||||
@ -42,7 +40,6 @@ export default function Register() {
|
||||
|
||||
async function sendVerifyCode() {
|
||||
await formik.validateField('email')
|
||||
if (formik.errors.email) return
|
||||
setCountdown(COUNTDOWN_SECONDS)
|
||||
try {
|
||||
const res = await api.email.sendEmailVerifyCode({
|
||||
@ -56,8 +53,9 @@ export default function Register() {
|
||||
}
|
||||
|
||||
return (
|
||||
<Container component="main" sx={{ width: 400 }}>
|
||||
<Box
|
||||
<Container
|
||||
component="main"
|
||||
maxWidth="xs"
|
||||
sx={{
|
||||
marginTop: '20vh',
|
||||
display: 'flex',
|
||||
@ -65,18 +63,19 @@ export default function Register() {
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Avatar sx={{ m: 1, bgcolor: 'primary.main' }}>
|
||||
<Avatar sx={{ bgcolor: 'primary.main' }}>
|
||||
<AppRegistrationIcon />
|
||||
</Avatar>
|
||||
<Typography component="h1" variant="h5">
|
||||
<Typography component="h1" variant="h5" mt={1} mb={3}>
|
||||
注册
|
||||
</Typography>
|
||||
<Box
|
||||
<Grid
|
||||
container
|
||||
component="form"
|
||||
spacing={[2, 1]}
|
||||
onSubmit={formik.handleSubmit}
|
||||
noValidate
|
||||
sx={{ mt: 1, width: '100%' }}
|
||||
>
|
||||
<Grid xs={12}>
|
||||
<TextField
|
||||
{...formik.getFieldProps('email')}
|
||||
required
|
||||
@ -88,8 +87,8 @@ export default function Register() {
|
||||
autoFocus
|
||||
sx={{ mt: 1 }}
|
||||
/>
|
||||
<Grid container spacing={2}>
|
||||
<Grid>
|
||||
</Grid>
|
||||
<Grid xs={8}>
|
||||
<TextField
|
||||
{...formik.getFieldProps('verifyCode')}
|
||||
required
|
||||
@ -100,11 +99,9 @@ export default function Register() {
|
||||
fullWidth
|
||||
label="验证码"
|
||||
autoComplete="verifyCode"
|
||||
autoFocus
|
||||
sx={{ mt: 1 }}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid mt={2} sx={{ flexGrow: 1 }}>
|
||||
<Grid xs={4} mt={1}>
|
||||
<Button
|
||||
size="large"
|
||||
fullWidth
|
||||
@ -115,7 +112,7 @@ export default function Register() {
|
||||
{countdown > 0 ? countdown : '发送验证码'}
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid xs={12}>
|
||||
<TextField
|
||||
{...formik.getFieldProps('password')}
|
||||
required
|
||||
@ -124,15 +121,17 @@ export default function Register() {
|
||||
(formik.touched.password && formik.errors.password) || ' '
|
||||
}
|
||||
fullWidth
|
||||
label="密码"
|
||||
label="新密码"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
sx={{ mt: 1 }}
|
||||
/>
|
||||
<Button type="submit" fullWidth variant="contained" sx={{ mt: 1 }}>
|
||||
注册
|
||||
</Grid>
|
||||
<Grid xs={12}>
|
||||
<Button type="submit" fullWidth variant="contained">
|
||||
重置密码
|
||||
</Button>
|
||||
<Grid container justifyContent="flex-end" sx={{ mt: 2 }}>
|
||||
</Grid>
|
||||
<Grid xs={12} container justifyContent="flex-end" sx={{ mt: 2 }}>
|
||||
<Grid>
|
||||
<Typography component="span" variant="body2">
|
||||
已有账号？
|
||||
@ -140,8 +139,7 @@ export default function Register() {
|
||||
<Link href="/login">登录</Link>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user