signup added

temp
Reza_ashrafi 3 years ago
parent bf42375d40
commit f309ac09a0
  1. 2
      src/components/Button/index.js
  2. 44
      src/components/Input/index.js
  3. 2
      src/components/Timer/index.js
  4. 2
      src/router.js
  5. 18
      src/utils/onInput.js
  6. 204
      src/views/Auth/SignUp/index.js
  7. 199
      src/views/Home/Landscape/index.js

@ -11,7 +11,7 @@ export default function Button({
}) { }) {
return ( return (
<button <button
className={`rounded-md py-3 justify-center text-xs ${backgroundColor} ${color} ${bgOpacity}`} className={`rounded-md py-3 justify-center text-sm ${backgroundColor} ${color} ${bgOpacity}`}
style={{ style={{
border: `${border.width} solid ${border.color}`, border: `${border.width} solid ${border.color}`,
width: width, width: width,

@ -29,11 +29,20 @@ export default function Input(props) {
const [value, setValue] = useState(""); const [value, setValue] = useState("");
const [focusToggle, setFocusToggle] = useState(false); const [focusToggle, setFocusToggle] = useState(false);
const { lang, theme, inputMode, label, status, maxLength, message } = props; const {
lang,
const onChange = (val) => { theme,
setValue(val); inputMode,
}; label,
status,
maxLength,
message,
onChange,
align,
name,
regex,
direction,
} = props;
return ( return (
<div <div
@ -67,7 +76,7 @@ export default function Input(props) {
inputMode={inputMode} inputMode={inputMode}
className={_.join( className={_.join(
[ [
"flex-1 border border-gray-500 rounded-md outline-none py-3 px-4 text-xs", `flex-1 border border-gray-400 rounded-md outline-none py-3 px-4 text-sm ${align}`,
inputStatusHandler( inputStatusHandler(
value, value,
focusToggle, focusToggle,
@ -80,10 +89,12 @@ export default function Input(props) {
], ],
" " " "
)} )}
onChange={(e) => onChange(e.target.value)} style={{ direction: direction }}
value={value} onChange={(e) =>
onChange(name, (e.target.value = regex(e.target.value)))
}
onFocus={() => setFocusToggle(true)} onFocus={() => setFocusToggle(true)}
onBlur={() => !value ? setFocusToggle(false) : setFocusToggle(true)} onBlur={() => (!value ? setFocusToggle(false) : setFocusToggle(true))}
maxLength={maxLength} maxLength={maxLength}
/> />
{!status && value && ( {!status && value && (
@ -162,10 +173,11 @@ export default function Input(props) {
} }
Input.defaultProps = { Input.defaultProps = {
lang : 'fa', lang: "fa",
inputMode : 'numeric', inputMode: "numeric",
label : 'label', label: "label",
status : '', status: "",
maxLength : '', maxLength: "",
message : '', message: "",
} direction: "rtl",
};

@ -75,7 +75,7 @@ export default class Timer extends Component {
render() { render() {
return ( return (
<> <>
<div className="timer"> <div className="timer text-greenBA text-sm inline">
{this.state.time ? this.state.time.m : ''}:{this.state.time ? this.state.time.s : ''} {this.state.time ? this.state.time.m : ''}:{this.state.time ? this.state.time.s : ''}
</div> </div>
</> </>

@ -19,7 +19,7 @@ function Router({ isDark, isLogin }) {
<div <div
className={_.join( className={_.join(
[ [
"min-h-screen min-w-screen rtl overflow-x-hidden pt-20 lg:py-0", "min-h-screen min-w-screen rtl overflow-x-hidden py-20 lg:py-0",
isDark ? "" : "bg-white", isDark ? "" : "bg-white",
], ],
" " " "

@ -36,8 +36,8 @@ class onInput {
newText = newText.replace(/j/g, ""); newText = newText.replace(/j/g, "");
newText = newText.replace(/k/g, ""); newText = newText.replace(/k/g, "");
newText = newText.replace(/l/g, ""); newText = newText.replace(/l/g, "");
newText = newText.replace(/\;/g, ""); newText = newText.replace(/;/g, "");
newText = newText.replace(/\'/g, ""); newText = newText.replace(/'/g, "");
newText = newText.replace(/z/g, ""); newText = newText.replace(/z/g, "");
newText = newText.replace(/x/g, ""); newText = newText.replace(/x/g, "");
newText = newText.replace(/c/g, ""); newText = newText.replace(/c/g, "");
@ -45,8 +45,8 @@ class onInput {
newText = newText.replace(/b/g, ""); newText = newText.replace(/b/g, "");
newText = newText.replace(/n/g, ""); newText = newText.replace(/n/g, "");
newText = newText.replace(/m/g, ""); newText = newText.replace(/m/g, "");
newText = newText.replace(/\,/g, ""); newText = newText.replace(/,/g, "");
newText = newText.replace(/\./g, ""); newText = newText.replace(/./g, "");
newText = newText.replace(/\//g, ""); newText = newText.replace(/\//g, "");
newText = newText.replace(/~/g, " "); newText = newText.replace(/~/g, " ");
newText = newText.replace(/Q/g, ""); newText = newText.replace(/Q/g, "");
@ -111,8 +111,8 @@ class onInput {
newText = newText.replace(/ع/g, ""); newText = newText.replace(/ع/g, "");
newText = newText.replace(/غ/g, ""); newText = newText.replace(/غ/g, "");
newText = newText.replace(/ف/g, ""); newText = newText.replace(/ف/g, "");
newText = newText.replace(/\;/g, ""); newText = newText.replace(/;/g, "");
newText = newText.replace(/\'/g, ""); newText = newText.replace(/'/g, "");
newText = newText.replace(/ق/g, ""); newText = newText.replace(/ق/g, "");
newText = newText.replace(/س/g, ""); newText = newText.replace(/س/g, "");
newText = newText.replace(/ش/g, ""); newText = newText.replace(/ش/g, "");
@ -120,7 +120,7 @@ class onInput {
newText = newText.replace(/ض/g, ""); newText = newText.replace(/ض/g, "");
newText = newText.replace(/ک/g, ""); newText = newText.replace(/ک/g, "");
newText = newText.replace(/گ/g, ""); newText = newText.replace(/گ/g, "");
newText = newText.replace(/\,/g, ""); newText = newText.replace(/,/g, "");
newText = newText.replace(/\./g, ""); newText = newText.replace(/\./g, "");
newText = newText.replace(/\//g, ""); newText = newText.replace(/\//g, "");
newText = newText.replace(/~/g, " "); newText = newText.replace(/~/g, " ");
@ -170,8 +170,8 @@ class onInput {
newText = newText.replace(/ع/g, ""); newText = newText.replace(/ع/g, "");
newText = newText.replace(/غ/g, ""); newText = newText.replace(/غ/g, "");
newText = newText.replace(/ف/g, ""); newText = newText.replace(/ف/g, "");
newText = newText.replace(/\;/g, ""); newText = newText.replace(/;/g, "");
newText = newText.replace(/\'/g, ""); newText = newText.replace(/'/g, "");
newText = newText.replace(/ق/g, ""); newText = newText.replace(/ق/g, "");
newText = newText.replace(/س/g, ""); newText = newText.replace(/س/g, "");
newText = newText.replace(/ش/g, ""); newText = newText.replace(/ش/g, "");

@ -14,16 +14,51 @@ import logoIcon from "./assets/logo.svg";
function SignUp({ sendOtp, sendPhoneNumber, loginFlag, theme }) { function SignUp({ sendOtp, sendPhoneNumber, loginFlag, theme }) {
const [level, setLevel] = useState("phonenumber"); const [level, setLevel] = useState("phonenumber");
const [signUpFields, setSignUpFiels] = useState(null); const [signUpFields, setSignUpFiels] = useState({});
const [error, setError] = useState(""); const [error, setError] = useState("");
const [resend, setResend] = useState(false); const [resend, setResend] = useState(false);
const navigate = useNavigate(); const navigate = useNavigate();
const otp1 = useRef();
const otp2 = useRef();
const otp3 = useRef();
const otp4 = useRef();
const onChange = (name, value) => { const onChange = (name, value) => {
setSignUpFiels({ ...signUpFields, [name]: value }); setSignUpFiels({ ...signUpFields, [name]: value });
switch (name) {
case "otp1":
if (value) {
otp2.current.focus();
}
break;
case "otp2":
if (value) {
otp3.current.focus();
} else {
otp1.current.focus();
}
break;
case "otp3":
if (value) {
otp4.current.focus();
} else {
otp2.current.focus();
}
break;
case "otp4":
if (value) {
checkOtp();
} else {
otp3.current.focus();
}
break;
default:
break;
}
}; };
const checkPhoneNumber = () => { const checkPhoneNumber = (e) => {
if ( if (
signUpFields?.cellphone?.slice(0, 2) === "09" && signUpFields?.cellphone?.slice(0, 2) === "09" &&
signUpFields?.cellphone.length === 11 signUpFields?.cellphone.length === 11
@ -38,10 +73,14 @@ function SignUp({ sendOtp, sendPhoneNumber, loginFlag, theme }) {
}; };
const checkOtp = () => { const checkOtp = () => {
if (signUpFields?.otp?.length === 4) { if (signUpFields?.otp1 && signUpFields?.otp2 && signUpFields?.otp3 && signUpFields?.otp4) {
sendOtp({ sendOtp({
cellphone: signUpFields?.cellphone, cellphone: signUpFields?.cellphone,
otp: signUpFields?.otp, otp:
signUpFields?.otp1 +
signUpFields?.otp2 +
signUpFields?.otp3 +
signUpFields?.otp4,
userToken: "2", userToken: "2",
applicationToken: "22", applicationToken: "22",
}); });
@ -51,7 +90,6 @@ function SignUp({ sendOtp, sendPhoneNumber, loginFlag, theme }) {
} }
}; };
const otpInput = useRef();
const numberInput = useRef(); const numberInput = useRef();
useEffect(() => { useEffect(() => {
@ -79,37 +117,155 @@ function SignUp({ sendOtp, sendPhoneNumber, loginFlag, theme }) {
useEffect(() => { useEffect(() => {
if (loginFlag) { if (loginFlag) {
navigate("/"); // navigate("/");
} }
}, [loginFlag]); }, [loginFlag]);
const light = theme === "light"; const light = theme === "light";
return ( return (
<div <div
className="flex flex-col items-center justify-center w-screen p-4 transform -translate-y-20" className="w-screen overflow-x-hidden flex flex-row transform -translate-y-10 relative"
style={{ height: "calc(100vh - 80px)" }} style={{ height: "calc(100vh - 160px)" }}
> >
<img src={logoIcon} alt="" className="" /> <div
<strong className="w-full leading-6 dark:text-white mt-10"> className={`flex flex-col items-center justify-center h-full w-full p-4 transition transform duration-300 absolute top-0 left-0 ${
سلام <br /> خوش برگشتی! level === "phonenumber" ? "translate-x-0" : "-translate-x-full"
</strong> }`}
<form className="w-full flex flex-col mt-10"> >
<Input label={"شماره موبایل"} /> <img src={logoIcon} alt="" className="" />
<br/> <strong className="w-full leading-6 dark:text-white mt-10">
<Button سلام <br /> خوش برگشتی!
title="ادامه فرایند خرید" </strong>
backgroundColor="bg-blueC0" <div className="w-full flex flex-col mt-10">
border={{ color: "#196EC055", width: "1px" }} <Input
width="100%" label={"شماره موبایل"}
color="text-white" name="cellphone"
/> regex={onInput.phonenumber}
</form> onChange={(name, value) => onChange(name, value)}
value={signUpFields?.cellphone}
align="text-left"
maxLength="11"
direction="ltr"
/>
<span className="text-red-500 text-xs">{error}</span>
<br />
<Button
title="ادامه فرایند خرید"
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "1px" }}
width="100%"
color="text-white"
onClick={(e) => checkPhoneNumber(e)}
/>
</div>
</div>
<div
className={`flex flex-col items-center justify-center w-full h-full p-4 transition transform duration-300 absolute top-0 left-0 ${
level === "otp" ? "translate-x-0" : "translate-x-full"
}`}
>
<img src={logoIcon} alt="" className="" />
{!resend && (
<div className="w-full leading-6 dark:text-white mt-10 text-xs text-gray1">
یک کد چهار رقمی تا &nbsp;{" "}
<Timer seconds={120} refresh={setResend} /> &nbsp; دیگر برای شماره
&nbsp;{" "}
<span className="text-greenBA text-sm">
{signUpFields?.cellphone}
</span>{" "}
&nbsp; ارسال خواهد شد.
</div>
)}
<div className="w-full flex flex-col mt-5">
<div className="w-full flex flex-row-reverse justify-center">
<input
inputMode="numeric"
style={{ direction: "ltr" }}
name="otp1"
className="bg-grayF9 rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1"
onChange={(e) =>
onChange(
e.target.name,
(e.target.value = onInput.numberOnly(e.target.value))
)
}
maxlength="1"
ref={otp1}
/>
<input
inputMode="numeric"
style={{ direction: "ltr" }}
name="otp2"
className="bg-grayF9 rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1"
onChange={(e) =>
onChange(
e.target.name,
(e.target.value = onInput.numberOnly(e.target.value))
)
}
maxlength="1"
ref={otp2}
/>
<input
inputMode="numeric"
style={{ direction: "ltr" }}
name="otp3"
className="bg-grayF9 rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1"
onChange={(e) =>
onChange(
e.target.name,
(e.target.value = onInput.numberOnly(e.target.value))
)
}
maxlength="1"
ref={otp3}
/>
<input
inputMode="numeric"
style={{ direction: "ltr" }}
name="otp4"
className="bg-grayF9 rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1"
onChange={(e) =>
onChange(
e.target.name,
(e.target.value = onInput.numberOnly(e.target.value))
)
}
maxlength="1"
ref={otp4}
/>
</div>
<br />
<Button
title="ادامه فرایند خرید"
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "1px" }}
width="100%"
color="text-white"
onClick={(e) =>
level === "phonenumber" ? checkPhoneNumber(e) : checkOtp(e)
}
/>
<div className="mt-10 flex flex-row text-center w-full justify-center">
<div className="text-xs text-gray1">
شماره خود را اشتباه وارد کردید؟{" "}
<button
className="bg-transparent border-none text-greenBA font-medium"
onClick={() => setLevel("phonenumber")}
>
اصلاح شماره تلفن
</button>
</div>
</div>
</div>
</div>
</div> </div>
); );
} }
export default connect( export default connect(
(state) => ({ (state) => ({
loginFlag: state.user.setLogin, loginFlag: state.user.status,
}), }),
{ {
sendOtp: user.otp_login, sendOtp: user.otp_login,

@ -28,108 +28,109 @@ function Home({
// initialState // initialState
useEffect(() => { useEffect(() => {
window.addEventListener("scroll", () => { window.addEventListener("scroll", () => {
const scrollY = window.scrollY; if (window.innerWidth > 1024) {
localStorage.setItem("prevScroll", scrollY); const scrollY = window.scrollY;
if ( localStorage.setItem("prevScroll", scrollY);
!JSON.parse(localStorage.getItem("joiRect")) && if (
window.scrollY > 1000 && !JSON.parse(localStorage.getItem("joiRect")) &&
window.scrollY < 2000 window.scrollY > 1000 &&
) { window.scrollY < 2000
localStorage.setItem( ) {
"joiRect", localStorage.setItem(
JSON.stringify( "joiRect",
document.getElementById("video-joi").getBoundingClientRect() JSON.stringify(
) document.getElementById("video-joi").getBoundingClientRect()
); )
} );
// Dotes }
if (scrollY < 1.5 * height) { // Dotes
if (scrollY > height) { if (scrollY < 1.5 * height) {
floatMouseToggle(false); if (scrollY > height) {
} else { floatMouseToggle(false);
floatMouseToggle(true); } else {
floatMouseToggle(true);
}
} }
}
// Page_1 // Page_1
if (scrollY >= 0 && scrollY <= height) { if (scrollY >= 0 && scrollY <= height) {
handlePage1TopPosition(); handlePage1TopPosition();
} }
// Page_2 // Page_2
if (scrollY >= 0 && scrollY <= height) { if (scrollY >= 0 && scrollY <= height) {
handlePage2TopPosition(); handlePage2TopPosition();
} }
if (scrollY >= 0 && scrollY <= height) { if (scrollY >= 0 && scrollY <= height) {
handlePage2RotateX(window.scrollY); handlePage2RotateX(window.scrollY);
} }
if (scrollY >= height && scrollY <= 2 * height) { if (scrollY >= height && scrollY <= 2 * height) {
handlePage2BoxPosition({ handlePage2BoxPosition({
scrollY, scrollY,
translateX: { translateX: {
pos1: -5, pos1: -5,
pos2: 32, pos2: 32,
}, },
translateY: { translateY: {
pos1: -5, pos1: -5,
pos2: 10, pos2: 10,
}, },
rotate: { rotate: {
pos1: 5, pos1: 5,
pos2: 0, pos2: 0,
}, },
start: height, start: height,
end: 2 * height, end: 2 * height,
}); });
} }
if (scrollY > 2.5 * height && scrollY <= 3 * height) { if (scrollY > 2.5 * height && scrollY <= 3 * height) {
handlePage2BoxPosition({ handlePage2BoxPosition({
scrollY, scrollY,
translateX: { translateX: {
pos1: 32, pos1: 32,
pos2: 32, pos2: 32,
}, },
translateY: { translateY: {
pos1: 10, pos1: 10,
pos2: -30, pos2: -30,
}, },
rotate: { rotate: {
pos1: 0, pos1: 0,
pos2: 0, pos2: 0,
}, },
start: 2.5 * height, start: 2.5 * height,
end: 3 * height, end: 3 * height,
}); });
} }
if (scrollY > 2 * height && scrollY <= 2.5 * height) { if (scrollY > 2 * height && scrollY <= 2.5 * height) {
handlePage2MobilePosition(); handlePage2MobilePosition();
} }
if (scrollY > 2.8 * height && scrollY <= 3 * height) { if (scrollY > 2.8 * height && scrollY <= 3 * height) {
handlePage2VideoTopPosition(); handlePage2VideoTopPosition();
} }
if (scrollY > 3.5 * height && scrollY <= 4 * height) { if (scrollY > 3.5 * height && scrollY <= 4 * height) {
handlePage2VideoPosition(); handlePage2VideoPosition();
} }
if (scrollY > 2 * height && scrollY < 3.5 * height) { if (scrollY > 2 * height && scrollY < 3.5 * height) {
handlePage2MobileUnit(); handlePage2MobileUnit();
} }
// Page_3 // Page_3
if (scrollY > 3.5 * height && scrollY < 4 * height) { if (scrollY > 3.5 * height && scrollY < 4 * height) {
handleVideoTubeTopPosition(); handleVideoTubeTopPosition();
} }
// Test // Test
if (scrollY >= 4.5 * height && scrollY <= 5 * height) { if (scrollY >= 4.5 * height && scrollY <= 5 * height) {
handleTestTranslateY(); handleTestTranslateY();
} }
if(scrollY > 5 * height && scrollY <= 6 * height){ if (scrollY > 5 * height && scrollY <= 6 * height) {
handlePage3TopPosition(); handlePage3TopPosition();
} }
if(scrollY >= 6.3 * height && scrollY <= 7 * height){ if (scrollY >= 6.3 * height && scrollY <= 7 * height) {
handlePage3TestTranslateY(); handlePage3TestTranslateY();
} }
if(scrollY >= 7.3 * height && scrollY <= 8.3 * height){ if (scrollY >= 7.3 * height && scrollY <= 8.3 * height) {
handlePage4TopPosition(); handlePage4TopPosition();
}
} }
}); });
}, []); }, []);

Loading…
Cancel
Save