complete login and register implemention of welfare services
This commit is contained in:
@@ -7,7 +7,7 @@
|
|||||||
"login_navy": "ورود اعضای ناوگان",
|
"login_navy": "ورود اعضای ناوگان",
|
||||||
"register_navy": "ثبت نام اعضای ناوگان",
|
"register_navy": "ثبت نام اعضای ناوگان",
|
||||||
"login_welfare_services": "ورود اعضای خدمات رفاهی",
|
"login_welfare_services": "ورود اعضای خدمات رفاهی",
|
||||||
"user_welfare_services": "خدمات رفاهی",
|
"register_welfare_services": "ثبت نام اعضای خدمات رفاهی",
|
||||||
"user_navy": "ناوگان",
|
"user_navy": "ناوگان",
|
||||||
"header": {
|
"header": {
|
||||||
"open_profile": "پروفایل",
|
"open_profile": "پروفایل",
|
||||||
|
|||||||
164
src/components/login-welfare-services/SendUserData.jsx
Normal file
164
src/components/login-welfare-services/SendUserData.jsx
Normal file
@@ -0,0 +1,164 @@
|
|||||||
|
// import Notifications from "@/core/components/notifications";
|
||||||
|
import LinkRouting from "@/core/components/LinkRouting";
|
||||||
|
import StyledForm from "@/core/components/StyledForm";
|
||||||
|
import { LOGIN_SEND_OTP_TOKEN } from "@/core/data/apiRoutes";
|
||||||
|
import CenterLayout from "@/layouts/CenterLayout";
|
||||||
|
import FullPageLayout from "@/layouts/FullPageLayout";
|
||||||
|
import useDirection from "@/lib/app/hooks/useDirection";
|
||||||
|
import FingerprintIcon from "@mui/icons-material/Fingerprint";
|
||||||
|
import PersonAddIcon from "@mui/icons-material/PersonAdd";
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Button,
|
||||||
|
Container,
|
||||||
|
Grid,
|
||||||
|
Paper,
|
||||||
|
Stack,
|
||||||
|
TextField,
|
||||||
|
Typography,
|
||||||
|
} from "@mui/material";
|
||||||
|
import axios from "axios";
|
||||||
|
import { Field, Formik } from "formik";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
import Image from "next/image";
|
||||||
|
import { useSearchParams } from "next/navigation";
|
||||||
|
import * as Yup from "yup";
|
||||||
|
|
||||||
|
const SendUserData = ({ setOtpToken, setPhoneNumber }) => {
|
||||||
|
const t = useTranslations();
|
||||||
|
const { directionApp } = useDirection();
|
||||||
|
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
const backUrlDecodedPath = searchParams.get("back_url");
|
||||||
|
|
||||||
|
const initialValues = {
|
||||||
|
phone_number: "",
|
||||||
|
};
|
||||||
|
const validationSchema = Yup.object().shape({
|
||||||
|
phone_number: Yup.string().required(t("LoginPage.error_message_required")),
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleSubmit = async (values, props) => {
|
||||||
|
await axios
|
||||||
|
.post(LOGIN_SEND_OTP_TOKEN, {
|
||||||
|
phone_number: values.phone_number,
|
||||||
|
})
|
||||||
|
.then(function (response) {
|
||||||
|
setPhoneNumber(values.phone_number);
|
||||||
|
setOtpToken(true);
|
||||||
|
})
|
||||||
|
.catch(function (error) {
|
||||||
|
// Notifications(directionApp, error.response, t);
|
||||||
|
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 }}>
|
||||||
|
<Box
|
||||||
|
sx={{ position: "relative", width: "100%", height: 200 }}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
fill
|
||||||
|
src="/images/login.svg"
|
||||||
|
priority
|
||||||
|
alt={t("app_name")}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
<Typography margin={2} variant="h4" textAlign="center">
|
||||||
|
{t("login_welfare_services")}
|
||||||
|
</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
|
||||||
|
? true
|
||||||
|
: false
|
||||||
|
}
|
||||||
|
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-welfare-services"}>
|
||||||
|
<Button
|
||||||
|
fullWidth
|
||||||
|
type="submit"
|
||||||
|
variant="outlined"
|
||||||
|
size="large"
|
||||||
|
endIcon={<PersonAddIcon />}
|
||||||
|
disabled={props.isSubmitting ? true : false}
|
||||||
|
>
|
||||||
|
{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 ? true : false}
|
||||||
|
>
|
||||||
|
{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 SendUserData;
|
||||||
@@ -1,166 +1,18 @@
|
|||||||
import LinkRouting from "@/core/components/LinkRouting";
|
import SendUserData from "./SendUserData";
|
||||||
// import Notifications from "@/core/components/notifications";
|
import { useState } from "react";
|
||||||
import StyledForm from "@/core/components/StyledForm";
|
import SendToken from "./SendToken";
|
||||||
// import { GET_USER_TOKEN } from "@/core/data/apiRoutes";
|
|
||||||
import CenterLayout from "@/layouts/CenterLayout";
|
|
||||||
import FullPageLayout from "@/layouts/FullPageLayout";
|
|
||||||
import useDirection from "@/lib/app/hooks/useDirection";
|
|
||||||
import useUser from "@/lib/app/hooks/useUser";
|
|
||||||
import LoginIcon from "@mui/icons-material/Login";
|
|
||||||
import PersonAddIcon from "@mui/icons-material/PersonAdd";
|
|
||||||
import {
|
|
||||||
Box,
|
|
||||||
Button,
|
|
||||||
Container,
|
|
||||||
Grid,
|
|
||||||
Paper,
|
|
||||||
Stack,
|
|
||||||
TextField,
|
|
||||||
Typography,
|
|
||||||
} from "@mui/material";
|
|
||||||
// import axios from "axios";
|
|
||||||
import { Field, Formik } from "formik";
|
|
||||||
import { useTranslations } from "next-intl";
|
|
||||||
import Image from "next/image";
|
|
||||||
import { useSearchParams } from "next/navigation";
|
|
||||||
import * as Yup from "yup";
|
|
||||||
|
|
||||||
const LoginComponent = () => {
|
const LoginComponent = () => {
|
||||||
const t = useTranslations();
|
const [otpToken, setOtpToken] = useState(false);
|
||||||
const { directionApp } = useDirection();
|
const [PhoneNumber, setPhoneNumber] = useState("");
|
||||||
const { setToken } = useUser(); // pass token to set token
|
|
||||||
|
|
||||||
// gettin url query
|
if (!otpToken) {
|
||||||
const searchParams = useSearchParams();
|
return (
|
||||||
const backUrlDecodedPath = searchParams.get("back_url");
|
<SendUserData setOtpToken={setOtpToken} setPhoneNumber={setPhoneNumber} />
|
||||||
|
);
|
||||||
// formik properties
|
} else {
|
||||||
// const handleSubmit = async (values, props) => {
|
return <SendToken PhoneNumber={PhoneNumber} />;
|
||||||
// await axios
|
}
|
||||||
// .post(GET_USER_TOKEN, {
|
|
||||||
// phone_number: values.phone_number
|
|
||||||
// })
|
|
||||||
// .then(function (response) {
|
|
||||||
// setToken(response.data.token);
|
|
||||||
// })
|
|
||||||
// .catch(function (error) {
|
|
||||||
// Notifications(directionApp, error.response, t);
|
|
||||||
// props.setSubmitting(false);
|
|
||||||
// });
|
|
||||||
// };
|
|
||||||
const initialValues = {
|
|
||||||
phone_number: ""
|
|
||||||
};
|
|
||||||
const validationSchema = Yup.object().shape({
|
|
||||||
phone_number: Yup.string().required(t("LoginPage.error_message_required"))
|
|
||||||
});
|
|
||||||
|
|
||||||
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 }}>
|
|
||||||
<Box
|
|
||||||
sx={{ position: "relative", width: "100%", height: 200 }}
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
fill
|
|
||||||
src="/images/login.svg"
|
|
||||||
priority
|
|
||||||
alt={t("app_name")}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
<Typography margin={2} variant="h4" textAlign="center">
|
|
||||||
{t("login_welfare_services")}
|
|
||||||
</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
|
|
||||||
? true
|
|
||||||
: false
|
|
||||||
}
|
|
||||||
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-welfare-services"}>
|
|
||||||
<Button
|
|
||||||
fullWidth
|
|
||||||
type="submit"
|
|
||||||
variant="outlined"
|
|
||||||
size="large"
|
|
||||||
endIcon={<PersonAddIcon />}
|
|
||||||
disabled={props.isSubmitting ? true : false}
|
|
||||||
>
|
|
||||||
{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={<LoginIcon />}
|
|
||||||
disabled={props.isSubmitting ? true : false}
|
|
||||||
>
|
|
||||||
{t("LoginPage.button_submit")}
|
|
||||||
</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 LoginComponent;
|
export default LoginComponent;
|
||||||
|
|||||||
@@ -0,0 +1,130 @@
|
|||||||
|
// import Notifications from "@/core/components/notifications";
|
||||||
|
import StyledForm from "@/core/components/StyledForm";
|
||||||
|
import { LOGIN } from "@/core/data/apiRoutes";
|
||||||
|
import CenterLayout from "@/layouts/CenterLayout";
|
||||||
|
import FullPageLayout from "@/layouts/FullPageLayout";
|
||||||
|
import useDirection from "@/lib/app/hooks/useDirection";
|
||||||
|
import useUser from "@/lib/app/hooks/useUser";
|
||||||
|
import LoginIcon from "@mui/icons-material/Login";
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Button,
|
||||||
|
Container,
|
||||||
|
Grid,
|
||||||
|
Paper,
|
||||||
|
Stack,
|
||||||
|
TextField,
|
||||||
|
Typography,
|
||||||
|
} from "@mui/material";
|
||||||
|
import axios from "axios";
|
||||||
|
import { Field, Formik } from "formik";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
import Image from "next/image";
|
||||||
|
import * as Yup from "yup";
|
||||||
|
|
||||||
|
const SendToken = ({ PhoneNumber }) => {
|
||||||
|
const t = useTranslations();
|
||||||
|
const { directionApp } = useDirection();
|
||||||
|
const { setToken } = useUser();
|
||||||
|
|
||||||
|
const initialValues = {
|
||||||
|
phone_number: PhoneNumber,
|
||||||
|
verification_code: "",
|
||||||
|
};
|
||||||
|
const validationSchema = Yup.object().shape({
|
||||||
|
verification_code: Yup.string().required(
|
||||||
|
t("LoginPage.error_message_required")
|
||||||
|
),
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleSubmit = async (values, props) => {
|
||||||
|
await axios
|
||||||
|
.post(LOGIN, {
|
||||||
|
phone_number: values.phone_number,
|
||||||
|
verification_code: values.verification_code,
|
||||||
|
})
|
||||||
|
.then(function (response) {
|
||||||
|
setToken(response.data.token);
|
||||||
|
})
|
||||||
|
.catch(function (error) {
|
||||||
|
Notifications(directionApp, error.response, t);
|
||||||
|
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 }}>
|
||||||
|
<Box
|
||||||
|
sx={{ position: "relative", width: "100%", height: 200 }}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
fill
|
||||||
|
src="/images/login.svg"
|
||||||
|
priority
|
||||||
|
alt={t("app_name")}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
<Typography margin={2} variant="h4" textAlign="center">
|
||||||
|
{t("login_navy")}
|
||||||
|
</Typography>
|
||||||
|
<StyledForm sx={{ width: "100%" }}>
|
||||||
|
<Stack spacing={3} sx={{ p: 2 }}>
|
||||||
|
<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
|
||||||
|
? true
|
||||||
|
: false
|
||||||
|
}
|
||||||
|
fullWidth
|
||||||
|
helperText={
|
||||||
|
props.touched.verification_code
|
||||||
|
? props.errors.verification_code
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Grid container>
|
||||||
|
<Grid item xs={12}>
|
||||||
|
<Button
|
||||||
|
fullWidth
|
||||||
|
type="submit"
|
||||||
|
variant="contained"
|
||||||
|
size="large"
|
||||||
|
endIcon={<LoginIcon />}
|
||||||
|
disabled={props.isSubmitting ? true : false}
|
||||||
|
>
|
||||||
|
{t("LoginPage.button_submit")}
|
||||||
|
</Button>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Stack>
|
||||||
|
</StyledForm>
|
||||||
|
</Stack>
|
||||||
|
)}
|
||||||
|
</Formik>
|
||||||
|
</Paper>
|
||||||
|
</Container>
|
||||||
|
</CenterLayout>
|
||||||
|
</FullPageLayout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SendToken;
|
||||||
|
|||||||
171
src/components/register-welfare-services/SendUserData.jsx
Normal file
171
src/components/register-welfare-services/SendUserData.jsx
Normal file
@@ -0,0 +1,171 @@
|
|||||||
|
import LinkRouting from "@/core/components/LinkRouting";
|
||||||
|
import StyledForm from "@/core/components/StyledForm";
|
||||||
|
import { REGISTER_SEND_OTP_TOKEN } from "@/core/data/apiRoutes";
|
||||||
|
import CenterLayout from "@/layouts/CenterLayout";
|
||||||
|
import FullPageLayout from "@/layouts/FullPageLayout";
|
||||||
|
import FingerprintIcon from "@mui/icons-material/Fingerprint";
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Button,
|
||||||
|
Container,
|
||||||
|
Paper,
|
||||||
|
Stack,
|
||||||
|
TextField,
|
||||||
|
Typography,
|
||||||
|
} from "@mui/material";
|
||||||
|
import axios from "axios";
|
||||||
|
import { Field, Formik } from "formik";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
import Image from "next/image";
|
||||||
|
import { useSearchParams } from "next/navigation";
|
||||||
|
import * as Yup from "yup";
|
||||||
|
|
||||||
|
const SendUserData = ({
|
||||||
|
setOtpToken,
|
||||||
|
setPhoneNumber,
|
||||||
|
setNationalId,
|
||||||
|
setTypeId,
|
||||||
|
}) => {
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
const backUrlDecodedPath = searchParams.get("back_url");
|
||||||
|
|
||||||
|
const initialValues = {
|
||||||
|
type_id: "2",
|
||||||
|
phone_number: "",
|
||||||
|
national_id: "",
|
||||||
|
};
|
||||||
|
const validationSchema = Yup.object().shape({
|
||||||
|
phone_number: Yup.string().required(
|
||||||
|
t("RegisterPage.error_message_required")
|
||||||
|
),
|
||||||
|
national_id: Yup.string().required(
|
||||||
|
t("RegisterPage.error_message_required")
|
||||||
|
),
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleSubmit = async (values, props) => {
|
||||||
|
await axios
|
||||||
|
.post(REGISTER_SEND_OTP_TOKEN, {
|
||||||
|
type_id: values.type_id,
|
||||||
|
national_id: values.national_id,
|
||||||
|
phone_number: values.phone_number,
|
||||||
|
})
|
||||||
|
.then(function (response) {
|
||||||
|
setPhoneNumber(values.phone_number);
|
||||||
|
setNationalId(values.national_id);
|
||||||
|
setTypeId(values.type_id);
|
||||||
|
setOtpToken(true);
|
||||||
|
})
|
||||||
|
.catch(function (error) {
|
||||||
|
Notifications(directionApp, error.response, t);
|
||||||
|
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 }}>
|
||||||
|
<Box
|
||||||
|
sx={{ position: "relative", width: "100%", height: 200 }}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
fill
|
||||||
|
src="/images/register.svg"
|
||||||
|
alt={t("app_name")}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
<Typography margin={2} variant="h4" textAlign="center">
|
||||||
|
{t("register_welfare_services")}
|
||||||
|
</Typography>
|
||||||
|
<StyledForm sx={{ width: "100%" }}>
|
||||||
|
<Stack spacing={3} sx={{ p: 2 }}>
|
||||||
|
<Field
|
||||||
|
as={TextField}
|
||||||
|
name="phone_number"
|
||||||
|
variant="outlined"
|
||||||
|
label={t("RegisterPage.text_field_phone_number")}
|
||||||
|
placeholder={t(
|
||||||
|
"RegisterPage.text_field_enter_your_phone_number"
|
||||||
|
)}
|
||||||
|
type={"text"}
|
||||||
|
error={
|
||||||
|
props.touched.phone_number &&
|
||||||
|
props.errors.phone_number
|
||||||
|
? true
|
||||||
|
: false
|
||||||
|
}
|
||||||
|
fullWidth
|
||||||
|
helperText={
|
||||||
|
props.touched.phone_number
|
||||||
|
? props.errors.phone_number
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<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
|
||||||
|
? true
|
||||||
|
: false
|
||||||
|
}
|
||||||
|
fullWidth
|
||||||
|
helperText={
|
||||||
|
props.touched.national_id
|
||||||
|
? props.errors.national_id
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
fullWidth
|
||||||
|
type="submit"
|
||||||
|
variant="contained"
|
||||||
|
size="large"
|
||||||
|
endIcon={<FingerprintIcon />}
|
||||||
|
disabled={props.isSubmitting ? true : false}
|
||||||
|
>
|
||||||
|
{t("RegisterPage.button_request_verification")}
|
||||||
|
</Button>
|
||||||
|
</Stack>
|
||||||
|
</StyledForm>
|
||||||
|
</Stack>
|
||||||
|
)}
|
||||||
|
</Formik>
|
||||||
|
</Paper>
|
||||||
|
</Container>
|
||||||
|
</CenterLayout>
|
||||||
|
<Stack direction="row" alignItems="center" justifyContent="center">
|
||||||
|
<LinkRouting
|
||||||
|
sx={{ margin: 2 }}
|
||||||
|
href={
|
||||||
|
backUrlDecodedPath
|
||||||
|
? decodeURIComponent(backUrlDecodedPath)
|
||||||
|
: "/login-navy"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{t("RegisterPage.link_routing_back_to")}{" "}
|
||||||
|
{t("RegisterPage.link_routing_login_navy")}
|
||||||
|
</LinkRouting>
|
||||||
|
</Stack>
|
||||||
|
</FullPageLayout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SendUserData;
|
||||||
@@ -1,169 +1,32 @@
|
|||||||
import StyledForm from "@/core/components/StyledForm";
|
import { useState } from "react";
|
||||||
import {
|
import SendToken from "./SendToken";
|
||||||
Box,
|
import SendUserData from "./SendUserData";
|
||||||
Button,
|
|
||||||
Container,
|
|
||||||
Paper,
|
|
||||||
Stack,
|
|
||||||
Typography,
|
|
||||||
TextField,
|
|
||||||
} from "@mui/material";
|
|
||||||
import { Field, Formik } from "formik";
|
|
||||||
import Image from "next/image";
|
|
||||||
import FingerprintIcon from "@mui/icons-material/Fingerprint";
|
|
||||||
import FullPageLayout from "@/layouts/FullPageLayout";
|
|
||||||
import CenterLayout from "@/layouts/CenterLayout";
|
|
||||||
import { useTranslations } from "next-intl";
|
|
||||||
import * as Yup from "yup";
|
|
||||||
import LinkRouting from "@/core/components/LinkRouting";
|
|
||||||
import { useSearchParams } from "next/navigation";
|
|
||||||
import useDirection from "@/lib/app/hooks/useDirection";
|
|
||||||
import useUser from "@/lib/app/hooks/useUser";
|
|
||||||
// import { GET_USER_TOKEN } from "@/core/data/apiRoutes";
|
|
||||||
// import axios from "axios";
|
|
||||||
|
|
||||||
const RegisterNavyComponent = () => {
|
const RegisterNavyComponent = () => {
|
||||||
const t = useTranslations();
|
const [otpToken, setOtpToken] = useState(false);
|
||||||
|
const [PhoneNumber, setPhoneNumber] = useState("");
|
||||||
|
const [nationalId, setNationalId] = useState("");
|
||||||
|
const [navganId, setNavganId] = useState("");
|
||||||
|
const [typeId, setTypeId] = useState("");
|
||||||
|
|
||||||
const { directionApp } = useDirection();
|
if (!otpToken) {
|
||||||
const { setToken } = useUser();
|
return (
|
||||||
|
<SendUserData
|
||||||
const searchParams = useSearchParams();
|
setOtpToken={setOtpToken}
|
||||||
const backUrlDecodedPath = searchParams.get("back_url");
|
setPhoneNumber={setPhoneNumber}
|
||||||
|
setNationalId={setNationalId}
|
||||||
const initialValues = {
|
setTypeId={setTypeId}
|
||||||
type_id: "2",
|
/>
|
||||||
phone_number: "",
|
);
|
||||||
national_id: "",
|
} else {
|
||||||
navgan_id: "",
|
return (
|
||||||
};
|
<SendToken
|
||||||
const validationSchema = Yup.object().shape({
|
PhoneNumber={PhoneNumber}
|
||||||
phone_number: Yup.string().required(
|
nationalId={nationalId}
|
||||||
t("RegisterPage.error_message_required")
|
typeId={typeId}
|
||||||
),
|
/>
|
||||||
national_id: Yup.string().required(
|
);
|
||||||
t("RegisterPage.error_message_required")
|
}
|
||||||
),
|
|
||||||
});
|
|
||||||
// const handleSubmit = async (values, props) => {
|
|
||||||
// await axios
|
|
||||||
// .post(GET_USER_TOKEN, {
|
|
||||||
// type_id: values.type_id,
|
|
||||||
// national_id: values.national_id,
|
|
||||||
// navgan_id: values.navgan_id,
|
|
||||||
// phone_number: values.phone_number,
|
|
||||||
// })
|
|
||||||
// .then(function (response) {
|
|
||||||
// setToken(response.data.token);
|
|
||||||
// })
|
|
||||||
// .catch(function (error) {
|
|
||||||
// Notifications(directionApp, error.response, t);
|
|
||||||
// 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 }}>
|
|
||||||
<Box
|
|
||||||
sx={{ position: "relative", width: "100%", height: 200 }}
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
fill
|
|
||||||
src="/images/register.svg"
|
|
||||||
alt={t("app_name")}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
<Typography margin={2} variant="h4" textAlign="center">
|
|
||||||
{t("register_navy")}
|
|
||||||
</Typography>
|
|
||||||
<StyledForm sx={{ width: "100%" }}>
|
|
||||||
<Stack spacing={3} sx={{ p: 2 }}>
|
|
||||||
<Field
|
|
||||||
as={TextField}
|
|
||||||
name="phone_number"
|
|
||||||
variant="outlined"
|
|
||||||
label={t("RegisterPage.text_field_phone_number")}
|
|
||||||
placeholder={t(
|
|
||||||
"RegisterPage.text_field_enter_your_phone_number"
|
|
||||||
)}
|
|
||||||
type={"text"}
|
|
||||||
error={
|
|
||||||
props.touched.phone_number &&
|
|
||||||
props.errors.phone_number
|
|
||||||
? true
|
|
||||||
: false
|
|
||||||
}
|
|
||||||
fullWidth
|
|
||||||
helperText={
|
|
||||||
props.touched.phone_number
|
|
||||||
? props.errors.phone_number
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<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
|
|
||||||
? true
|
|
||||||
: false
|
|
||||||
}
|
|
||||||
fullWidth
|
|
||||||
helperText={
|
|
||||||
props.touched.national_id
|
|
||||||
? props.errors.national_id
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
fullWidth
|
|
||||||
type="submit"
|
|
||||||
variant="contained"
|
|
||||||
size="large"
|
|
||||||
endIcon={<FingerprintIcon />}
|
|
||||||
disabled={props.isSubmitting ? true : false}
|
|
||||||
>
|
|
||||||
{t("RegisterPage.button_request_verification")}
|
|
||||||
</Button>
|
|
||||||
</Stack>
|
|
||||||
</StyledForm>
|
|
||||||
</Stack>
|
|
||||||
)}
|
|
||||||
</Formik>
|
|
||||||
</Paper>
|
|
||||||
</Container>
|
|
||||||
</CenterLayout>
|
|
||||||
<Stack direction="row" alignItems="center" justifyContent="center">
|
|
||||||
<LinkRouting
|
|
||||||
sx={{ margin: 2 }}
|
|
||||||
href={
|
|
||||||
backUrlDecodedPath
|
|
||||||
? decodeURIComponent(backUrlDecodedPath)
|
|
||||||
: "/login-welfare-services"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{t("RegisterPage.link_routing_back_to")}{" "}
|
|
||||||
{t("RegisterPage.link_routing_login_navy")}
|
|
||||||
</LinkRouting>
|
|
||||||
</Stack>
|
|
||||||
</FullPageLayout>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default RegisterNavyComponent;
|
export default RegisterNavyComponent;
|
||||||
|
|||||||
@@ -0,0 +1,127 @@
|
|||||||
|
import StyledForm from "@/core/components/StyledForm";
|
||||||
|
import { REGISTER } from "@/core/data/apiRoutes";
|
||||||
|
import CenterLayout from "@/layouts/CenterLayout";
|
||||||
|
import FullPageLayout from "@/layouts/FullPageLayout";
|
||||||
|
// import useDirection from "@/lib/app/hooks/useDirection";
|
||||||
|
import useUser from "@/lib/app/hooks/useUser";
|
||||||
|
import LoginIcon from "@mui/icons-material/Login";
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Button,
|
||||||
|
Container,
|
||||||
|
Paper,
|
||||||
|
Stack,
|
||||||
|
TextField,
|
||||||
|
Typography,
|
||||||
|
} from "@mui/material";
|
||||||
|
import axios from "axios";
|
||||||
|
import { Field, Formik } from "formik";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
import Image from "next/image";
|
||||||
|
import * as Yup from "yup";
|
||||||
|
|
||||||
|
const SendToken = ({ PhoneNumber, nationalId, typeId }) => {
|
||||||
|
const t = useTranslations();
|
||||||
|
// const { directionApp } = useDirection();
|
||||||
|
const { setToken } = useUser();
|
||||||
|
|
||||||
|
const initialValues = {
|
||||||
|
phone_number: PhoneNumber,
|
||||||
|
national_id: nationalId,
|
||||||
|
type_id: typeId,
|
||||||
|
verification_code: "",
|
||||||
|
};
|
||||||
|
const validationSchema = Yup.object().shape({
|
||||||
|
verification_code: Yup.string().required(
|
||||||
|
t("RegisterPage.error_message_required")
|
||||||
|
),
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleSubmit = async (values, props) => {
|
||||||
|
await axios
|
||||||
|
.post(REGISTER, {
|
||||||
|
phone_number: values.phone_number,
|
||||||
|
national_id: values.national_id,
|
||||||
|
type_id: values.type_id,
|
||||||
|
verification_code: values.verification_code,
|
||||||
|
})
|
||||||
|
.then(function (response) {
|
||||||
|
setToken(response.data.token);
|
||||||
|
})
|
||||||
|
.catch(function (error) {
|
||||||
|
// Notifications(directionApp, error.response, t);
|
||||||
|
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 }}>
|
||||||
|
<Box
|
||||||
|
sx={{ position: "relative", width: "100%", height: 200 }}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
fill
|
||||||
|
src="/images/register.svg"
|
||||||
|
alt={t("app_name")}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
<Typography margin={2} variant="h4" textAlign="center">
|
||||||
|
{t("register_navy")}
|
||||||
|
</Typography>
|
||||||
|
<StyledForm sx={{ width: "100%" }}>
|
||||||
|
<Stack spacing={3} sx={{ p: 2 }}>
|
||||||
|
<Field
|
||||||
|
as={TextField}
|
||||||
|
name="verification_code"
|
||||||
|
variant="outlined"
|
||||||
|
label={t("RegisterPage.text_field_verification_code")}
|
||||||
|
placeholder={t(
|
||||||
|
"RegisterPage.text_field_enter_your_verification_code"
|
||||||
|
)}
|
||||||
|
type={"text"}
|
||||||
|
error={
|
||||||
|
props.touched.verification_code &&
|
||||||
|
props.errors.verification_code
|
||||||
|
? true
|
||||||
|
: false
|
||||||
|
}
|
||||||
|
fullWidth
|
||||||
|
helperText={
|
||||||
|
props.touched.verification_code
|
||||||
|
? props.errors.verification_code
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
fullWidth
|
||||||
|
type="submit"
|
||||||
|
variant="contained"
|
||||||
|
size="large"
|
||||||
|
endIcon={<LoginIcon />}
|
||||||
|
disabled={props.isSubmitting ? true : false}
|
||||||
|
>
|
||||||
|
{t("RegisterPage.button_submit")}
|
||||||
|
</Button>
|
||||||
|
</Stack>
|
||||||
|
</StyledForm>
|
||||||
|
</Stack>
|
||||||
|
)}
|
||||||
|
</Formik>
|
||||||
|
</Paper>
|
||||||
|
</Container>
|
||||||
|
</CenterLayout>
|
||||||
|
</FullPageLayout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SendToken;
|
||||||
|
|||||||
Reference in New Issue
Block a user