handle register and poster and fix bugs
This commit is contained in:
Ehsan
@@ -1,13 +1,13 @@
|
||||
import Field from "@/app/component/element/Field";
|
||||
import { formatPhoneNumber, validatePhoneNumber } from "@/helper";
|
||||
import { changeNumToDefault, formatPhoneNumber, validatePhoneNumber } from "@/helper";
|
||||
import { request } from "@/services/response";
|
||||
import { Button, InputAdornment } from "@mui/material";
|
||||
import { InputAdornment, Button } from "@mui/material";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
|
||||
function LogInPage({ setIsSendMsg, setStep, matchedCity }) {
|
||||
const [num, setNum] = useState("");
|
||||
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);
|
||||
@@ -15,13 +15,13 @@ function LogInPage({ setIsSendMsg, setStep, matchedCity }) {
|
||||
setError(checkedNum);
|
||||
setNum(formatted);
|
||||
};
|
||||
|
||||
const handleReq = () => {
|
||||
setLoading(true);
|
||||
request
|
||||
.auth("/")
|
||||
.then(() => {
|
||||
setIsSendMsg && setIsSendMsg(true);
|
||||
setStep && setStep((prev) => prev + 1);
|
||||
.sendCode(changeNumToDefault(num))
|
||||
.then((response) => {
|
||||
setLoading(false);
|
||||
if (response) setIsSendMsg(true);
|
||||
})
|
||||
.catch(() => {
|
||||
setLoading(false);
|
||||
@@ -80,6 +80,7 @@ function LogInPage({ setIsSendMsg, setStep, matchedCity }) {
|
||||
<Button
|
||||
fullWidth
|
||||
variant="contained"
|
||||
loading={loading}
|
||||
onClick={() => {
|
||||
const checkedNum = validatePhoneNumber(num);
|
||||
if (!checkedNum.valid) {
|
||||
|
||||
@@ -6,13 +6,43 @@ import OTPForm from "./element/OTPForm";
|
||||
import EditLogin from "../icons/EditLogin";
|
||||
import RetryLogin from "../icons/RetryLogin";
|
||||
import ArrowRightS from "../icons/ArrowRightS";
|
||||
import { request } from "@/services/response";
|
||||
import { changeNumToDefault } from "@/helper";
|
||||
|
||||
const time_resend_code = 120;
|
||||
|
||||
function SetCodePage({ setIsSendMsg, link, setStep }) {
|
||||
function SetCodePage({ setIsSendMsg, link, num, setStep }) {
|
||||
const retryIcon = useRef();
|
||||
|
||||
const [timer, setTimer] = useState(0);
|
||||
const [code, setCode] = useState(["", "", "", ""]);
|
||||
const [isError, setIsError] = useState(false);
|
||||
const inputRefs = Array.from({ length: 5 }, () => useRef());
|
||||
|
||||
const handleChange = (index, val) => {
|
||||
const newCode = [...code];
|
||||
|
||||
if (val === "backspace") {
|
||||
newCode[index] = "";
|
||||
setCode(newCode);
|
||||
if (index > 0) {
|
||||
inputRefs[index - 1].current?.focus();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
newCode[index] = val;
|
||||
|
||||
if (newCode.join("").length === 4 && isError) {
|
||||
setIsError(false);
|
||||
}
|
||||
|
||||
setCode(newCode);
|
||||
|
||||
if (val && index < inputRefs.length - 1) {
|
||||
inputRefs[index + 1].current?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
const handleTimer = () => {
|
||||
setTimer("loading");
|
||||
@@ -28,8 +58,21 @@ function SetCodePage({ setIsSendMsg, link, setStep }) {
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const handleOTP = (e) => {
|
||||
e.target.nextElementSibling && e.target.nextElementSibling.focus();
|
||||
const handleReq = () => {
|
||||
request
|
||||
.getToken(
|
||||
"mobile",
|
||||
process.env.NEXT_PUBLIC_CLIENT_ID,
|
||||
process.env.NEXT_PUBLIC_CLIENT_SECRET,
|
||||
changeNumToDefault(num),
|
||||
code.join("")
|
||||
)
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -53,20 +96,32 @@ function SetCodePage({ setIsSendMsg, link, setStep }) {
|
||||
کد تایید برای شماره 09013261200 ارسال شد.
|
||||
</p>
|
||||
<div className="mt-[26px] sm:mt-[28px] md:mt-[30px] lg:mt-[32px] mb-[56px] sm:mb-[47px] md:mb-[38px] lg:mb-[30px]">
|
||||
<div
|
||||
className="w-full mb-[27px] flex items-center justify-center gap-6 sm:gap-6"
|
||||
dir="ltr"
|
||||
>
|
||||
<OTPForm handleOTP={handleOTP} />
|
||||
<OTPForm handleOTP={handleOTP} />
|
||||
<OTPForm handleOTP={handleOTP} />
|
||||
<OTPForm handleOTP={handleOTP} />
|
||||
<OTPForm handleOTP={handleOTP} />
|
||||
<div className="mb-[27px]" dir="ltr">
|
||||
<div
|
||||
className="w-full flex items-center justify-center gap-6 sm:gap-6"
|
||||
dir="ltr"
|
||||
>
|
||||
{code.map((digit, index) => (
|
||||
<OTPForm
|
||||
key={index}
|
||||
index={index}
|
||||
value={digit}
|
||||
isError={isError}
|
||||
onChange={handleChange}
|
||||
inputRef={inputRefs[index]}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<p
|
||||
className={`
|
||||
text-[#d32f2f] text-[14px] mt-2 min-h-[21px] transition-all duration-1000 ease-in-out
|
||||
transform text-right
|
||||
${!isError ? "opacity-0 -translate-y-1" : "opacity-100 translate-y-0"}
|
||||
`}
|
||||
>
|
||||
!کد را وارد کنید
|
||||
</p>
|
||||
</div>
|
||||
{/* <Button className="flex items-center justify-start gap-1">
|
||||
<p className="text-[#F17732] text-[14px] font-medium">دریافت مجدد کد تایید</p>
|
||||
<ArrowLeftOrangeS />
|
||||
</Button> */}
|
||||
<div className="flex w-full items-center justify-between flex-wrap gap-y-5">
|
||||
<Button
|
||||
className="flex !p-1 items-center justify-start gap-1 cursor-pointer"
|
||||
@@ -83,16 +138,13 @@ function SetCodePage({ setIsSendMsg, link, setStep }) {
|
||||
|
||||
<Button
|
||||
className="flex !p-1 items-center justify-start gap-1 hover-rotate-90 cursor-pointer"
|
||||
// sx={{ '&.MuiButton-root:hover': { bgcolor: 'transparent' } }}
|
||||
disabled={typeof timer === "number" && timer !== 0}
|
||||
onClick={() => {
|
||||
if (!timer && timer !== "loading") {
|
||||
handleTimer();
|
||||
|
||||
// Rotate Retry Icon
|
||||
retryIcon.current.classList.add("retry-icon");
|
||||
|
||||
// Remove Style Rotate Icon
|
||||
setTimeout(() => {
|
||||
retryIcon.current &&
|
||||
retryIcon.current.classList.remove("retry-icon");
|
||||
@@ -117,19 +169,22 @@ function SetCodePage({ setIsSendMsg, link, setStep }) {
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Link href={link || ""} onClick={(e) => !link && e.preventDefault()}>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="contained"
|
||||
onClick={() => {
|
||||
setIsSendMsg && setIsSendMsg(true);
|
||||
setStep && setStep((prev) => prev + 1);
|
||||
}}
|
||||
className="!rounded-[8px] !bg-[#5559CE]"
|
||||
>
|
||||
تایید
|
||||
</Button>
|
||||
</Link>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="contained"
|
||||
onClick={() => {
|
||||
setIsSendMsg && setIsSendMsg(true);
|
||||
setStep && setStep((prev) => prev + 1);
|
||||
if (code.join("").length !== 4) {
|
||||
setIsError(true);
|
||||
} else {
|
||||
handleReq();
|
||||
}
|
||||
}}
|
||||
className="!rounded-[8px] !bg-[#5559CE]"
|
||||
>
|
||||
تایید
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,28 +1,26 @@
|
||||
import { useState } from "react";
|
||||
|
||||
function OTPForm({ handleOTP }) {
|
||||
const [code, setCode] = useState("");
|
||||
|
||||
function OTPForm({ index, value, onChange, inputRef, isError }) {
|
||||
return (
|
||||
<input
|
||||
value={code}
|
||||
ref={inputRef}
|
||||
value={value}
|
||||
maxLength={1}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
|
||||
if (/^\d+$/.test(value) && value.length < 2) {
|
||||
setCode(value);
|
||||
handleOTP(e);
|
||||
} else {
|
||||
setCode("");
|
||||
e.target.value = "";
|
||||
const val = e.target.value;
|
||||
if (/^\d?$/.test(val)) {
|
||||
onChange(index, val);
|
||||
}
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Backspace" && !e.target.value) {
|
||||
onChange(index, "backspace");
|
||||
}
|
||||
}}
|
||||
className={`border otp-field border-solid border-[#ADB5BD] rounded-[6px] text-center transition-all duration-500 ease-out
|
||||
outline-none focus:!border-[1px] focus:!border-solid focus:!border-[#5559CE]
|
||||
focus:!outline-[1px] focus:!outline-solid focus:!outline-[#5559CE] bg-transparent text-[#525252]
|
||||
w-[43px] h-[43px] sm:w-[45px] sm:h-[45px] md:w-[47px] md:h-[47px] lg:w-[48px] lg:h-[48px]
|
||||
${code && "!border-[1px] !border-solid !border-[#5559CE]"}
|
||||
`}
|
||||
outline-none focus:!border-[1px] focus:!border-solid focus:!border-[#5559CE]
|
||||
focus:!outline-[1px] focus:!outline-solid focus:!outline-[#5559CE] bg-transparent text-[#525252]
|
||||
w-[43px] h-[43px] sm:w-[45px] sm:h-[45px] md:w-[47px] md:h-[47px] lg:w-[48px] lg:h-[48px]
|
||||
${value && "!border-[1px] !border-solid !border-[#5559CE]"}
|
||||
${isError && "!border-[#d32f2f]"}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -7,14 +7,22 @@ import LayoutRegister from "./LayoutRegister";
|
||||
|
||||
function RegisterPage({ matchedCity }) {
|
||||
const [isSendMsg, setIsSendMsg] = useState(false);
|
||||
const [num, setNum] = useState("");
|
||||
|
||||
return (
|
||||
<LayoutRegister matchedCity={matchedCity}>
|
||||
{isSendMsg ? (
|
||||
<SetCodePage setIsSendMsg={setIsSendMsg} setStep={false} link="/" />
|
||||
<SetCodePage
|
||||
num={num}
|
||||
setIsSendMsg={setIsSendMsg}
|
||||
setStep={false}
|
||||
link="/"
|
||||
/>
|
||||
) : (
|
||||
<LogInPage
|
||||
matchedCity={matchedCity}
|
||||
num={num}
|
||||
setNum={setNum}
|
||||
setStep={false}
|
||||
setIsSendMsg={setIsSendMsg}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user