SQuiz/frontPanel
3
0
Fork 0
Code Issues 18 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix auth modal links

Browse Source
This commit is contained in:
nflnkr 2023-12-20 14:26:40 +03:00
parent 60d196fcf5
commit 6dbc2dcd01
4 changed files with 554 additions and 527 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/pages/Landing/HeaderLanding.tsx
View File

@ -15,13 +15,9 @@ export default function Component() {
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600)); const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1000)); const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const [select, setSelect] = React.useState(0);
const userId = useUserStore((state) => state.userId); const userId = useUserStore((state) => state.userId);
const navigate = useNavigate();
const location = useLocation(); const location = useLocation();
const onClick = () => (userId ? navigate("/list") : navigate("/signin"));
return ( return (
<SectionStyled <SectionStyled
tag={"header"} tag={"header"}
@ -69,8 +65,10 @@ export default function Component() {
{/* ))}*/} {/* ))}*/}
{/*</Box>*/} {/*</Box>*/}
<Button <Button
component={Link}
to={userId ? "/list" : "/signin"}
state={{ backgroundLocation: location }}
variant="outlined" variant="outlined"
onClick={onClick}
sx={{ sx={{
color: "black", color: "black",
border: "1px solid black", border: "1px solid black",

354
src/pages/auth/Signin.tsx
View File

@ -12,171 +12,171 @@ import { Link as RouterLink, useNavigate, useLocation } from "react-router-dom";
import { object, string } from "yup"; import { object, string } from "yup";
interface Values { interface Values {
email: string; email: string;
password: string; password: string;
} }
const initialValues: Values = { const initialValues: Values = {
email: "", email: "",
password: "", password: "",
}; };
const validationSchema = object({ const validationSchema = object({
email: string().required("Поле обязательно").email("Введите корректный email"), email: string().required("Поле обязательно").email("Введите корректный email"),
password: string().required("Поле обязательно").min(8, "Минимум 8 символов"), password: string().required("Поле обязательно").min(8, "Минимум 8 символов"),
}); });
export default function SigninDialog() { export default function SigninDialog() {
const [isDialogOpen, setIsDialogOpen] = useState<boolean>(true); const [isDialogOpen, setIsDialogOpen] = useState<boolean>(true);
const user = useUserStore((state) => state.user); const user = useUserStore((state) => state.user);
const theme = useTheme(); const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md")); const upMd = useMediaQuery(theme.breakpoints.up("md"));
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation(); const location = useLocation();
const formik = useFormik<Values>({ const formik = useFormik<Values>({
initialValues, initialValues,
validationSchema, validationSchema,
onSubmit: async (values, formikHelpers) => { onSubmit: async (values, formikHelpers) => {
const [loginResponse, loginError] = await login(values.email.trim(), values.password.trim()); const [loginResponse, loginError] = await login(values.email.trim(), values.password.trim());
formikHelpers.setSubmitting(false); formikHelpers.setSubmitting(false);
if (loginError) { if (loginError) {
return enqueueSnackbar(loginError); return enqueueSnackbar(loginError);
} }
if (loginResponse) { if (loginResponse) {
setUserId(loginResponse._id); setUserId(loginResponse._id);
} }
},
});
useEffect(
function redirectIfSignedIn() {
if (user) navigate("/list", { replace: true });
},
[navigate, user]
);
function handleClose() {
setIsDialogOpen(false);
setTimeout(() => navigate("/"), theme.transitions.duration.leavingScreen);
}
return (
<Dialog
open={isDialogOpen}
onClose={handleClose}
PaperProps={{
sx: {
width: "600px",
maxWidth: "600px",
}, },
}} });
slotProps={{
backdrop: { useEffect(
style: { function redirectIfSignedIn() {
backgroundColor: "rgb(0 0 0 / 0.7)", if (user) navigate("/list", { replace: true });
},
}, },
}} [navigate, user]
> );
<Box
component="form" function handleClose() {
onSubmit={formik.handleSubmit} setIsDialogOpen(false);
noValidate setTimeout(() => navigate("/"), theme.transitions.duration.leavingScreen);
sx={{ }
position: "relative",
backgroundColor: "white", return (
display: "flex", <Dialog
alignItems: "center", open={isDialogOpen}
flexDirection: "column", onClose={handleClose}
p: upMd ? "50px" : "18px", PaperProps={{
pb: upMd ? "40px" : "30px", sx: {
gap: "15px", width: "600px",
borderRadius: "12px", maxWidth: "600px",
boxShadow: "0px 15px 80px rgb(210 208 225 / 70%)", },
"& .MuiFormHelperText-root.Mui-error, & .MuiFormHelperText-root.Mui-error.MuiFormHelperText-filled": { }}
position: "absolute", slotProps={{
top: "46px", backdrop: {
margin: "0", style: {
}, backgroundColor: "rgb(0 0 0 / 0.7)",
}} },
> },
<IconButton }}
onClick={handleClose}
sx={{
position: "absolute",
right: "7px",
top: "7px",
}}
> >
<CloseIcon sx={{ transform: "scale(1.5)" }} /> <Box
</IconButton> component="form"
<Box> onSubmit={formik.handleSubmit}
<Logotip width={upMd ? 233 : 196} /> noValidate
</Box> sx={{
<Typography position: "relative",
sx={{ backgroundColor: "white",
color: "#4D4D4D", display: "flex",
mt: "5px", alignItems: "center",
mb: upMd ? "10px" : "33px", flexDirection: "column",
}} p: upMd ? "50px" : "18px",
> pb: upMd ? "40px" : "30px",
Вход в личный кабинет gap: "15px",
</Typography> borderRadius: "12px",
<InputTextfield boxShadow: "0px 15px 80px rgb(210 208 225 / 70%)",
TextfieldProps={{ "& .MuiFormHelperText-root.Mui-error, & .MuiFormHelperText-root.Mui-error.MuiFormHelperText-filled": {
value: formik.values.email, position: "absolute",
placeholder: "username", top: "46px",
onBlur: formik.handleBlur, margin: "0",
error: formik.touched.email && Boolean(formik.errors.email), },
helperText: formik.touched.email && formik.errors.email, }}
"data-cy": "username", >
}} <IconButton
onChange={formik.handleChange} onClick={handleClose}
color="#F2F3F7" sx={{
id="email" position: "absolute",
label="Email" right: "7px",
gap={upMd ? "10px" : "10px"} top: "7px",
/> }}
<PasswordInput >
TextfieldProps={{ <CloseIcon sx={{ transform: "scale(1.5)" }} />
value: formik.values.password, </IconButton>
placeholder: "Не менее 8 символов", <Box>
onBlur: formik.handleBlur, <Logotip width={upMd ? 233 : 196} />
error: formik.touched.password && Boolean(formik.errors.password), </Box>
helperText: formik.touched.password && formik.errors.password, <Typography
type: "password", sx={{
"data-cy": "password", color: "#4D4D4D",
}} mt: "5px",
onChange={formik.handleChange} mb: upMd ? "10px" : "33px",
color="#F2F3F7" }}
id="password" >
label="Пароль" Вход в личный кабинет
gap={upMd ? "10px" : "10px"} </Typography>
/> <InputTextfield
<Button TextfieldProps={{
variant="contained" value: formik.values.email,
fullWidth placeholder: "username",
type="submit" onBlur: formik.handleBlur,
disabled={formik.isSubmitting} error: formik.touched.email && Boolean(formik.errors.email),
sx={{ helperText: formik.touched.email && formik.errors.email,
py: "12px", "data-cy": "username",
"&:hover": { }}
backgroundColor: "#581CA7", onChange={formik.handleChange}
}, color="#F2F3F7"
"&:active": { id="email"
color: "white", label="Email"
backgroundColor: "black", gap={upMd ? "10px" : "10px"}
}, />
}} <PasswordInput
data-cy="signin" TextfieldProps={{
> value: formik.values.password,
Войти placeholder: "Не менее 8 символов",
</Button> onBlur: formik.handleBlur,
{/* <Link error: formik.touched.password && Boolean(formik.errors.password),
helperText: formik.touched.password && formik.errors.password,
type: "password",
"data-cy": "password",
}}
onChange={formik.handleChange}
color="#F2F3F7"
id="password"
label="Пароль"
gap={upMd ? "10px" : "10px"}
/>
<Button
variant="contained"
fullWidth
type="submit"
disabled={formik.isSubmitting}
sx={{
py: "12px",
"&:hover": {
backgroundColor: "#581CA7",
},
"&:active": {
color: "white",
backgroundColor: "black",
},
}}
data-cy="signin"
>
Войти
</Button>
{/* <Link
component={RouterLink} component={RouterLink}
to="/" to="/"
href="#" href="#"
@ -188,26 +188,38 @@ export default function SigninDialog() {
> >
Забыли пароль? Забыли пароль?
</Link> */} </Link> */}
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
alignItems: "center", alignItems: "center",
gap: "10px", gap: "10px",
mt: "auto", mt: "auto",
}} }}
> >
<Typography sx={{ color: "#7E2AEA", textAlign: "center" }}>Вы еще не присоединились?</Typography> <Typography sx={{ color: "#7E2AEA", textAlign: "center" }}>Вы еще не присоединились?</Typography>
<Box sx={{ display: "flex", alignItems: "center", gap: "4px" }}> <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "15px" }}>
<Link component={RouterLink} to="/signup" sx={{ color: "#7E2AEA" }}> <Link
Регистрация component={RouterLink}
</Link> to="/signup"
<Link component={RouterLink} to="/restore" sx={{ color: "#7E2AEA" }}> state={{ backgroundLocation: location.state.backgroundLocation }}
Забыли пароль sx={{
</Link> color: "#7E2AEA"
</Box> }}>
</Box> Регистрация
</Box> </Link>
</Dialog> <Link
); component={RouterLink}
to="/restore"
state={{ backgroundLocation: location.state.backgroundLocation }}
sx={{
color: "#7E2AEA"
}}>
Забыли пароль
</Link>
</Box>
</Box>
</Box>
</Dialog>
);
} }

385
src/pages/auth/Signup.tsx
View File

@ -12,210 +12,215 @@ import { Link as RouterLink, useLocation, useNavigate } from "react-router-dom";
import { object, ref, string } from "yup"; import { object, ref, string } from "yup";
interface Values { interface Values {
email: string; email: string;
password: string; password: string;
repeatPassword: string; repeatPassword: string;
} }
const initialValues: Values = { const initialValues: Values = {
email: "", email: "",
password: "", password: "",
repeatPassword: "", repeatPassword: "",
}; };
const validationSchema = object({ const validationSchema = object({
email: string().required("Поле обязательно").email("Введите корректный email"), email: string().required("Поле обязательно").email("Введите корректный email"),
password: string() password: string()
.min(8, "Минимум 8 символов") .min(8, "Минимум 8 символов")
.matches(/^[.,:;-_+\d\w]+$/, "Некорректные символы") .matches(/^[.,:;-_+\d\w]+$/, "Некорректные символы")
.required("Поле обязательно"), .required("Поле обязательно"),
repeatPassword: string() repeatPassword: string()
.oneOf([ref("password"), undefined], "Пароли не совпадают") .oneOf([ref("password"), undefined], "Пароли не совпадают")
.required("Повторите пароль"), .required("Повторите пароль"),
}); });
export default function SignupDialog() { export default function SignupDialog() {
const [isDialogOpen, setIsDialogOpen] = useState<boolean>(true); const [isDialogOpen, setIsDialogOpen] = useState<boolean>(true);
const user = useUserStore((state) => state.user); const user = useUserStore((state) => state.user);
const theme = useTheme(); const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md")); const upMd = useMediaQuery(theme.breakpoints.up("md"));
const location = useLocation(); const location = useLocation();
const navigate = useNavigate(); const navigate = useNavigate();
const formik = useFormik<Values>({ const formik = useFormik<Values>({
initialValues, initialValues,
validationSchema, validationSchema,
onSubmit: async (values, formikHelpers) => { onSubmit: async (values, formikHelpers) => {
const [registerResponse, registerError] = await register(values.email.trim(), values.password.trim(), "+7"); const [registerResponse, registerError] = await register(values.email.trim(), values.password.trim(), "+7");
formikHelpers.setSubmitting(false); formikHelpers.setSubmitting(false);
if (registerError) { if (registerError) {
return enqueueSnackbar(registerError); return enqueueSnackbar(registerError);
} }
if (registerResponse) { if (registerResponse) {
setUserId(registerResponse._id); setUserId(registerResponse._id);
} }
},
});
useEffect(
function redirectIfSignedIn() {
if (user) navigate("/list", { replace: true });
},
[navigate, user]
);
function handleClose() {
setIsDialogOpen(false);
setTimeout(() => navigate("/"), theme.transitions.duration.leavingScreen);
}
return (
<Dialog
open={isDialogOpen}
onClose={handleClose}
PaperProps={{
sx: {
width: "600px",
maxWidth: "600px",
}, },
}} });
slotProps={{
backdrop: {
style: {
backgroundColor: "rgb(0 0 0 / 0.7)",
},
},
}}
>
<Box
component="form"
onSubmit={formik.handleSubmit}
noValidate
sx={{
position: "relative",
backgroundColor: "white",
display: "flex",
alignItems: "center",
flexDirection: "column",
p: upMd ? "50px" : "18px",
pb: upMd ? "40px" : "30px",
gap: "15px",
borderRadius: "12px",
boxShadow: "0px 15px 80px rgb(210 208 225 / 70%)",
"& .MuiFormHelperText-root.Mui-error, & .MuiFormHelperText-root.Mui-error.MuiFormHelperText-filled": {
position: "absolute",
top: "46px",
margin: "0",
},
}}
>
<IconButton
onClick={handleClose}
sx={{
position: "absolute",
right: "7px",
top: "7px",
}}
>
<CloseIcon sx={{ transform: "scale(1.5)" }} />
</IconButton>
<Box sx={{ mt: upMd ? undefined : "62px" }}>
<Logotip width={upMd ? 233 : 196} />
</Box>
<Typography
sx={{
color: "#4D4D4D",
mt: "5px",
mb: upMd ? "35px" : "33px",
}}
>
Регистрация
</Typography>
<InputTextfield
TextfieldProps={{
value: formik.values.email,
placeholder: "username",
onBlur: formik.handleBlur,
error: formik.touched.email && Boolean(formik.errors.email),
helperText: formik.touched.email && formik.errors.email,
"data-cy": "username",
}}
onChange={formik.handleChange}
color="#F2F3F7"
id="email"
label="Email"
gap={upMd ? "10px" : "10px"}
/>
<PasswordInput
TextfieldProps={{
value: formik.values.password,
placeholder: "Не менее 8 символов",
onBlur: formik.handleBlur,
error: formik.touched.password && Boolean(formik.errors.password),
helperText: formik.touched.password && formik.errors.password,
autoComplete: "new-password",
"data-cy": "password",
}}
onChange={formik.handleChange}
color="#F2F3F7"
id="password"
label="Пароль"
gap={upMd ? "10px" : "10px"}
/>
<PasswordInput
TextfieldProps={{
value: formik.values.repeatPassword,
placeholder: "Не менее 8 символов",
onBlur: formik.handleBlur,
error: formik.touched.repeatPassword && Boolean(formik.errors.repeatPassword),
helperText: formik.touched.repeatPassword && formik.errors.repeatPassword,
autoComplete: "new-password",
"data-cy": "repeat-password",
}}
onChange={formik.handleChange}
color="#F2F3F7"
id="repeatPassword"
label="Повторить пароль"
gap={upMd ? "10px" : "10px"}
/>
<Button
variant="contained"
fullWidth
type="submit"
disabled={formik.isSubmitting}
sx={{
py: "12px",
"&:hover": {
backgroundColor: "#581CA7",
},
"&:active": {
color: "white",
backgroundColor: "black",
},
}}
data-cy="signup"
>
Зарегистрироваться
</Button>
<Link useEffect(
component={RouterLink} function redirectIfSignedIn() {
to="/signin" if (user) navigate("/list", { replace: true });
state={{ backgroundLocation: location.state.backgroundLocation }} },
sx={{ [navigate, user]
color: "#7E2AEA", );
mt: "auto",
}} function handleClose() {
setIsDialogOpen(false);
setTimeout(() => navigate("/"), theme.transitions.duration.leavingScreen);
}
return (
<Dialog
open={isDialogOpen}
onClose={handleClose}
PaperProps={{
sx: {
width: "600px",
maxWidth: "600px",
},
}}
slotProps={{
backdrop: {
style: {
backgroundColor: "rgb(0 0 0 / 0.7)",
},
},
}}
> >
Вход в личный кабинет <Box
</Link> component="form"
<Link component={RouterLink} to="/restore" sx={{ color: "#7E2AEA" }}> onSubmit={formik.handleSubmit}
Забыли пароль noValidate
</Link> sx={{
</Box> position: "relative",
</Dialog> backgroundColor: "white",
); display: "flex",
alignItems: "center",
flexDirection: "column",
p: upMd ? "50px" : "18px",
pb: upMd ? "40px" : "30px",
gap: "15px",
borderRadius: "12px",
boxShadow: "0px 15px 80px rgb(210 208 225 / 70%)",
"& .MuiFormHelperText-root.Mui-error, & .MuiFormHelperText-root.Mui-error.MuiFormHelperText-filled": {
position: "absolute",
top: "46px",
margin: "0",
},
}}
>
<IconButton
onClick={handleClose}
sx={{
position: "absolute",
right: "7px",
top: "7px",
}}
>
<CloseIcon sx={{ transform: "scale(1.5)" }} />
</IconButton>
<Box sx={{ mt: upMd ? undefined : "62px" }}>
<Logotip width={upMd ? 233 : 196} />
</Box>
<Typography
sx={{
color: "#4D4D4D",
mt: "5px",
mb: upMd ? "35px" : "33px",
}}
>
Регистрация
</Typography>
<InputTextfield
TextfieldProps={{
value: formik.values.email,
placeholder: "username",
onBlur: formik.handleBlur,
error: formik.touched.email && Boolean(formik.errors.email),
helperText: formik.touched.email && formik.errors.email,
"data-cy": "username",
}}
onChange={formik.handleChange}
color="#F2F3F7"
id="email"
label="Email"
gap={upMd ? "10px" : "10px"}
/>
<PasswordInput
TextfieldProps={{
value: formik.values.password,
placeholder: "Не менее 8 символов",
onBlur: formik.handleBlur,
error: formik.touched.password && Boolean(formik.errors.password),
helperText: formik.touched.password && formik.errors.password,
autoComplete: "new-password",
"data-cy": "password",
}}
onChange={formik.handleChange}
color="#F2F3F7"
id="password"
label="Пароль"
gap={upMd ? "10px" : "10px"}
/>
<PasswordInput
TextfieldProps={{
value: formik.values.repeatPassword,
placeholder: "Не менее 8 символов",
onBlur: formik.handleBlur,
error: formik.touched.repeatPassword && Boolean(formik.errors.repeatPassword),
helperText: formik.touched.repeatPassword && formik.errors.repeatPassword,
autoComplete: "new-password",
"data-cy": "repeat-password",
}}
onChange={formik.handleChange}
color="#F2F3F7"
id="repeatPassword"
label="Повторить пароль"
gap={upMd ? "10px" : "10px"}
/>
<Button
variant="contained"
fullWidth
type="submit"
disabled={formik.isSubmitting}
sx={{
py: "12px",
"&:hover": {
backgroundColor: "#581CA7",
},
"&:active": {
color: "white",
backgroundColor: "black",
},
}}
data-cy="signup"
>
Зарегистрироваться
</Button>
<Link
component={RouterLink}
to="/signin"
state={{ backgroundLocation: location.state.backgroundLocation }}
sx={{
color: "#7E2AEA",
mt: "auto",
}}
>
Вход в личный кабинет
</Link>
<Link
component={RouterLink}
to="/restore"
state={{ backgroundLocation: location.state.backgroundLocation }}
sx={{ color: "#7E2AEA" }}
>
Забыли пароль
</Link>
</Box>
</Dialog>
);
} }

334
src/pages/startPage/Restore.tsx
View File

@ -1,183 +1,195 @@
import { FC, useState } from "react"; import { FC, useState } from "react";
import CloseIcon from "@mui/icons-material/Close"; import CloseIcon from "@mui/icons-material/Close";
import { Box, Button, Dialog, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material"; import { Box, Button, Dialog, IconButton, Link, Typography, useMediaQuery, useTheme } from "@mui/material";
import InputTextfield from "@ui_kit/InputTextfield"; import InputTextfield from "@ui_kit/InputTextfield";
import PasswordInput from "@ui_kit/passwordInput"; import PasswordInput from "@ui_kit/passwordInput";
import { useFormik } from "formik"; import { useFormik } from "formik";
import { object, ref, string } from "yup"; import { object, ref, string } from "yup";
import Logotip from "../Landing/images/icons/QuizLogo"; import Logotip from "../Landing/images/icons/QuizLogo";
import { useNavigate } from "react-router-dom"; import { useNavigate, Link as RouterLink, useLocation } from "react-router-dom";
interface Values { interface Values {
email: string; email: string;
password: string; password: string;
repeatPassword: string; repeatPassword: string;
} }
const initialValues: Values = { const initialValues: Values = {
email: "", email: "",
password: "", password: "",
repeatPassword: "", repeatPassword: "",
}; };
const validationSchema = object({ const validationSchema = object({
email: string().required("Поле обязательно").email("Введите корректный email"), email: string().required("Поле обязательно").email("Введите корректный email"),
password: string() password: string()
.min(8, "Минимум 8 символов") .min(8, "Минимум 8 символов")
.matches(/^[.,:;-_+\d\w]+$/, "Некорректные символы") .matches(/^[.,:;-_+\d\w]+$/, "Некорректные символы")
.required("Поле обязательно"), .required("Поле обязательно"),
repeatPassword: string() repeatPassword: string()
.oneOf([ref("password"), undefined], "Пароли не совпадают") .oneOf([ref("password"), undefined], "Пароли не совпадают")
.required("Повторите пароль"), .required("Повторите пароль"),
}); });
export const Restore: FC = () => { export const Restore: FC = () => {
const [isDialogOpen, setIsDialogOpen] = useState<boolean>(true); const [isDialogOpen, setIsDialogOpen] = useState<boolean>(true);
const navigate = useNavigate(); const navigate = useNavigate();
const theme = useTheme(); const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md")); const upMd = useMediaQuery(theme.breakpoints.up("md"));
const location = useLocation();
const formik = useFormik<Values>({ const formik = useFormik<Values>({
initialValues, initialValues,
validationSchema, validationSchema,
onSubmit: (values) => { onSubmit: (values) => {
},
});
function handleClose() {
setIsDialogOpen(false);
setTimeout(() => navigate("/"), theme.transitions.duration.leavingScreen);
}
return (
<Dialog
open={isDialogOpen}
onClose={handleClose}
PaperProps={{
sx: {
width: "600px",
maxWidth: "600px",
}, },
}} });
slotProps={{
backdrop: { function handleClose() {
style: { setIsDialogOpen(false);
backgroundColor: "rgb(0 0 0 / 0.7)", setTimeout(() => navigate("/"), theme.transitions.duration.leavingScreen);
}, }
},
}} return (
> <Dialog
<Box open={isDialogOpen}
component="form" onClose={handleClose}
onSubmit={formik.handleSubmit} PaperProps={{
noValidate sx: {
sx={{ width: "600px",
position: "relative", maxWidth: "600px",
backgroundColor: "white", },
display: "flex", }}
alignItems: "center", slotProps={{
flexDirection: "column", backdrop: {
p: upMd ? "50px" : "18px", style: {
pb: upMd ? "40px" : "30px", backgroundColor: "rgb(0 0 0 / 0.7)",
gap: "15px", },
borderRadius: "12px", },
boxShadow: "0px 15px 80px rgb(210 208 225 / 70%)", }}
"& .MuiFormHelperText-root.Mui-error, & .MuiFormHelperText-root.Mui-error.MuiFormHelperText-filled": {
position: "absolute",
top: "46px",
margin: "0",
},
}}
>
<IconButton
onClick={handleClose}
sx={{
position: "absolute",
right: "7px",
top: "7px",
}}
> >
<CloseIcon sx={{ transform: "scale(1.5)" }} /> <Box
</IconButton> component="form"
<Box sx={{ mt: upMd ? undefined : "62px" }}> onSubmit={formik.handleSubmit}
<Logotip width={upMd ? 233 : 196} /> noValidate
</Box> sx={{
<Typography position: "relative",
sx={{ backgroundColor: "white",
color: "#4D4D4D", display: "flex",
mt: "5px", alignItems: "center",
mb: upMd ? "30px" : "33px", flexDirection: "column",
}} p: upMd ? "50px" : "18px",
> pb: upMd ? "40px" : "30px",
Восстановление пароля gap: "15px",
</Typography> borderRadius: "12px",
<InputTextfield boxShadow: "0px 15px 80px rgb(210 208 225 / 70%)",
TextfieldProps={{ "& .MuiFormHelperText-root.Mui-error, & .MuiFormHelperText-root.Mui-error.MuiFormHelperText-filled": {
value: formik.values.email, position: "absolute",
placeholder: "username", top: "46px",
onBlur: formik.handleBlur, margin: "0",
error: formik.touched.email && Boolean(formik.errors.email), },
helperText: formik.touched.email && formik.errors.email, }}
"data-cy": "username", >
}} <IconButton
onChange={formik.handleChange} onClick={handleClose}
color="#F2F3F7" sx={{
id="email" position: "absolute",
label="Email" right: "7px",
gap={upMd ? "10px" : "10px"} top: "7px",
/> }}
<PasswordInput >
TextfieldProps={{ <CloseIcon sx={{ transform: "scale(1.5)" }} />
value: formik.values.password, </IconButton>
placeholder: "Не менее 8 символов", <Box sx={{ mt: upMd ? undefined : "62px" }}>
onBlur: formik.handleBlur, <Logotip width={upMd ? 233 : 196} />
error: formik.touched.password && Boolean(formik.errors.password), </Box>
helperText: formik.touched.password && formik.errors.password, <Typography
autoComplete: "new-password", sx={{
"data-cy": "password", color: "#4D4D4D",
}} mt: "5px",
onChange={formik.handleChange} mb: upMd ? "30px" : "33px",
color="#F2F3F7" }}
id="password" >
label="Пароль" Восстановление пароля
gap={upMd ? "10px" : "10px"} </Typography>
/> <InputTextfield
<PasswordInput TextfieldProps={{
TextfieldProps={{ value: formik.values.email,
value: formik.values.repeatPassword, placeholder: "username",
placeholder: "Не менее 8 символов", onBlur: formik.handleBlur,
onBlur: formik.handleBlur, error: formik.touched.email && Boolean(formik.errors.email),
error: formik.touched.repeatPassword && Boolean(formik.errors.repeatPassword), helperText: formik.touched.email && formik.errors.email,
helperText: formik.touched.repeatPassword && formik.errors.repeatPassword, "data-cy": "username",
autoComplete: "new-password", }}
"data-cy": "repeat-password", onChange={formik.handleChange}
}} color="#F2F3F7"
onChange={formik.handleChange} id="email"
color="#F2F3F7" label="Email"
id="repeatPassword" gap={upMd ? "10px" : "10px"}
label="Повторить пароль" />
gap={upMd ? "10px" : "10px"} <PasswordInput
/> TextfieldProps={{
<Button value: formik.values.password,
variant="contained" placeholder: "Не менее 8 символов",
fullWidth onBlur: formik.handleBlur,
type="submit" error: formik.touched.password && Boolean(formik.errors.password),
disabled={formik.isSubmitting} helperText: formik.touched.password && formik.errors.password,
sx={{ autoComplete: "new-password",
py: "12px", "data-cy": "password",
"&:hover": { }}
backgroundColor: "#581CA7", onChange={formik.handleChange}
}, color="#F2F3F7"
"&:active": { id="password"
color: "white", label="Пароль"
backgroundColor: "black", gap={upMd ? "10px" : "10px"}
}, />
}} <PasswordInput
data-cy="signup" TextfieldProps={{
> value: formik.values.repeatPassword,
Восстановить placeholder: "Не менее 8 символов",
</Button> onBlur: formik.handleBlur,
</Box> error: formik.touched.repeatPassword && Boolean(formik.errors.repeatPassword),
</Dialog> helperText: formik.touched.repeatPassword && formik.errors.repeatPassword,
); autoComplete: "new-password",
"data-cy": "repeat-password",
}}
onChange={formik.handleChange}
color="#F2F3F7"
id="repeatPassword"
label="Повторить пароль"
gap={upMd ? "10px" : "10px"}
/>
<Button
variant="contained"
fullWidth
type="submit"
disabled={formik.isSubmitting}
sx={{
py: "12px",
"&:hover": {
backgroundColor: "#581CA7",
},
"&:active": {
color: "white",
backgroundColor: "black",
},
}}
data-cy="signup"
>
Восстановить
</Button>
<Link
component={RouterLink}
to="/signin"
state={{ backgroundLocation: location.state.backgroundLocation }}
sx={{
color: "#7E2AEA",
mt: "auto",
}}
>
У меня уже есть аккаунт
</Link>
</Box>
</Dialog>
);
}; };