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 { publicApi } from "../../../redux/actions";
import { useNavigate } from "react-router-dom";
import SignUp from "../SignUp";
import Button from "../../../components/Button";
//assets
import logoIcon from "../SignUp/assets/logo.svg";
import bgImage from "./bg.svg";
import arrowIcon from "../../../assets/icons/dropdown-blue.svg";
export const Desktop = ({ setHeaderOptions }) => {
const [phase, setPhase] = useState("signup");
export const Desktop = ({ setHeaderOptions, level, setLevel}) => {
const navigate = useNavigate();
useEffect(() => {
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 (
<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-2/5 h-full flex justify-center items-center">
<div
className="w-4/5 flex justify-center items-center relative"
className="w-4/5 flex justify-center items-center"
style={{ height: "90%" }}
>
<button
className="absolute left-0 top-0 p-3 bg-grayF4 rounded-xl z-20"
onClick={() =>
setPhase(() =>
phase === "manage" ? navigate("/blogs") : "manage"
)
}
>
<img src={arrowIcon} className="transform rotate-90" alt="" />
</button>
{phases[phase]}
<SignUp setLevel={setLevel} level={level} />
</div>
</div>
<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";
//assets
import logoIcon from "./assets/logo.svg";
import arrowIcon from "../../../assets/icons/dropdown-blue.svg";
function SignUp({
sendOtp,
@ -20,8 +22,9 @@ function SignUp({
headerOptions,
setHeaderOptions,
loading,
level,
setLevel,
}) {
const [level, setLevel] = useState("phonenumber");
const [signUpFields, setSignUpFiels] = useState({});
const [error, setError] = useState("");
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"
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
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"
@ -217,7 +228,7 @@ function SignUp({
(e.target.value = onInput.numberOnly(e.target.value))
)
}
maxlength="1"
maxLength="1"
ref={otp1}
/>
<input
@ -231,7 +242,7 @@ function SignUp({
(e.target.value = onInput.numberOnly(e.target.value))
)
}
maxlength="1"
maxLength="1"
ref={otp2}
/>
<input
@ -245,7 +256,7 @@ function SignUp({
(e.target.value = onInput.numberOnly(e.target.value))
)
}
maxlength="1"
maxLength="1"
ref={otp3}
/>
<input
@ -261,7 +272,7 @@ function SignUp({
))
)
}
maxlength="1"
maxLength="1"
ref={otp4}
/>
</div>

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

Loading…
Cancel
Save