conflict

src/client/components/AuthForm.tsx

@@ -12,15 +12,14 @@ interface AuthFormProps {
   buttonLabel: string;
   linkText: string;
   linkRoute: string;
+  errorMessage?: string;
   isSignUp?: boolean;
-  additionalButton?: {
-    text: string;
-    route: string;
-  };
+  additionalButton?: { text: string; route: string };
 }
 
 export interface FormData {
   username: string;
+  email?: string;
   password: string;
   retypePassword?: string;
 }
@@ -37,20 +36,13 @@ const StyledFormField = ({ children, hasError, icon }: { children: React.ReactNo
   </div>
 );
 
-const AuthForm = ({ additionalButton, buttonLabel, isSignUp = false, onSubmit, title }: AuthFormProps) => {
+const AuthForm = ({ additionalButton, buttonLabel, errorMessage, isSignUp = false, linkRoute, linkText, onSubmit, title }: AuthFormProps) => {
   const {
     formState: { errors },
     handleSubmit,
     register,
     watch,
-  } = useForm<FormData>({
-    mode: "all",
-    defaultValues: {
-      username: "",
-      password: "",
-      retypePassword: "",
-    },
-  });
+  } = useForm<FormData>({ mode: "all", defaultValues: { username: "", email: "", password: "", retypePassword: "" } });
 
   const password = watch("password");
   const handleFormSubmit: SubmitHandler<FormData> = (data) => {
@@ -64,33 +56,48 @@ const AuthForm = ({ additionalButton, buttonLabel, isSignUp = false, onSubmit, t
     <form
       onSubmit={handleSubmit(handleFormSubmit)}
       noValidate
-      className="relative z-10 flex h-[32rem] w-full max-w-md flex-col items-center justify-start overflow-y-auto rounded-lg border bg-gray-100 p-6 shadow-xl"
+      className={`relative z-10 flex w-full max-w-md flex-col items-center justify-start overflow-y-auto rounded-lg border bg-gray-100 p-6 shadow-xl ${
+        isSignUp ? "min-h-[38em]" : "min-h-[32rem]"
+      }`}
     >
       <div className="mb-6 p-2">
         <Logo />
       </div>
       <h3 className="heading mb-3 pb-2 text-center font-oswald text-4xl font-semibold">{title}</h3>
+      {errorMessage && <div className="mb-3 w-full text-center text-sm text-red-600">{errorMessage}</div>}
+
       <StyledFormField icon="icon-[qlementine-icons--user-16]" hasError={!!errors.username}>
         <Input
           id="username"
           type="text"
           {...register("username", {
             required: { value: true, message: "Username is required" },
-            minLength: {
-              value: 4,
-              message: "Username must be at least 4 characters!",
-            },
-            maxLength: {
-              value: 12,
-              message: "Username must be 12 characters or fewer!",
-            },
+            minLength: { value: 4, message: "Username must be at least 4 characters!" },
+            maxLength: { value: 12, message: "Username must be 12 characters or fewer!" },
           })}
-          placeholder="Username"
+          placeholder="Username or email"
           className="h-12 p-4"
         />
       </StyledFormField>
       {errors.username && <span className="mb-1 font-redhat text-sm text-red-600">{errors.username.message}</span>}
 
+      {isSignUp && (
+        <>
+          <StyledFormField icon="icon-[material-symbols--mail-outline]" hasError={!!errors.email}>
+            <Input
+              id="email"
+              type="email"
+              {...register("email", {
+                required: "Email is required",
+                pattern: { value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/, message: "Enter a valid email address" },
+              })}
+              placeholder="Email"
+            />
+          </StyledFormField>
+          {errors.email && <span className="mb-1 font-redhat text-sm text-red-600">{errors.email.message}</span>}
+        </>
+      )}
+
       <StyledFormField icon="icon-[fluent--key-20-filled]" hasError={!!errors.password}>
         <Input
           id="password"
@@ -134,20 +141,10 @@ const AuthForm = ({ additionalButton, buttonLabel, isSignUp = false, onSubmit, t
       </Button>
 
       <p className="text-md mt-4 text-center font-redhat">
-        {isSignUp ? (
-          <>
-            Already have an account?{" "}
-            <Link to="/login" className="cursor-pointer text-saseBlue underline">
-              Login here.
-            </Link>
-          </>
-        ) : (
-          <>
-            <Link to="/password" className="cursor-pointer text-saseBlue underline">
-              Forgot your password?
-            </Link>
-          </>
-        )}
+        {linkText}{" "}
+        <Link to={linkRoute} className="cursor-pointer text-saseBlue underline">
+          {isSignUp ? "Login here." : "Click here to reset."}
+        </Link>
       </p>
 
       {additionalButton && (