129 lines
4.3 KiB
TypeScript
129 lines
4.3 KiB
TypeScript
import * as React from "react";
|
||
import { useNavigate } from "react-router-dom";
|
||
import { Formik, Field, Form } from "formik";
|
||
import { useTheme } from "@mui/material/styles";
|
||
import { Link } from "react-router-dom";
|
||
import { Box, Typography } from "@mui/material";
|
||
import Logo from "@pages/Logo";
|
||
import CleverButton from "@kitUI/cleverButton";
|
||
import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined";
|
||
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
|
||
import OutlinedInput from "@kitUI/outlinedInput";
|
||
|
||
export default () => {
|
||
const theme = useTheme();
|
||
const navigate = useNavigate();
|
||
const [restore, setRestore] = React.useState(true);
|
||
const [isReady, setIsReady] = React.useState(true);
|
||
if (restore) {
|
||
return (
|
||
<Formik
|
||
initialValues={{
|
||
mail: "",
|
||
}}
|
||
onSubmit={(values) => {
|
||
setRestore(false);
|
||
}}
|
||
>
|
||
<Form>
|
||
<Box
|
||
component="section"
|
||
sx={{
|
||
minHeight: "100vh",
|
||
height: "100%",
|
||
width: "100%",
|
||
backgroundColor: theme.palette.content.main,
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
padding: "15px 0",
|
||
}}
|
||
>
|
||
<Box
|
||
component="article"
|
||
sx={{
|
||
width: "350px",
|
||
backgroundColor: theme.palette.content.main,
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "center",
|
||
"> *": {
|
||
marginTop: "15px",
|
||
},
|
||
}}
|
||
>
|
||
<Typography variant="h6" color={theme.palette.secondary.main}>
|
||
Восстановление пароля
|
||
</Typography>
|
||
<Logo />
|
||
|
||
<Box sx={{ display: "flex", alignItems: "center", marginTop: "15px", "> *": { marginRight: "10px" } }}>
|
||
<EmailOutlinedIcon htmlColor={theme.palette.golden.main} />
|
||
<Field as={OutlinedInput} autoComplete="none" variant="filled" name="mail" label="Эл. почта" />
|
||
</Box>
|
||
<CleverButton type="submit" text="Отправить" isReady={isReady} />
|
||
<Link to="/signin" style={{ textDecoration: "none" }}>
|
||
<Typography color={theme.palette.golden.main}>Я помню пароль</Typography>
|
||
</Link>
|
||
</Box>
|
||
</Box>
|
||
</Form>
|
||
</Formik>
|
||
);
|
||
} else {
|
||
return (
|
||
<Formik
|
||
initialValues={{
|
||
code: "",
|
||
}}
|
||
onSubmit={(values) => {}}
|
||
>
|
||
<Form>
|
||
<Box
|
||
component="section"
|
||
sx={{
|
||
minHeight: "100vh",
|
||
height: "100%",
|
||
width: "100%",
|
||
backgroundColor: theme.palette.content.main,
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
padding: "15px 0",
|
||
}}
|
||
>
|
||
<Box
|
||
component="article"
|
||
sx={{
|
||
width: "350px",
|
||
backgroundColor: theme.palette.content.main,
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "center",
|
||
"> *": {
|
||
marginTop: "15px",
|
||
},
|
||
}}
|
||
>
|
||
<Typography variant="h6" color={theme.palette.secondary.main}>
|
||
Восстановление пароля
|
||
</Typography>
|
||
<Logo />
|
||
|
||
<Box sx={{ display: "flex", alignItems: "center", marginTop: "15px", "> *": { marginRight: "10px" } }}>
|
||
<LockOutlinedIcon htmlColor={theme.palette.golden.main} />
|
||
<Field as={OutlinedInput} name="code" variant="filled" label="Код из сообщения" />
|
||
</Box>
|
||
|
||
<CleverButton type="submit" text="Отправить" isReady={isReady} />
|
||
<Link to="/signin" style={{ textDecoration: "none" }}>
|
||
<Typography color={theme.palette.golden.main}>Я помню пароль</Typography>
|
||
</Link>
|
||
</Box>
|
||
</Box>
|
||
</Form>
|
||
</Formik>
|
||
);
|
||
}
|
||
};
|