Updated: All of the front end works!
This commit is contained in:
mskor
parent
ef66b9dbf9
commit
605e05fad1
1 changed files with 71 additions and 67 deletions
|
|
@ -6,50 +6,20 @@ 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<HTMLInputElement>) {
|
||||
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);
|
||||
setPasswordChangeResponseText('');
|
||||
setPasswordValue(e.target.value);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
// 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 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);
|
||||
}
|
||||
|
||||
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<HTMLButtonElement>) {
|
||||
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() {
|
|||
<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"}
|
||||
onClick={(e) => handleFormSubmit(e)}>
|
||||
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)}
|
||||
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>
|
||||
<li>
|
||||
Password must contain at least 1 number and one special characters
|
||||
</li>
|
||||
<li>
|
||||
Password does not contain special characters other than <code>!£$^*#</code>
|
||||
</li>
|
||||
<li>
|
||||
Both passwords must be identical
|
||||
</li>
|
||||
|
||||
<li className={`${validPasswordLength ? 'text-green-600 bi-check-lg' : 'text-red-600 bi-x-lg'}`}>
|
||||
Password must be between 7-14 characters in length</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</li>
|
||||
<li className={`${validPasswordSpecialCharacters ? 'text-green-600 bi-check-lg' : 'text-red-600 bi-x-lg'}`}>
|
||||
Password does not contain special characters other than <code>!£$^*#</code></li>
|
||||
<li className={`${validPasswordConfirmMatch ? 'text-green-600 bi-check-lg' : 'text-red-600 bi-x-lg'}`}>
|
||||
Both passwords must be identical</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue