99 lines
2.8 KiB
JavaScript
99 lines
2.8 KiB
JavaScript
"use client";
|
|
|
|
import AppContext from "@ctx/AppContext";
|
|
import { useLocale, useTranslations } from "next-intl";
|
|
import Buttonbriz from "plugins/Buttonbriz/page";
|
|
import Input from "plugins/Input/page";
|
|
import validateIranPhone from "plugins/IranPhoneRegex";
|
|
import React, { useContext, useState } from "react";
|
|
import { toast } from "react-toastify";
|
|
|
|
const LoginStep = (props) => {
|
|
const [roleCheckBox, setRoleCheckBox] = useState(false);
|
|
const [alertRolCheckBox, setAlertRolCheckBox] = useState(false);
|
|
const CTX = useContext(AppContext);
|
|
const phoneNumber = CTX.state.phoneNumber;
|
|
|
|
const t = useTranslations("login");
|
|
const locale = useLocale();
|
|
const isRTL = locale === "fa";
|
|
|
|
const handleConfirmPhoneNumber = () => {
|
|
setAlertRolCheckBox(false);
|
|
|
|
if (validateIranPhone(phoneNumber) && roleCheckBox) {
|
|
CTX.ConfirmPhoneNumber(phoneNumber);
|
|
} else {
|
|
if (!validateIranPhone(phoneNumber)) {
|
|
toast.error(" شماره تماس را درست وارد کنید ", {
|
|
position: "bottom-right",
|
|
closeOnClick: true,
|
|
});
|
|
} else if (!roleCheckBox) {
|
|
toast.error(`برای ورود تایید قوانین الزامی است`, {
|
|
position: "bottom-right",
|
|
closeOnClick: true,
|
|
});
|
|
|
|
setTimeout(() => {
|
|
setAlertRolCheckBox(true);
|
|
}, 100);
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="px-5 mt-20">
|
|
{/* <p className="mb-0 text-textMain-100 mt-1 text-right text-sm">
|
|
{" "}
|
|
برای ورود یا ثبت نام باید شماره تلفن همراه خود را وارد کنید
|
|
</p> */}
|
|
|
|
<div className="mt-3">
|
|
<Input
|
|
lable={t("loginInput")}
|
|
theme={1}
|
|
id="phoneNumber-id"
|
|
name="phoneNumber"
|
|
type={"number"}
|
|
inputEvent={(e) => CTX.setPhoneNumber(e.target.value)}
|
|
mt={5}
|
|
/>
|
|
</div>
|
|
|
|
<Buttonbriz
|
|
title={t("loginButton")}
|
|
color="SECONDARY"
|
|
icon="PHONE"
|
|
buttonEvent={() => handleConfirmPhoneNumber()}
|
|
/>
|
|
|
|
<div
|
|
className={`flex mt-4 tr03 border-[2px] border-transparent py-2 ${
|
|
alertRolCheckBox ? "animate-pulse-1 " : ""
|
|
} ${isRTL ? "rtl" : "ltr"}`}
|
|
>
|
|
<div>
|
|
<input
|
|
type="checkbox"
|
|
checked={roleCheckBox ? true : false}
|
|
defaultValue={roleCheckBox}
|
|
className="w-[35px] h-[10px] !rounded-xl mx-2 custom-checkbox mt-1 "
|
|
name="hasSchengenRelative"
|
|
onClick={(e) => setRoleCheckBox(e.target.checked)}
|
|
/>
|
|
</div>
|
|
<p
|
|
className={`mb-0 text-white mt-1 text-sm ${
|
|
isRTL ? "text-right" : "text-left"
|
|
}`}
|
|
>
|
|
{t("acceptRule")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LoginStep;
|