|
|
|
|
@ -1,4 +1,5 @@ |
|
|
|
|
import React, { Component } from "react"; |
|
|
|
|
import { Link } from "react-router-dom"; |
|
|
|
|
import Timer from "../Timer/index"; |
|
|
|
|
|
|
|
|
|
import logo from "../../../../assets/icons/logo.png"; |
|
|
|
|
@ -7,6 +8,7 @@ import pic from "../../../../assets/images/pic.png"; |
|
|
|
|
import "./index.scss"; |
|
|
|
|
|
|
|
|
|
const maxDesktopSize = 1250; |
|
|
|
|
const maxMobileSize = 550; |
|
|
|
|
|
|
|
|
|
const fontSize = { |
|
|
|
|
desktop: { |
|
|
|
|
@ -14,6 +16,13 @@ const fontSize = { |
|
|
|
|
button: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 85, |
|
|
|
|
div: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95, |
|
|
|
|
}, |
|
|
|
|
mobile: { |
|
|
|
|
h1: window.innerWidth > maxMobileSize ? 24 : window.innerWidth / 13, |
|
|
|
|
p: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 27, |
|
|
|
|
input: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 85, |
|
|
|
|
button: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 85, |
|
|
|
|
div: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30, |
|
|
|
|
}, |
|
|
|
|
}; |
|
|
|
|
export default class Code extends Component { |
|
|
|
|
constructor(props) { |
|
|
|
|
@ -87,10 +96,10 @@ export default class Code extends Component { |
|
|
|
|
<div className="auth-code__box d-flex"> |
|
|
|
|
<div |
|
|
|
|
style={{ width: "48%", height: "100%" }} |
|
|
|
|
className="d-flex flex-column justify-content-center align-items-center" |
|
|
|
|
className="d-flex flex-column justify-content-center align-items-center p-5" |
|
|
|
|
> |
|
|
|
|
<img src={logo} alt="دانوین" /> |
|
|
|
|
<div className="auth-code__box--codes d-flex"> |
|
|
|
|
<div className="auth-code__box--codes d-flex justify-content-around"> |
|
|
|
|
<label htmlFor="code1"> |
|
|
|
|
<input |
|
|
|
|
id="code1" |
|
|
|
|
@ -168,13 +177,14 @@ export default class Code extends Component { |
|
|
|
|
ثبت |
|
|
|
|
</button> |
|
|
|
|
{!this.state.resendStatus ? ( |
|
|
|
|
<Timer seconds={10} parent={this} /> |
|
|
|
|
<Timer seconds={60} parent={this} /> |
|
|
|
|
) : ( |
|
|
|
|
<div |
|
|
|
|
style={{ |
|
|
|
|
color: "#A5A5A5", |
|
|
|
|
fontFamily: "numeralMedium", |
|
|
|
|
fontFamily: "numeralLight", |
|
|
|
|
fontSize: fontSize.desktop.div, |
|
|
|
|
cursor: "pointer", |
|
|
|
|
}} |
|
|
|
|
className="timer d-flex mt-4" |
|
|
|
|
onClick={() => this.setState({ resendStatus: false })} |
|
|
|
|
@ -185,8 +195,9 @@ export default class Code extends Component { |
|
|
|
|
<div |
|
|
|
|
style={{ |
|
|
|
|
color: "#A5A5A5", |
|
|
|
|
fontFamily: "numeralMedium", |
|
|
|
|
fontFamily: "numeralLight", |
|
|
|
|
fontSize: fontSize.desktop.div, |
|
|
|
|
cursor: "pointer", |
|
|
|
|
}} |
|
|
|
|
className="timer d-flex mt-2" |
|
|
|
|
onClick={() => |
|
|
|
|
@ -197,27 +208,27 @@ export default class Code extends Component { |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div style={{ width: "48%", height: "100%" }} className="d-flex"> |
|
|
|
|
<img |
|
|
|
|
{/* <img |
|
|
|
|
src={pic} |
|
|
|
|
alt="عکس" |
|
|
|
|
style={{ width: "100%", height: "100%" }} |
|
|
|
|
/> |
|
|
|
|
/> */} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
) : null} |
|
|
|
|
{window.innerWidth < 1000 ? ( |
|
|
|
|
<div className="mobile-auth-code d-flex flex-column"> |
|
|
|
|
<div className="mobile-auth-code d-flex flex-column p-3"> |
|
|
|
|
<img src={logo} alt="دانوین" /> |
|
|
|
|
<div style={{ maxHeight: 60 }} className="d-flex flex-column mb-3"> |
|
|
|
|
<h1>دانوین</h1> |
|
|
|
|
<p> |
|
|
|
|
<div style={{ width: "100%" }} className="d-flex flex-column mb-1"> |
|
|
|
|
<h1 style={{ fontSize: fontSize.mobile.h1 }}>دانوین</h1> |
|
|
|
|
<p style={{ fontSize: fontSize.mobile.p }}> |
|
|
|
|
یک کد تائیدیه به شماره{" "} |
|
|
|
|
<span>{this.props.parent.state.cellphone}</span> ارسال شد <br /> |
|
|
|
|
آن را در قسمت زیر وارد کنید. |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
<div className="mobile-auth-code__codes d-flex"> |
|
|
|
|
<div className="mobile-auth-code__codes d-flex justify-content-around"> |
|
|
|
|
<label htmlFor="code1"> |
|
|
|
|
<input |
|
|
|
|
id="code1" |
|
|
|
|
@ -290,10 +301,14 @@ export default class Code extends Component { |
|
|
|
|
</div> |
|
|
|
|
<button>ثبت</button> |
|
|
|
|
{!this.state.resendStatus ? ( |
|
|
|
|
<Timer seconds={10} parent={this} /> |
|
|
|
|
<Timer seconds={60} parent={this} /> |
|
|
|
|
) : ( |
|
|
|
|
<div |
|
|
|
|
style={{ color: "#A5A5A5", fontFamily: "numeralLight" }} |
|
|
|
|
style={{ |
|
|
|
|
color: "#A5A5A5", |
|
|
|
|
fontFamily: "numeralLight", |
|
|
|
|
fontSize: fontSize.mobile.div, |
|
|
|
|
}} |
|
|
|
|
className="timer d-flex mt-4" |
|
|
|
|
onClick={() => this.setState({ resendStatus: false })} |
|
|
|
|
> |
|
|
|
|
@ -301,7 +316,11 @@ export default class Code extends Component { |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
<div |
|
|
|
|
style={{ color: "#A5A5A5", fontFamily: "numeralLight" }} |
|
|
|
|
style={{ |
|
|
|
|
color: "#A5A5A5", |
|
|
|
|
fontFamily: "numeralLight", |
|
|
|
|
fontSize: fontSize.mobile.div, |
|
|
|
|
}} |
|
|
|
|
className="timer d-flex mt-2" |
|
|
|
|
onClick={() => |
|
|
|
|
this.props.parent.setState({ page: 0, cellphone: "" }) |
|
|
|
|
|
