From 8557d48cf47e460f3be322688b0b4bfd37f12033 Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Thu, 24 Jun 2021 16:13:06 +0430 Subject: [PATCH] reza added login --- src/AppRouter.js | 8 + src/assets/icons/attachment.svg | 1 + src/assets/icons/exit.svg | 1 + src/assets/icons/iran.svg | 1 + src/assets/icons/pdf.svg | 1 + src/assets/icons/play.svg | 1 + src/assets/icons/ppt.svg | 1 + src/assets/icons/video-player.svg | 1 + src/views/Auth/Login/Cellphone/index.js | 116 +++++++--- src/views/Auth/Login/Cellphone/index.scss | 114 +++++++++- src/views/Auth/Login/Code/index.js | 266 +++++++++++++++------- src/views/Auth/Login/Code/index.scss | 67 +++++- src/views/Auth/Login/Timer/index.css | 4 +- src/views/Auth/Login/Timer/index.js | 5 +- src/views/Auth/Login/index.js | 6 +- src/views/Auth/Profile/index.js | 19 +- src/views/Auth/Profile/index.scss | 7 + src/views/Auth/index.js | 14 +- src/views/Auth/index.scss | 1 - src/views/QR/index.js | 3 +- 20 files changed, 496 insertions(+), 141 deletions(-) create mode 100644 src/assets/icons/attachment.svg create mode 100644 src/assets/icons/exit.svg create mode 100644 src/assets/icons/iran.svg create mode 100644 src/assets/icons/pdf.svg create mode 100644 src/assets/icons/play.svg create mode 100644 src/assets/icons/ppt.svg create mode 100644 src/assets/icons/video-player.svg create mode 100644 src/views/Auth/Profile/index.scss diff --git a/src/AppRouter.js b/src/AppRouter.js index c2c90ca..8aa8a48 100644 --- a/src/AppRouter.js +++ b/src/AppRouter.js @@ -9,6 +9,8 @@ import About from './views/About/index'; import Products from './views/Products/index'; import Product from './views/Product/index'; import QR from './views/QR/index'; +import Auth from './views/Auth/index'; + class AppRouter extends Component { constructor(props) { super(props); @@ -48,6 +50,12 @@ class AppRouter extends Component { + + + + + + ); diff --git a/src/assets/icons/attachment.svg b/src/assets/icons/attachment.svg new file mode 100644 index 0000000..ca775a6 --- /dev/null +++ b/src/assets/icons/attachment.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/exit.svg b/src/assets/icons/exit.svg new file mode 100644 index 0000000..f5d415a --- /dev/null +++ b/src/assets/icons/exit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/iran.svg b/src/assets/icons/iran.svg new file mode 100644 index 0000000..1aae0c6 --- /dev/null +++ b/src/assets/icons/iran.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/pdf.svg b/src/assets/icons/pdf.svg new file mode 100644 index 0000000..94eae86 --- /dev/null +++ b/src/assets/icons/pdf.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/play.svg b/src/assets/icons/play.svg new file mode 100644 index 0000000..af373a6 --- /dev/null +++ b/src/assets/icons/play.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/ppt.svg b/src/assets/icons/ppt.svg new file mode 100644 index 0000000..2ebb461 --- /dev/null +++ b/src/assets/icons/ppt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/video-player.svg b/src/assets/icons/video-player.svg new file mode 100644 index 0000000..266471d --- /dev/null +++ b/src/assets/icons/video-player.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/views/Auth/Login/Cellphone/index.js b/src/views/Auth/Login/Cellphone/index.js index 7f996d7..42715ca 100644 --- a/src/views/Auth/Login/Cellphone/index.js +++ b/src/views/Auth/Login/Cellphone/index.js @@ -1,44 +1,96 @@ import React, { Component } from "react"; -import './index.scss'; +import logo from "../../../../assets/icons/logo.png"; +import iran from "../../../../assets/icons/iran.svg"; + +import "./index.scss"; export default class Cellphone extends Component { componentDidMount() { this.inputRef1.focus(); } render() { return ( -
-
- this.props.parent.setState({ - page: 1, - cellphone: "09" + this.state.cellphone, - }) - } - > -
+ ) : null} + ); } } diff --git a/src/views/Auth/Login/Cellphone/index.scss b/src/views/Auth/Login/Cellphone/index.scss index 82bed8d..9fec438 100644 --- a/src/views/Auth/Login/Cellphone/index.scss +++ b/src/views/Auth/Login/Cellphone/index.scss @@ -1,21 +1,111 @@ -.auth-cellphone{ +.auth-cellphone { width: 100%; height: 100%; - justify-content:center; - align-items:center; - label{ - text-align:right; + justify-content: center; + align-items: center; + label { + text-align: right; display: flex; - flex-direction:column; + flex-direction: column; color: white; - input{ + input { background-color: inherit; - border : 0px; + border: 0px; border-bottom: 2px solid white; font-size: 24px; - color : white; - direction : ltr; - text-align:center; + color: white; + direction: ltr; + text-align: center; } } -} \ No newline at end of file +} + +.mobile-auth-cellphone { + width: 100%; + height: 100%; + justify-content: center; + align-items: center; + max-width: 360px; + margin: 0px auto; + img { + margin-bottom: 30px; + position: relative; + bottom: 40px; + } + h1 { + font-family: numeralBold; + font-size: calc(100vw / 15); + color: #6f7074; + position: relative; + bottom: 40px; + } + p { + font-family: numeralLight; + font-size: calc(100vw / 25); + color: #6f7074; + letter-spacing: -1px; + position: relative; + bottom: 40px; + } + form { + width: 100%; + position: relative; + bottom: 40px; + img{ + position: absolute; + left: 10px; + top: 6px; + width: 45px; + } + span{ + text-align: right; + position: absolute; + left: 65px; + top: 5px; + direction: ltr; + font-size: calc(100vw / 20); + color: #a5a5a5; + } + input { + width: 100%; + background-color: inherit; + color: #a5a5a5; + direction: ltr; + text-align: left; + background-color: #f2f2f2; + border: none; + font-size: calc(100vw / 20); + padding: 5px 5px 5px 105px; + border-radius: 5px; + &:focus { + outline: 0px; + } + } + button{ + margin-top: 20px; + width: 100%; + border: 0px; + font-family: numeralMedium; + background-color: #6CBE44; + color: white; + border-radius: 7px; + padding: 8px; + font-size: calc(100vw / 20); + } + } + &__footer{ + position: fixed; + bottom: 40px; + div{ + font-family: numeralMedium; + font-size: calc(100vw / 28); + color: #a5a5a5; + letter-spacing: -1px; + button{ + background-color: white; + border: 0px; + color: #02733C; + } + } + } +} diff --git a/src/views/Auth/Login/Code/index.js b/src/views/Auth/Login/Code/index.js index aea3384..6e487a4 100644 --- a/src/views/Auth/Login/Code/index.js +++ b/src/views/Auth/Login/Code/index.js @@ -1,5 +1,7 @@ import React, { Component } from "react"; -import Timer from '../Timer/Timer'; +import Timer from "../Timer/index"; + +import logo from "../../../../assets/icons/logo.png"; import "./index.scss"; export default class Code extends Component { @@ -68,84 +70,192 @@ export default class Code extends Component { render() { return ( -
- - - - - { - !this.state.resendStatus ? - : -
this.setState({ resendStatus : false })}> - دریافت مجدد کد + <> + {window.innerWidth > 1000 ? ( +
+ + + + + {!this.state.resendStatus ? ( + + ) : ( +
this.setState({ resendStatus: false })} + > + دریافت مجدد کد +
+ )} +
+ ) : null} + {window.innerWidth < 1000 ? ( +
+ دانوین +
+

دانوین

+

+ یک کد تائیدیه به شماره 09123190615 ارسال شد
+ آن را در قسمت زیر وارد کنید. +

+
+
+ + + + +
+ + {!this.state.resendStatus ? ( + + ) : ( +
this.setState({ resendStatus: false })} + > + ارسال مجدد کد فعال سازی +
+ )} +
this.props.parent.setState({ page : 0, cellphone : ''})} + > + بازگشت به مرحله قبل و اصلاح شماره +
- } - -
+ ) : null} + ); } } diff --git a/src/views/Auth/Login/Code/index.scss b/src/views/Auth/Login/Code/index.scss index b82f3c6..23d6f2a 100644 --- a/src/views/Auth/Login/Code/index.scss +++ b/src/views/Auth/Login/Code/index.scss @@ -5,7 +5,6 @@ align-items:center; direction: ltr; position: relative; - input { width: 50px; background-color: inherit; @@ -16,6 +15,70 @@ color : white; text-align: center; direction : ltr; - + &:focus{ + outline: 0px; + } + } +} + +.mobile-auth-code{ + width: 100%; + height: 100%; + justify-content:center; + align-items:center; + direction: ltr; + position: relative; + max-width: 360px; + margin: 0px auto; + img { + margin-bottom: 30px; + position: relative; + bottom: 40px; + } + h1 { + font-family: numeralBold; + font-size: calc(100vw / 15); + color: #6f7074; + position: relative; + bottom: 40px; + } + p { + font-family: numeralLight; + font-size: calc(100vw / 25); + color: #6f7074; + letter-spacing: -1px; + position: relative; + bottom: 40px; + } + button{ + margin-top: 20px; + width: 100%; + max-width: 300px; + border: 0px; + font-family: numeralMedium; + background-color: #6CBE44; + color: white; + border-radius: 7px; + padding: 8px; + font-size: calc(100vw / 20); + } + &__codes{ + direction: ltr; + input { + max-width: 60px; + max-height: 60px; + background-color: #f2f2f2; + border : 0px; + margin : 0px 10px; + color: #6F7074; + text-align: center; + direction : ltr; + font-size: calc(100vw / 15); + border-radius: 5px; + padding: 10px 15px; + &:focus{ + outline: 0px; + } + } } } \ No newline at end of file diff --git a/src/views/Auth/Login/Timer/index.css b/src/views/Auth/Login/Timer/index.css index f752ca7..f45c2fc 100644 --- a/src/views/Auth/Login/Timer/index.css +++ b/src/views/Auth/Login/Timer/index.css @@ -2,7 +2,5 @@ flex-direction: row; direction: rtl !important; margin-right: 10px; - position : absolute; - bottom: 40%; - color: white; + color: #6CBE44; } \ No newline at end of file diff --git a/src/views/Auth/Login/Timer/index.js b/src/views/Auth/Login/Timer/index.js index 5e1e815..2687754 100644 --- a/src/views/Auth/Login/Timer/index.js +++ b/src/views/Auth/Login/Timer/index.js @@ -56,11 +56,10 @@ export default class Timer extends Component { } render() { return ( -
-
دریافت مجدد کد در
+
+
زمان باقیمانده تا انقضای کد:
{this.state.time.s}
:
{this.state.time.m + this.state.time.h * 60}
-
دیگر
); } diff --git a/src/views/Auth/Login/index.js b/src/views/Auth/Login/index.js index 7315be4..0c5e20f 100644 --- a/src/views/Auth/Login/index.js +++ b/src/views/Auth/Login/index.js @@ -1,13 +1,13 @@ import React, { Component } from "react"; -import Cellphone from "./Cellphone/Cellphone"; -import Code from "./Code/Code"; +import Cellphone from "./Cellphone/index"; +import Code from "./Code/index"; export default class Login extends Component { constructor(props) { super(props); this.state = { - page: 0, + page: 1, }; } diff --git a/src/views/Auth/Profile/index.js b/src/views/Auth/Profile/index.js index a3c424c..ee1794e 100644 --- a/src/views/Auth/Profile/index.js +++ b/src/views/Auth/Profile/index.js @@ -1,11 +1,26 @@ import React, { Component } from "react"; +import logo from "../../../assets/icons/logo.png"; + +import './index.scss'; export default class Profile extends Component { render() { return ( -
+ <> + { + window.innerWidth > 1000 ? +
-
+
: null + } + { + window.innerWidth < 1000 ? +
+ دانوین +
: null + } + + ); } } diff --git a/src/views/Auth/Profile/index.scss b/src/views/Auth/Profile/index.scss new file mode 100644 index 0000000..5a8c72f --- /dev/null +++ b/src/views/Auth/Profile/index.scss @@ -0,0 +1,7 @@ +.mobile-auth-profile{ + width : 100%; + height : 100%; + overflow-y: scroll; + position: relative; + padding: 15px; +} \ No newline at end of file diff --git a/src/views/Auth/index.js b/src/views/Auth/index.js index 0f42720..23531ca 100644 --- a/src/views/Auth/index.js +++ b/src/views/Auth/index.js @@ -1,21 +1,22 @@ import React, { Component } from "react"; import {ToastContainer} from "react-toastify"; -import Profile from "./Profile/Profile"; -import Login from "./Login/Login"; +import Profile from "./Profile/index"; +import Login from "./Login/index"; import "./index.scss"; export default class Auth extends Component { constructor(props) { super(props); this.state = { - page: "login", + page: this.props.page, }; } render() { return (
- {this.state.page === "login" ? : } + {this.state.page === "login" ? : null} + {this.state.page === "profile" ? : null}
-
+