From 718bfbe105bb3887cf9c5149f2fff3e97be5e71b Mon Sep 17 00:00:00 2001 From: VividTruthKeeper Date: Sat, 12 Feb 2022 12:07:29 +0500 Subject: [PATCH] input validation --- src/components/passwordRec/Stage1.js | 71 ++++++++++++++ src/components/passwordRec/Stage2.js | 142 +++++++++++++++++++++++++++ src/components/sign/PasswordRec.js | 85 ++-------------- src/components/sign/SignForm.js | 36 +++++-- 4 files changed, 251 insertions(+), 83 deletions(-) create mode 100644 src/components/passwordRec/Stage1.js create mode 100644 src/components/passwordRec/Stage2.js diff --git a/src/components/passwordRec/Stage1.js b/src/components/passwordRec/Stage1.js new file mode 100644 index 0000000..08d527e --- /dev/null +++ b/src/components/passwordRec/Stage1.js @@ -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 ( +
+
+

Восстановление пароля

+
+ + { + if (e.target.value !== "") { + setinputValid({ + ...inputValid, + email: true, + validate: true, + }); + } else { + setinputValid({ + ...inputValid, + email: false, + }); + } + }} + /> + {inputValid.validate && ( + + Введите ваш e-mail + + )} +
+
+ +
+
+
+ ); +}; + +export default Stage1; diff --git a/src/components/passwordRec/Stage2.js b/src/components/passwordRec/Stage2.js new file mode 100644 index 0000000..174cc52 --- /dev/null +++ b/src/components/passwordRec/Stage2.js @@ -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 ( +
+
+

Новый пароль

+
+ + { + setInput({ ...input, new: e.target.value }); + setValid(true); + if (e.target.value.length >= 8) { + setInputValid({ + ...inputValid, + newPassword: true, + }); + } else { + setInputValid({ + ...inputValid, + newPassword: false, + }); + } + }} + /> +
+
+ + { + setInput({ ...input, confirm: e.target.value }); + setValid(true); + if (e.target.value.length >= 8) { + setInputValid({ + ...inputValid, + confirm: true, + }); + } else { + setInputValid({ + ...inputValid, + confirm: false, + }); + } + }} + /> + {valid ? ( + + Пароль должен содержать не менее 8 символов + + ) : ( + "" + )} + {valid ? ( + + Пароли должны совпадать + + ) : ( + "" + )} +
+
+ +
+
+
+ ); +}; + +export default Stage2; diff --git a/src/components/sign/PasswordRec.js b/src/components/sign/PasswordRec.js index 0b9d3ad..8b8b4a5 100644 --- a/src/components/sign/PasswordRec.js +++ b/src/components/sign/PasswordRec.js @@ -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 (
{recStage === 1 ? ( -
-
-

Восстановление пароля

-
- - -
-
- -
-
-
+ ) : recStage === 2 ? ( -
-
-

Новый пароль

-
- - -
-
- - -
-
- -
-
-
+ ) : ( "" )} diff --git a/src/components/sign/SignForm.js b/src/components/sign/SignForm.js index c5215b3..281b775 100644 --- a/src/components/sign/SignForm.js +++ b/src/components/sign/SignForm.js @@ -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 (
@@ -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 ? ( + + Введите имя пользователя + + ) : ( + "" + )}
@@ -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 }) => { } }} /> - - Пароль должен содержать не менее 8 символов - + {inputValid.validate ? ( + + Пароль должен содержать не менее 8 символов + + ) : ( + "" + )}

CAPTCHA