From 605e05fad163692d3ee0b678568fa459dc496bc0 Mon Sep 17 00:00:00 2001 From: mskor Date: Thu, 5 Dec 2024 00:30:43 +0000 Subject: [PATCH] Updated: All of the front end works! --- Client/src/pages/index.tsx | 138 +++++++++++++++++++------------------ 1 file changed, 71 insertions(+), 67 deletions(-) diff --git a/Client/src/pages/index.tsx b/Client/src/pages/index.tsx index 30993a0..ce41d9a 100644 --- a/Client/src/pages/index.tsx +++ b/Client/src/pages/index.tsx @@ -5,51 +5,21 @@ import React, {useState} from "react"; import {useRef} from "react"; export default function Home() { - - // there's 100% a better way of handling multiple related states - // i'd need to redo how these states function as currently, they will only - // be considered valid when all of the checks pass AND one of the fields changes - // meaning that the passwords won't match correctly as i am checking whether they WERE valid PRIOR to one of them updating - const [validPasswordLength, setValidPasswordLength] = useState(false); - const [validMinimumCharacters, setValidMinimumCharacters] = useState(false); - const [validSpecialCharacters, setValidSpecialCharacters] = useState(false); - const [validIdenticalPasswords, setValidIdenticalPasswords] = useState(false); - const passwordInput = useRef(null); - const confirmInput = useRef(null); + + const [passwordValue, setPasswordValue] = useState(''); + const [confirmValue, setConfirmValue] = useState(''); + const [passwordChangeResponseText, setPasswordChangeResponseText] = useState(''); + const [passwordChangeStatus, setPasswordChangeStatus] = useState(false); function handlePasswordFieldChange(e: React.ChangeEvent) { - setValidPasswordLength(validatePasswordLength(e.target.value)); - setValidMinimumCharacters(validatePasswordMinimumCharacters(e.target.value)); - setValidSpecialCharacters(validatePasswordSpecialCharacters(e.target.value)); - setValidIdenticalPasswords(validatePasswordsEqual(e.target.value)); - console.log(validPasswordLength, validMinimumCharacters, validSpecialCharacters, validIdenticalPasswords); - } - - function validatePasswordLength(password: string) { - // match any characters as long as the string is between 7 and 14 characters - const regex = new RegExp('^.{7,14}$'); - return regex.test(password); + setPasswordChangeResponseText(''); + setPasswordValue(e.target.value); } - function validatePasswordMinimumCharacters(password: string) { - // look ahead for the special characters and digits and match them at least once - const regex = new RegExp('^(?=.*?[!£$^*#])(?=.*?[0-9]).*$'); - return regex.test(password); - } + // the following method is most likely overkill and is redundant with the other checks, however, i spent a while working out the regex and so it shall stay - function validatePasswordSpecialCharacters(password: string) { - // check for any characters not in the allowed list - const regex = new RegExp('([^a-zA-Z0-9!£$^*#\d\s])'); - return !regex.test(password); - } - - function validatePasswordsEqual(password: string) { - // this feels wrong - return password === confirmInput.current.value; - } - - function isPasswordValidRegex(password: string) { - // following regex does the following: + const validatePassword = (password: string) => { + // following regex does the following: // ^ -> start of word // (?=.*?[XXX]) -> look ahead / match any character / between zero and unlimited times/ that matches any of the characters in XXX // three matching groups for characters a-z lower and upper case, digits from 0-9 and for any of the valid 'special' characters @@ -57,24 +27,58 @@ export default function Home() { // {7,14} -> match the previous tokens only between 7-14 times // $ -> match the end of the password const regex = new RegExp('^(?=.*?[a-zA-Z])(?=.*?[0-9])(?=.*?[!£$^*#])[a-zA-Z0-9!£$^*#]{7,14}$'); - console.log(regex.test(password)); return regex.test(password) - } + + }; + + const validatePasswordLength = (password: string) => { + const regex = new RegExp('^.{7,14}$'); + return regex.test(password); + }; + const validatePasswordMinimumCharacters = (password: string) => { + // look ahead for the special characters and digits and match them at least once + const regex = new RegExp('^(?=.*?[!£$^*#])(?=.*?[0-9]).*$'); + return regex.test(password); + }; + + const validatePasswordSpecialCharacters = (password: string) => { + // check for any characters not in the allowed list + const regex = new RegExp('^[a-zA-Z0-9!£$^*#]*$'); + return regex.test(password); + } + + const validatePasswordConfirmMatch = (passwordVal: string, confirmVal: string) => { + return passwordVal === confirmVal; + } + + const passwordValueValid = validatePassword(passwordValue); + const validPasswordLength = validatePasswordLength(passwordValue); + const validPasswordMinimumCharacters = validatePasswordMinimumCharacters(passwordValue); + const validPasswordSpecialCharacters = validatePasswordSpecialCharacters(passwordValue); + const validPasswordConfirmMatch = validatePasswordConfirmMatch(passwordValue, confirmValue); + const disableButton = !(validPasswordLength && validPasswordMinimumCharacters && validPasswordSpecialCharacters && validPasswordConfirmMatch); + async function handleFormSubmit(e: React.MouseEvent) { e.preventDefault(); - if(isPasswordValidRegex(passwordInput.current.value) - && isPasswordValidRegex(confirmInput.current.value) - && (confirmInput.current.value === passwordInput.current.value)) { - console.log("VALID PASSWORDS"); + if(passwordValueValid && validPasswordLength && validPasswordMinimumCharacters && validPasswordSpecialCharacters) { const response = await fetch("https://localhost:7144/Password/change", { method: 'POST', headers: {'Content-Type': 'application/json'}, - body: JSON.stringify({password: passwordInput.current.value}) + body: JSON.stringify({password: passwordValue}) }); - console.log(response); + if(response.status == 200) { + console.log("SUCCESSFUL PASSWORD CHANGE"); + setPasswordChangeResponseText('Password changed successfully!'); + setPasswordChangeStatus(true); + } + else { + console.log("ERROR DURING PASSWORD CHANGE"); + setPasswordChangeResponseText('Error during password change'); + setPasswordChangeStatus(false); + } } - console.log('Post password to back end'); + // need to handle the response back } return ( @@ -98,10 +102,10 @@ export default function Home() {
@@ -117,38 +121,38 @@ export default function Home() {
setConfirmValue(e.target.value)} />
- +
+ {passwordChangeResponseText} +
    -
  1. - Password must be between 7-14 characters in length -
    2. -
  2. - Password must contain at least 1 number and one special characters -
    3. -
  3. - Password does not contain special characters other than !£$^*# -
    4. -
  4. - Both passwords must be identical -
    5. + +
  5. + Password must be between 7-14 characters in length
    6. +
  6. + Password must contain at least 1 number and one special characters
    7. +
  7. + Password does not contain special characters other than !£$^*#
    8. +
  8. + Both passwords must be identical