151 lines
7.5 KiB
JavaScript
151 lines
7.5 KiB
JavaScript
import StyledForm from "@/core/components/StyledForm";
|
|
import {SEND_OTP_TOKEN} from "@/core/data/apiRoutes";
|
|
import FingerprintIcon from "@mui/icons-material/Fingerprint";
|
|
import PersonAddIcon from "@mui/icons-material/PersonAdd";
|
|
import {Button, Container, Grid, Paper, Stack, TextField, Typography,} from "@mui/material";
|
|
import {Field, Formik} from "formik";
|
|
import {useTranslations} from "next-intl";
|
|
import {useSearchParams} from "next/navigation";
|
|
import * as Yup from "yup";
|
|
import SvgLogin from "@/core/components/svgs/SvgLogin";
|
|
import {CenterLayout, FullPageLayout, LinkRouting, useRequest} from "@witel/webapp-builder";
|
|
|
|
|
|
const SendUserDataComponent = ({
|
|
setOtpToken,
|
|
setPhoneNumber,
|
|
PhoneNumber,
|
|
setTimer,
|
|
initialTimerValue,
|
|
}) => {
|
|
const t = useTranslations();
|
|
const requestServer = useRequest();
|
|
|
|
const searchParams = useSearchParams();
|
|
const backUrlDecodedPath = searchParams.get("back_url");
|
|
|
|
const initialValues = {
|
|
phone_number: PhoneNumber,
|
|
};
|
|
const validationSchema = Yup.object().shape({
|
|
phone_number: Yup.string().required(t("LoginPage.error_message_phone_number")),
|
|
});
|
|
|
|
const handleSubmit = (values, props) => {
|
|
requestServer(SEND_OTP_TOKEN, "post", {
|
|
auth: false, data: {
|
|
phone_number: values.phone_number,
|
|
}
|
|
})
|
|
.then(function (response) {
|
|
setPhoneNumber(values.phone_number);
|
|
setOtpToken(true);
|
|
setTimer(initialTimerValue);
|
|
}).catch(function (error) {
|
|
props.setSubmitting(false);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<FullPageLayout sx={{p: 1}}>
|
|
<CenterLayout>
|
|
<Container maxWidth="sm">
|
|
<Paper elevation={0}>
|
|
<Formik
|
|
initialValues={initialValues}
|
|
onSubmit={handleSubmit}
|
|
validationSchema={validationSchema}
|
|
>
|
|
{(props) => (
|
|
<Stack spacing={2} sx={{p: 2}}>
|
|
<Stack
|
|
sx={{width: "100%"}}
|
|
alignItems='center'
|
|
>
|
|
<SvgLogin width={300} height={200}/>
|
|
</Stack>
|
|
<Typography margin={2} variant="h4" textAlign="center">
|
|
{t("Titles.title_login_page")}
|
|
</Typography>
|
|
<StyledForm sx={{width: "100%"}}>
|
|
<Stack spacing={3} sx={{p: 2}}>
|
|
<Field
|
|
as={TextField}
|
|
name="phone_number"
|
|
variant="outlined"
|
|
label={t("LoginPage.text_field_phone_number")}
|
|
placeholder={t(
|
|
"LoginPage.text_field_enter_your_phone_number"
|
|
)}
|
|
type={"text"}
|
|
error={
|
|
!!(props.touched.phone_number && props.errors.phone_number)
|
|
}
|
|
fullWidth
|
|
helperText={
|
|
props.touched.phone_number
|
|
? props.errors.phone_number
|
|
: null
|
|
}
|
|
/>
|
|
<Grid
|
|
container
|
|
rowSpacing={{xs: 1, sm: 0}}
|
|
sx={{
|
|
flexDirection: {xs: "column-reverse", sm: "row"},
|
|
}}
|
|
>
|
|
<Grid item xs={12} sm={6} sx={{pr: {xs: 0, sm: 1}}}>
|
|
<LinkRouting href={"/register"}>
|
|
<Button
|
|
fullWidth
|
|
type="button"
|
|
variant="outlined"
|
|
size="large"
|
|
endIcon={<PersonAddIcon/>}
|
|
disabled={props.isSubmitting}
|
|
>
|
|
{t("LoginPage.button_make_account")}
|
|
</Button>
|
|
</LinkRouting>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6} sx={{pl: {xs: 0, sm: 1}}}>
|
|
<Button
|
|
fullWidth
|
|
type="submit"
|
|
variant="contained"
|
|
size="large"
|
|
endIcon={<FingerprintIcon/>}
|
|
disabled={props.isSubmitting}
|
|
>
|
|
{t("LoginPage.button_request_verification")}
|
|
</Button>
|
|
</Grid>
|
|
</Grid>
|
|
</Stack>
|
|
</StyledForm>
|
|
</Stack>
|
|
)}
|
|
</Formik>
|
|
</Paper>
|
|
</Container>
|
|
</CenterLayout>
|
|
<Stack direction="row" alignItems="center" justifyContent="center">
|
|
<LinkRouting
|
|
sx={{margin: 2}}
|
|
href={
|
|
backUrlDecodedPath ? decodeURIComponent(backUrlDecodedPath) : "/"
|
|
}
|
|
>
|
|
{t("LoginPage.link_routing_back_to")}{" "}
|
|
{backUrlDecodedPath
|
|
? t("LoginPage.link_routing_previuos_page")
|
|
: t("LoginPage.link_routing_main_page")}
|
|
</LinkRouting>
|
|
</Stack>
|
|
</FullPageLayout>
|
|
);
|
|
};
|
|
|
|
export default SendUserDataComponent;
|