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

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}
</>
);
}
}