reza added Auth

master
RezaAshrafi77 3 years ago
parent edf81c7074
commit 9d3223090f
  1. 10
      src/router.tsx
  2. 9
      src/views/Auth/Login/index.tsx
  3. 9
      src/views/Auth/Profile/index.tsx
  4. 89
      src/views/Auth/SignUp/index.scss
  5. 70
      src/views/Auth/SignUp/index.tsx
  6. 15
      src/views/Auth/index.tsx

@ -6,6 +6,7 @@ import {
Redirect,
} from "react-router-dom";
import Auth from './views/Auth/index';
import Home from "./views/Home/index";
@ -16,6 +17,15 @@ function router(){
<Route exact path={'/'}>
<Home />
</Route>
<Route exact path={'/sign-up'}>
<Auth page="signup" />
</Route>
<Route exact path={'/login'}>
<Auth page="login" />
</Route>
<Route exact path={'/profile'}>
<Auth page="profile" />
</Route>
</Switch>
</Router>
);

@ -0,0 +1,9 @@
import React from 'react'
export default function Login() {
return (
<div>
</div>
)
}

@ -0,0 +1,9 @@
import React from 'react'
export default function Profile() {
return (
<div>
</div>
)
}

@ -0,0 +1,89 @@
.signup {
width: 100%;
height: 100vh;
position: relative;
font-family: numeralLight;
img {
transform: rotate(-90deg);
}
background: linear-gradient(
135deg,
hsla(0, 0%, 31%, 1) 0%,
hsla(0, 0%, 0%, 1) 100%
);
background: -moz-linear-gradient(
135deg,
hsla(0, 0%, 31%, 1) 0%,
hsla(0, 0%, 0%, 1) 100%
);
background: -webkit-linear-gradient(
135deg,
hsla(0, 0%, 31%, 1) 0%,
hsla(0, 0%, 0%, 1) 100%
);
.footer {
position: fixed;
bottom: 0px;
left: 0px;
}
}
@media screen and (min-width: 1441px) {
.signup {
section {
width: 410px;
b {
color: white;
font-size: 20px;
margin-bottom: 30px;
font-weight: 500;
p{
font-size: 16px;
}
}
input {
text-align: center;
background-color: #2a2a2a;
border: 1px solid #a2a2a2;
border-radius: 8px;
font-size: 23px;
padding: 8px 0px;
color: white;
direction: ltr;
&:focus {
border: 1px solid #84de56;
&::placeholder {
color: #84de56;
opacity: 0.3;
}
}
}
button {
margin-top: 25px;
background-color: #84de56;
color: white;
font-size: 20px;
padding: 10px 0px;
border: 0px;
border-radius: 10px;
}
}
&__info {
width: 350px;
margin: 20px auto 0px;
text-align: center;
color: white;
font-size: 13px;
a {
color: #84de56;
}
}
&__back {
margin-bottom: 60px;
a {
color: white;
font-size: 13px;
}
}
}
}

@ -0,0 +1,70 @@
import React, { useState } from "react";
import Navbar from "../../../components/Navbar/index";
import Footer from "../../../views/Home/Footer/index";
import { Link } from "react-router-dom";
import arrow from "../../../assets/icons/dropdown.png";
import "./index.scss";
interface SignUpFields {
phonenumber?: String;
otp?: String;
}
export default function SignUp() {
const [level, setLevel] = useState("otp");
const [signUpFiels, setSignUpFiels] = useState<SignUpFields | undefined>(
undefined
);
return (
<div className="signup d-flex flex-column align-items-center justify-content-center">
<Navbar />
{level === "phonenumber" && (
<section className="d-flex flex-column">
<div className="signup__back d-flex justify-content-end">
<Link to="/sign-up" className="d-flex align-items-center">
بازگشت به صفحه قبل
<img src={arrow} />
</Link>
</div>
<b>
ثبت نام
<br />
لطفا شماره موبایل خود را وارد کنید.
</b>
<input type="text" inputMode="numeric" placeholder="09123456789" />
<button type="submit">ادامه</button>
<p className="signup__info">
با ثبت نام در سرویس ویدئویی دانوین قوانین
<Link to="/"> شرایط استفاده و حریم خصوصی </Link>
استفاده از سرویس های ما را میپذیرید
</p>
</section>
)}
{level === "otp" && (
<section className="d-flex flex-column">
<div className="signup__back d-flex justify-content-end">
<Link to="/sign-up" className="d-flex align-items-center">
بازگشت به صفحه قبل
<img src={arrow} />
</Link>
</div>
<b>
تاییدیه شماره موبایل
<br />
<p>
کد ارسال شده به شماره {signUpFiels?.phonenumber} را وارد کنید.
</p>
</b>
<input type="text" inputMode="numeric" />
<button type="submit">ادامه</button>
<p className="signup__info">
</p>
</section>
)}
<Footer />
</div>
);
}

@ -0,0 +1,15 @@
import React from 'react';
import SignUp from './SignUp/index';
import Profile from './Profile/index';
import Login from './Login/index';
export default function Auth(props : any) {
const {page} = props;
return (
<>
{ page === 'signup' && <SignUp /> }
{ page === 'login' && <Login /> }
{ page === 'profile' && <Profile /> }
</>
)
}
Loading…
Cancel
Save