reza added login

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 {
           <Route exact path={'/qr'}>
             <QR />
           </Route>
+          <Route exact path={'/auth'}>
+            <Auth />
+          </Route>
+          <Route exact path={'/profile'}>
+            <Auth page={'profile'} />
+          </Route>
         </Switch>
       </Router>
     );

src/assets/icons/attachment.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19.427" height="19.427" viewBox="0 0 19.427 19.427"><defs><style>.a{fill:#bfe404;}</style></defs><path class="a" d="M7.06,185.04,4.771,187.33A2.428,2.428,0,0,1,1.337,183.9l4.579-4.579a2.428,2.428,0,0,1,3.434,0,.809.809,0,1,0,1.145-1.145,4.047,4.047,0,0,0-5.723,0L.192,182.751a4.047,4.047,0,0,0,5.724,5.723l2.289-2.289A.809.809,0,1,0,7.06,185.04Z" transform="translate(0.993 -170.233)"/><path class="a" d="M200.933.185a4.048,4.048,0,0,0-5.724,0l-2.747,2.747a.809.809,0,1,0,1.145,1.145l2.747-2.747a2.428,2.428,0,0,1,3.434,3.434L194.751,9.8a2.428,2.428,0,0,1-3.434,0,.809.809,0,0,0-1.145,1.145,4.047,4.047,0,0,0,5.723,0l5.037-5.037A4.047,4.047,0,0,0,200.933.185Z" transform="translate(-182.691 1)"/></svg>

src/assets/icons/exit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22.883" height="22.883" viewBox="0 0 22.883 22.883"><defs><style>.a{fill:none;stroke:#4d4d4f;stroke-linecap:round;stroke-linejoin:round;stroke-width:3px;}</style></defs><g transform="translate(-1035.48 -937.376)"><path class="a" d="M1056.212,939.5,1037.6,958.108" transform="translate(0.006 0.006)"/><path class="a" d="M1056.242,958.137,1037.6,939.5" transform="translate(0 0)"/></g></svg>

src/assets/icons/pdf.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25.711" height="25.711" viewBox="0 0 25.711 25.711"><defs><style>.a{fill:#ff0808;}</style></defs><g transform="translate(0 0)"><g transform="translate(0 0)"><path class="a" d="M292.017,256H288.8a.8.8,0,0,0-.8.8v6.428a.8.8,0,0,0,.8.8h3.214a1.607,1.607,0,0,0,1.607-1.607v-4.821A1.607,1.607,0,0,0,292.017,256Zm0,6.428h-2.41v-4.821h2.41Z" transform="translate(-273.538 -243.145)"/><path class="a" d="M420.821,257.607V256H416.8a.8.8,0,0,0-.8.8v7.231h1.607v-3.214h3.214v-1.607h-3.214v-1.607Z" transform="translate(-395.11 -243.145)"/><path class="a" d="M1.607,23.3V2.41a.8.8,0,0,1,.8-.8H14.462V4.821a1.607,1.607,0,0,0,1.607,1.607h3.214v2.41H20.89V5.624a.8.8,0,0,0-.233-.57L15.836.233A.8.8,0,0,0,15.266,0H2.41A2.41,2.41,0,0,0,0,2.41V23.3a2.41,2.41,0,0,0,2.41,2.41H8.035V24.1H2.41A.8.8,0,0,1,1.607,23.3Z" transform="translate(0 0)"/><path class="a" d="M164.017,256H160.8a.8.8,0,0,0-.8.8v7.231h1.607v-2.41h2.41a1.607,1.607,0,0,0,1.607-1.607v-2.41A1.607,1.607,0,0,0,164.017,256Zm0,4.017h-2.41v-2.41h2.41Z" transform="translate(-151.965 -243.145)"/></g></g></svg>

src/assets/icons/play.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19.854" height="22.452" viewBox="0 0 19.854 22.452"><defs><style>.a{fill:#007527;}</style></defs><g transform="translate(-18.173)"><path class="a" d="M19.533,22.452a1.426,1.426,0,0,1-1.36-1.6V1.6A1.426,1.426,0,0,1,19.533,0a1.877,1.877,0,0,1,.937.277L37.138,9.9a1.577,1.577,0,0,1,.888,1.326,1.577,1.577,0,0,1-.888,1.326L20.47,22.176A1.878,1.878,0,0,1,19.533,22.452ZM19.533,1c-.312,0-.359.377-.359.6V20.85c0,.225.047.6.359.6a.893.893,0,0,0,.437-.143l16.668-9.623c.243-.14.388-.312.388-.459s-.145-.319-.388-.459L19.97,1.144A.892.892,0,0,0,19.533,1Z"/></g></svg>

