Updated: All of the front end works!

Client/src/pages/index.tsx

@@ -6,50 +6,20 @@ import {useRef} from "react";
 
 export default function Home() {
     
-    // there's 100% a better way of handling multiple related states
+    const [passwordValue, setPasswordValue] = useState('');
-    // i'd need to redo how these states function as currently, they will only 
+    const [confirmValue, setConfirmValue] = useState('');
-    // 	be considered valid when all of the checks pass AND one of the fields changes
+    const [passwordChangeResponseText, setPasswordChangeResponseText] = useState('');
-    //	meaning that the passwords won't match correctly as i am checking whether they WERE valid PRIOR to one of them updating
+    const [passwordChangeStatus, setPasswordChangeStatus] = useState(false);
-    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);
 
     function handlePasswordFieldChange(e: React.ChangeEvent<HTMLInputElement>) {
-	setValidPasswordLength(validatePasswordLength(e.target.value));
+	setPasswordChangeResponseText('');
-	setValidMinimumCharacters(validatePasswordMinimumCharacters(e.target.value));
+	setPasswordValue(e.target.value);
-	setValidSpecialCharacters(validatePasswordSpecialCharacters(e.target.value));
-	setValidIdenticalPasswords(validatePasswordsEqual(e.target.value));
-	console.log(validPasswordLength, validMinimumCharacters, validSpecialCharacters, validIdenticalPasswords);
     }
 
-    function validatePasswordLength(password: string) {
+    // 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
-	// match any characters as long as the string is between 7 and 14 characters
-	const regex = new RegExp('^.{7,14}$');
-	return regex.test(password);
-    }
 
-    function validatePasswordMinimumCharacters(password: string) {
+    const validatePassword = (password: string) => {
-	// look ahead for the special characters and digits and match them at least once
+		// following regex does the following:
-	const regex = new RegExp('^(?=.*?[!£$^*#])(?=.*?[0-9]).*$');
-	return regex.test(password);
-    }
-
-    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:
 	// 	^ -> 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<HTMLButtonElement>) {
         e.preventDefault();
-	if(isPasswordValidRegex(passwordInput.current.value) 
+	if(passwordValueValid && validPasswordLength && validPasswordMinimumCharacters && validPasswordSpecialCharacters) {
-		&& isPasswordValidRegex(confirmInput.current.value)
-		&& (confirmInput.current.value === passwordInput.current.value)) {
-		console.log("VALID PASSWORDS");
 		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() {
                             <div className="mt-2">
                                 <input
                                     id="password"
-				    ref={passwordInput}
                                     name="password"
                                     type="password"
                                     data-testid="password"
+				    value={passwordValue}
                                     className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                                     onChange={handlePasswordFieldChange}
                                 />
@@ -117,38 +121,38 @@ export default function Home() {
                             <div className="mt-2">
                                 <input
                                     id="confirm"
-				    ref={confirmInput}
+				    value={confirmValue}
                                     name="confirm"
                                     type="password"
                                     className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-				    onChange={handlePasswordFieldChange}
+				    onChange={(e) => setConfirmValue(e.target.value)}
                                 />
                             </div>
                         </div>
                         <div>
                             <button
-                                className={"flex w-full justify-center bg-gray-900 hover:bg-gray-700 active:bg-gray-800 px-4 py-2 rounded-md text-white"}
+                                className={"flex w-full justify-center bg-gray-900 hover:bg-gray-700 active:bg-gray-800 disabled:cursor-not-allowed disabled:bg-gray-400 px-4 py-2 rounded-md text-white"}
-                                onClick={(e) => handleFormSubmit(e)}>
+                                onClick={(e) => handleFormSubmit(e)}
+				disabled={disableButton}>
                                 Submit
                             </button>
                         </div>
                     </form>
                 </div>
-
+		<div className={`text-center text-l font-bold leading-9 tracking-tight ${passwordChangeStatus ? 'text-green-600' :'text-red-600'}`}>
+			{passwordChangeResponseText}	
+		</div>
                 <div className="mx-auto text-xs mt-8">
                     <ol>
-                        <li>
+
-                            Password must be between 7-14 characters in length
+                        <li className={`${validPasswordLength ? 'text-green-600 bi-check-lg' : 'text-red-600 bi-x-lg'}`}>
-                        </li>
+			Password must be between 7-14 characters in length</li>
-                        <li>
+                        <li className={`${validPasswordMinimumCharacters ? 'text-green-600 bi-check-lg' : 'text-red-600 bi-x-lg'}`}>
-                            Password must contain at least 1 number and one special characters
+			Password must contain at least 1 number and one special characters</li>
-                        </li>
+                        <li className={`${validPasswordSpecialCharacters ? 'text-green-600 bi-check-lg' : 'text-red-600 bi-x-lg'}`}>
-                        <li>
+			Password does not contain special characters other than <code>!£$^*#</code></li>
-                            Password does not contain special characters other than <code>!£$^*#</code>
+                        <li className={`${validPasswordConfirmMatch ? 'text-green-600 bi-check-lg' : 'text-red-600 bi-x-lg'}`}>
-                        </li>
+			Both passwords must be identical</li>
-                        <li>
-                            Both passwords must be identical
-                        </li>
                     </ol>
                 </div>
             </div>