Merge branch 'feature/maintainer' into 'develop'
Feature/maintainer See merge request witel3/loan-facilities-user!18
This commit is contained in:
@@ -4,14 +4,16 @@
|
||||
"dashboard": "داشبورد",
|
||||
"first_page": "خوش آمدید",
|
||||
"login": "ورود",
|
||||
"login_navy": "ورود اعضای ناوگان",
|
||||
"login_user_panel": "ورود به پنل کاربران",
|
||||
"register_navy": "ثبت نام اعضای ناوگان",
|
||||
"login_welfare_services": "ورود اعضای خدمات رفاهی",
|
||||
"register_welfare_services": "ثبت نام اعضای خدمات رفاهی",
|
||||
"pending": "درحال اجرا...",
|
||||
"user_navy": "ناوگان",
|
||||
"page_not_found": "صفحه مورد نظر یافت نشد",
|
||||
"delete": "حذف",
|
||||
"resend_code": "ارسال مجدد کد",
|
||||
"Resend_code_in": "ارسال مجدد کد در",
|
||||
"seconds_later": "ثانیه دیگر",
|
||||
"header": {
|
||||
"open_profile": "پروفایل",
|
||||
"edit_profile": "ویرایش پروفایل",
|
||||
@@ -27,6 +29,7 @@
|
||||
},
|
||||
"Titles": {
|
||||
"title_login_page": "صفحه ورود",
|
||||
"title_register_page": "صفحه ثبت نام",
|
||||
"title_login_navy_page": "ورود اعضای ناوگان",
|
||||
"title_login_welfare_services_page": "ورود اعضای خدمات رفاهی",
|
||||
"title_register_navy_page": "ثبت نام اعضای ناوگان",
|
||||
@@ -57,13 +60,13 @@
|
||||
"error_message_required": "اجباری!",
|
||||
"button_make_account": "ایجاد حساب",
|
||||
"button_request_verification": "دریافت کد یکبارمصرف",
|
||||
"resend_code": "ارسال دوباره کد",
|
||||
"Resend_code_in": "ارسال مجدد کد در",
|
||||
"seconds_later": "ثانیه دیگر"
|
||||
"sent_token_to": "ارسال کد یکبار مصرف به شماره",
|
||||
"change_phone_number": "تغییر شماره"
|
||||
},
|
||||
"RegisterPage": {
|
||||
"link_routing_back_to": "بازگشت به",
|
||||
"link_routing_login_navy": "صفحه ورود",
|
||||
"link_routing_register": "صفحه انتخاب نوع ثبت نام",
|
||||
"link_routing_login": "صفحه ورود",
|
||||
"text_field_phone_number": "شماره تلفن",
|
||||
"text_field_enter_your_phone_number": "شماره تلفن خود را وارد کنید",
|
||||
"text_field_verification_code": "کد یکبار مصرف",
|
||||
@@ -74,11 +77,11 @@
|
||||
"text_field_enter_your_navgan_id": "شماره ناوگان خود را وارد کنید",
|
||||
"error_message_required": "اجباری!",
|
||||
"button_request_verification": "دریافت کد یکبارمصرف",
|
||||
"button_submit": "ورود",
|
||||
"button_submit": "ثبت و ورود",
|
||||
"button_back_to_send_data": "بازگشت",
|
||||
"sent_token_to": "ارسال کد یکبار مصرف به شماره",
|
||||
"change_phone_number": "تغییر شماره",
|
||||
"resend_code": "ارسال دوباره کد"
|
||||
"complete_information": "مشخصات"
|
||||
},
|
||||
"Dashboard": {
|
||||
"dashboard_page": "داشبورد"
|
||||
|
||||
@@ -4,7 +4,7 @@ import StyledImage from "@/core/components/StyledImage";
|
||||
import CenterLayout from "@/layouts/CenterLayout";
|
||||
import FullPageLayout from "@/layouts/FullPageLayout";
|
||||
import useUser from "@/lib/app/hooks/useUser";
|
||||
import { Box, Button, Grid, Typography } from "@mui/material";
|
||||
import { Button, Typography } from "@mui/material";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
const FirstComponent = () => {
|
||||
@@ -35,43 +35,17 @@ const FirstComponent = () => {
|
||||
{t("dashboard")}
|
||||
</Button>
|
||||
) : (
|
||||
<Box>
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={{ xs: 1, sm: 0 }}
|
||||
sx={{
|
||||
flexDirection: { xs: "column", sm: "row" },
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Grid item xs={12} sm={6} sx={{ px: { xs: 0, sm: 1 } }}>
|
||||
<Button
|
||||
sx={{ whiteSpace: "nowrap" }}
|
||||
variant="contained"
|
||||
size="large"
|
||||
component={NextLinkComposed}
|
||||
to={{
|
||||
pathname: "/login-navy",
|
||||
}}
|
||||
>
|
||||
{t("login_navy")}
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6} sx={{ px: { xs: 0, sm: 1 } }}>
|
||||
<Button
|
||||
sx={{ whiteSpace: "nowrap" }}
|
||||
variant="contained"
|
||||
size="large"
|
||||
component={NextLinkComposed}
|
||||
to={{
|
||||
pathname: "/login-welfare-services",
|
||||
}}
|
||||
>
|
||||
{t("login_welfare_services")}
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
<Button
|
||||
sx={{ whiteSpace: "nowrap" }}
|
||||
variant="contained"
|
||||
size="large"
|
||||
component={NextLinkComposed}
|
||||
to={{
|
||||
pathname: "/login",
|
||||
}}
|
||||
>
|
||||
{t("login_user_panel")}
|
||||
</Button>
|
||||
)}
|
||||
</CenterLayout>
|
||||
</FullPageLayout>
|
||||
|
||||
@@ -1,196 +0,0 @@
|
||||
import Notifications from "@/core/components/notifications";
|
||||
import StyledForm from "@/core/components/StyledForm";
|
||||
import { LOGIN, 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 useUser from "@/lib/app/hooks/useUser";
|
||||
import ChangeCircleIcon from "@mui/icons-material/ChangeCircle";
|
||||
import LoginIcon from "@mui/icons-material/Login";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Container,
|
||||
Grid,
|
||||
Link,
|
||||
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 { useEffect } from "react";
|
||||
import * as Yup from "yup";
|
||||
|
||||
const SendToken = ({ PhoneNumber, setOtpToken, timer, setTimer }) => {
|
||||
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) => {
|
||||
Notifications(directionApp, t, undefined);
|
||||
await axios
|
||||
.post(LOGIN, {
|
||||
phone_number: values.phone_number,
|
||||
verification_code: values.verification_code,
|
||||
})
|
||||
.then(function (response) {
|
||||
Notifications(directionApp, t, response);
|
||||
setToken(response.data.token);
|
||||
})
|
||||
.catch(function (error) {
|
||||
Notifications(directionApp, t, error.response);
|
||||
props.setSubmitting(false);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
let interval;
|
||||
if (timer > 0) {
|
||||
interval = setInterval(() => {
|
||||
setTimer((prevTimer) => prevTimer - 1);
|
||||
}, 1000);
|
||||
} else {
|
||||
clearInterval(interval);
|
||||
}
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [timer]);
|
||||
|
||||
const handleResendClick = async () => {
|
||||
// work on it
|
||||
if (timer != 0) return
|
||||
Notifications(directionApp, t, undefined);
|
||||
await axios
|
||||
.post(LOGIN_SEND_OTP_TOKEN, {
|
||||
phone_number: PhoneNumber,
|
||||
})
|
||||
.then(function (response) {
|
||||
Notifications(directionApp, t, response);
|
||||
setTimer(30);
|
||||
})
|
||||
.catch(function (error) {
|
||||
Notifications(directionApp, t, error.response);
|
||||
});
|
||||
};
|
||||
|
||||
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 }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Typography variant="button">
|
||||
{t("RegisterPage.sent_token_to")}: {PhoneNumber}
|
||||
</Typography>
|
||||
<Button
|
||||
size="small"
|
||||
startIcon={<ChangeCircleIcon />}
|
||||
variant="outlined"
|
||||
onClick={() => setOtpToken(false)}
|
||||
>
|
||||
{t("RegisterPage.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
|
||||
? 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>
|
||||
<Typography
|
||||
variant={"button"}
|
||||
sx={{ cursor: "pointer", textAlign: "center" }}
|
||||
onClick={handleResendClick}
|
||||
underline="hover"
|
||||
>
|
||||
{timer > 0
|
||||
? `${t("LoginPage.Resend_code_in")}: ${timer} ${t(
|
||||
"LoginPage.seconds_later"
|
||||
)}`
|
||||
: t("LoginPage.resend_code")}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</StyledForm>
|
||||
</Stack>
|
||||
)}
|
||||
</Formik>
|
||||
</Paper>
|
||||
</Container>
|
||||
</CenterLayout>
|
||||
</FullPageLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default SendToken;
|
||||
@@ -1,166 +0,0 @@
|
||||
import LinkRouting from "@/core/components/LinkRouting";
|
||||
import Notifications from "@/core/components/notifications";
|
||||
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, PhoneNumber }) => {
|
||||
const t = useTranslations();
|
||||
const { directionApp } = useDirection();
|
||||
|
||||
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_required")),
|
||||
});
|
||||
|
||||
const handleSubmit = async (values, props) => {
|
||||
Notifications(directionApp, t, undefined);
|
||||
await axios
|
||||
.post(LOGIN_SEND_OTP_TOKEN, {
|
||||
phone_number: values.phone_number,
|
||||
})
|
||||
.then(function (response) {
|
||||
Notifications(directionApp, t, response);
|
||||
setPhoneNumber(values.phone_number);
|
||||
setOtpToken(true);
|
||||
})
|
||||
.catch(function (error) {
|
||||
Notifications(directionApp, t, error.response);
|
||||
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="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-navy"}>
|
||||
<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,22 +0,0 @@
|
||||
import SendUserData from "./SendUserData";
|
||||
import { useState } from "react";
|
||||
import SendToken from "./sendToken";
|
||||
|
||||
const LoginComponent = () => {
|
||||
const [otpToken, setOtpToken] = useState(false);
|
||||
const [PhoneNumber, setPhoneNumber] = useState("");
|
||||
|
||||
if (!otpToken) {
|
||||
return (
|
||||
<SendUserData
|
||||
setOtpToken={setOtpToken}
|
||||
setPhoneNumber={setPhoneNumber}
|
||||
PhoneNumber={PhoneNumber}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return <SendToken PhoneNumber={PhoneNumber} setOtpToken={setOtpToken} />;
|
||||
}
|
||||
};
|
||||
|
||||
export default LoginComponent;
|
||||
@@ -1,12 +1,13 @@
|
||||
import Notifications from "@/core/components/notifications";
|
||||
import ResendToken from "@/core/components/ResendToken";
|
||||
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 ChangeCircleIcon from "@mui/icons-material/ChangeCircle";
|
||||
import LoginIcon from "@mui/icons-material/Login";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
@@ -23,7 +24,13 @@ import { useTranslations } from "next-intl";
|
||||
import Image from "next/image";
|
||||
import * as Yup from "yup";
|
||||
|
||||
const SendToken = ({ PhoneNumber, setOtpToken }) => {
|
||||
const SendToken = ({
|
||||
PhoneNumber,
|
||||
setOtpToken,
|
||||
timer,
|
||||
setTimer,
|
||||
initialTimerValue,
|
||||
}) => {
|
||||
const t = useTranslations();
|
||||
const { directionApp } = useDirection();
|
||||
const { setToken } = useUser();
|
||||
@@ -78,27 +85,29 @@ const SendToken = ({ PhoneNumber, setOtpToken }) => {
|
||||
/>
|
||||
</Box>
|
||||
<Typography margin={2} variant="h4" textAlign="center">
|
||||
{t("login_welfare_services")}
|
||||
{t("login")}
|
||||
</Typography>
|
||||
<StyledForm sx={{ width: "100%" }}>
|
||||
<Stack spacing={3} sx={{ p: 2 }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
display: { xs: "column", sm: "flex" },
|
||||
alignItems: "center",
|
||||
textAlign: { xs: "center", sm: "unset" },
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Typography variant="button">
|
||||
{t("RegisterPage.sent_token_to")}: {PhoneNumber}{" "}
|
||||
<Typography variant="button" sx={{ display: "block" }}>
|
||||
{t("LoginPage.sent_token_to")}: {PhoneNumber}
|
||||
</Typography>
|
||||
<Button
|
||||
size="small"
|
||||
startIcon={<ChangeCircleIcon />}
|
||||
variant="outlined"
|
||||
onClick={() => setOtpToken(false)}
|
||||
sx={{ whiteSpace: "nowrap", my: { xs: 1, sm: 0 } }}
|
||||
>
|
||||
{t("RegisterPage.change_phone_number")}
|
||||
{t("LoginPage.change_phone_number")}
|
||||
</Button>
|
||||
</Box>
|
||||
<Field
|
||||
@@ -137,6 +146,12 @@ const SendToken = ({ PhoneNumber, setOtpToken }) => {
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<ResendToken
|
||||
initialTimerValue={initialTimerValue}
|
||||
timer={timer}
|
||||
setTimer={setTimer}
|
||||
PhoneNumber={PhoneNumber}
|
||||
/>
|
||||
</Stack>
|
||||
</StyledForm>
|
||||
</Stack>
|
||||
@@ -1,7 +1,7 @@
|
||||
import Notifications from "@/core/components/notifications";
|
||||
import LinkRouting from "@/core/components/LinkRouting";
|
||||
import Notifications from "@/core/components/notifications";
|
||||
import StyledForm from "@/core/components/StyledForm";
|
||||
import { LOGIN_SEND_OTP_TOKEN } from "@/core/data/apiRoutes";
|
||||
import { SEND_OTP_TOKEN } from "@/core/data/apiRoutes";
|
||||
import CenterLayout from "@/layouts/CenterLayout";
|
||||
import FullPageLayout from "@/layouts/FullPageLayout";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
@@ -24,7 +24,13 @@ import Image from "next/image";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import * as Yup from "yup";
|
||||
|
||||
const SendUserData = ({ setOtpToken, setPhoneNumber, PhoneNumber }) => {
|
||||
const SendUserData = ({
|
||||
setOtpToken,
|
||||
setPhoneNumber,
|
||||
PhoneNumber,
|
||||
setTimer,
|
||||
initialTimerValue,
|
||||
}) => {
|
||||
const t = useTranslations();
|
||||
const { directionApp } = useDirection();
|
||||
|
||||
@@ -41,13 +47,14 @@ const SendUserData = ({ setOtpToken, setPhoneNumber, PhoneNumber }) => {
|
||||
const handleSubmit = async (values, props) => {
|
||||
Notifications(directionApp, t, undefined);
|
||||
await axios
|
||||
.post(LOGIN_SEND_OTP_TOKEN, {
|
||||
.post(SEND_OTP_TOKEN, {
|
||||
phone_number: values.phone_number,
|
||||
})
|
||||
.then(function (response) {
|
||||
Notifications(directionApp, t, response);
|
||||
setPhoneNumber(values.phone_number);
|
||||
setOtpToken(true);
|
||||
setTimer(initialTimerValue);
|
||||
})
|
||||
.catch(function (error) {
|
||||
Notifications(directionApp, t, error.response);
|
||||
@@ -78,7 +85,7 @@ const SendUserData = ({ setOtpToken, setPhoneNumber, PhoneNumber }) => {
|
||||
/>
|
||||
</Box>
|
||||
<Typography margin={2} variant="h4" textAlign="center">
|
||||
{t("login_welfare_services")}
|
||||
{t("Titles.title_login_page")}
|
||||
</Typography>
|
||||
<StyledForm sx={{ width: "100%" }}>
|
||||
<Stack spacing={3} sx={{ p: 2 }}>
|
||||
@@ -112,7 +119,7 @@ const SendUserData = ({ setOtpToken, setPhoneNumber, PhoneNumber }) => {
|
||||
}}
|
||||
>
|
||||
<Grid item xs={12} sm={6} sx={{ pr: { xs: 0, sm: 1 } }}>
|
||||
<LinkRouting href={"/register-welfare-services"}>
|
||||
<LinkRouting href={"/register"}>
|
||||
<Button
|
||||
fullWidth
|
||||
type="submit"
|
||||
@@ -1,11 +1,15 @@
|
||||
import SendUserData from "./SendUserData";
|
||||
import { useState } from "react";
|
||||
import SendToken from "./SendToken";
|
||||
import SendUserData from "./SendUserData";
|
||||
|
||||
const LoginComponent = () => {
|
||||
const [otpToken, setOtpToken] = useState(false);
|
||||
const [PhoneNumber, setPhoneNumber] = useState("");
|
||||
const [timer, setTimer] = useState(30);
|
||||
|
||||
// For Resend Token (read ResendToken Component Doc)
|
||||
const initialTimerValue = 30;
|
||||
const [timer, setTimer] = useState(initialTimerValue);
|
||||
// End For Resend Token
|
||||
|
||||
if (!otpToken) {
|
||||
return (
|
||||
@@ -13,6 +17,8 @@ const LoginComponent = () => {
|
||||
setOtpToken={setOtpToken}
|
||||
setPhoneNumber={setPhoneNumber}
|
||||
PhoneNumber={PhoneNumber}
|
||||
initialTimerValue={initialTimerValue}
|
||||
setTimer={setTimer}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
@@ -21,6 +27,7 @@ const LoginComponent = () => {
|
||||
PhoneNumber={PhoneNumber}
|
||||
setOtpToken={setOtpToken}
|
||||
timer={timer}
|
||||
initialTimerValue={initialTimerValue}
|
||||
setTimer={setTimer}
|
||||
/>
|
||||
);
|
||||
@@ -1,160 +0,0 @@
|
||||
import LinkRouting from "@/core/components/LinkRouting";
|
||||
import Notifications from "@/core/components/notifications";
|
||||
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 ChangeCircleIcon from "@mui/icons-material/ChangeCircle";
|
||||
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,
|
||||
navganId,
|
||||
typeId,
|
||||
setOtpToken,
|
||||
}) => {
|
||||
const t = useTranslations();
|
||||
const { directionApp } = useDirection();
|
||||
const { setToken } = useUser();
|
||||
|
||||
const initialValues = {
|
||||
phone_number: PhoneNumber,
|
||||
national_id: nationalId,
|
||||
navgan_id: navganId,
|
||||
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) => {
|
||||
Notifications(directionApp, t, undefined);
|
||||
await axios
|
||||
.post(REGISTER, {
|
||||
phone_number: values.phone_number,
|
||||
national_id: values.national_id,
|
||||
navgan_id: values.navgan_id,
|
||||
type_id: values.type_id,
|
||||
verification_code: values.verification_code,
|
||||
})
|
||||
.then(function (response) {
|
||||
Notifications(directionApp, t, response);
|
||||
setToken(response.data.token);
|
||||
})
|
||||
.catch(function (error) {
|
||||
Notifications(directionApp, t, error.response);
|
||||
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")}
|
||||
priority
|
||||
/>
|
||||
</Box>
|
||||
<Typography margin={2} variant="h4" textAlign="center">
|
||||
{t("register_navy")}
|
||||
</Typography>
|
||||
<StyledForm sx={{ width: "100%" }}>
|
||||
<Stack spacing={3} sx={{ p: 2 }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Typography variant="button">
|
||||
{t("RegisterPage.sent_token_to")}: {PhoneNumber}{" "}
|
||||
</Typography>
|
||||
<Button
|
||||
size="small"
|
||||
startIcon={<ChangeCircleIcon />}
|
||||
variant="outlined"
|
||||
onClick={() => setOtpToken(false)}
|
||||
>
|
||||
{t("RegisterPage.change_phone_number")}
|
||||
</Button>
|
||||
</Box>
|
||||
<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;
|
||||
@@ -1,38 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import SendToken from "./SendToken";
|
||||
import SendUserData from "./SendUserData";
|
||||
|
||||
const RegisterNavyComponent = () => {
|
||||
const [otpToken, setOtpToken] = useState(false);
|
||||
const [PhoneNumber, setPhoneNumber] = useState("");
|
||||
const [nationalId, setNationalId] = useState("");
|
||||
const [navganId, setNavganId] = useState("");
|
||||
const [typeId, setTypeId] = useState("");
|
||||
|
||||
if (!otpToken) {
|
||||
return (
|
||||
<SendUserData
|
||||
setOtpToken={setOtpToken}
|
||||
setPhoneNumber={setPhoneNumber}
|
||||
setNationalId={setNationalId}
|
||||
setNavganId={setNavganId}
|
||||
setTypeId={setTypeId}
|
||||
PhoneNumber={PhoneNumber}
|
||||
nationalId={nationalId}
|
||||
navganId={navganId}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<SendToken
|
||||
PhoneNumber={PhoneNumber}
|
||||
nationalId={nationalId}
|
||||
navganId={navganId}
|
||||
typeId={typeId}
|
||||
setOtpToken={setOtpToken}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default RegisterNavyComponent;
|
||||
@@ -1,34 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import SendToken from "./sendToken";
|
||||
import SendUserData from "./SendUserData";
|
||||
|
||||
const RegisterNavyComponent = () => {
|
||||
const [otpToken, setOtpToken] = useState(false);
|
||||
const [PhoneNumber, setPhoneNumber] = useState("");
|
||||
const [nationalId, setNationalId] = useState("");
|
||||
const [typeId, setTypeId] = useState("");
|
||||
|
||||
if (!otpToken) {
|
||||
return (
|
||||
<SendUserData
|
||||
setOtpToken={setOtpToken}
|
||||
setPhoneNumber={setPhoneNumber}
|
||||
setNationalId={setNationalId}
|
||||
setTypeId={setTypeId}
|
||||
PhoneNumber={PhoneNumber}
|
||||
nationalId={nationalId}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<SendToken
|
||||
PhoneNumber={PhoneNumber}
|
||||
nationalId={nationalId}
|
||||
typeId={typeId}
|
||||
setOtpToken={setOtpToken}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default RegisterNavyComponent;
|
||||
@@ -1,7 +1,7 @@
|
||||
import LinkRouting from "@/core/components/LinkRouting";
|
||||
import Notifications from "@/core/components/notifications";
|
||||
import StyledForm from "@/core/components/StyledForm";
|
||||
import { REGISTER_SEND_OTP_TOKEN } from "@/core/data/apiRoutes";
|
||||
import { SEND_OTP_TOKEN } from "@/core/data/apiRoutes";
|
||||
import CenterLayout from "@/layouts/CenterLayout";
|
||||
import FullPageLayout from "@/layouts/FullPageLayout";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
@@ -22,13 +22,12 @@ import Image from "next/image";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import * as Yup from "yup";
|
||||
|
||||
const SendUserData = ({
|
||||
const RequestOtp = ({
|
||||
setOtpToken,
|
||||
setPhoneNumber,
|
||||
setNationalId,
|
||||
setTypeId,
|
||||
PhoneNumber,
|
||||
nationalId,
|
||||
setTimer,
|
||||
initialTimerValue,
|
||||
}) => {
|
||||
const t = useTranslations();
|
||||
const { directionApp } = useDirection();
|
||||
@@ -37,33 +36,25 @@ const SendUserData = ({
|
||||
const backUrlDecodedPath = searchParams.get("back_url");
|
||||
|
||||
const initialValues = {
|
||||
type_id: "2",
|
||||
phone_number: PhoneNumber,
|
||||
national_id: nationalId,
|
||||
};
|
||||
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) => {
|
||||
Notifications(directionApp, t, undefined);
|
||||
await axios
|
||||
.post(REGISTER_SEND_OTP_TOKEN, {
|
||||
type_id: values.type_id,
|
||||
national_id: values.national_id,
|
||||
.post(SEND_OTP_TOKEN, {
|
||||
phone_number: values.phone_number,
|
||||
})
|
||||
.then(function (response) {
|
||||
Notifications(directionApp, t, response);
|
||||
setPhoneNumber(values.phone_number);
|
||||
setNationalId(values.national_id);
|
||||
setTypeId(values.type_id);
|
||||
setOtpToken(true);
|
||||
setTimer(initialTimerValue);
|
||||
})
|
||||
.catch(function (error) {
|
||||
Notifications(directionApp, t, error.response);
|
||||
@@ -88,13 +79,13 @@ const SendUserData = ({
|
||||
>
|
||||
<Image
|
||||
fill
|
||||
src="/images/register.svg"
|
||||
alt={t("app_name")}
|
||||
src="/images/login.svg"
|
||||
priority
|
||||
alt={t("app_name")}
|
||||
/>
|
||||
</Box>
|
||||
<Typography margin={2} variant="h4" textAlign="center">
|
||||
{t("register_welfare_services")}
|
||||
{t("Titles.title_register_page")}
|
||||
</Typography>
|
||||
<StyledForm sx={{ width: "100%" }}>
|
||||
<Stack spacing={3} sx={{ p: 2 }}>
|
||||
@@ -120,27 +111,6 @@ const SendUserData = ({
|
||||
: 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"
|
||||
@@ -165,15 +135,17 @@ const SendUserData = ({
|
||||
href={
|
||||
backUrlDecodedPath
|
||||
? decodeURIComponent(backUrlDecodedPath)
|
||||
: "/login-navy"
|
||||
: "/register"
|
||||
}
|
||||
>
|
||||
{t("RegisterPage.link_routing_back_to")}{" "}
|
||||
{t("RegisterPage.link_routing_login_navy")}
|
||||
{backUrlDecodedPath
|
||||
? t("RegisterPage.link_routing_previuos_page")
|
||||
: t("RegisterPage.link_routing_register")}
|
||||
</LinkRouting>
|
||||
</Stack>
|
||||
</FullPageLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default SendUserData;
|
||||
export default RequestOtp;
|
||||
98
src/components/register/index.jsx
Normal file
98
src/components/register/index.jsx
Normal file
@@ -0,0 +1,98 @@
|
||||
import dahsboardImage from "&/images/dashboard.svg";
|
||||
import LinkRouting from "@/core/components/LinkRouting";
|
||||
import { NextLinkComposed } from "@/core/components/LinkRouting";
|
||||
import StyledImage from "@/core/components/StyledImage";
|
||||
import CenterLayout from "@/layouts/CenterLayout";
|
||||
import FullPageLayout from "@/layouts/FullPageLayout";
|
||||
import useUser from "@/lib/app/hooks/useUser";
|
||||
import { Box, Button, Grid, Stack } from "@mui/material";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
|
||||
const RegisterComponent = () => {
|
||||
const t = useTranslations();
|
||||
const { isAuth } = useUser();
|
||||
|
||||
const searchParams = useSearchParams();
|
||||
const backUrlDecodedPath = searchParams.get("back_url");
|
||||
|
||||
return (
|
||||
<FullPageLayout sx={{ p: 1 }}>
|
||||
<CenterLayout spacing={3}>
|
||||
<StyledImage
|
||||
src={dahsboardImage}
|
||||
alt={t("app_name")}
|
||||
width={300}
|
||||
height={200}
|
||||
priority
|
||||
/>
|
||||
{isAuth ? (
|
||||
<Button
|
||||
variant="contained"
|
||||
component={NextLinkComposed}
|
||||
to={{
|
||||
pathname: "/dashboard",
|
||||
}}
|
||||
>
|
||||
{t("dashboard")}
|
||||
</Button>
|
||||
) : (
|
||||
<Box>
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={{ xs: 1, sm: 0 }}
|
||||
sx={{
|
||||
flexDirection: { xs: "column", sm: "row" },
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Grid item xs={12} sm={6} sx={{ px: { xs: 0, sm: 1 } }}>
|
||||
<Button
|
||||
sx={{ whiteSpace: "nowrap" }}
|
||||
variant="contained"
|
||||
size="large"
|
||||
component={NextLinkComposed}
|
||||
to={{
|
||||
pathname: "register/navy",
|
||||
}}
|
||||
>
|
||||
{t("register_navy")}
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6} sx={{ px: { xs: 0, sm: 1 } }}>
|
||||
<Button
|
||||
sx={{ whiteSpace: "nowrap" }}
|
||||
variant="contained"
|
||||
size="large"
|
||||
component={NextLinkComposed}
|
||||
to={{
|
||||
pathname: "register/welfare-services",
|
||||
}}
|
||||
>
|
||||
{t("register_welfare_services")}
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
)}
|
||||
</CenterLayout>
|
||||
<Stack direction="row" alignItems="center" justifyContent="center">
|
||||
<LinkRouting
|
||||
sx={{ margin: 2 }}
|
||||
href={
|
||||
backUrlDecodedPath
|
||||
? decodeURIComponent(backUrlDecodedPath)
|
||||
: "/login"
|
||||
}
|
||||
>
|
||||
{t("RegisterPage.link_routing_back_to")}{" "}
|
||||
{backUrlDecodedPath
|
||||
? t("RegisterPage.link_routing_previuos_page")
|
||||
: t("RegisterPage.link_routing_login")}
|
||||
</LinkRouting>
|
||||
</Stack>
|
||||
</FullPageLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default RegisterComponent;
|
||||
@@ -1,49 +1,51 @@
|
||||
import LinkRouting from "@/core/components/LinkRouting";
|
||||
import Notifications from "@/core/components/notifications";
|
||||
import StyledForm from "@/core/components/StyledForm";
|
||||
import { REGISTER_SEND_OTP_TOKEN } from "@/core/data/apiRoutes";
|
||||
import { REGISTER } 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 LoginIcon from "@mui/icons-material/Login";
|
||||
import ChangeCircleIcon from "@mui/icons-material/ChangeCircle";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Chip,
|
||||
Container,
|
||||
Divider,
|
||||
Paper,
|
||||
Stack, TextField, Typography
|
||||
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";
|
||||
import ResendToken from "@/core/components/ResendToken";
|
||||
import useUser from "@/lib/app/hooks/useUser";
|
||||
|
||||
const SendUserData = ({
|
||||
setOtpToken,
|
||||
setPhoneNumber,
|
||||
const UserRegister = ({
|
||||
PhoneNumber,
|
||||
setNationalId,
|
||||
nationalId,
|
||||
setNavganId,
|
||||
navganId,
|
||||
setTypeId,
|
||||
setOtpToken,
|
||||
initialTimerValue,
|
||||
timer,
|
||||
setTimer,
|
||||
}) => {
|
||||
const t = useTranslations();
|
||||
const { directionApp } = useDirection();
|
||||
|
||||
const searchParams = useSearchParams();
|
||||
const backUrlDecodedPath = searchParams.get("back_url");
|
||||
const { setToken } = useUser();
|
||||
|
||||
const initialValues = {
|
||||
type_id: "1",
|
||||
verification_code: "",
|
||||
phone_number: PhoneNumber,
|
||||
national_id: nationalId,
|
||||
navgan_id: navganId,
|
||||
national_id: "",
|
||||
navgan_id: "",
|
||||
};
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
phone_number: Yup.string().required(
|
||||
verification_code: Yup.string().required(
|
||||
t("RegisterPage.error_message_required")
|
||||
),
|
||||
national_id: Yup.string().required(
|
||||
@@ -54,20 +56,19 @@ const SendUserData = ({
|
||||
|
||||
const handleSubmit = async (values, props) => {
|
||||
Notifications(directionApp, t, undefined);
|
||||
console.log(initialValues);
|
||||
await axios
|
||||
.post(REGISTER_SEND_OTP_TOKEN, {
|
||||
.post(REGISTER, {
|
||||
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) {
|
||||
Notifications(directionApp, t, response);
|
||||
setPhoneNumber(values.phone_number);
|
||||
setNationalId(values.national_id);
|
||||
setNavganId(values.navgan_id);
|
||||
setTypeId(values.type_id);
|
||||
setOtpToken(true)
|
||||
setOtpToken(true);
|
||||
setToken(response.data.token);
|
||||
})
|
||||
.catch(function (error) {
|
||||
Notifications(directionApp, t, error.response);
|
||||
@@ -102,28 +103,58 @@ const SendUserData = ({
|
||||
</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="phone_number"
|
||||
name="verification_code"
|
||||
variant="outlined"
|
||||
label={t("RegisterPage.text_field_phone_number")}
|
||||
label={t("LoginPage.text_field_verification_code")}
|
||||
placeholder={t(
|
||||
"RegisterPage.text_field_enter_your_phone_number"
|
||||
"LoginPage.text_field_enter_your_verification_code"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
props.touched.phone_number &&
|
||||
props.errors.phone_number
|
||||
props.touched.verification_code &&
|
||||
props.errors.verification_code
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.phone_number
|
||||
? props.errors.phone_number
|
||||
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"
|
||||
@@ -171,10 +202,10 @@ const SendUserData = ({
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
endIcon={<FingerprintIcon />}
|
||||
endIcon={<LoginIcon />}
|
||||
disabled={props.isSubmitting ? true : false}
|
||||
>
|
||||
{t("RegisterPage.button_request_verification")}
|
||||
{t("RegisterPage.button_submit")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</StyledForm>
|
||||
@@ -184,21 +215,8 @@ const SendUserData = ({
|
||||
</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;
|
||||
export default UserRegister;
|
||||
37
src/components/register/navy/index.jsx
Normal file
37
src/components/register/navy/index.jsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import { useState } from "react";
|
||||
import RequestOtp from "../RequestOtp";
|
||||
import UserRegister from "./UserRegister";
|
||||
|
||||
const NavyComponent = () => {
|
||||
const [otpToken, setOtpToken] = useState(false);
|
||||
const [PhoneNumber, setPhoneNumber] = useState("");
|
||||
|
||||
// For Resend Token (read ResendToken Component Doc)
|
||||
const initialTimerValue = 30;
|
||||
const [timer, setTimer] = useState(initialTimerValue);
|
||||
// End For Resend Token
|
||||
|
||||
if (!otpToken) {
|
||||
return (
|
||||
<RequestOtp
|
||||
setOtpToken={setOtpToken}
|
||||
PhoneNumber={PhoneNumber}
|
||||
setPhoneNumber={setPhoneNumber}
|
||||
setTimer={setTimer}
|
||||
initialTimerValue={initialTimerValue}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<UserRegister
|
||||
PhoneNumber={PhoneNumber}
|
||||
setOtpToken={setOtpToken}
|
||||
timer={timer}
|
||||
setTimer={setTimer}
|
||||
initialTimerValue={initialTimerValue}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default NavyComponent;
|
||||
@@ -4,13 +4,14 @@ 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 ChangeCircleIcon from "@mui/icons-material/ChangeCircle";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Chip,
|
||||
Container,
|
||||
Divider,
|
||||
Paper,
|
||||
Stack,
|
||||
TextField,
|
||||
@@ -21,35 +22,49 @@ import { Field, Formik } from "formik";
|
||||
import { useTranslations } from "next-intl";
|
||||
import Image from "next/image";
|
||||
import * as Yup from "yup";
|
||||
import ResendToken from "@/core/components/ResendToken";
|
||||
import useUser from "@/lib/app/hooks/useUser";
|
||||
|
||||
const SendToken = ({ PhoneNumber, nationalId, typeId, setOtpToken }) => {
|
||||
const UserRegister = ({
|
||||
PhoneNumber,
|
||||
setOtpToken,
|
||||
initialTimerValue,
|
||||
timer,
|
||||
setTimer,
|
||||
}) => {
|
||||
const t = useTranslations();
|
||||
const { directionApp } = useDirection();
|
||||
const { setToken } = useUser();
|
||||
|
||||
const initialValues = {
|
||||
phone_number: PhoneNumber,
|
||||
national_id: nationalId,
|
||||
type_id: typeId,
|
||||
type_id: "2",
|
||||
verification_code: "",
|
||||
phone_number: PhoneNumber,
|
||||
national_id: "",
|
||||
};
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
verification_code: Yup.string().required(
|
||||
t("RegisterPage.error_message_required")
|
||||
),
|
||||
national_id: Yup.string().required(
|
||||
t("RegisterPage.error_message_required")
|
||||
),
|
||||
});
|
||||
|
||||
const handleSubmit = async (values, props) => {
|
||||
Notifications(directionApp, t, undefined);
|
||||
console.log(initialValues);
|
||||
await axios
|
||||
.post(REGISTER, {
|
||||
phone_number: values.phone_number,
|
||||
national_id: values.national_id,
|
||||
type_id: values.type_id,
|
||||
national_id: values.national_id,
|
||||
phone_number: values.phone_number,
|
||||
verification_code: values.verification_code,
|
||||
})
|
||||
.then(function (response) {
|
||||
Notifications(directionApp, t, response);
|
||||
setOtpToken(true);
|
||||
setToken(response.data.token);
|
||||
})
|
||||
.catch(function (error) {
|
||||
@@ -87,30 +102,32 @@ const SendToken = ({ PhoneNumber, nationalId, typeId, setOtpToken }) => {
|
||||
<Stack spacing={3} sx={{ p: 2 }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
display: { xs: "column", sm: "flex" },
|
||||
alignItems: "center",
|
||||
textAlign: { xs: "center", sm: "unset" },
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Typography variant="button">
|
||||
{t("RegisterPage.sent_token_to")}: {PhoneNumber}{" "}
|
||||
<Typography variant="button" sx={{ display: "block" }}>
|
||||
{t("LoginPage.sent_token_to")}: {PhoneNumber}
|
||||
</Typography>
|
||||
<Button
|
||||
size="small"
|
||||
startIcon={<ChangeCircleIcon />}
|
||||
variant="outlined"
|
||||
onClick={() => setOtpToken(false)}
|
||||
sx={{ whiteSpace: "nowrap", my: { xs: 1, sm: 0 } }}
|
||||
>
|
||||
{t("RegisterPage.change_phone_number")}
|
||||
{t("LoginPage.change_phone_number")}
|
||||
</Button>
|
||||
</Box>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="verification_code"
|
||||
variant="outlined"
|
||||
label={t("RegisterPage.text_field_verification_code")}
|
||||
label={t("LoginPage.text_field_verification_code")}
|
||||
placeholder={t(
|
||||
"RegisterPage.text_field_enter_your_verification_code"
|
||||
"LoginPage.text_field_enter_your_verification_code"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
@@ -126,6 +143,36 @@ const SendToken = ({ PhoneNumber, nationalId, typeId, setOtpToken }) => {
|
||||
: 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
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.national_id
|
||||
? props.errors.national_id
|
||||
: null
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
fullWidth
|
||||
type="submit"
|
||||
@@ -148,4 +195,4 @@ const SendToken = ({ PhoneNumber, nationalId, typeId, setOtpToken }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default SendToken;
|
||||
export default UserRegister;
|
||||
37
src/components/register/welfare-services/index.jsx
Normal file
37
src/components/register/welfare-services/index.jsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import { useState } from "react";
|
||||
import RequestOtp from "../RequestOtp";
|
||||
import UserRegister from "./UserRegister";
|
||||
|
||||
const NavyComponent = () => {
|
||||
const [otpToken, setOtpToken] = useState(false);
|
||||
const [PhoneNumber, setPhoneNumber] = useState("");
|
||||
|
||||
// For Resend Token (read ResendToken Component Doc)
|
||||
const initialTimerValue = 30;
|
||||
const [timer, setTimer] = useState(initialTimerValue);
|
||||
// End For Resend Token
|
||||
|
||||
if (!otpToken) {
|
||||
return (
|
||||
<RequestOtp
|
||||
setOtpToken={setOtpToken}
|
||||
PhoneNumber={PhoneNumber}
|
||||
setPhoneNumber={setPhoneNumber}
|
||||
setTimer={setTimer}
|
||||
initialTimerValue={initialTimerValue}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<UserRegister
|
||||
PhoneNumber={PhoneNumber}
|
||||
setOtpToken={setOtpToken}
|
||||
timer={timer}
|
||||
setTimer={setTimer}
|
||||
initialTimerValue={initialTimerValue}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default NavyComponent;
|
||||
80
src/core/components/ResendToken.jsx
Normal file
80
src/core/components/ResendToken.jsx
Normal file
@@ -0,0 +1,80 @@
|
||||
import Notifications from "@/core/components/notifications";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
import { Button, Typography } from "@mui/material";
|
||||
import axios from "axios";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useEffect } from "react";
|
||||
import { SEND_OTP_TOKEN } from "../data/apiRoutes";
|
||||
|
||||
const ResendToken = ({ initialTimerValue, timer, setTimer, PhoneNumber }) => {
|
||||
const t = useTranslations();
|
||||
const { directionApp } = useDirection();
|
||||
|
||||
// Countdown Timer
|
||||
useEffect(() => {
|
||||
let interval;
|
||||
if (timer > 0) {
|
||||
interval = setInterval(() => {
|
||||
setTimer((prevTimer) => prevTimer - 1);
|
||||
}, 1000);
|
||||
} else {
|
||||
clearInterval(interval);
|
||||
}
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [timer]);
|
||||
// End Countdown Timer
|
||||
|
||||
// Handle Resend Token
|
||||
const handleResendClick = async () => {
|
||||
// work on it
|
||||
if (timer != 0) return;
|
||||
Notifications(directionApp, t, undefined);
|
||||
await axios
|
||||
.post(SEND_OTP_TOKEN, {
|
||||
phone_number: PhoneNumber,
|
||||
})
|
||||
.then(function (response) {
|
||||
Notifications(directionApp, t, response);
|
||||
setTimer(initialTimerValue);
|
||||
})
|
||||
.catch(function (error) {
|
||||
Notifications(directionApp, t, error.response);
|
||||
});
|
||||
};
|
||||
// End Handle Resend Token
|
||||
|
||||
return (
|
||||
<>
|
||||
{timer > 0 ? (
|
||||
<Button
|
||||
color="success"
|
||||
disabled
|
||||
sx={{ width: "auto", alignSelf: "center", mt: 0 }}
|
||||
onClick={handleResendClick}
|
||||
>
|
||||
{t("Resend_code_in")} {timer} {" "}
|
||||
{t("seconds_later")}
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
color="success"
|
||||
sx={{ width: "120px", alignSelf: "center", mt: 0 }}
|
||||
onClick={handleResendClick}
|
||||
>
|
||||
{t("resend_code")}
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ResendToken;
|
||||
|
||||
//////****** usage document ******/////////
|
||||
// 1.) use <ResendToken /> component inside your page
|
||||
// 2.) list of props that you need to send is down below
|
||||
// 2.1) initialTimerValue **** Delay Time For Sending Token
|
||||
// 2.2) timer **** Timer Of Resending Token
|
||||
// 2.3) setTimer **** Set Timer Of Resend (note: every places in your components if you are requesting for getting token you should use this prop like this setTimer(initialTimerValue) )
|
||||
// 2.4) PhoneNumber **** Phone Number That Should Recive Token
|
||||
@@ -4,7 +4,6 @@ import SuccessNotification from "./SuccessNotification";
|
||||
import WarningNotification from "./WarningNotification";
|
||||
|
||||
const Notifications = async (directionApp, t, response) => {
|
||||
console.log(directionApp, t, response);
|
||||
const { status, data } = response != undefined ? response : ""
|
||||
toast.dismiss();
|
||||
switch (status) {
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL + "/api";
|
||||
|
||||
export const LOGIN_SEND_OTP_TOKEN = BASE_URL + "/login/send_otp";
|
||||
// export const LOGIN_SEND_OTP_TOKEN = BASE_URL + "/login/send_otp";
|
||||
export const LOGIN = BASE_URL + "/login";
|
||||
export const REGISTER_SEND_OTP_TOKEN = BASE_URL + "/register/send_otp";
|
||||
// export const REGISTER_SEND_OTP_TOKEN = BASE_URL + "/register/send_otp";
|
||||
export const SEND_OTP_TOKEN = BASE_URL + "/otp";
|
||||
export const REGISTER = BASE_URL + "/register";
|
||||
export const USER_INFO = BASE_URL + "/profile/info";
|
||||
export const SEND_LOAN_REQUEST_NAVGAN = BASE_URL + "/navgan/store_loan";
|
||||
export const SEND_LOAN_REQUEST_WELFARE = BASE_URL + "/navgan/store_loan";
|
||||
export const SEND_LOAN_REQUEST_WELFARE = BASE_URL + "/khadamat/store_loan";
|
||||
export const GET_PROVINCE_LIST = BASE_URL + "/provinces";
|
||||
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import LoginComponent from "@/components/login-welfare-services";
|
||||
import LoginComponent from "@/components/login";
|
||||
import TitlePage from "@/core/components/TitlePage";
|
||||
import WithoutAuthMiddleware from "@/middlewares/WithoutAuth";
|
||||
import { parse } from "next-useragent";
|
||||
@@ -10,7 +10,7 @@ export default function Login() {
|
||||
const { directionApp } = useDirection();
|
||||
return (
|
||||
<WithoutAuthMiddleware>
|
||||
<TitlePage text="Titles.title_login_welfare_services_page" />
|
||||
<TitlePage text="Titles.title_login_page" />
|
||||
<LoginComponent />
|
||||
{directionApp === "rtl" ? <ToastContainer rtl /> : <ToastContainer ltr />}
|
||||
</WithoutAuthMiddleware>
|
||||
@@ -1,4 +1,4 @@
|
||||
import LoginComponent from "@/components/login-navy";
|
||||
import RegisterComponent from "@/components/register";
|
||||
import TitlePage from "@/core/components/TitlePage";
|
||||
import WithoutAuthMiddleware from "@/middlewares/WithoutAuth";
|
||||
import { parse } from "next-useragent";
|
||||
@@ -6,12 +6,12 @@ import "react-toastify/dist/ReactToastify.css";
|
||||
import { ToastContainer } from "react-toastify";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
|
||||
export default function LoginNavy() {
|
||||
export default function Register() {
|
||||
const { directionApp } = useDirection();
|
||||
return (
|
||||
<WithoutAuthMiddleware>
|
||||
<TitlePage text="Titles.title_login_navy_page" />
|
||||
<LoginComponent />
|
||||
<TitlePage text="Titles.title_register_page" />
|
||||
<RegisterComponent />
|
||||
{directionApp === "rtl" ? <ToastContainer rtl /> : <ToastContainer ltr />}
|
||||
</WithoutAuthMiddleware>
|
||||
);
|
||||
@@ -1,4 +1,4 @@
|
||||
import RegisterNavyComponent from "@/components/register-navy";
|
||||
import NavyComponent from "@/components/register/navy";
|
||||
import TitlePage from "@/core/components/TitlePage";
|
||||
import WithoutAuthMiddleware from "@/middlewares/WithoutAuth";
|
||||
import { parse } from "next-useragent";
|
||||
@@ -6,12 +6,12 @@ import "react-toastify/dist/ReactToastify.css";
|
||||
import { ToastContainer } from "react-toastify";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
|
||||
export default function RegisterNavy() {
|
||||
export default function Register() {
|
||||
const { directionApp } = useDirection();
|
||||
return (
|
||||
<WithoutAuthMiddleware>
|
||||
<TitlePage text="Titles.title_register_navy_page" />
|
||||
<RegisterNavyComponent />
|
||||
<NavyComponent />
|
||||
{directionApp === "rtl" ? <ToastContainer rtl /> : <ToastContainer ltr />}
|
||||
</WithoutAuthMiddleware>
|
||||
);
|
||||
@@ -1,4 +1,4 @@
|
||||
import RegisterComponent from "@/components/register-welfare-services";
|
||||
import WelfareServicesComponent from "@/components/register/welfare-services";
|
||||
import TitlePage from "@/core/components/TitlePage";
|
||||
import WithoutAuthMiddleware from "@/middlewares/WithoutAuth";
|
||||
import { parse } from "next-useragent";
|
||||
@@ -6,12 +6,12 @@ import "react-toastify/dist/ReactToastify.css";
|
||||
import { ToastContainer } from "react-toastify";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
|
||||
export default function RegisterWelfareServices() {
|
||||
export default function Register() {
|
||||
const { directionApp } = useDirection();
|
||||
return (
|
||||
<WithoutAuthMiddleware>
|
||||
<TitlePage text="Titles.title_register_welfare_services_page" />
|
||||
<RegisterComponent />
|
||||
<WelfareServicesComponent />
|
||||
{directionApp === "rtl" ? <ToastContainer rtl /> : <ToastContainer ltr />}
|
||||
</WithoutAuthMiddleware>
|
||||
);
|
||||
Reference in New Issue
Block a user