src/assets/icons/ppt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="67.237" height="63.032" viewBox="0 0 67.237 63.032"><defs><style>.a{fill:#0d9189;}</style></defs><g transform="translate(0 -16.01)"><g transform="translate(0 16.01)"><path class="a" d="M37.06,16.49a2.115,2.115,0,0,0-1.727-.445l-33.619,6.3A2.1,2.1,0,0,0,0,24.412V70.638A2.1,2.1,0,0,0,1.715,72.7L35.333,79a2.009,2.009,0,0,0,.387.038,2.1,2.1,0,0,0,2.1-2.1V18.108A2.1,2.1,0,0,0,37.06,16.49ZM33.619,74.407,4.2,68.894V26.156l29.416-5.513Z" transform="translate(0 -16.01)"/></g><g transform="translate(33.619 24.412)"><path class="a" d="M287.517,79.99H258.1a2.1,2.1,0,0,0,0,4.2h27.315v37.821H258.1a2.1,2.1,0,0,0,0,4.2h29.416a2.1,2.1,0,0,0,2.1-2.1V82.091A2.1,2.1,0,0,0,287.517,79.99Z" transform="translate(-256 -79.99)"/></g><g transform="translate(33.619 58.031)"><path class="a" d="M279.113,335.99H258.1a2.1,2.1,0,1,0,0,4.2h21.012a2.1,2.1,0,1,0,0-4.2Z" transform="translate(-256 -335.99)"/></g><g transform="translate(12.607 37.019)"><path class="a" d="M98.1,175.99a2.1,2.1,0,0,0-2.1,2.1V199.1a2.1,2.1,0,0,0,4.2,0V178.091A2.1,2.1,0,0,0,98.1,175.99Z" transform="translate(-96 -175.99)"/></g><g transform="translate(12.607 37.019)"><path class="a" d="M104.4,175.99H98.1a2.1,2.1,0,0,0,0,4.2h6.3a4.2,4.2,0,1,1,0,8.4H98.1a2.1,2.1,0,1,0,0,4.2h6.3a8.4,8.4,0,0,0,0-16.809Z" transform="translate(-96 -175.99)"/></g><g transform="translate(37.821 32.817)"><path class="a" d="M298.506,143.99A10.506,10.506,0,1,0,309.012,154.5,10.518,10.518,0,0,0,298.506,143.99Zm0,16.809a6.3,6.3,0,1,1,6.3-6.3A6.311,6.311,0,0,1,298.506,160.8Z" transform="translate(-288 -143.99)"/></g><g transform="translate(46.226 32.817)"><path class="a" d="M362.506,152.395h-6.3v-6.3a2.1,2.1,0,0,0-4.2,0v8.4a2.1,2.1,0,0,0,2.1,2.1h8.4a2.1,2.1,0,1,0,0-4.2Z" transform="translate(-352 -143.99)"/></g></g></svg>

src/assets/icons/video-player.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="29.255" height="16.841" viewBox="0 0 29.255 16.841"><defs><style>.a{fill:#1f478c;}</style></defs><path class="a" d="M16.22,0H3.166A3.17,3.17,0,0,0,0,3.166V13.675a3.17,3.17,0,0,0,3.166,3.166H16.22a3.17,3.17,0,0,0,3.166-3.166V3.166A3.17,3.17,0,0,0,16.22,0Zm1.9,13.675a1.9,1.9,0,0,1-1.9,1.9H3.166a1.9,1.9,0,0,1-1.9-1.9V3.166a1.9,1.9,0,0,1,1.9-1.9H16.22a1.9,1.9,0,0,1,1.9,1.9Zm0,0"/><path class="a" d="M339.385,24.8a.633.633,0,0,0-.636,0l-7,4.134a.633.633,0,0,0-.311.545v3.819a.633.633,0,0,0,.245.5l7,5.435a.633.633,0,0,0,1.022-.5V25.353a.633.633,0,0,0-.319-.55Zm-.947,12.645L332.7,33V29.849l5.735-3.386Zm0,0" transform="translate(-310.449 -23.155)"/></svg>

src/views/Auth/Login/Cellphone/index.js

@@ -1,13 +1,20 @@
 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 (
-      <div className="auth-cellphone d-flex">
+      <>
+        {window.innerWidth > 1000 ? (
+          <div className="auth-cellphone d-flex flex-column align-items-center">
+            <img src={logo} alt="دانوین" />
+            <div></div>
             <form
               onSubmit={() =>
                 this.props.parent.setState({
@@ -16,8 +23,6 @@ export default class Cellphone extends Component {
                 })
               }
             >
-          <label htmlFor="cellphone">
-            شماره همراه
               <input
                 id="cellphone"
                 type="text"
@@ -36,9 +41,56 @@ export default class Cellphone extends Component {
                     .replace(/[^\d]/, ""))
                 }
               />
-          </label>
             </form>
           </div>
+        ) : null}
+        {window.innerWidth < 1000 ? (
+          <div className="mobile-auth-cellphone d-flex flex-column align-items-center">
+            <img src={logo} alt="دانوین" />
+            <div className="d-flex flex-column">
+              <h1>دانوین</h1>
+              <p>
+                به دانوین خوش اومدی برای عضویت و ادامه شماره موبایلت رو وارد کن
+                و روی گزینه ثبت بزن
+              </p>
+            </div>
+            <form
+              onSubmit={() =>
+                this.props.parent.setState({
+                  page: 1,
+                  cellphone: "09" + this.state.cellphone,
+                })
+              }
+            >
+              <span>+98</span>
+              <img src={iran} alt="پرچم" />
+              <input
+                id="cellphone"
+                type="text"
+                maxLength={9}
+                inputMode="numeric"
+                autoComplete="off"
+                ref={(input) => {
+                  this.inputRef1 = input;
+                }}
+                onChange={(e) => this.setState({ cellphone: e.target.value })}
+                onInput={(e) =>
+                  (e.target.value = e.target.value
+                    .replace(/[\u0660-\u0669\u06f0-\u06f9]/g, function (c) {
+                      return c.charCodeAt(0) & 0xf;
+                    })
+                    .replace(/[^\d]/, ""))
+                }
+              />
+                <button type="submit">ادامه</button>
+            </form>
+            <div className="mobile-auth-cellphone__footer d-flex flex-column justify-content-center align-items-center">
+                <div> حساب کاربری ندارید ؟ همین حالا <button>ثبت نام کنید</button></div>
+                <div>شرایط استفاده و حریم خصوصی</div>
+            </div>
+          </div>
+        ) : null}
+      </>
     );
   }
 }

