refactor: modularize form fields into a separate component

frontend/src/components/ui/FormField.tsx

@@ -0,0 +1,32 @@
+import type { UseFormRegisterReturn } from "react-hook-form";
+
+interface FormFieldProps {
+  label: string;
+  type?: string;
+  placeholder?: string;
+  registration: UseFormRegisterReturn;
+  error?: string;
+}
+
+export default function FormField({
+  label,
+  type = "text",
+  placeholder,
+  registration,
+  error,
+}: FormFieldProps) {
+  return (
+    <div className="form-control">
+      <label className="field-label font-display text-primary-content">{label}</label>
+      <input
+        {...registration}
+        type={type}
+        placeholder={placeholder}
+        className={`input input-bordered focus:input-primary ${
+          error ? "input-error" : ""
+        }`}
+      />
+      {error && <p className="field-error">{error}</p>}
+    </div>
+  );
+}

frontend/src/pages/Register.tsx

@@ -1,16 +1,19 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { InfoIcon } from "@phosphor-icons/react";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
+import { useNavigate } from "react-router-dom";
 import { z } from "zod";
+import apiClient from "../api/apiClient";
 import Logo from "../components/Logo";
+import FormField from "../components/ui/FormField";
 
 // validation logic
 const registerSchema = z
   .object({
+    full_name: z.string().min(2, "Name must be at least 2 characters"),
     email: z.email("Please enter a valid email"),
-    password: z
-      .string()
-      .check(z.minLength(8, "Password must be at least 8 characters")),
+    password: z.string().min(8, "Password must be at least 8 characters"),
     confirm_password: z.string(),
   })
   .refine((data) => data.password === data.confirm_password, {
@@ -21,6 +24,10 @@ const registerSchema = z
 type RegisterInputs = z.infer<typeof registerSchema>;
 
 export default function Register() {
+  const navigate = useNavigate();
+  const [isLoading, setIsLoading] = useState(false);
+  const [apiError, setApiError] = useState<string | null>(null);
+
   const {
     register,
     handleSubmit,
@@ -29,64 +36,69 @@ export default function Register() {
     resolver: zodResolver(registerSchema),
   });
 
-  const onSubmit = (data: RegisterInputs) => {
-    console.log("Form Data:", data);
+  const onSubmit = async (data: RegisterInputs) => {
+    setIsLoading(true);
+    setApiError(null);
+    try {
+      await apiClient.post("/register/", {
+        full_name: data.full_name,
+        email: data.email,
+        password: data.password,
+      });
+      navigate("/verify-email");
+    } catch (err: any) {
+      console.error("Registration error:", err);
+      setApiError(
+        err.response?.data?.message || "Registration failed. Please try again."
+      );
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   return (
-    <div className="glass-card w-full max-w-sm p-2 transition-all duration-500 hover:shadow-2xl">
+    <div className="glass-card w-full max-w-sm p-2 transition-all duration-500 hover:shadow-2xl fade-zoom">
       <form onSubmit={handleSubmit(onSubmit)} className="card-body gap-4">
         <h2 className="card-title font-display text-2xl font-bold justify-center text-primary tracking-tight">
           Create a <Logo /> Account
         </h2>
 
-        <div className="form-control">
-          <label htmlFor="email" className="label font-bold font-display py-1">
-            Email
-          </label>
-          <input
-            {...register("email")}
+        {apiError && (
+          <div className="alert alert-error text-xs py-2 rounded-md">
+            <span>{apiError}</span>
+          </div>
+        )}
+
+        <FormField
+          label="Full Name"
+          placeholder="Word Smith"
+          registration={register("full_name")}
+          error={errors.full_name?.message}
+        />
+
+        <FormField
+          label="Email"
           type="email"
           placeholder="you@email.com"
-            className={`input input-bordered focus:input-primary ${errors.email ? "input-error" : ""}`}
+          registration={register("email")}
+          error={errors.email?.message}
         />
-          {errors.email && (
-            <p className="text-error-content text-xs mt-1">{errors.email.message}</p>
-          )}
-        </div>
 
-        <div className="form-control">
-          <label htmlFor="password" className="label font-bold font-display py-1">
-            Password
-          </label>
-          <input
-            {...register("password")}
+        <FormField
+          label="Password"
           type="password"
           placeholder="••••••••"
-            className={`input input-bordered focus:input-primary ${errors.password ? "input-error" : ""}`}
+          registration={register("password")}
+          error={errors.password?.message}
         />
-          {errors.password && (
-            <p className="text-error-content text-xs mt-1">{errors.password.message}</p>
-          )}
-        </div>
 
-        {/* Confirm Pass */}
-        <div className="form-control">
-          <label htmlFor="confirm_password" className="label font-bold font-display py-1">
-            Confirm Password
-          </label>
-          <input
-            {...register("confirm_password")}
+        <FormField
+          label="Confirm Password"
           type="password"
           placeholder="••••••••"
-            className={`input input-bordered focus:input-primary ${errors.confirm_password ? "input-error" : ""}`}
+          registration={register("confirm_password")}
+          error={errors.confirm_password?.message}
         />
-          {errors.confirm_password && (
-            <p className="text-error-content text-xs mt-1">
-              {errors.confirm_password.message}
-            </p>
-          )}
-        </div>
 
         {/* Warning */}
         <div className="bg-warning/10 border-l-2 border-warning p-3 rounded-r-md flex gap-2">
@@ -102,8 +114,16 @@ export default function Register() {
         </div>
 
         <div className="card-actions mt-4">
-          <button type="submit" className="btn btn-primary w-full shadow-lg">
-            Register
+          <button
+            type="submit"
+            disabled={isLoading}
+            className="btn btn-primary w-full shadow-lg"
+          >
+            {isLoading ? (
+              <span className="loading loading-spinner loading-sm" />
+            ) : (
+              "Register"
+            )}
           </button>
         </div>
       </form>