diff --git a/src/features/registration/components/registration-form.tsx b/src/features/registration/components/registration-form.tsx index 405e795..1585f88 100644 --- a/src/features/registration/components/registration-form.tsx +++ b/src/features/registration/components/registration-form.tsx @@ -6,6 +6,9 @@ import { Text, VStack, Input, + Center, + Icon, + HStack, } from "@chakra-ui/react"; import { ViewIcon, ViewOffIcon } from "@chakra-ui/icons"; import { useState } from "react"; @@ -15,8 +18,13 @@ import { // DoPasswordsMatch, IsValidEmail, IsValidName, + PasswordContainsLowercase, + PasswordContainsNumber, + PasswordContainsSymbol, + PasswordContainsUppercase, } from "../../../utilities/validators"; import SignIn from "./sign-in"; +import { ImCheckboxChecked, ImCross } from 'react-icons/im' export default function RegistrationForm() { const [input, setInput] = useState({ @@ -31,7 +39,7 @@ export default function RegistrationForm() { givenName: "", famName: "", email: "", - password: "", + password: { text: "", numChecked: 0, color: "", checks: { "Minimum length": false, "Number": false, "Symbol": false, "Uppercase": false, "Lowercase": false } }, confirmPassword: "", valid: false, }); @@ -63,7 +71,12 @@ export default function RegistrationForm() { const validateInput = (event: any) => { let { name, value } = event.target; setError((prev) => { - const errorState = { ...prev, [name]: "" }; + let errorState; + if (name == "password") { + errorState = { ...prev } + } else { + errorState = { ...prev, [name]: "" }; + } errorState.valid = canEnableSignUpButton(); switch (name) { @@ -90,12 +103,65 @@ export default function RegistrationForm() { // case "confirmPassword": setNoText(typeof value != "undefined" && value.length < 1); - if (input.password && !IsPasswordMinLength(value)) { - errorState.password = - "Password must have a minimum of 8 characters, contain numbers, symbols, uppercase and lowercase characters."; + errorState.password.text = "Strong, your password is secure 💪"; + errorState.password.checks = { "Minimum length": true, "Number": true, "Symbol": true, "Uppercase": true, "Lowercase": true }; + + let numChecked = 5; + + if (!PasswordContainsSymbol(value)) { + errorState.password.text = "Almost there, add a special symbol 😉" + errorState.password.checks["Symbol"] = false errorState.valid = false; - } else { - errorState.password = ""; + numChecked -= 1; + } + + if (!PasswordContainsNumber(value)) { + errorState.password.text = "So-so, should be alphanumeric 😕" + errorState.password.checks["Number"] = false + errorState.valid = false; + numChecked -= 1; + } + + if (!PasswordContainsUppercase(value)) { + errorState.password.text = + "Weak, must have at one uppercase and lowercase letter 😖"; + errorState.password.checks["Uppercase"] = false + errorState.valid = false; + numChecked -= 1; + } + + if (!PasswordContainsLowercase(value)) { + errorState.password.text = + "Weak, must have at one uppercase and lowercase letter 😖"; + errorState.password.checks["Lowercase"] = false + errorState.valid = false; + numChecked -= 1; + } + + if (!IsPasswordMinLength(value)) { + errorState.password.text = + "Must have at least 8 characters."; + errorState.password.checks["Minimum length"] = false + errorState.valid = false; + numChecked -= 1; + } + + errorState.password.numChecked = numChecked; + switch (numChecked) { + case 1: + errorState.password.color = "red"; + break; + case 2: + case 3: + errorState.password.color = "yellow.300"; + break; + case 4: + errorState.password.color = "blue"; + break; + case 5: + default: + errorState.password.color = "green.400"; + break; } // if (!DoPasswordsMatch(input.password, value)) { @@ -167,7 +233,21 @@ export default function RegistrationForm() { - {error.password && {error.password}} + + +
+ + {error.password.text} + + {[...Array(error.password.numChecked)].map(() => )} + {[...Array(5 - error.password.numChecked)].map(() => )} + + + {Object.entries(error.password.checks).map(([item, checked]) => ( + {item} + ))} + +
{/* Confirm Password diff --git a/src/utilities/validators.ts b/src/utilities/validators.ts index 085d4c4..013e80a 100644 --- a/src/utilities/validators.ts +++ b/src/utilities/validators.ts @@ -11,7 +11,24 @@ export function IsPasswordMinLength(password: string) { // var letter = /[a-zA-Z]/; // var number = /[0-9]/; // var valid = number.test(password) && letter.test(password); //match a letter _and_ a number - return /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/.test(password) && password.length >= 8; + // return /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/.test(password) && password.length >= 8; + return password.length >= 8; +} + +export function PasswordContainsNumber(password: string) { + return /^(?=.*?[0-9]).+$/.test(password); +} + +export function PasswordContainsSymbol(password: string) { + return /^(?=.*?[#?!@$%^&*-]).+$/.test(password); +} + +export function PasswordContainsUppercase(password: string) { + return /^(?=.*?[A-Z]).+$/.test(password); +} + +export function PasswordContainsLowercase(password: string) { + return /^(?=.*?[a-z]).+$/.test(password); }