diff --git a/frontend/src/pages/Authentication/LoginForm.tsx b/frontend/src/pages/Authentication/LoginForm.tsx index 923eb87b..8f743c08 100644 --- a/frontend/src/pages/Authentication/LoginForm.tsx +++ b/frontend/src/pages/Authentication/LoginForm.tsx @@ -9,11 +9,9 @@ type Inputs = { }; /** Login Form Component - * + * @dev used on the Authentication page * @dev noValidate on form to disable browser vaildation so we can use react-hook-form validations instead - * */ - export default function LoginForm() { const { register, @@ -33,7 +31,13 @@ export default function LoginForm() { id="email" type="email" register={register} - validations={{ required: "Please enter your email address" }} + validations={{ + required: "Please enter your email address", + pattern: { + value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i, + message: "Please enter a valid email address", + }, + }} errors={errors.email} /> = (data) => { console.log("Sending form data to server...", data); }; + return (

Sign up

@@ -47,7 +52,13 @@ export default function SignupForm() { type="email" register={register} errors={errors.email} - validations={{ required: "Please enter your email address" }} + validations={{ + required: "Please enter your email address", + pattern: { + value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i, + message: "Please enter a valid email address", + }, + }} /> React Hook Form's register function * @prop validations -> React Hook Form's validation object * @prop errors -> React Hook Form's errors object - * - * @TODO The password input's "Forgot password" and toggle visibility functionality */ export default function TextField({ @@ -32,8 +30,8 @@ export default function TextField({ errors, }: TextFieldProps) { return ( -
-
+
+
{type === "password" && ( @@ -58,9 +56,10 @@ export default function TextField({
)}
- {errors && ( -

{errors.message}

- )} + +
+ {errors && errors.message} +
); }