qiuxu/next-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix ui bug

Browse Source
This commit is contained in:
秦秋旭 2023-02-25 00:59:36 +08:00
parent 31fc03a654
commit ba416a7271
4 changed files with 208 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/pages/components/DeleteUser.tsx
View File

@ -31,9 +31,9 @@ export function DeleteUser() {
verifyCode: '', verifyCode: '',
token: '', token: '',
}, },
validateOnChange: false,
validationSchema: yup.object({ validationSchema: yup.object({
verifyCode: yup.verifyCodeSchema, verifyCode: yup.verifyCodeSchema,
password: yup.string().required('请输入密码'),
}), }),
onSubmit: async (values) => { onSubmit: async (values) => {
await api.user.deleteUser(values) await api.user.deleteUser(values)
@ -62,6 +62,7 @@ export function DeleteUser() {
<Button color="error" onClick={() => setOpen(true)}> <Button color="error" onClick={() => setOpen(true)}>
删除用户 删除用户
</Button> </Button>
<Dialog <Dialog
open={open} open={open}
fullWidth fullWidth
@ -70,16 +71,17 @@ export function DeleteUser() {
> >
<DialogTitle>删除用户</DialogTitle> <DialogTitle>删除用户</DialogTitle>
<DialogContent dividers> <DialogContent dividers>
<TextField <Grid container spacing={[2, 1]}>
{...formik.getFieldProps('email')} <Grid xs={12}>
disabled <TextField
helperText={' '} {...formik.getFieldProps('email')}
fullWidth disabled
label="邮箱" helperText=" "
sx={{ mt: 1 }} fullWidth
/> label="邮箱"
<Grid container spacing={2}> />
<Grid> </Grid>
<Grid xs={8}>
<TextField <TextField
{...formik.getFieldProps('verifyCode')} {...formik.getFieldProps('verifyCode')}
required required
@ -90,35 +92,35 @@ export function DeleteUser() {
fullWidth fullWidth
label="验证码" label="验证码"
autoComplete="verifyCode" autoComplete="verifyCode"
autoFocus
sx={{ mt: 1 }}
/> />
</Grid> </Grid>
<Grid mt={2} sx={{ flexGrow: 1 }}> <Grid xs={4}>
<Button <Button
size="large" size="large"
fullWidth fullWidth
variant="contained" variant="contained"
disabled={countdown > 0} disabled={countdown > 0}
sx={{ mt: 1 }}
onClick={sendVerifyCode} onClick={sendVerifyCode}
> >
{countdown > 0 ? countdown : '发送验证码'} {countdown > 0 ? countdown : '发送验证码'}
</Button> </Button>
</Grid> </Grid>
<Grid xs={12}>
<TextField
{...formik.getFieldProps('password')}
required
error={formik.touched.password && !!formik.errors.password}
helperText={
(formik.touched.password && formik.errors.password) || ' '
}
fullWidth
label="密码"
type="password"
autoComplete="current-password"
/>
</Grid>
</Grid> </Grid>
<TextField
{...formik.getFieldProps('password')}
required
error={formik.touched.password && !!formik.errors.password}
helperText={
(formik.touched.password && formik.errors.password) || ' '
}
fullWidth
label="密码"
type="password"
autoComplete="current-password"
sx={{ mt: 1 }}
/>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={() => setOpen(false)}>取消</Button> <Button onClick={() => setOpen(false)}>取消</Button>
@ -127,16 +129,18 @@ export function DeleteUser() {
</Button> </Button>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
{/* 二次确认对话框 */}
<Dialog maxWidth="xs" open={confirm}> <Dialog maxWidth="xs" open={confirm}>
<DialogTitle>确定删除？</DialogTitle> <DialogTitle>确定删除？</DialogTitle>
<DialogContent dividers> <DialogContent>
<DialogContentText> <DialogContentText>
该用户的所有数据将被不可逆地抹除！ 该用户的所有数据将被不可逆地抹除！
</DialogContentText> </DialogContentText>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={() => setConfrim(false)}>取消</Button> <Button onClick={() => setConfrim(false)}>取消</Button>
<Button color="error" type="submit" onClick={formik.submitForm}> <Button color="error" onClick={formik.submitForm}>
确定删除 确定删除
</Button> </Button>
</DialogActions> </DialogActions>

116
src/pages/forget-password.tsx
View File

@ -3,7 +3,6 @@ import Button from '@mui/material/Button'
import TextField from '@mui/material/TextField' import TextField from '@mui/material/TextField'
import Link from '@mui/material/Link' import Link from '@mui/material/Link'
import Grid from '@mui/material/Unstable_Grid2' import Grid from '@mui/material/Unstable_Grid2'
import Box from '@mui/material/Box'
import KeyIcon from '@mui/icons-material/Key' import KeyIcon from '@mui/icons-material/Key'
import Typography from '@mui/material/Typography' import Typography from '@mui/material/Typography'
import Container from '@mui/material/Container' import Container from '@mui/material/Container'
@ -28,7 +27,6 @@ export default function ForgetPassword() {
token: '', token: '',
userId: '', userId: '',
}, },
validateOnChange: false,
validationSchema: yup.object({ validationSchema: yup.object({
email: yup.emailSchema, email: yup.emailSchema,
password: yup.passwordSchema, password: yup.passwordSchema,
@ -46,7 +44,6 @@ export default function ForgetPassword() {
async function sendVerifyCode() { async function sendVerifyCode() {
await formik.validateField('email') await formik.validateField('email')
if (formik.errors.email) return
setCountdown(COUNTDOWN_SECONDS) setCountdown(COUNTDOWN_SECONDS)
try { try {
const res = await api.email.sendEmailVerifyCode({ const res = await api.email.sendEmailVerifyCode({
@ -61,27 +58,29 @@ export default function ForgetPassword() {
} }
return ( return (
<Container component="main" sx={{ width: 400 }}> <Container
<Box component="main"
sx={{ maxWidth="xs"
marginTop: '20vh', sx={{
display: 'flex', marginTop: '20vh',
flexDirection: 'column', display: 'flex',
alignItems: 'center', flexDirection: 'column',
}} alignItems: 'center',
}}
>
<Avatar sx={{ bgcolor: 'primary.main' }}>
<KeyIcon />
</Avatar>
<Typography component="h1" variant="h5" mt={1} mb={3}>
找回密码
</Typography>
<Grid
container
component="form"
spacing={[2, 1]}
onSubmit={formik.handleSubmit}
> >
<Avatar sx={{ m: 1, bgcolor: 'primary.main' }}> <Grid xs={12}>
<KeyIcon />
</Avatar>
<Typography component="h1" variant="h5">
找回密码
</Typography>
<Box
component="form"
onSubmit={formik.handleSubmit}
noValidate
sx={{ mt: 1, width: '100%' }}
>
<TextField <TextField
{...formik.getFieldProps('email')} {...formik.getFieldProps('email')}
required required
@ -93,34 +92,32 @@ export default function ForgetPassword() {
autoFocus autoFocus
sx={{ mt: 1 }} sx={{ mt: 1 }}
/> />
<Grid container spacing={2}> </Grid>
<Grid> <Grid xs={8}>
<TextField <TextField
{...formik.getFieldProps('verifyCode')} {...formik.getFieldProps('verifyCode')}
required required
error={formik.touched.verifyCode && !!formik.errors.verifyCode} error={formik.touched.verifyCode && !!formik.errors.verifyCode}
helperText={ helperText={
(formik.touched.verifyCode && formik.errors.verifyCode) || ' ' (formik.touched.verifyCode && formik.errors.verifyCode) || ' '
} }
fullWidth fullWidth
label="验证码" label="验证码"
autoComplete="verifyCode" autoComplete="verifyCode"
autoFocus />
sx={{ mt: 1 }} </Grid>
/> <Grid xs={4} mt={1}>
</Grid> <Button
<Grid mt={2} sx={{ flexGrow: 1 }}> size="large"
<Button fullWidth
size="large" variant="contained"
fullWidth disabled={countdown > 0}
variant="contained" onClick={sendVerifyCode}
disabled={countdown > 0} >
onClick={sendVerifyCode} {countdown > 0 ? countdown : '发送验证码'}
> </Button>
{countdown > 0 ? countdown : '发送验证码'} </Grid>
</Button> <Grid xs={12}>
</Grid>
</Grid>
<TextField <TextField
{...formik.getFieldProps('password')} {...formik.getFieldProps('password')}
required required
@ -132,18 +129,17 @@ export default function ForgetPassword() {
label="新密码" label="新密码"
type="password" type="password"
autoComplete="current-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> </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> <Link href="/login">登录</Link>
</Grid> </Grid>
</Grid> </Grid>
</Box>
</Box>
</Container> </Container>
) )
} }

120
src/pages/login.tsx
View File

@ -2,7 +2,7 @@ import Avatar from '@mui/material/Avatar'
import Button from '@mui/material/Button' import Button from '@mui/material/Button'
import TextField from '@mui/material/TextField' import TextField from '@mui/material/TextField'
import Link from '@mui/material/Link' 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 Box from '@mui/material/Box'
import LoginIcon from '@mui/icons-material/Login' import LoginIcon from '@mui/icons-material/Login'
import Typography from '@mui/material/Typography' import Typography from '@mui/material/Typography'
@ -20,10 +20,9 @@ export default function Login() {
email: '', email: '',
password: '', password: '',
}, },
validateOnChange: false,
validationSchema: yup.object({ validationSchema: yup.object({
email: yup.emailSchema, email: yup.emailSchema,
// password: yup.passwordSchema, password: yup.string().required('请输入密码'),
}), }),
onSubmit: async (values) => { onSubmit: async (values) => {
const res = await api.user.login(values) const res = await api.user.login(values)
@ -34,68 +33,63 @@ export default function Login() {
}) })
return ( return (
<Container component="main" sx={{ width: 400 }}> <Container
<Box component="main"
sx={{ maxWidth="xs"
marginTop: '20vh', sx={{
display: 'flex', marginTop: '20vh',
flexDirection: 'column', display: 'flex',
alignItems: 'center', flexDirection: 'column',
}} alignItems: 'center',
> }}
<Avatar sx={{ m: 1, bgcolor: 'primary.main' }}> >
<LoginIcon /> <Avatar sx={{ bgcolor: 'primary.main' }}>
</Avatar> <LoginIcon />
<Typography component="h1" variant="h5"> </Avatar>
登录 <Typography component="h1" variant="h5" mt={1} mb={3}>
</Typography> 登录
<Box </Typography>
component="form" <Box component="form" onSubmit={formik.handleSubmit}>
onSubmit={formik.handleSubmit} <TextField
noValidate {...formik.getFieldProps('email')}
required
error={formik.touched.email && !!formik.errors.email}
helperText={(formik.touched.email && formik.errors.email) || ' '}
fullWidth
label="邮箱"
autoComplete="email"
autoFocus
sx={{ mt: 1 }} sx={{ mt: 1 }}
> />
<TextField <TextField
{...formik.getFieldProps('email')} {...formik.getFieldProps('password')}
required required
error={formik.touched.email && !!formik.errors.email} error={formik.touched.password && !!formik.errors.password}
helperText={(formik.touched.email && formik.errors.email) || ' '} helperText={
fullWidth (formik.touched.password && formik.errors.password) || ' '
label="邮箱" }
autoComplete="email" fullWidth
autoFocus label="密码"
sx={{ mt: 1 }} type="password"
/> autoComplete="current-password"
<TextField sx={{ mt: 1 }}
{...formik.getFieldProps('password')} />
required <Button type="submit" fullWidth variant="contained" sx={{ mt: 1 }}>
error={formik.touched.password && !!formik.errors.password} 登录
helperText={ </Button>
(formik.touched.password && formik.errors.password) || ' ' <Grid container sx={{ mt: 2 }}>
} <Grid xs>
fullWidth <Link href="/forget-password" variant="body2">
label="密码" 忘记密码？
type="password" </Link>
autoComplete="current-password"
sx={{ mt: 1 }}
/>
<Button type="submit" fullWidth variant="contained" sx={{ mt: 1 }}>
登录
</Button>
<Grid container sx={{ mt: 2 }}>
<Grid item xs>
<Link href="/forget-password" variant="body2">
忘记密码？
</Link>
</Grid>
<Grid item>
<Typography component="span" variant="body2">
没有账号？
</Typography>
<Link href="/register">注册</Link>
</Grid>
</Grid> </Grid>
</Box> <Grid>
<Typography component="span" variant="body2">
没有账号？
</Typography>
<Link href="/register">注册</Link>
</Grid>
</Grid>
</Box> </Box>
</Container> </Container>
) )

126
src/pages/register.tsx
View File

@ -3,7 +3,6 @@ import Button from '@mui/material/Button'
import TextField from '@mui/material/TextField' import TextField from '@mui/material/TextField'
import Link from '@mui/material/Link' import Link from '@mui/material/Link'
import Grid from '@mui/material/Unstable_Grid2' import Grid from '@mui/material/Unstable_Grid2'
import Box from '@mui/material/Box'
import AppRegistrationIcon from '@mui/icons-material/AppRegistration' import AppRegistrationIcon from '@mui/icons-material/AppRegistration'
import Typography from '@mui/material/Typography' import Typography from '@mui/material/Typography'
import Container from '@mui/material/Container' import Container from '@mui/material/Container'
@ -26,7 +25,6 @@ export default function Register() {
verifyCode: '', verifyCode: '',
token: '', token: '',
}, },
validateOnChange: false,
validationSchema: yup.object({ validationSchema: yup.object({
email: yup.emailSchema, email: yup.emailSchema,
password: yup.passwordSchema, password: yup.passwordSchema,
@ -42,7 +40,6 @@ export default function Register() {
async function sendVerifyCode() { async function sendVerifyCode() {
await formik.validateField('email') await formik.validateField('email')
if (formik.errors.email) return
setCountdown(COUNTDOWN_SECONDS) setCountdown(COUNTDOWN_SECONDS)
try { try {
const res = await api.email.sendEmailVerifyCode({ const res = await api.email.sendEmailVerifyCode({
@ -56,27 +53,29 @@ export default function Register() {
} }
return ( return (
<Container component="main" sx={{ width: 400 }}> <Container
<Box component="main"
sx={{ maxWidth="xs"
marginTop: '20vh', sx={{
display: 'flex', marginTop: '20vh',
flexDirection: 'column', display: 'flex',
alignItems: 'center', flexDirection: 'column',
}} alignItems: 'center',
}}
>
<Avatar sx={{ bgcolor: 'primary.main' }}>
<AppRegistrationIcon />
</Avatar>
<Typography component="h1" variant="h5" mt={1} mb={3}>
注册
</Typography>
<Grid
container
component="form"
spacing={[2, 1]}
onSubmit={formik.handleSubmit}
> >
<Avatar sx={{ m: 1, bgcolor: 'primary.main' }}> <Grid xs={12}>
<AppRegistrationIcon />
</Avatar>
<Typography component="h1" variant="h5">
注册
</Typography>
<Box
component="form"
onSubmit={formik.handleSubmit}
noValidate
sx={{ mt: 1, width: '100%' }}
>
<TextField <TextField
{...formik.getFieldProps('email')} {...formik.getFieldProps('email')}
required required
@ -88,34 +87,32 @@ export default function Register() {
autoFocus autoFocus
sx={{ mt: 1 }} sx={{ mt: 1 }}
/> />
<Grid container spacing={2}> </Grid>
<Grid> <Grid xs={8}>
<TextField <TextField
{...formik.getFieldProps('verifyCode')} {...formik.getFieldProps('verifyCode')}
required required
error={formik.touched.verifyCode && !!formik.errors.verifyCode} error={formik.touched.verifyCode && !!formik.errors.verifyCode}
helperText={ helperText={
(formik.touched.verifyCode && formik.errors.verifyCode) || ' ' (formik.touched.verifyCode && formik.errors.verifyCode) || ' '
} }
fullWidth fullWidth
label="验证码" label="验证码"
autoComplete="verifyCode" autoComplete="verifyCode"
autoFocus />
sx={{ mt: 1 }} </Grid>
/> <Grid xs={4} mt={1}>
</Grid> <Button
<Grid mt={2} sx={{ flexGrow: 1 }}> size="large"
<Button fullWidth
size="large" variant="contained"
fullWidth disabled={countdown > 0}
variant="contained" onClick={sendVerifyCode}
disabled={countdown > 0} >
onClick={sendVerifyCode} {countdown > 0 ? countdown : '发送验证码'}
> </Button>
{countdown > 0 ? countdown : '发送验证码'} </Grid>
</Button> <Grid xs={12}>
</Grid>
</Grid>
<TextField <TextField
{...formik.getFieldProps('password')} {...formik.getFieldProps('password')}
required required
@ -124,24 +121,25 @@ export default function Register() {
(formik.touched.password && formik.errors.password) || ' ' (formik.touched.password && formik.errors.password) || ' '
} }
fullWidth fullWidth
label="密码" label="新密码"
type="password" type="password"
autoComplete="current-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> </Button>
<Grid container justifyContent="flex-end" sx={{ mt: 2 }}> </Grid>
<Grid> <Grid xs={12} container justifyContent="flex-end" sx={{ mt: 2 }}>
<Typography component="span" variant="body2"> <Grid>
已有账号？ <Typography component="span" variant="body2">
</Typography> 已有账号？
<Link href="/login">登录</Link> </Typography>
</Grid> <Link href="/login">登录</Link>
</Grid> </Grid>
</Box> </Grid>
</Box> </Grid>
</Container> </Container>
) )
} }