Danovin
/
application_17
5
0
Fork 0
Code Issues 3 Pull Requests Projects Releases Wiki Activity

signup added

Browse Source
temp
Reza_ashrafi 3 years ago
parent bf42375d40
commit f309ac09a0
7 changed files with 320 additions and 151 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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

2
src/components/Button/index.js
Unescape View File

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

44
src/components/Input/index.js
Unescape View File

@ -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",
};

2
src/components/Timer/index.js
Unescape View File

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

2
src/router.js
Unescape View File

@ -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",
], ],
" " " "

18
src/utils/onInput.js
Unescape View File

@ -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, "");

204
src/views/Auth/SignUp/index.js
Unescape View File

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

199
src/views/Home/Landscape/index.js
Unescape View File

@ -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();
}
} }
}); });
}, []); }, []);

Write Preview
Loading…
Cancel
Save