118 lines
3.6 KiB
JavaScript
118 lines
3.6 KiB
JavaScript
import Field from "@/app/component/element/Field";
|
|
import {
|
|
changeNumToDefault,
|
|
formatPhoneNumber,
|
|
validatePhoneNumber,
|
|
} from "@/helper";
|
|
import { request } from "@/services/response";
|
|
import { InputAdornment, Button } from "@mui/material";
|
|
import Link from "next/link";
|
|
import { useState } from "react";
|
|
|
|
function LogInPage({ setIsSendMsg, num, setNum, matchedCity }) {
|
|
const [error, setError] = useState({ valid: true, text: "" });
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const handleChange = (val) => {
|
|
const formatted = formatPhoneNumber(val);
|
|
const checkedNum = validatePhoneNumber(formatted);
|
|
setError(checkedNum);
|
|
const digits = formatted.replace(/\D/g, "");
|
|
setNum(formatted);
|
|
// if (digits.length === 9) {
|
|
// handleReq();
|
|
// }
|
|
};
|
|
const handleReq = () => {
|
|
setLoading(true);
|
|
request
|
|
.sendCode(changeNumToDefault(num))
|
|
.then((response) => {
|
|
setLoading(false);
|
|
if (response) {
|
|
// setNum("");
|
|
setIsSendMsg(true);
|
|
}
|
|
})
|
|
.catch(() => {
|
|
setLoading(false);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="rounded-[16px] mt-[28px] opacity-page sm:mt-[14px] border border-solid sm:border-[#EFEFEF] bg-transparent sm:bg-[#FFF]
|
|
p-0 border-transparent sm:p-[40px] sm:pb-[48px] w-full sm:w-fit sm:min-w-[425px] overflow-hidden"
|
|
>
|
|
<p className="text-[#525252] text-[18px] font-bold">
|
|
ورود یا ثبت نام در {matchedCity?.site_name || "نوبت 724"}
|
|
</p>
|
|
<p className="text-[#616161] text-[14px] mt-[40px] sm:mt-[43px] md:mt-[46px] lg:mt-[48px] font-normal">
|
|
شماره همراه خود را وارد نمایید.
|
|
</p>
|
|
<div className="mt-[16px] sm:mt-[19px] md:mt-[22px] lg:mt-[24px] mb-[19px] sm:mb-[16px] md:mb-[15px] lg:mb-[11px]">
|
|
<Field
|
|
dir="ltr"
|
|
value={num}
|
|
type="string"
|
|
error={!error.valid}
|
|
spaceNull={true}
|
|
inputProps={{
|
|
startAdornment: (
|
|
<InputAdornment
|
|
className="!ml-4"
|
|
position="start"
|
|
sx={{
|
|
".MuiTypography-root": {
|
|
lineHeight: "0 !important",
|
|
},
|
|
".muirtl-1qj5e5k-MuiTypography-root": {
|
|
color: "#000000de !important",
|
|
},
|
|
}}
|
|
>
|
|
09
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
title="شماره همراه"
|
|
updateState={handleChange}
|
|
/>
|
|
<p
|
|
className={`
|
|
text-[#d32f2f] text-[14px] mt-2 min-h-[21px] transition-all duration-1000 ease-in-out
|
|
transform
|
|
${error.valid ? "opacity-0 -translate-y-1" : "opacity-100 translate-y-0"}
|
|
`}
|
|
>
|
|
{error.text}
|
|
</p>
|
|
</div>
|
|
<Button
|
|
fullWidth
|
|
variant="contained"
|
|
loading={loading}
|
|
onClick={() => {
|
|
const checkedNum = validatePhoneNumber(num);
|
|
if (!checkedNum.valid) {
|
|
setError(checkedNum);
|
|
return;
|
|
}
|
|
handleReq();
|
|
}}
|
|
className="!rounded-[8px] !bg-[#5559CE] !py-[7.5px] md:!py-[8.5px] lg:!py-[10px]"
|
|
>
|
|
ورود
|
|
</Button>
|
|
<p className="text-[#525252] text-[14px] font-normal text-center mt-[34px] sm:mt-[36px] md:mt-[38px] lg:mt-[40px]">
|
|
<Link href="/">
|
|
<span className="text-[#F17732] underline">قوانین استفاده</span>
|
|
</Link>{" "}
|
|
از {matchedCity?.site_name || "نوبت 724"} را می پذیرم.
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default LogInPage;
|