TPS
/
halkbank_shahsyotag_frontend
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

input validation

This commit is contained in:
VividTruthKeeper 2022-02-12 12:07:29 +05:00
parent b196b345e1
commit 718bfbe105
4 changed files with 251 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/components/passwordRec/Stage1.js Normal file
View File

@ -0,0 +1,71 @@
// IMPORT MODULES
import React, { useState } from "react";
// IMPORT IMAGES
import Next from "../../icons/arrow-circle-right.svg";
const Stage1 = ({ setRecStage }) => {
const [inputValid, setinputValid] = useState({
email: false,
validate: false,
});
return (
<div className="recovery-block recovery-1">
<form>
<h2 className="form-title">Восстановление пароля</h2>
<div className="reg-input-block rec-input">
<label htmlFor="mail">
Электронная почта<span>*</span>
</label>
<input
type="email"
id="mail"
name="mail"
placeholder="amanamanow@gmail.com"
required
onChange={(e) => {
if (e.target.value !== "") {
setinputValid({
...inputValid,
email: true,
validate: true,
});
} else {
setinputValid({
...inputValid,
email: false,
});
}
}}
/>
{inputValid.validate && (
<span
className={inputValid.email ? "pass-check" : "pass-check active"}
>
Введите ваш e-mail
</span>
)}
</div>
<div className="rec-btn">
<button
disabled={!inputValid.email}
type="button"
className="sign-btn"
onClick={(e) => {
setRecStage((prevStage) => prevStage + 1);
}}
>
<div>
<h3>Отправить</h3>
<div className="btn-img">
<img src={Next} alt="next" />
</div>
</div>
</button>
</div>
</form>
</div>
);
};
export default Stage1;

142
src/components/passwordRec/Stage2.js Normal file
View File

@ -0,0 +1,142 @@
// IMPORT MODULES
import React, { useState, useEffect } from "react";
// IMPORT IMAGES
import Next from "../../icons/arrow-circle-right.svg";
const Stage2 = ({ setRecoveryOpen, setRecStage }) => {
const [inputValid, setInputValid] = useState({
newPassword: false,
confirm: false,
match: false,
});
const [valid, setValid] = useState(false);
const [input, setInput] = useState({
new: "",
confirm: "",
});
const [btnEnabled, setBtnEnabled] = useState(false);
useEffect(() => {
if (inputValid.newPassword && inputValid.confirm && inputValid.match) {
setBtnEnabled(true);
} else {
setBtnEnabled(false);
}
}, [inputValid]);
useEffect(() => {
if (input.new === input.confirm) {
setInputValid({ ...inputValid, match: true });
} else {
setInputValid({ ...inputValid, match: false });
}
}, [input]);
return (
<div className="recovery-block recovery-2">
<form>
<h2 className="form-title">Новый пароль</h2>
<div className="reg-input-block rec-input">
<label htmlFor="new-pass">
Введите пароль<span>*</span>
</label>
<input
type="password"
id="new-pass"
name="new-pass"
required
onChange={(e) => {
setInput({ ...input, new: e.target.value });
setValid(true);
if (e.target.value.length >= 8) {
setInputValid({
...inputValid,
newPassword: true,
});
} else {
setInputValid({
...inputValid,
newPassword: false,
});
}
}}
/>
</div>
<div className="reg-input-block rec-input">
<label htmlFor="confirm">
Повторите пароль<span>*</span>
</label>
<input
type="password"
id="confirm"
name="confirm"
required
onChange={(e) => {
setInput({ ...input, confirm: e.target.value });
setValid(true);
if (e.target.value.length >= 8) {
setInputValid({
...inputValid,
confirm: true,
});
} else {
setInputValid({
...inputValid,
confirm: false,
});
}
}}
/>
{valid ? (
<span
className={
inputValid.confirm && inputValid.newPassword
? "pass-check"
: "pass-check active"
}
>
Пароль должен содержать не менее 8 символов
</span>
) : (
""
)}
{valid ? (
<span
className={inputValid.match ? "pass-check" : "pass-check active"}
>
Пароли должны совпадать
</span>
) : (
""
)}
</div>
<div className="rec-btn">
<button
disabled={!btnEnabled}
type="button"
className="sign-btn"
onClick={(e) => {
e.preventDefault();
setRecoveryOpen(false);
setTimeout(() => {
setRecStage(1);
}, 400);
}}
>
<div>
<h3>Изменить</h3>
<div className="btn-img">
<img src={Next} alt="next" />
</div>
</div>
</button>
</div>
</form>
</div>
);
};
export default Stage2;

85
src/components/sign/PasswordRec.js
View File

