loan/user-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

redesign and make more flexible login register system

Browse Source
This commit is contained in:
Mohammad Jalali
2023-07-31 15:13:07 +03:30
parent 94a53702b0
commit 07725cfe81
23 changed files with 385 additions and 764 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/first/index.jsx
View File

@@ -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>

166
src/components/login-welfare-services/SendUserData.jsx
View File

@@ -1,166 +0,0 @@
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, 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_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;

22
src/components/login-welfare-services/index.jsx
View File

@@ -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;

152
src/components/login-welfare-services/sendToken.jsx
View File

@@ -1,152 +0,0 @@
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 ChangeCircleIcon from "@mui/icons-material/ChangeCircle";
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, setOtpToken }) => {
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);
});
};
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 }}>
<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>
</Stack>
</StyledForm>
</Stack>
)}
</Formik>
</Paper>
</Container>
</CenterLayout>
</FullPageLayout>
);
};
export default SendToken;

17
src/components/login-navy/SendToken.jsx → src/components/login/SendToken.jsx
View File

@@ -12,10 +12,11 @@ import {
Box,
Button,
Container,
Grid, Paper,
Grid,
Paper,
Stack,
TextField,
Typography
Typography,
} from "@mui/material";
import axios from "axios";
import { Field, Formik } from "formik";
@@ -84,27 +85,29 @@ const SendToken = ({
/>
</Box>
<Typography margin={2} variant="h4" textAlign="center">
{t("login_navy")}
{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

8
src/components/login-navy/SendUserData.jsx → src/components/login/SendUserData.jsx
View File

@@ -1,7 +1,7 @@
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";
@@ -47,7 +47,7 @@ const SendUserData = ({
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) {
@@ -85,7 +85,7 @@ const SendUserData = ({
/>
</Box>
<Typography margin={2} variant="h4" textAlign="center">
{t("login_navy")}
{t("Titles.title_login_page")}
</Typography>
<StyledForm sx={{ width: "100%" }}>
<Stack spacing={3} sx={{ p: 2 }}>
@@ -119,7 +119,7 @@ const SendUserData = ({
}}
>
<Grid item xs={12} sm={6} sx={{ pr: { xs: 0, sm: 1 } }}>
<LinkRouting href={"/register-navy"}>
<LinkRouting href={"/register"}>
<Button
fullWidth
type="submit"

2
src/components/login-navy/index.jsx → src/components/login/index.jsx
View File

@@ -1,6 +1,6 @@
import SendUserData from "./SendUserData";
import { useState } from "react";
import SendToken from "./SendToken";
import SendUserData from "./SendUserData";
const LoginComponent = () => {
const [otpToken, setOtpToken] = useState(false);

160
src/components/register-navy/SendToken.jsx
View File

@@ -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;

38
src/components/register-navy/index.jsx
View File

@@ -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;

34
src/components/register-welfare-services/index.jsx
View File

@@ -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;

56
src/components/register-welfare-services/SendUserData.jsx → src/components/register/RequestOtp.jsx
View File

@@ -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
View 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;

114
src/components/register-navy/SendUserData.jsx → src/components/register/navy/UserRegister.jsx
View File

@@ -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
View 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;

75
src/components/register-welfare-services/sendToken.jsx → src/components/register/welfare-services/UserRegister.jsx
View File

@@ -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
View 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;