You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
333 lines
12 KiB
333 lines
12 KiB
import React, { Component } from "react"; |
|
import Timer from "../Timer/index"; |
|
|
|
import logo from "../../../../assets/icons/logo.png"; |
|
|
|
import "./index.scss"; |
|
|
|
const maxDesktopSize = 1250; |
|
const maxMobileSize = 550; |
|
|
|
const fontSize = { |
|
desktop: { |
|
input: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 85, |
|
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) { |
|
super(props); |
|
this.state = { |
|
resendStatus: false, |
|
}; |
|
} |
|
|
|
componentDidMount() { |
|
this.inputRef1.focus(); |
|
} |
|
|
|
onInput = (e) => { |
|
e.target.value = e.target.value |
|
.replace(/[\u0660-\u0669\u06f0-\u06f9]/g, function (c) { |
|
return c.charCodeAt(0) & 0xf; |
|
}) |
|
.replace(/[^\d]/, "") |
|
.slice(-1); |
|
}; |
|
|
|
changeValue = (e) => { |
|
if (e.target.value.match("^[0-9]{1}$")) { |
|
if (e.target.name === "o1") { |
|
this.setState({ o1: e.target.value }); |
|
this.inputRef2.focus(); |
|
} else if (e.target.name === "o2") { |
|
this.setState({ o2: e.target.value }); |
|
this.inputRef3.focus(); |
|
} else if (e.target.name === "o3") { |
|
this.setState({ o3: e.target.value }); |
|
this.inputRef4.focus(); |
|
} else if (e.target.name === "o4") { |
|
this.setState({ o4: e.target.value }); |
|
const o4 = e.target.value; |
|
const { o1, o2, o3 } = this.state; |
|
this.props.parent.setState({ otp: `${o1}${o2}${o3}${o4}` }); |
|
return; |
|
} |
|
} else { |
|
return; |
|
} |
|
}; |
|
|
|
keyboardEvent = (e) => { |
|
if (e.keyCode === 8) { |
|
this.setState({ |
|
[e.target.name]: "", |
|
}); |
|
if (e.target.name === "o1") { |
|
return; |
|
} else if (e.target.name === "o2") { |
|
this.inputRef1.focus(); |
|
return; |
|
} else if (e.target.name === "o3") { |
|
this.inputRef2.focus(); |
|
return; |
|
} else if (e.target.name === "o4") { |
|
this.inputRef3.focus(); |
|
return; |
|
} |
|
} |
|
}; |
|
|
|
render() { |
|
return ( |
|
<> |
|
{window.innerWidth > 1000 ? ( |
|
<div className="auth-code d-flex justify-content-center align-items-center"> |
|
<div className="auth-code__box d-flex"> |
|
<div |
|
style={{ width: "48%", height: "100%" }} |
|
className="d-flex flex-column justify-content-center align-items-center p-5" |
|
> |
|
<img src={logo} alt={window.test("دانوین")} /> |
|
<div className="auth-code__box--codes d-flex justify-content-around"> |
|
<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)} |
|
style={{ fontSize: fontSize.desktop.input }} |
|
/> |
|
</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)} |
|
style={{ fontSize: fontSize.desktop.input }} |
|
/> |
|
</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)} |
|
style={{ fontSize: fontSize.desktop.input }} |
|
/> |
|
</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)} |
|
style={{ fontSize: fontSize.desktop.input }} |
|
/> |
|
</label> |
|
</div> |
|
<button style={{ fontSize: fontSize.desktop.button }}> |
|
{window.t("ثبت")}{" "} |
|
</button> |
|
{!this.state.resendStatus ? ( |
|
<Timer seconds={60} parent={this} /> |
|
) : ( |
|
<div |
|
style={{ |
|
color: "#A5A5A5", |
|
fontFamily: "numeralLight", |
|
fontSize: fontSize.desktop.div, |
|
cursor: "pointer", |
|
}} |
|
className="timer d-flex mt-4" |
|
onClick={() => this.setState({ resendStatus: false })} |
|
> |
|
{window.t("ارسال مجدد کد فعال سازی")}{" "} |
|
</div> |
|
)} |
|
<div |
|
style={{ |
|
color: "#A5A5A5", |
|
fontFamily: "numeralLight", |
|
fontSize: fontSize.desktop.div, |
|
cursor: "pointer", |
|
}} |
|
className="timer d-flex mt-2" |
|
onClick={() => |
|
this.props.parent.setState({ page: 0, cellphone: "" }) |
|
} |
|
> |
|
{window.t("بازگشت به مرحله قبل و اصلاح شماره")}{" "} |
|
</div> |
|
</div> |
|
<div |
|
style={{ width: "48%", height: "100%" }} |
|
className="d-flex" |
|
></div> |
|
</div> |
|
</div> |
|
) : null} |
|
{window.innerWidth < 1000 ? ( |
|
<div className="mobile-auth-code d-flex flex-column p-3"> |
|
<img src={logo} alt={window.t("دانوین")} /> |
|
<div style={{ width: "100%" }} className="d-flex flex-column mb-1"> |
|
<h1 style={{ fontSize: fontSize.mobile.h1 }}> |
|
{window.t("دانوین")} |
|
</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 justify-content-around"> |
|
<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)} |
|
// style={{ fontSize: fontSize.desktop.input }} |
|
/> |
|
</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>{window.t("ثبت")}</button> |
|
{!this.state.resendStatus ? ( |
|
<Timer seconds={60} parent={this} /> |
|
) : ( |
|
<div |
|
style={{ |
|
color: "#A5A5A5", |
|
fontFamily: "numeralLight", |
|
fontSize: fontSize.mobile.div, |
|
}} |
|
className="timer d-flex mt-4" |
|
onClick={() => this.setState({ resendStatus: false })} |
|
> |
|
{window.t("ارسال مجدد کد فعال سازی")}{" "} |
|
</div> |
|
)} |
|
<div |
|
style={{ |
|
color: "#A5A5A5", |
|
fontFamily: "numeralLight", |
|
fontSize: fontSize.mobile.div, |
|
}} |
|
className="timer d-flex mt-2" |
|
onClick={() => |
|
this.props.parent.setState({ page: 0, cellphone: "" }) |
|
} |
|
> |
|
{window.t("بازگشت به مرحله قبل و اصلاح شماره")}{" "} |
|
</div> |
|
</div> |
|
) : null} |
|
</> |
|
); |
|
} |
|
}
|
|
|