@ -4,6 +4,10 @@ import React, { useState, useEffect, useRef } from "react";
// IMPORT IMAGES
import Next from "../../icons/arrow-circle-right.svg";
// IMPORT PERSONAL COMPONENTS
import Stage1 from "../passwordRec/Stage1";
import Stage2 from "../passwordRec/Stage2";
const PasswordRec = ({ recoveryOpen, setRecoveryOpen }) => {
const [recStage, setRecStage] = useState(1);
const ref = useRef();
@ -23,87 +27,18 @@ const PasswordRec = ({ recoveryOpen, setRecoveryOpen }) => {
window.removeEventListener("mousedown", () => {});
};
}, [recoveryOpen, setRecoveryOpen]);
return (
<section className={recoveryOpen ? "recovery active" : "recovery"}>
<div className="recovery-container">
<div className="recovery-inner" ref={ref}>
{recStage === 1 ? (
<div className="recovery-block recovery-1">
<form>
<h2 className="form-title">Восстановление пароля</h2>
<div className="reg-input-block rec-input">
<label htmlFor="mail">
Электронная почта<span>*</span>
</label>
<input
type="email"
id="mail"
name="mail"
placeholder="amanamanow@gmail.com"
required
/>
</div>
<div className="rec-btn">
<button
type="button"
className="sign-btn"
onClick={(e) => {
setRecStage((prevStage) => prevStage + 1);
}}
>
<div>
<h3>Отправить</h3>
<div className="btn-img">
<img src={Next} alt="next" />
</div>
</div>
</button>
</div>
</form>
</div>
<Stage1 setRecStage={setRecStage} />
) : recStage === 2 ? (
<div className="recovery-block recovery-2">
<form>
<h2 className="form-title">Новый пароль</h2>
<div className="reg-input-block rec-input">
<label htmlFor="new-pass">
Введите пароль<span>*</span>
</label>
<input
type="password"
id="new-pass"
name="new-pass"
required
/>
</div>
<div className="reg-input-block rec-input">
<label htmlFor="confirm">
Повторите пароль<span>*</span>
</label>
<input type="password" id="confirm" name="confirm" required />
</div>
<div className="rec-btn">
<button
type="button"
className="sign-btn"
onClick={(e) => {
e.preventDefault();
setRecoveryOpen(false);
setTimeout(() => {
setRecStage(1);
}, 400);
}}
>
<div>
<h3>Изменить</h3>
<div className="btn-img">
<img src={Next} alt="next" />
</div>
</div>
</button>
</div>
</form>
</div>
<Stage2
setRecoveryOpen={setRecoveryOpen}
setRecStage={setRecStage}
/>
) : (
""
)}

36
src/components/sign/SignForm.js
View File

@ -10,6 +10,7 @@ const SignForm = ({ setRecoveryOpen }) => {
const [inputValid, setInputValid] = useState({
login: false,
password: false,
validate: false,
});
const [btnEnabled, setBtnEnabled] = useState(false);
@ -20,6 +21,7 @@ const SignForm = ({ setRecoveryOpen }) => {
setBtnEnabled(false);
}
}, [inputValid]);
return (
<section className="sign-form">
<form>
@ -36,12 +38,23 @@ const SignForm = ({ setRecoveryOpen }) => {
name="login"
onChange={(e) => {
if (e.target.value !== "") {
setInputValid({ ...inputValid, login: true });
setInputValid({ ...inputValid, login: true, validate: true });
} else {
setInputValid({ ...inputValid, login: false });
}
}}
/>
{inputValid.validate ? (
<span
className={
inputValid.login ? "pass-check" : "pass-check active"
}
>
Введите имя пользователя
</span>
) : (
""
)}
</div>
<div className="input-block">
<label htmlFor="password">Введите пароль</label>
@ -50,6 +63,9 @@ const SignForm = ({ setRecoveryOpen }) => {
type="password"
id="password"
onChange={(e) => {
if (e.target.value !== "") {
setInputValid({ ...inputValid, validate: true });
}
if (e.target.value.length >= 8) {
setInputValid({ ...inputValid, password: true });
} else {
@ -57,13 +73,17 @@ const SignForm = ({ setRecoveryOpen }) => {
}
}}
/>
<span
className={
inputValid.password ? "pass-check" : "pass-check active"
}
>
Пароль должен содержать не менее 8 символов
</span>
{inputValid.validate ? (
<span
className={
inputValid.password ? "pass-check" : "pass-check active"
}
>
Пароль должен содержать не менее 8 символов
</span>
) : (
""
)}
</div>
<div className="captcha">
<h1>CAPTCHA</h1>