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

complete implemention and design of login and register navgan users

Browse Source
This commit is contained in:
Mohammad Jalali
2023-07-12 14:43:54 +03:30
parent 50107f2e5c
commit 6c32a374de
14 changed files with 859 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
public/locales/fa/app.json
View File

@@ -37,24 +37,30 @@
"LoginPage": {
"text_field_phone_number": "شماره تلفن",
"text_field_enter_your_phone_number": "شماره تلفن خود را وارد کنید",
"text_field_verification_code": "کد یکبار مصرف",
"text_field_enter_your_verification_code": "کد یکبار مصرف خود را وارد کنید",
"button_submit": "ورود",
"link_routing_back_to": "بازگشت به",
"link_routing_previuos_page": "صفحه قبل",
"link_routing_main_page": "صفحه اصلی",
"error_message_required": "اجباری!",
"button_make_account": "ایجاد حساب"
"button_make_account": "ایجاد حساب",
"button_request_verification": "دریافت کد یکبارمصرف"
},
"RegisterPage": {
"link_routing_back_to": "بازگشت به",
"link_routing_login_navy": "صفحه ورود",
"text_field_phone_number": "شماره تلفن",
"text_field_enter_your_phone_number": "شماره تلفن خود را وارد کنید",
"text_field_verification_code": "کد یکبار مصرف",
"text_field_enter_your_verification_code": "کد یکبار مصرف خود را وارد کنید",
"text_field_national_id": "کد ملی",
"text_field_enter_your_national_id": "کد ملی خود را وارد کنید",
"text_field_navgan_id": "شماره ناوگان",
"text_field_enter_your_navgan_id": "شماره ناوگان خود را وارد کنید",
"error_message_required": "اجباری!",
"button_request_verification": "دریافت کد یکبارمصرف"
"button_request_verification": "دریافت کد یکبارمصرف",
"button_submit": "ورود"
},
"Dashboard": {
"dashboard_page": "داشبورد"

2
src/components/dashboard/loan-request/index.jsx
View File

@@ -412,6 +412,7 @@ const DashboardLoanRequestComponent = () => {
width={300}
height={300}
src="/images/login.svg"
priority
alt={t("app_name")}
/>
</Box>
@@ -420,6 +421,7 @@ const DashboardLoanRequestComponent = () => {
width={300}
height={300}
src="/images/login.svg"
priority
alt={t("app_name")}
/>
</Box>

130
src/components/login-navy/SendToken.jsx Normal file
View File

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

164
src/components/login-navy/SendUserData.jsx Normal file
View 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_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;

167
src/components/login-navy/index.jsx
View File

@@ -1,161 +1,18 @@
import LinkRouting from "@/core/components/LinkRouting";
// import Notifications from "@/core/components/notifications";
import StyledForm from "@/core/components/StyledForm";
// 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";
import SendUserData from "./SendUserData";
import { useState } from "react";
import SendToken from "./SendToken";
const LoginComponent = () => {
const t = useTranslations();
const { directionApp } = useDirection();
const { setToken } = useUser(); // pass token to set token
const [otpToken, setOtpToken] = useState(false);
const [PhoneNumber, setPhoneNumber] = useState("");
// gettin url query
const searchParams = useSearchParams();
const backUrlDecodedPath = searchParams.get("back_url");
// formik properties
// const handleSubmit = async (values, props) => {
// 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" 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={<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>
);
if (!otpToken) {
return (
<SendUserData setOtpToken={setOtpToken} setPhoneNumber={setPhoneNumber} />
);
} else {
return <SendToken PhoneNumber={PhoneNumber} />;
}
};
export default LoginComponent;

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

@@ -70,7 +70,12 @@ const LoginComponent = () => {
<Box
sx={{ position: "relative", width: "100%", height: 200 }}
>
<Image fill src="/images/login.svg" alt={t("app_name")} />
<Image
fill
src="/images/login.svg"
priority
alt={t("app_name")}
/>
</Box>
<Typography margin={2} variant="h4" textAlign="center">
{t("login_welfare_services")}
@@ -87,13 +92,16 @@ const LoginComponent = () => {
)}
type={"text"}
error={
props.touched.phone_number && props.errors.phone_number
props.touched.phone_number &&
props.errors.phone_number
? true
: false
}
fullWidth
helperText={
props.touched.phone_number ? props.errors.phone_number : null
props.touched.phone_number
? props.errors.phone_number
: null
}
/>
<Grid
@@ -104,7 +112,7 @@ const LoginComponent = () => {
}}
>
<Grid item xs={12} sm={6} sx={{ pr: { xs: 0, sm: 1 } }}>
<LinkRouting href={"/register-navy"}>
<LinkRouting href={"/register-welfare-services"}>
<Button
fullWidth
type="submit"

0
src/components/login-welfare-services/sendToken.jsx Normal file
View File

127
src/components/register-navy/SendToken.jsx Normal file
View File

@@ -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, navganId, typeId }) => {
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) => {
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) {
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;

195
src/components/register-navy/SendUserData.jsx Normal file
View File

@@ -0,0 +1,195 @@
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,
setNavganId,
setTypeId,
}) => {
const t = useTranslations();
const searchParams = useSearchParams();
const backUrlDecodedPath = searchParams.get("back_url");
const initialValues = {
type_id: "1",
phone_number: "",
national_id: "",
navgan_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")
),
navgan_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,
navgan_id: values.navgan_id,
phone_number: values.phone_number,
})
.then(function (response) {
setPhoneNumber(values.phone_number);
setNationalId(values.national_id);
setNavganId(values.navgan_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_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
}
/>
<Field
as={TextField}
name="navgan_id"
variant="outlined"
label={t("RegisterPage.text_field_navgan_id")}
placeholder={t(
"RegisterPage.text_field_enter_your_navgan_id"
)}
type={"text"}
error={
props.touched.navgan_id && props.errors.navgan_id
? true
: false
}
fullWidth
helperText={
props.touched.navgan_id
? props.errors.navgan_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;

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

@@ -1,191 +1,34 @@
import StyledForm from "@/core/components/StyledForm";
import {
Box,
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";
import { useState } from "react";
import SendToken from "./SendToken";
import SendUserData from "./SendUserData";
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();
const { setToken } = useUser();
const searchParams = useSearchParams();
const backUrlDecodedPath = searchParams.get("back_url");
const initialValues = {
type_id: "1",
phone_number: "",
national_id: "",
navgan_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")
),
navgan_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
}
/>
<Field
as={TextField}
name="navgan_id"
variant="outlined"
label={t("RegisterPage.text_field_navgan_id")}
placeholder={t(
"RegisterPage.text_field_enter_your_navgan_id"
)}
type={"text"}
error={
props.touched.navgan_id && props.errors.navgan_id
? true
: false
}
fullWidth
helperText={
props.touched.navgan_id
? props.errors.navgan_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>
);
if (!otpToken) {
return (
<SendUserData
setOtpToken={setOtpToken}
setPhoneNumber={setPhoneNumber}
setNationalId={setNationalId}
setNavganId={setNavganId}
setTypeId={setTypeId}
/>
);
} else {
return (
<SendToken
PhoneNumber={PhoneNumber}
nationalId={nationalId}
navganId={navganId}
typeId={typeId}
/>
);
}
};
export default RegisterNavyComponent;

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

@@ -0,0 +1,169 @@
import StyledForm from "@/core/components/StyledForm";
import {
Box,
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 t = useTranslations();
const { directionApp } = useDirection();
const { setToken } = useUser();
const searchParams = useSearchParams();
const backUrlDecodedPath = searchParams.get("back_url");
const initialValues = {
type_id: "2",
phone_number: "",
national_id: "",
navgan_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(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;

0
src/components/register-welfare-services/sendToken.jsx Normal file
View File

9
src/core/data/apiRoutes.js
View File

@@ -0,0 +1,9 @@
const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL + "/api";
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 = BASE_URL + "/register";
export const USER_INFO = BASE_URL + "/hamidGiveme";

29
src/lib/app/contexts/user.jsx
View File

@@ -1,7 +1,4 @@
import {
GET_USER_ROUTE,
SET_LANGUAGE
} from "@/core/data/apiRoutes";
import { USER_INFO } from "@/core/data/apiRoutes";
import axios from "axios";
import { createContext, useCallback, useEffect, useReducer } from "react";
@@ -51,27 +48,7 @@ export const UserProvider = ({ children }) => {
dispatch({ type: "CHANGE_USER", user });
}, []);
const changeUserLanguage = useCallback(
(language) => {
dispatch({ type: "CHANGE_USER_LANGUAGE", language });
axios
.post(
SET_LANGUAGE,
{ language: language },
{
headers: {
authorization: `Bearer ${state.token}`,
},
}
)
.then(() => {
getUser((data) => {
changeUser(data);
});
});
},
[state.token]
);
const changeUserLanguage = useCallback(/* for multi language app */);
const changeAuthState = useCallback((isAuth) => {
dispatch({ type: "CHANGE_AUTH_STATE", isAuth });
@@ -92,7 +69,7 @@ export const UserProvider = ({ children }) => {
const getUser = useCallback(
(callback = () => {}) => {
axios
.get(GET_USER_ROUTE, {
.get(USER_INFO, {
headers: { authorization: `Bearer ${state.token}` },
})
.then(({ data }) => {