reza added auth component

front
Reza_ashrafi 4 years ago
parent c7872dd9e8
commit de82826d86
  1. 13
      src/Router.js
  2. 3
      src/assets/icons/logo.svg
  3. 36
      src/views/Auth/Auth.js
  4. 9
      src/views/Auth/Auth.scss
  5. 46
      src/views/Auth/Bio/Bio.js
  6. 48
      src/views/Auth/Bio/Bio.scss
  7. 26
      src/views/Auth/Bio/FirstBio/FirstBio.js
  8. 29
      src/views/Auth/Bio/SecondBio/SecondBio.js
  9. 26
      src/views/Auth/Bio/ThirdBio/ThirdBio.js
  10. 109
      src/views/Auth/Login/Code/Code.js
  11. 33
      src/views/Auth/Login/Login.js
  12. 120
      src/views/Auth/Login/Login.scss
  13. 21
      src/views/Auth/Login/Mobile/Mobile.js
  14. 28
      src/views/Auth/Logo/Logo.js
  15. 38
      src/views/Auth/Logo/Logo.scss

@ -5,22 +5,20 @@ import { Provider } from "react-redux";
import Home from "./views/Home/Home"; import Home from "./views/Home/Home";
import ChatRoom from "./views/ChatRoom/ChatRoom"; import ChatRoom from "./views/ChatRoom/ChatRoom";
import Auth from "./views/Auth/Auth";
export default class AppRouter extends Component { export default class AppRouter extends Component {
render() { render() {
let home; let home;
if(1){ if(localStorage.getItem("access_token")){
home = <Route exact path={'/'}> home = <Route exact path={'/'}>
{/* <Navbar /> */}
<Home /> <Home />
</Route> </Route>
}else{ }else{
// home = <Route exact path={'/'}> home = <Route exact path={'/'}>
// <Auth page="login" /> <Auth />
// </Route> </Route>
return null;
} }
return ( return (
<Provider store={store} > <Provider store={store} >
@ -29,7 +27,6 @@ export default class AppRouter extends Component {
{home} {home}
</Switch> </Switch>
<Route exact path={`/chatroom/:id`}> <Route exact path={`/chatroom/:id`}>
{/* <Navbar /> */}
<ChatRoom /> <ChatRoom />
</Route> </Route>
</Router> </Router>

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 18 KiB

@ -0,0 +1,36 @@
import React, { Component } from 'react';
import Logo from './Logo/Logo';
import Bio from './Bio/Bio';
import Login from './Login/Login';
import './Auth.scss';
export default class Auth extends Component {
constructor(props) {
super(props);
this.state = {
page : 'logo',
}
}
setPage = (val) => {
this.setState({
page : val,
})
}
render() {
return(
<div className="auth">
{
this.state.page === 'logo' ? <Logo setPage={this.setPage} /> : null
}
{
this.state.page === 'bio' ? <Bio setPage={this.setPage} /> : null
}
{
this.state.page === 'login' ? <Login /> : null
}
</div>
);
}
}

@ -0,0 +1,9 @@
@media screen and (max-width: 450px){
.auth{
width: 100vw;
height: 100vh;
direction: rtl;
overflow-x: hidden;
position: relative;
}
}

@ -0,0 +1,46 @@
import React, { Component } from 'react';
import FirstBio from './FirstBio/FirstBio';
import SecondBio from './SecondBio/SecondBio';
import ThirdBio from './ThirdBio/ThirdBio';
import './Bio.scss';
export default class Bio extends Component {
constructor(props) {
super(props);
this.state = {
section : 0,
}
}
setSection = (val) => {
this.setState({
section : val,
})
}
render() {
return(
<div className="bio d-flex flex-column">
<div className="bio__box d-flex flex-column justify-content-center align-items-center">
{
this.state.section === 0 ? <FirstBio setSection={this.setSection} /> : null
}
{
this.state.section === 1 ? <SecondBio setSection={this.setSection} /> : null
}
{
this.state.section === 2 ? <ThirdBio setSection={this.setSection} /> : null
}
</div>
{
this.state.section === 2 ?
<button onClick={() => this.props.setPage('login')}>
شروع
</button> :
<button onClick={() => this.props.setPage('login')}>
رد کردن
</button>
}
</div>
);
}
}

@ -0,0 +1,48 @@
@media screen and (max-width: 450px){
.bio{
width: 100%;
height: 100%;
background-color: #efefef;
&__box{
direction : rtl;
width: 100%;
height: 75%;
background: rgb(111,108,255);
background: linear-gradient(180deg, rgba(111,108,255,1) 0%, rgba(105,73,186,1) 52%);
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
box-shadow: 0 0 80px rgba(0,0,0,1);
position: relative;
p{
font-size: 16px;
color: white;
max-width: 200px;
text-align: justify;
font-family: IRANSansNumeralLight;
}
.three-dots{
align-items: center;
justify-content: space-around;
& div{
width : 9px;
height : 9px;
border-radius: 8px;
background-color : #afafaf;
}
}
}
& button{
background: rgb(176, 73, 186);
background: linear-gradient(180deg,rgb(163, 73, 186) 0%, rgb(108, 72, 191) 52%);
min-width: 200px;
margin : 50px auto 0px;
border : none;
padding : 10px 0px;
font-size: 22px;
border-radius: 15px;
color : white;
box-shadow: 0 0 30px rgba(0,0,0,1);
}
}
}

@ -0,0 +1,26 @@
import React, { Component } from 'react';
import NavigateNextIcon from '@material-ui/icons/NavigateNext';
import { Divider } from '@material-ui/core';
export default class FirstBio extends Component {
render() {
return(
<>
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی میباشد.
</p>
<div style={{position: 'absolute', right : -5 }} onClick={() => this.props.setSection(1)}>
<NavigateNextIcon style={{color : "#cfcfcf" , width : 50, height : 50, fontWeight : 900}} />
</div>
<div className="three-dots d-flex" style={{width: 60 , height: 20, position : 'absolute', bottom : 20}}>
<div>
</div>
<div>
</div>
<div style={{backgroundColor : 'white', width : 11, height : 11}}>
</div>
</div>
</>
);
}
}

@ -0,0 +1,29 @@
import React, { Component } from 'react';
import NavigateNextIcon from '@material-ui/icons/NavigateNext';
import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore';
export default class SecondBio extends Component {
render() {
return(
<>
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی میباشد.
</p>
<div style={{position: 'absolute', right : -5 }} onClick={() => this.props.setSection(2)}>
<NavigateNextIcon style={{color : "#cfcfcf" , width : 50, height : 50}} />
</div>
<div style={{position: 'absolute', left : -5 }} onClick={() => this.props.setSection(0)}>
<NavigateBeforeIcon style={{color : "#cfcfcf" , width : 50, height : 50}} />
</div>
<div className="three-dots d-flex" style={{width: 60 , height: 20, position : 'absolute', bottom : 20}}>
<div>
</div>
<div style={{backgroundColor : 'white', width : 11, height : 11}}>
</div>
<div>
</div>
</div>
</>
);
}
}

@ -0,0 +1,26 @@
import React, { Component } from 'react';
import NavigateNextIcon from '@material-ui/icons/NavigateNext';
import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore';
export default class SecondBio extends Component {
render() {
return(
<>
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی میباشد.
</p>
<div style={{position: 'absolute', left : -5 }} onClick={() => this.props.setSection(1)}>
<NavigateBeforeIcon style={{color : "#cfcfcf" , width : 50, height : 50}} />
</div>
<div className="three-dots d-flex" style={{width: 60 , height: 20, position : 'absolute', bottom : 20}}>
<div style={{backgroundColor : 'white', width : 11, height : 11}}>
</div>
<div>
</div>
<div>
</div>
</div>
</>
);
}
}

@ -0,0 +1,109 @@
import React, { Component } from 'react';
export default class Code extends Component {
constructor(props) {
super(props);
this.state = {
auth_code1: '',
auth_code2: '',
auth_code3: '',
auth_code4: '',
flag: false,
}
}
flagSetter = () => {
this.setState({
flag: true,
})
}
changeValue = (name, value) => {
if (value.match("^[0-9]{1}$") !== null) {
this.setState({
[name]: value,
})
} else {
return;
}
}
componentDidMount() {
this.inputRef1.focus();
}
componentDidUpdate() {
if (this.state.auth_code1) {
this.inputRef2.focus();
}
if (this.state.auth_code2) {
this.inputRef3.focus();
}
if (this.state.auth_code3) {
this.inputRef4.focus();
}
}
onKeyDown = (e) => {
if (e.keyCode === 8) {
this.setState({
[e.target.name]: '',
})
}
}
render() {
return(
<>
<div className="login-code__top d-flex flex-column">
<div>میخوام مطمئن شم که خودتی</div>
<p>کد تایید رو برات فرستادم. اینجا واردش کن</p>
</div>
<div className="login-code__bottom d-flex">
<input
name="auth_code1"
type="number"
onChange={(e) => this.changeValue(e.target.name, e.target.value)}
maxLength="1"
ref={(input) => { this.inputRef1 = input }}
value={this.state.auth_code1}
onKeyDown={this.onKeyDown}
autoComplete="false"
/>
<input
name="auth_code2"
type="number"
onChange={(e) => this.changeValue(e.target.name, e.target.value)}
value={this.state.auth_code2}
maxLength="1"
ref={(input) => { this.inputRef2 = input }}
onKeyDown={this.onKeyDown}
autoComplete="false"
/>
<input
name="auth_code3"
type="number"
onChange={(e) => this.changeValue(e.target.name, e.target.value)}
maxLength="1"
ref={(input) => { this.inputRef3 = input }}
value={this.state.auth_code3}
onKeyDown={this.onKeyDown}
autoComplete="false"
/>
<input
name="auth_code4"
type="number"
onChange={(e) => this.changeValue(e.target.name, e.target.value)}
maxLength="1"
ref={(input) => { this.inputRef4 = input }}
value={this.state.auth_code4}
onKeyDown={this.onKeyDown}
autoComplete="false"
/>
</div>
</>
);
}
}

@ -0,0 +1,33 @@
import React, { Component } from 'react';
import Mobile from './Mobile/Mobile';
import Code from './Code/Code';
import './Login.scss';
export default class Login extends Component {
constructor(props) {
super(props);
this.state = {
section : 0,
}
}
setSection = (val) => {
this.setState({
section : val,
})
}
render() {
return(
<div className="login d-flex flex-column">
{
this.state.section === 0 ?
<Mobile setSection={this.setSection} /> : null
}
{
this.state.section === 1 ?
<Code setSection={this.setSection}/> : null
}
</div>
);
}
}

@ -0,0 +1,120 @@
@media screen and (max-width: 450px){
.login{
width: 100%;
height: 100%;
background-color: #efefef;
position: relative;
& button{
background: rgb(176, 73, 186);
background: linear-gradient(180deg,rgb(163, 73, 186) 0%, rgb(108, 72, 191) 52%);
min-width: 200px;
margin : 50px auto 0px;
border : none;
padding : 10px 0px;
font-size: 22px;
border-radius: 15px;
color : white;
box-shadow: 0 0 30px rgb(119, 118, 118);
}
&-mobile__top{
width: 100%;
height: 40%;
flex-direction: column;
align-items: center;
justify-content: flex-end;
background-color: rgba(111,108,255,1);
text-align: right;
color: white;
box-shadow: 0 0 80px rgba(77, 75, 75, 0.8);
& div{
width: 200px;
text-align: right;
position: relative;
left : 30px;
}
& p{
width: 200px;
position: relative;
left : 30px;
}
}
&-mobile__input{
width:280px;
margin : 30px auto 0px;
position: relative;
input{
width: 100%;
border-radius: 20px;
border : 2px solid rgb(113, 88, 177);
background :rgb(194, 185, 220);
padding : 2px 0px 2px 85px;
text-align: left;
direction :ltr;
font-size: 25px;
color: white;
&:focus{
outline : none;
}
}
div{
position : absolute;
left : 65px;
top :4px;
font-size: 25px;
color : rgb(113, 88, 177);
}
}
&-code__bottom{
position: absolute;
bottom: 0px;
left: 0px;
width : 100%;
height : 50%;
background-color: white;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
justify-content: center;
z-index: 200;
direction: ltr;
input{
width: 40px;
border : 0px;
border-bottom : 2px solid rgb(113, 88, 177);
height : 40px;
margin : 60px 7px 0px;
text-align: center;
direction : ltr;
font-size: 24px;
color : rgb(101, 61, 196);
&:focus{
outline : none;
}
}
}
&-code__top{
position: relative;
direction: rtl;
width : 100%;
height : 60%;
justify-content: flex-end;
align-items: center;
background: rgb(176, 73, 186);
background: linear-gradient(180deg,rgb(163, 73, 186) 0%, rgb(108, 72, 191) 52%);
text-align:right;
font-size: 14px;
color: white;
& div{
width: 200px;
position: relative;
right: -10%;
bottom: 20%;
}
& p{
width: 200px;
position: relative;
right: -10%;
bottom: 20%;
}
}
}
}

@ -0,0 +1,21 @@
import React, { Component } from 'react';
export default class Mobile extends Component {
render() {
return(
<>
<div className="login-mobile__top d-flex">
<div>منتظرت بودیم</div>
<p>شمارهتو بده تا کد تأیید رو برات بفرستم. دست دست نکن</p>
</div>
<div className="login-mobile__input d-flex">
<input type="text" maxLength={9} />
<div>09</div>
</div>
<button onClick={() => this.props.setSection(1)}>
ادامه
</button>
</>
);
}
}

@ -0,0 +1,28 @@
import React, { Component } from 'react';
import logo from '../../../assets/icons/logo.svg';
import './Logo.scss';
export default class Logo extends Component {
componentDidMount() {
setTimeout(() =>{
this.props.setPage('bio');
},2000);
}
render() {
return(
<div className="logo d-flex flex-column">
<img src={logo} style={{width : 150, height :150}}/>
<div className="logo__title d-flex">
<h1 style={{fontFamily : 'IRANSansNumeralBold'}}>ایما</h1>
<span></span>
<h1 style={{fontSize :20}}>داستانبازی</h1>
</div>
<div className="logo__footer d-flex">
<h2 style={{fontFamily : 'IRANSansNumeralBold',marginRight : 10}}>Eema</h2>
<h2 style={{fontSize :17}}>Entertainments</h2>
</div>
</div>
);
}
}

@ -0,0 +1,38 @@
@media screen and (max-width: 450px){
.logo{
width: 100%;
height: 100%;
justify-content:center;
align-items:center;
background: rgb(111,108,255);
background: linear-gradient(180deg, rgba(111,108,255,1) 0%, rgba(105,73,186,1) 52%);
position: relative;
&__title{
position: relative;
right: 10px;
margin-top: 25px;
align-items:center;
& h1{
font-size: 25px;
color: white;
}
& span{
margin : 0px 5px;
width: 2px;
height:22px;
background-color:white;
position: relative;
bottom: 5px;
}
}
&__footer{
direction: ltr;
position: absolute;
bottom: 55px;
& h2{
font-size: 16px;
color: white;
}
}
}
}
Loading…
Cancel
Save