196 lines
10 KiB
JavaScript
196 lines
10 KiB
JavaScript
import StyledForm from "@/core/components/StyledForm";
|
|
import {REGISTER} from "@/core/data/apiRoutes";
|
|
import CenterLayout from "@/layouts/CenterLayout";
|
|
import FullPageLayout from "@/layouts/FullPageLayout";
|
|
import LoginIcon from "@mui/icons-material/Login";
|
|
import ChangeCircleIcon from "@mui/icons-material/ChangeCircle";
|
|
import {Box, Button, Chip, Container, Divider, Paper, Stack, TextField, Typography,} from "@mui/material";
|
|
import {Field, Formik} from "formik";
|
|
import {useTranslations} from "next-intl";
|
|
import * as Yup from "yup";
|
|
import ResendToken from "@/core/components/ResendToken";
|
|
import useUser from "@/lib/app/hooks/useUser";
|
|
import SvgRegister from "@/core/components/svgs/SvgRegister";
|
|
import useRequest from "@/lib/app/hooks/useRequest";
|
|
|
|
const UserRegisterComponent = ({
|
|
PhoneNumber,
|
|
setOtpToken,
|
|
initialTimerValue,
|
|
timer,
|
|
setTimer,
|
|
}) => {
|
|
const t = useTranslations();
|
|
const {setToken} = useUser();
|
|
const requestServer = useRequest();
|
|
|
|
const initialValues = {
|
|
type_id: "1",
|
|
verification_code: "",
|
|
phone_number: PhoneNumber,
|
|
national_id: "",
|
|
navgan_id: "",
|
|
};
|
|
|
|
const validationSchema = Yup.object().shape({
|
|
verification_code: Yup.string().required(
|
|
t("RegisterPage.error_message_verification_code")
|
|
),
|
|
national_id: Yup.string().required(
|
|
t("RegisterPage.error_message_national_id")
|
|
),
|
|
navgan_id: Yup.string().required(t("RegisterPage.error_message_navgan_id")),
|
|
});
|
|
|
|
const handleSubmit = (values, props) => {
|
|
requestServer(REGISTER, "post", {
|
|
auth: false, data: {
|
|
type_id: values.type_id,
|
|
national_id: values.national_id,
|
|
navgan_id: values.navgan_id,
|
|
phone_number: values.phone_number,
|
|
verification_code: values.verification_code,
|
|
}
|
|
})
|
|
.then(function (response) {
|
|
setOtpToken(true);
|
|
setToken(response.data.token);
|
|
}).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'
|
|
>
|
|
<SvgRegister width={300} height={200}/>
|
|
</Stack>
|
|
<Typography margin={2} variant="h4" textAlign="center">
|
|
{t("register_navy")}
|
|
</Typography>
|
|
<StyledForm sx={{width: "100%"}}>
|
|
<Stack spacing={3} sx={{p: 2}}>
|
|
<Box
|
|
sx={{
|
|
display: {xs: "column", sm: "flex"},
|
|
alignItems: "center",
|
|
textAlign: {xs: "center", sm: "unset"},
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<Typography variant="button" sx={{display: "block"}}>
|
|
{t("LoginPage.sent_token_to")}: {PhoneNumber}
|
|
</Typography>
|
|
<Button
|
|
size="small"
|
|
startIcon={<ChangeCircleIcon/>}
|
|
variant="outlined"
|
|
sx={{whiteSpace: "nowrap", my: {xs: 1, sm: 0}}}
|
|
onClick={() => setOtpToken(false)}
|
|
>
|
|
{t("LoginPage.change_phone_number")}
|
|
</Button>
|
|
</Box>
|
|
<Field
|
|
as={TextField}
|
|
name="verification_code"
|
|
variant="outlined"
|
|
label={t("LoginPage.text_field_verification_code")}
|
|
placeholder={t(
|
|
"LoginPage.text_field_enter_your_verification_code"
|
|
)}
|
|
type={"text"}
|
|
error={
|
|
!!(props.touched.verification_code && props.errors.verification_code)
|
|
}
|
|
fullWidth
|
|
helperText={
|
|
props.touched.verification_code
|
|
? props.errors.verification_code
|
|
: null
|
|
}
|
|
/>
|
|
<ResendToken
|
|
initialTimerValue={initialTimerValue}
|
|
timer={timer}
|
|
setTimer={setTimer}
|
|
PhoneNumber={PhoneNumber}
|
|
/>
|
|
<Divider>
|
|
<Chip label={t("RegisterPage.complete_information")}/>
|
|
</Divider>
|
|
<Field
|
|
as={TextField}
|
|
name="national_id"
|
|
variant="outlined"
|
|
label={t("RegisterPage.text_field_national_id")}
|
|
placeholder={t(
|
|
"RegisterPage.text_field_enter_your_national_id"
|
|
)}
|
|
type={"text"}
|
|
error={
|
|
!!(props.touched.national_id && props.errors.national_id)
|
|
}
|
|
fullWidth
|
|
helperText={
|
|
props.touched.national_id
|
|
? props.errors.national_id
|
|
: null
|
|
}
|
|
/>
|
|
<Field
|
|
as={TextField}
|
|
name="navgan_id"
|
|
variant="outlined"
|
|
label={t("RegisterPage.text_field_navgan_id")}
|
|
placeholder={t(
|
|
"RegisterPage.text_field_enter_your_navgan_id"
|
|
)}
|
|
type={"text"}
|
|
error={
|
|
!!(props.touched.navgan_id && props.errors.navgan_id)
|
|
}
|
|
fullWidth
|
|
helperText={
|
|
props.touched.navgan_id
|
|
? props.errors.navgan_id
|
|
: null
|
|
}
|
|
/>
|
|
<Button
|
|
fullWidth
|
|
type="submit"
|
|
variant="contained"
|
|
size="large"
|
|
endIcon={<LoginIcon/>}
|
|
disabled={props.isSubmitting}
|
|
>
|
|
{t("RegisterPage.button_submit")}
|
|
</Button>
|
|
</Stack>
|
|
</StyledForm>
|
|
</Stack>
|
|
)}
|
|
</Formik>
|
|
</Paper>
|
|
</Container>
|
|
</CenterLayout>
|
|
</FullPageLayout>
|
|
);
|
|
};
|
|
|
|
export default UserRegisterComponent;
|