From de82826d8698627c5e2e7fc044a93d5bcbec90c4 Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Fri, 7 May 2021 02:06:28 +0430 Subject: [PATCH] reza added auth component --- src/Router.js | 13 +-- src/assets/icons/logo.svg | 3 + src/views/Auth/Auth.js | 36 +++++++ src/views/Auth/Auth.scss | 9 ++ src/views/Auth/Bio/Bio.js | 46 +++++++++ src/views/Auth/Bio/Bio.scss | 48 +++++++++ src/views/Auth/Bio/FirstBio/FirstBio.js | 26 +++++ src/views/Auth/Bio/SecondBio/SecondBio.js | 29 ++++++ src/views/Auth/Bio/ThirdBio/ThirdBio.js | 26 +++++ src/views/Auth/Login/Code/Code.js | 109 ++++++++++++++++++++ src/views/Auth/Login/Login.js | 33 ++++++ src/views/Auth/Login/Login.scss | 120 ++++++++++++++++++++++ src/views/Auth/Login/Mobile/Mobile.js | 21 ++++ src/views/Auth/Logo/Logo.js | 28 +++++ src/views/Auth/Logo/Logo.scss | 38 +++++++ 15 files changed, 577 insertions(+), 8 deletions(-) create mode 100644 src/assets/icons/logo.svg create mode 100644 src/views/Auth/Auth.js create mode 100644 src/views/Auth/Auth.scss create mode 100644 src/views/Auth/Bio/Bio.js create mode 100644 src/views/Auth/Bio/Bio.scss create mode 100644 src/views/Auth/Bio/FirstBio/FirstBio.js create mode 100644 src/views/Auth/Bio/SecondBio/SecondBio.js create mode 100644 src/views/Auth/Bio/ThirdBio/ThirdBio.js create mode 100644 src/views/Auth/Login/Code/Code.js create mode 100644 src/views/Auth/Login/Login.js create mode 100644 src/views/Auth/Login/Login.scss create mode 100644 src/views/Auth/Login/Mobile/Mobile.js create mode 100644 src/views/Auth/Logo/Logo.js create mode 100644 src/views/Auth/Logo/Logo.scss diff --git a/src/Router.js b/src/Router.js index 8abfdf6..f036593 100644 --- a/src/Router.js +++ b/src/Router.js @@ -5,22 +5,20 @@ import { Provider } from "react-redux"; import Home from "./views/Home/Home"; import ChatRoom from "./views/ChatRoom/ChatRoom"; - +import Auth from "./views/Auth/Auth"; export default class AppRouter extends Component { render() { let home; - if(1){ + if(localStorage.getItem("access_token")){ home = - {/* */} }else{ - // home = - // - // - return null; + home = + + } return ( @@ -29,7 +27,6 @@ export default class AppRouter extends Component { {home} - {/* */} diff --git a/src/assets/icons/logo.svg b/src/assets/icons/logo.svg new file mode 100644 index 0000000..e9c92e1 --- /dev/null +++ b/src/assets/icons/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/views/Auth/Auth.js b/src/views/Auth/Auth.js new file mode 100644 index 0000000..38dc521 --- /dev/null +++ b/src/views/Auth/Auth.js @@ -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( +
+ { + this.state.page === 'logo' ? : null + } + { + this.state.page === 'bio' ? : null + } + { + this.state.page === 'login' ? : null + } +
+ ); + } +} \ No newline at end of file diff --git a/src/views/Auth/Auth.scss b/src/views/Auth/Auth.scss new file mode 100644 index 0000000..81de3a9 --- /dev/null +++ b/src/views/Auth/Auth.scss @@ -0,0 +1,9 @@ +@media screen and (max-width: 450px){ + .auth{ + width: 100vw; + height: 100vh; + direction: rtl; + overflow-x: hidden; + position: relative; + } +} \ No newline at end of file diff --git a/src/views/Auth/Bio/Bio.js b/src/views/Auth/Bio/Bio.js new file mode 100644 index 0000000..1581d84 --- /dev/null +++ b/src/views/Auth/Bio/Bio.js @@ -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( +
+
+ { + this.state.section === 0 ? : null + } + { + this.state.section === 1 ? : null + } + { + this.state.section === 2 ? : null + } +
+ { + this.state.section === 2 ? + : + + } +
+ ); + } +} \ No newline at end of file diff --git a/src/views/Auth/Bio/Bio.scss b/src/views/Auth/Bio/Bio.scss new file mode 100644 index 0000000..f5d27a3 --- /dev/null +++ b/src/views/Auth/Bio/Bio.scss @@ -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); + } + } +} \ No newline at end of file diff --git a/src/views/Auth/Bio/FirstBio/FirstBio.js b/src/views/Auth/Bio/FirstBio/FirstBio.js new file mode 100644 index 0000000..0c2c5e9 --- /dev/null +++ b/src/views/Auth/Bio/FirstBio/FirstBio.js @@ -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( + <> +

+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی میباشد. +

+
this.props.setSection(1)}> + +
+
+
+
+
+
+
+
+
+ + ); + } +} \ No newline at end of file diff --git a/src/views/Auth/Bio/SecondBio/SecondBio.js b/src/views/Auth/Bio/SecondBio/SecondBio.js new file mode 100644 index 0000000..9633749 --- /dev/null +++ b/src/views/Auth/Bio/SecondBio/SecondBio.js @@ -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( + <> +

+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی میباشد. +

+
this.props.setSection(2)}> + +
+
this.props.setSection(0)}> + +
+
+
+
+
+
+
+
+
+ + ); + } +} \ No newline at end of file diff --git a/src/views/Auth/Bio/ThirdBio/ThirdBio.js b/src/views/Auth/Bio/ThirdBio/ThirdBio.js new file mode 100644 index 0000000..d3f63ce --- /dev/null +++ b/src/views/Auth/Bio/ThirdBio/ThirdBio.js @@ -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( + <> +

+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی میباشد. +

+
this.props.setSection(1)}> + +
+
+
+
+
+
+
+
+
+ + ); + } +} \ No newline at end of file diff --git a/src/views/Auth/Login/Code/Code.js b/src/views/Auth/Login/Code/Code.js new file mode 100644 index 0000000..c8f4008 --- /dev/null +++ b/src/views/Auth/Login/Code/Code.js @@ -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( + <> +
+
میخوام مطمئن شم که خودتی
+

کد تایید رو برات فرستادم. اینجا واردش کن

+
+
+ 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" + /> + 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" + /> + 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" + /> + 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" + /> +
+ + ); + } +} \ No newline at end of file diff --git a/src/views/Auth/Login/Login.js b/src/views/Auth/Login/Login.js new file mode 100644 index 0000000..fc5af8b --- /dev/null +++ b/src/views/Auth/Login/Login.js @@ -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( +
+ { + this.state.section === 0 ? + : null + } + { + this.state.section === 1 ? + : null + } +
+ ); + } +} \ No newline at end of file diff --git a/src/views/Auth/Login/Login.scss b/src/views/Auth/Login/Login.scss new file mode 100644 index 0000000..1e8a652 --- /dev/null +++ b/src/views/Auth/Login/Login.scss @@ -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%; + } + } + } +} \ No newline at end of file diff --git a/src/views/Auth/Login/Mobile/Mobile.js b/src/views/Auth/Login/Mobile/Mobile.js new file mode 100644 index 0000000..26dbbda --- /dev/null +++ b/src/views/Auth/Login/Mobile/Mobile.js @@ -0,0 +1,21 @@ +import React, { Component } from 'react'; + +export default class Mobile extends Component { + render() { + return( + <> +
+
منتظرت بودیم
+

شماره‌تو بده تا کد تأیید رو برات بفرستم. دست دست نکن

+
+
+ +
09
+
+ + + ); + } +} \ No newline at end of file diff --git a/src/views/Auth/Logo/Logo.js b/src/views/Auth/Logo/Logo.js new file mode 100644 index 0000000..283209c --- /dev/null +++ b/src/views/Auth/Logo/Logo.js @@ -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( +
+ +
+

ایما

+ +

داستانبازی

+
+
+

Eema

+

Entertainments

+
+
+ ); + } +} \ No newline at end of file diff --git a/src/views/Auth/Logo/Logo.scss b/src/views/Auth/Logo/Logo.scss new file mode 100644 index 0000000..5c02e7f --- /dev/null +++ b/src/views/Auth/Logo/Logo.scss @@ -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; + } + } + } +} \ No newline at end of file