mskor/technical_interview
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated: All of the front end works!

Browse source
This commit is contained in:
mskor 2024-12-05 00:30:43 +00:00
parent ef66b9dbf9
commit 605e05fad1
1 changed files with 71 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

132
Client/src/pages/index.tsx
View file

@ -6,49 +6,19 @@ 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) {
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
@ -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);
}
console.log('Post password to back end');
else {
console.log("ERROR DURING PASSWORD CHANGE");
setPasswordChangeResponseText('Error during password change');
setPasswordChangeStatus(false);
}
}
// 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>