update src/views/Auth/Desktop/index.js, src/views/Auth/SignUp/index.js and src/views/Auth/index.js

master
Reza_ashrafi 2 years ago
parent 43a4bcb46b
commit 00d9729de8
  1. 71
      src/views/Auth/Desktop/index.js
  2. 21
      src/views/Auth/SignUp/index.js
  3. 15
      src/views/Auth/index.js

@ -1,90 +1,29 @@
import React, { useState, useEffect } from "react"; import { useState, useEffect, useMemo, useCallback } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { publicApi } from "../../../redux/actions"; import { publicApi } from "../../../redux/actions";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import SignUp from "../SignUp"; import SignUp from "../SignUp";
import Button from "../../../components/Button";
//assets //assets
import logoIcon from "../SignUp/assets/logo.svg";
import bgImage from "./bg.svg"; import bgImage from "./bg.svg";
import arrowIcon from "../../../assets/icons/dropdown-blue.svg";
export const Desktop = ({ setHeaderOptions }) => { export const Desktop = ({ setHeaderOptions, level, setLevel}) => {
const [phase, setPhase] = useState("signup");
const navigate = useNavigate(); const navigate = useNavigate();
useEffect(() => { useEffect(() => {
setHeaderOptions({ show: false }); setHeaderOptions({ show: false });
}, []); }, []);
const UserMangement = () => {
return (
<div
className={`flex flex-col items-center justify-center w-full relative h-full transform transition-all duration-700 ${
phase !== "manage" ? "translate-x-full" : ""
}`}
>
<img
src={logoIcon}
alt=""
className="w-20 absolute left-1/2 top-10 transform -translate-x-1/2"
/>
<strong className="text-2xl text-blueC0 self-start tracking-tighter">
{window.t("ورود یا ثبت نام")}
</strong>
<p className="text-tiny self-start text-gray-500 mt-6 leading-6">
{window.t(" کاربر گرامی لطفا یکی از دوگزینه زیر را انتخاب نمائید.")}
<br />
{window.t("درصورتی که عضو نیستید روی دکمه ثبت نام بزنید")}
</p>
<div className="mt-16 flex flex-col gap-4 w-full">
<Button
title={window.t("ورود یا ثبت نام")}
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "0px" }}
width="100%"
color="text-white"
onClick={() => setPhase("signup")}
/>
{/* <Button
title="ورود"
backgroundColor="bg-transparent border border-solid border-blueC0"
border={{ color: "", width: 1 }}
width="100%"
color="text-blueC0"
onClick={() => setPhase("login")}
/> */}
</div>
</div>
);
};
const phases = {
manage: <UserMangement />,
signup: <SignUp />,
login: <SignUp />,
};
return ( return (
<div className="h-screen w-full flex justify-center items-center"> <div className="h-screen w-full flex justify-center items-center">
<div className="w-4/5 h-4/5 rounded-xl flex overflow-hidden border border-solid border-gray-200"> <div className="w-4/5 h-4/5 rounded-xl flex overflow-hidden border border-solid border-gray-200">
<div className="w-2/5 h-full flex justify-center items-center"> <div className="w-2/5 h-full flex justify-center items-center">
<div <div
className="w-4/5 flex justify-center items-center relative" className="w-4/5 flex justify-center items-center"
style={{ height: "90%" }} style={{ height: "90%" }}
> >
<button
className="absolute left-0 top-0 p-3 bg-grayF4 rounded-xl z-20" <SignUp setLevel={setLevel} level={level} />
onClick={() =>
setPhase(() =>
phase === "manage" ? navigate("/blogs") : "manage"
)
}
>
<img src={arrowIcon} className="transform rotate-90" alt="" />
</button>
{phases[phase]}
</div> </div>
</div> </div>
<div className="w-3/5 h-full bg-grayF9 flex justify-center items-center"> <div className="w-3/5 h-full bg-grayF9 flex justify-center items-center">

@ -11,6 +11,8 @@ import { user, publicApi } from "../../../redux/actions";
import _ from "lodash"; import _ from "lodash";
//assets //assets
import logoIcon from "./assets/logo.svg"; import logoIcon from "./assets/logo.svg";
import arrowIcon from "../../../assets/icons/dropdown-blue.svg";
function SignUp({ function SignUp({
sendOtp, sendOtp,
@ -20,8 +22,9 @@ function SignUp({
headerOptions, headerOptions,
setHeaderOptions, setHeaderOptions,
loading, loading,
level,
setLevel,
}) { }) {
const [level, setLevel] = useState("phonenumber");
const [signUpFields, setSignUpFiels] = useState({}); const [signUpFields, setSignUpFiels] = useState({});
const [error, setError] = useState(""); const [error, setError] = useState("");
const [resend, setResend] = useState(false); const [resend, setResend] = useState(false);
@ -142,6 +145,14 @@ function SignUp({
className="w-screen overflow-x-hidden flex flex-row transform -translate-y-10 relative" className="w-screen overflow-x-hidden flex flex-row transform -translate-y-10 relative"
style={{ height: "calc(100vh - 160px)" }} style={{ height: "calc(100vh - 160px)" }}
> >
<button
className="absolute left-4 top-12 lg:top-16 p-3 bg-grayF4 rounded-xl z-20"
onClick={() =>
setLevel(level === "phonenumber" ? navigate("/") : "phonenumber")
}
>
<img src={arrowIcon} className="transform rotate-90" alt="" />
</button>
<div <div
className={`flex flex-col items-center justify-center h-full w-full p-4 transition transform duration-300 absolute top-0 left-0 ${ className={`flex flex-col items-center justify-center h-full w-full p-4 transition transform duration-300 absolute top-0 left-0 ${
level === "phonenumber" ? "translate-x-0" : "-translate-x-full" level === "phonenumber" ? "translate-x-0" : "-translate-x-full"
@ -217,7 +228,7 @@ function SignUp({
(e.target.value = onInput.numberOnly(e.target.value)) (e.target.value = onInput.numberOnly(e.target.value))
) )
} }
maxlength="1" maxLength="1"
ref={otp1} ref={otp1}
/> />
<input <input
@ -231,7 +242,7 @@ function SignUp({
(e.target.value = onInput.numberOnly(e.target.value)) (e.target.value = onInput.numberOnly(e.target.value))
) )
} }
maxlength="1" maxLength="1"
ref={otp2} ref={otp2}
/> />
<input <input
@ -245,7 +256,7 @@ function SignUp({
(e.target.value = onInput.numberOnly(e.target.value)) (e.target.value = onInput.numberOnly(e.target.value))
) )
} }
maxlength="1" maxLength="1"
ref={otp3} ref={otp3}
/> />
<input <input
@ -261,7 +272,7 @@ function SignUp({
)) ))
) )
} }
maxlength="1" maxLength="1"
ref={otp4} ref={otp4}
/> />
</div> </div>

@ -6,20 +6,29 @@ import { connect } from "react-redux";
function Auth(props) { function Auth(props) {
const [page, setPage] = useState(props.page); const [page, setPage] = useState(props.page);
const [level, setLevel] = useState("phonenumber");
useEffect(() => { useEffect(() => {
setPage(() => props.page); setPage(() => props.page);
}, [props.page]); }, [props.page]);
return props.isMobile ? ( return props.isMobile ? (
<> <>
{page === "signup" && ( {page === "signup" && (
<SignUp theme={props.theme} headerOptions={props.headerOptions} /> <SignUp
theme={props.theme}
headerOptions={props.headerOptions}
level={level}
setLevel={setLevel}
/>
)} )}
{page === "profile" && <Profile theme={props.theme} />} {page === "profile" && <Profile theme={props.theme} />}
</> </>
) : <Desktop /> ) : (
<Desktop level={level} setLevel={setLevel} />
);
} }
export default connect((state) => ({ export default connect((state) => ({
theme: state.publicApi.theme, theme: state.publicApi.theme,
isMobile: state.publicApi.isMobile isMobile: state.publicApi.isMobile,
}))(Auth); }))(Auth);

Loading…
Cancel
Save