michael/cinny
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity

Fix Password don't match on register page

Browse source 
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2021-10-06 12:35:51 +05:30
parent aefed73f5a
commit 808fc8dc0d
1 changed files with 25 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/app/templates/auth/Auth.jsx
View file

@ -32,6 +32,7 @@ const EMAIL_REGEX = /([a-z0-9]+[_a-z0-9.-][a-z0-9]+)@([a-z0-9-]+(?:.[a-z0-9-]+).
const BAD_EMAIL_ERROR = 'Invalid email address'; const BAD_EMAIL_ERROR = 'Invalid email address';
function isValidInput(value, regex) { function isValidInput(value, regex) {
if (typeof regex === 'string') return regex === value;
return regex.test(value); return regex.test(value);
} }
function renderErrorMessage(error) { function renderErrorMessage(error) {
@ -39,24 +40,25 @@ function renderErrorMessage(error) {
$error.textContent = error; $error.textContent = error;
$error.style.display = 'block'; $error.style.display = 'block';
} }
function showBadInputError($input, error) { function showBadInputError($input, error, stopAutoFocus) {
renderErrorMessage(error); renderErrorMessage(error);
$input.focus(); if (!stopAutoFocus) $input.focus();
const myInput = $input; const myInput = $input;
myInput.style.border = '1px solid var(--bg-danger)'; myInput.style.border = '1px solid var(--bg-danger)';
myInput.style.boxShadow = 'none'; myInput.style.boxShadow = 'none';
document.getElementById('auth_submit-btn').disabled = true; document.getElementById('auth_submit-btn').disabled = true;
} }
function validateOnChange(e, regex, error) { function validateOnChange(targetInput, regex, error, stopAutoFocus) {
if (!isValidInput(e.target.value, regex) && e.target.value) { if (!isValidInput(targetInput.value, regex) && targetInput.value) {
showBadInputError(e.target, error); showBadInputError(targetInput, error, stopAutoFocus);
return; return false;
} }
document.getElementById('auth_error').style.display = 'none'; document.getElementById('auth_error').style.display = 'none';
e.target.style.removeProperty('border'); targetInput.style.removeProperty('border');
e.target.style.removeProperty('box-shadow'); targetInput.style.removeProperty('box-shadow');
document.getElementById('auth_submit-btn').disabled = false; document.getElementById('auth_submit-btn').disabled = false;
return true;
} }
/** /**
@ -195,8 +197,8 @@ function Auth({ type }) {
<Input <Input
forwardRef={usernameRef} forwardRef={usernameRef}
onChange={(e) => (type === 'login' onChange={(e) => (type === 'login'
? validateOnChange(e, LOCALPART_LOGIN_REGEX, BAD_LOCALPART_ERROR) ? validateOnChange(e.target, LOCALPART_LOGIN_REGEX, BAD_LOCALPART_ERROR)
: validateOnChange(e, LOCALPART_SIGNUP_REGEX, BAD_LOCALPART_ERROR))} : validateOnChange(e.target, LOCALPART_SIGNUP_REGEX, BAD_LOCALPART_ERROR))}
id="auth_username" id="auth_username"
label="Username" label="Username"
required required
@ -212,7 +214,15 @@ function Auth({ type }) {
<div className="password__wrapper"> <div className="password__wrapper">
<Input <Input
forwardRef={passwordRef} forwardRef={passwordRef}
onChange={(e) => validateOnChange(e, ((type === 'login') ? PASSWORD_REGEX : PASSWORD_STRENGHT_REGEX), BAD_PASSWORD_ERROR)} onChange={(e) => {
const isValidPass = validateOnChange(e.target, ((type === 'login') ? PASSWORD_REGEX : PASSWORD_STRENGHT_REGEX), BAD_PASSWORD_ERROR);
if (type === 'register' && isValidPass) {
validateOnChange(
confirmPasswordRef.current, passwordRef.current.value,
CONFIRM_PASSWORD_ERROR, true,
);
}
}}
id="auth_password" id="auth_password"
type="password" type="password"
label="Password" label="Password"
@ -233,7 +243,9 @@ function Auth({ type }) {
<div className="password__wrapper"> <div className="password__wrapper">
<Input <Input
forwardRef={confirmPasswordRef} forwardRef={confirmPasswordRef}
onChange={(e) => validateOnChange(e, new RegExp(`^(${passwordRef.current.value})$`), CONFIRM_PASSWORD_ERROR)} onChange={(e) => {
validateOnChange(e.target, passwordRef.current.value, CONFIRM_PASSWORD_ERROR);
}}
id="auth_confirmPassword" id="auth_confirmPassword"
type="password" type="password"
label="Confirm password" label="Confirm password"
@ -251,7 +263,7 @@ function Auth({ type }) {
</div> </div>
<Input <Input
forwardRef={emailRef} forwardRef={emailRef}
onChange={(e) => validateOnChange(e, EMAIL_REGEX, BAD_EMAIL_ERROR)} onChange={(e) => validateOnChange(e.target, EMAIL_REGEX, BAD_EMAIL_ERROR)}
id="auth_email" id="auth_email"
type="email" type="email"
label="Email" label="Email"