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: '',
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>
<TextField
{...formik.getFieldProps('email')}
disabled
helperText={' '}
fullWidth
label="邮箱"
sx={{ mt: 1 }}
/>
<Grid container spacing={2}>
<Grid>
<Grid container spacing={[2, 1]}>
<Grid xs={12}>
<TextField
{...formik.getFieldProps('email')}
disabled
helperText=" "
fullWidth
label="邮箱"
/>
</Grid>
<Grid xs={8}>
<TextField
{...formik.getFieldProps('verifyCode')}
required
@ -90,35 +92,35 @@ 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 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>
<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>
<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>

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 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,27 +58,29 @@ export default function ForgetPassword() {
}
return (
<Container component="main" sx={{ width: 400 }}>
<Box
sx={{
marginTop: '20vh',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
<Container
component="main"
maxWidth="xs"
sx={{
marginTop: '20vh',
display: 'flex',
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' }}>
<KeyIcon />
</Avatar>
<Typography component="h1" variant="h5">
找回密码
</Typography>
<Box
component="form"
onSubmit={formik.handleSubmit}
noValidate
sx={{ mt: 1, width: '100%' }}
>
<Grid xs={12}>
<TextField
{...formik.getFieldProps('email')}
required
@ -93,34 +92,32 @@ export default function ForgetPassword() {
autoFocus
sx={{ mt: 1 }}
/>
<Grid container spacing={2}>
<Grid>
<TextField
{...formik.getFieldProps('verifyCode')}
required
error={formik.touched.verifyCode && !!formik.errors.verifyCode}
helperText={
(formik.touched.verifyCode && formik.errors.verifyCode) || ' '
}
fullWidth
label="验证码"
autoComplete="verifyCode"
autoFocus
sx={{ mt: 1 }}
/>
</Grid>
<Grid mt={2} sx={{ flexGrow: 1 }}>
<Button
size="large"
fullWidth
variant="contained"
disabled={countdown > 0}
onClick={sendVerifyCode}
>
{countdown > 0 ? countdown : '发送验证码'}
</Button>
</Grid>
</Grid>
</Grid>
<Grid xs={8}>
<TextField
{...formik.getFieldProps('verifyCode')}
required
error={formik.touched.verifyCode && !!formik.errors.verifyCode}
helperText={
(formik.touched.verifyCode && formik.errors.verifyCode) || ' '
}
fullWidth
label="验证码"
autoComplete="verifyCode"
/>
</Grid>
<Grid xs={4} mt={1}>
<Button
size="large"
fullWidth
variant="contained"
disabled={countdown > 0}
onClick={sendVerifyCode}
>
{countdown > 0 ? countdown : '发送验证码'}
</Button>
</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>
<Link href="/login">登录</Link>
</Grid>
</Grid>
</Box>
</Box>
</Grid>
<Grid xs={12} container justifyContent="flex-end" sx={{ mt: 2 }}>
<Link href="/login">登录</Link>
</Grid>
</Grid>
</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 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,68 +33,63 @@ export default function Login() {
})
return (
<Container component="main" sx={{ width: 400 }}>
<Box
sx={{
marginTop: '20vh',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<Avatar sx={{ m: 1, bgcolor: 'primary.main' }}>
<LoginIcon />
</Avatar>
<Typography component="h1" variant="h5">
登录
</Typography>
<Box
component="form"
onSubmit={formik.handleSubmit}
noValidate
<Container
component="main"
maxWidth="xs"
sx={{
marginTop: '20vh',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<Avatar sx={{ bgcolor: 'primary.main' }}>
<LoginIcon />
</Avatar>
<Typography component="h1" variant="h5" mt={1} mb={3}>
登录
</Typography>
<Box component="form" onSubmit={formik.handleSubmit}>
<TextField
{...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 }}
>
<TextField
{...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 }}
/>
<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 }}
/>
<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>
/>
<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 }}
/>
<Button type="submit" fullWidth variant="contained" sx={{ mt: 1 }}>
登录
</Button>
<Grid container sx={{ mt: 2 }}>
<Grid xs>
<Link href="/forget-password" variant="body2">
忘记密码？
</Link>
</Grid>
</Box>
<Grid>
<Typography component="span" variant="body2">
没有账号？
</Typography>
<Link href="/register">注册</Link>
</Grid>
</Grid>
</Box>
</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 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,27 +53,29 @@ export default function Register() {
}
return (
<Container component="main" sx={{ width: 400 }}>
<Box
sx={{
marginTop: '20vh',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
<Container
component="main"
maxWidth="xs"
sx={{
marginTop: '20vh',
display: 'flex',
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' }}>
<AppRegistrationIcon />
</Avatar>
<Typography component="h1" variant="h5">
注册
</Typography>
<Box
component="form"
onSubmit={formik.handleSubmit}
noValidate
sx={{ mt: 1, width: '100%' }}
>
<Grid xs={12}>
<TextField
{...formik.getFieldProps('email')}
required
@ -88,34 +87,32 @@ export default function Register() {
autoFocus
sx={{ mt: 1 }}
/>
<Grid container spacing={2}>
<Grid>
<TextField
{...formik.getFieldProps('verifyCode')}
required
error={formik.touched.verifyCode && !!formik.errors.verifyCode}
helperText={
(formik.touched.verifyCode && formik.errors.verifyCode) || ' '
}
fullWidth
label="验证码"
autoComplete="verifyCode"
autoFocus
sx={{ mt: 1 }}
/>
</Grid>
<Grid mt={2} sx={{ flexGrow: 1 }}>
<Button
size="large"
fullWidth
variant="contained"
disabled={countdown > 0}
onClick={sendVerifyCode}
>
{countdown > 0 ? countdown : '发送验证码'}
</Button>
</Grid>
</Grid>
</Grid>
<Grid xs={8}>
<TextField
{...formik.getFieldProps('verifyCode')}
required
error={formik.touched.verifyCode && !!formik.errors.verifyCode}
helperText={
(formik.touched.verifyCode && formik.errors.verifyCode) || ' '
}
fullWidth
label="验证码"
autoComplete="verifyCode"
/>
</Grid>
<Grid xs={4} mt={1}>
<Button
size="large"
fullWidth
variant="contained"
disabled={countdown > 0}
onClick={sendVerifyCode}
>
{countdown > 0 ? countdown : '发送验证码'}
</Button>
</Grid>
<Grid xs={12}>
<TextField
{...formik.getFieldProps('password')}
required
@ -124,24 +121,25 @@ 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>
<Typography component="span" variant="body2">
已有账号？
</Typography>
<Link href="/login">登录</Link>
</Grid>
</Grid>
<Grid xs={12} container justifyContent="flex-end" sx={{ mt: 2 }}>
<Grid>
<Typography component="span" variant="body2">
已有账号？
</Typography>
<Link href="/login">登录</Link>
</Grid>
</Box>
</Box>
</Grid>
</Grid>
</Container>
)
}