src/views/Auth/Login/Cellphone/index.scss

@@ -19,3 +19,93 @@
     }
   }
 }
+
+.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;
+      }
+    }
+  }
+}

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,6 +70,8 @@ export default class Code extends Component {
 
   render() {
     return (
+      <>
+        {window.innerWidth > 1000 ? (
           <div className="auth-code d-flex">
             <label htmlFor="code1">
               <input
@@ -137,15 +141,121 @@ export default class Code extends Component {
                 onChange={(e) => this.changeValue(e)}
               />
             </label>
-        {
+            {!this.state.resendStatus ? (
-          !this.state.resendStatus ?
+              <Timer seconds={10} parent={this} />
-          <Timer seconds={10} parent={this} /> : 
+            ) : (
-          <div style={{color : '#88ff88'}} className="timer d-flex" onClick={() => this.setState({ resendStatus : false })}> 
+              <div
+                style={{ color: "#88ff88" }}
+                className="timer d-flex"
+                onClick={() => this.setState({ resendStatus: false })}
+              >
                 دریافت مجدد کد
               </div>
-        }
+            )}
-        
+          </div>
+        ) : null}
+        {window.innerWidth < 1000 ? (
+          <div className="mobile-auth-code d-flex flex-column">
+            <img src={logo} alt="دانوین" />
+            <div style={{ maxHeight: 60 }} className="d-flex flex-column mb-3">
+              <h1>دانوین</h1>
+              <p>
+                یک کد تائیدیه به شماره <span>09123190615</span> ارسال شد <br />
+                آن را در قسمت زیر وارد کنید.
+              </p>
+            </div>
+            <div className="mobile-auth-code__codes d-flex">
+              <label htmlFor="code1">
+                <input
+                  id="code1"
+                  name="o1"
+                  type="text"
+                  inputMode="numeric"
+                  maxLength="2"
+                  ref={(input) => {
+                    this.inputRef1 = input;
+                  }}
+                  autoComplete="off"
+                  value={this.state.o1}
+                  onKeyDown={(e) => this.keyboardEvent(e)}
+                  onInput={this.onInput}
+                  onChange={(e) => this.changeValue(e)}
+                />
+              </label>
+              <label htmlFor="code2">
+                <input
+                  id="o2"
+                  name="o2"
+                  type="text"
+                  inputMode="numeric"
+                  maxLength="2"
+                  ref={(input) => {
+                    this.inputRef2 = input;
+                  }}
+                  autoComplete="off"
+                  value={this.state.o2}
+                  onKeyDown={(e) => this.keyboardEvent(e)}
+                  onInput={this.onInput}
+                  onChange={(e) => this.changeValue(e)}
+                />
+              </label>
+              <label htmlFor="code3">
+                <input
+                  id="code3"
+                  name="o3"
+                  type="text"
+                  inputMode="numeric"
+                  maxLength="2"
+                  ref={(input) => {
+                    this.inputRef3 = input;
+                  }}
+                  autoComplete="off"
+                  value={this.state.o3}
+                  onKeyDown={(e) => this.keyboardEvent(e)}
+                  onInput={this.onInput}
+                  onChange={(e) => this.changeValue(e)}
+                />
+              </label>
+              <label htmlFor="code4">
+                <input
+                  id="code4"
+                  name="o4"
+                  type="text"
+                  inputMode="numeric"
+                  maxLength="2"
+                  ref={(input) => {
+                    this.inputRef4 = input;
+                  }}
+                  autoComplete="off"
+                  value={this.state.o4}
+                  onKeyDown={(e) => this.keyboardEvent(e)}
+                  onInput={this.onInput}
+                  onChange={(e) => this.changeValue(e)}
+                />
+              </label>
+            </div>
+            <button>ثبت</button>
+            {!this.state.resendStatus ? (
+              <Timer seconds={10} parent={this} />
+            ) : (
+              <div
+                style={{ color: "#A5A5A5", fontFamily: "numeralLight" }}
+                className="timer d-flex mt-4"
+                onClick={() => this.setState({ resendStatus: false })}
+              >
+                ارسال مجدد کد فعال سازی
+              </div>
+            )}
+            <div
+              style={{ color: "#A5A5A5", fontFamily: "numeralLight" }}
+              className="timer d-flex mt-2"
+              onClick={() => this.props.parent.setState({ page : 0, cellphone : ''})}
+            >
+              بازگشت به مرحله قبل و اصلاح شماره
+            </div>
           </div>
+        ) : null}
+      </>
     );
   }
 }

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;
+      }
+    }
   }
 }

