Skip to content

Commit

Permalink
Show password requirement error during input (coronasafe#3934)
Browse files Browse the repository at this point in the history 
* Show password requirement error during input

* Improve password requirements message design

* Minor bug fix

* Show confirm password message only if not empty

* Move validation to a separate function
  • Loading branch information
@Ashesh3 @aeswibon
Ashesh3 authored and aeswibon committed Dec 8, 2022
1 parent 4cdec34 commit 3141a59
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 48 deletions.
8 changes: 5 additions & 3 deletions src/Components/Common/OnlineUsersSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,9 +200,11 @@ export const OnlineUsersSelect = (props: Props) => {
></span>
<span className="font-normal block truncate">
{user.first_name} {user.last_name}{" "}
{user.home_facility_object?.name &&
<span className="text-gray-700 ml-2">{user.home_facility_object?.name}</span>
}
{user.home_facility_object?.name && (
<span className="text-gray-700 ml-2">
{user.home_facility_object?.name}
</span>
)}
</span>
</div>
{user.id?.toString() == userId && (
Expand Down
107 changes: 62 additions & 45 deletions src/Components/Users/UserAdd.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,9 @@ export const UserAdd = (props: UserProps) => {
>([]);
const [phoneIsWhatsApp, setPhoneIsWhatsApp] = useState(true);
const [usernameInputInFocus, setUsernameInputInFocus] = useState(false);
const [passwordInputInFocus, setPasswordInputInFocus] = useState(false);
const [confirmPasswordInputInFocus, setConfirmPasswordInputInFocus] =
useState(false);
const [usernameInput, setUsernameInput] = useState("");

const userExistsEnums = {
Expand Down Expand Up @@ -422,7 +425,7 @@ export const UserAdd = (props: UserProps) => {
return;
case "c_password":
if (!state.form.password) {
errors.password = "Confirm password is required";
errors.c_password = "Confirm password is required";
invalidForm = true;
} else if (state.form.password !== state.form.c_password) {
errors.c_password = "Passwords not matching";
Expand Down Expand Up @@ -507,6 +510,21 @@ export const UserAdd = (props: UserProps) => {
return true;
};

const validateRule = (valid: boolean, content: JSX.Element | string) => {
return (
<div>
{valid ? (
<i className="fas fa-circle-xmark text-red-500" />
) : (
<i className="fas fa-circle-check text-green-500" />
)}{" "}
<span className={clsx(valid ? "text-red-500" : "text-primary-500")}>
{content}
</span>
</div>
);
};

const handleSubmit = async (e: any) => {
e.preventDefault();
const validated = validateForm();
Expand Down Expand Up @@ -691,57 +709,28 @@ export const UserAdd = (props: UserProps) => {
<span>
<i className="fas fa-circle-dot" /> checking...
</span>
) : usernameExists === userExistsEnums.exists ? (
<span className="text-red-500">
<i className="fas fa-circle-xmark text-red-500" />{" "}
User already exists
</span>
) : (
usernameExists === userExistsEnums.avaliable && (
<span className="text-primary-500">
<i className="fas fa-circle-check text-green-500" />{" "}
Available!
</span>
validateRule(
usernameExists === userExistsEnums.exists,
"Username should not be taken"
)
)}
</>
)}
</div>
<div>
{state.form.username?.length < 2 ? (
<i className="fas fa-circle-xmark text-red-500" />
) : (
<i className="fas fa-circle-check text-green-500" />
)}{" "}
<span
className={clsx(
state.form.username?.length < 2
? "text-red-500"
: "text-primary-500"
)}
>
Username should be atleast 2 characters long
</span>
{validateRule(
state.form.username?.length < 2,
"Username should be atleast 2 characters long"
)}
</div>
<div>
{!/[^.@+_-]/.test(
state.form.username[state.form.username?.length - 1]
) ? (
<i className="fas fa-circle-xmark text-red-500" />
) : (
<i className="fas fa-circle-check text-green-500" />
)}{" "}
<span
className={clsx(
!/[^.@+_-]/.test(
state.form.username[state.form.username?.length - 1]
)
? "text-red-500"
: "text-primary-500"
)}
>
Username can't end with ^ . @ + _ -
</span>
{validateRule(
!/[^.@+_-]/.test(
state.form.username[state.form.username?.length - 1]
),
"Username can't end with ^ . @ + _ -"
)}
</div>
</div>
)}
Expand Down Expand Up @@ -774,9 +763,30 @@ export const UserAdd = (props: UserProps) => {
value={state.form.password}
onChange={handleChange}
errors={state.errors.password}
onFocus={() => setPasswordInputInFocus(true)}
onBlur={() => setPasswordInputInFocus(false)}
/>
{passwordInputInFocus && (
<div className="pl-2 text-small text-gray-500">
{validateRule(
state.form.password?.length < 8,
"Password should be atleast 8 characters long"
)}
{validateRule(
state.form.password === state.form.password.toUpperCase(),
"Password should contain at least 1 lowercase letter"
)}
{validateRule(
state.form.password === state.form.password.toLowerCase(),
"Password should contain at least 1 uppercase letter"
)}
{validateRule(
!/\d/.test(state.form.password),
"Password should contain at least 1 number"
)}
</div>
)}
</div>

<div>
<InputLabel>Confirm Password*</InputLabel>
<TextInputField
Expand All @@ -789,9 +799,16 @@ export const UserAdd = (props: UserProps) => {
value={state.form.c_password}
onChange={handleChange}
errors={state.errors.c_password}
onFocus={() => setConfirmPasswordInputInFocus(true)}
onBlur={() => setConfirmPasswordInputInFocus(false)}
/>
{confirmPasswordInputInFocus &&
state.form.c_password.length > 0 &&
validateRule(
state.form.c_password !== state.form.password,
"Confirm password should match the entered password"
)}
</div>

<div>
<InputLabel>First name*</InputLabel>
<TextInputField
Expand Down

0 comments on commit 3141a59

Please sign in to comment.