src/views/Auth/Login/Timer/index.css

@@ -2,7 +2,5 @@
   flex-direction: row;
   direction: rtl !important;
   margin-right: 10px;
-  position : absolute;
+  color: #6CBE44;
-  bottom: 40%;
-  color: white;
 }

src/views/Auth/Login/Timer/index.js

@@ -56,11 +56,10 @@ export default class Timer extends Component {
   }
   render() {
     return (
-      <div className="timer d-flex">
+      <div className="timer d-flex mt-4">
-        <div className="ml-2">دریافت مجدد کد در</div>
+        <div style={{color: '#a5a5a5', marginLeft: 5}}>زمان باقیمانده تا انقضای کد:</div>
         <div>{this.state.time.s}</div>:
         <div>{this.state.time.m + this.state.time.h * 60}</div>
-        <div className="mr-2">دیگر</div>
       </div>
     );
   }

src/views/Auth/Login/index.js

@@ -1,13 +1,13 @@
 import React, { Component } from "react";
 
-import Cellphone from "./Cellphone/Cellphone";
+import Cellphone from "./Cellphone/index";
-import Code from "./Code/Code";
+import Code from "./Code/index";
 
 export default class Login extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      page: 0,
+      page: 1,
     };
   }
 

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 ?
           <div className="auth-profile d-flex">
         
-      </div>
+          </div> : null
+        }
+        {
+          window.innerWidth < 1000 ?
+          <div className="mobile-auth-profile d-flex flex-column">
+            <img src={logo} alt='دانوین' />
+          </div> : null
+        }
+      </>
+      
     );
   }
 }

src/views/Auth/Profile/index.scss

@@ -0,0 +1,7 @@
+.mobile-auth-profile{
+  width : 100%;
+  height : 100%;
+  overflow-y: scroll;
+  position: relative;
+  padding: 15px;
+}

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 Profile from "./Profile/index";
-import Login from "./Login/Login";
+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 (
       <div className="auth d-flex">
-        {this.state.page === "login" ? <Login /> : <Profile />}
+        {this.state.page === "login" ? <Login parent={this} /> : null}
+        {this.state.page === "profile" ? <Profile parent={this} /> : null}
         <ToastContainer
           position="bottom-right"
           autoClose={1500}
@@ -31,3 +32,8 @@ export default class Auth extends Component {
     );
   }
 }
+
+Auth.defaultProps = {
+
+  
+}

src/views/Auth/index.scss

@@ -2,5 +2,4 @@
   width: 100%;
   height: 100vh;
   overflow-x: hidden;
-  background-color: grey;
 }

src/views/QR/index.js

@@ -7,6 +7,7 @@ import PDF from './PDF/index';
 import PowerPoint from './PowerPoint/index';
 import Links from './Links/index';
 
+import exit from '../../assets/icons/exit.svg';
 import book2 from "../../assets/images/book2.png";
 
 import './index.scss';
@@ -43,7 +44,7 @@ export default class QR extends Component {
                 </div>
               </header>
               <div className="d-flex pt-3">
-                <div className="mobile-qr__buttons">
+                <div className="mobile-qr__buttons d-flex flex-column">
 
                 </div>
                 <div className="mobile-qr__content d-flex flex-column">