Merge pull request #70 from codersforcauses/issue-50-Update_login/signup_frontend

Issue 50 update login/signup frontend

Author: laurenpudz

client/package.json

@@ -15,6 +15,7 @@
     "prepare": "cd .. && husky client/.husky"
   },
   "dependencies": {
+    "@hookform/resolvers": "^5.1.1",
     "@radix-ui/react-slot": "^1.2.3",
     "@tanstack/react-query": "^5.80.7",
     "@tanstack/react-query-devtools": "^5.80.7",
@@ -28,8 +29,10 @@
     "next": "15.3.3",
     "react": "19.1.0",
     "react-dom": "19.1.0",
+    "react-hook-form": "^7.60.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7",
+    "zod": "^4.0.5",
     "zustand": "^5.0.6"
   },
   "devDependencies": {

client/src/components/ui/Forms/signup.tsx

@@ -1,11 +1,49 @@
 import Link from "next/link";
+import { useForm } from "react-hook-form";
+
+import { useRegister } from "@/hooks/useRegister";
 
 import { Button } from "../button";
 import { GoogleIcon } from "../google-icon";
 import { Input } from "../input";
 import { Separator } from "../separator";
 
+type SignUpFormData = {
+  firstName: string;
+  lastName: string;
+  email: string;
+  password: string;
+  confirmPassword: string;
+};
+
 const SignUpForm = () => {
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm<SignUpFormData>();
+
+  const password = watch("password");
+
+  const onSubmit = (data: SignUpFormData) => {
+    registerHook({
+      email: data.email,
+      password1: data.password,
+      password2: data.confirmPassword,
+      first_name: data.firstName,
+      last_name: data.lastName,
+    });
+  };
+
+  const { mutate: registerHook } = useRegister({
+    onSuccess: () => {
+      alert("Sign up was successful.");
+    },
+    onError: () => {
+      alert("An error occured. Sign Up was unsuccessful.");
+    },
+  });
   return (
     <div className="flex min-h-screen flex-col items-center justify-center">
       <div className="mx-4 flex max-w-xs flex-col items-center justify-center py-16 sm:mx-0 sm:max-w-3xl sm:rounded-2xl sm:border sm:border-border sm:px-20">
@@ -25,61 +63,80 @@ const SignUpForm = () => {
           <p className="text-subtle">Sign up with your email address</p>
         </div>
 
-        <form className="flex w-full flex-col">
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          className="flex w-full flex-col"
+        >
           <div className="flex flex-col gap-4 pb-10 md:flex-row md:gap-x-8 md:pb-12">
             <Input
               id="firstname"
               type="text"
-              name="firstname"
               label="First Name"
               placeholder="Enter First Name"
               containerClassName="flex-1"
-              required
+              error={errors.firstName?.message}
+              {...register("firstName", {
+                required: "First name is required",
+              })}
             />
             <Input
               id="lastname"
               type="text"
-              name="lastname"
               label="Last Name"
               placeholder="Enter Last Name"
               containerClassName="flex-1"
-              required
+              error={errors.lastName?.message}
+              {...register("lastName", {
+                required: "Last name is required",
+              })}
             />
           </div>
 
           <div className="pb-4 sm:pb-8">
             <Input
               id="email"
               type="email"
-              name="email"
               label="Email"
               placeholder="Enter Email"
               className="text-base"
-              required
+              error={errors.email?.message}
+              {...register("email", {
+                required: "Email is required",
+              })}
             />
           </div>
 
           <div className="flex flex-col gap-4 pb-10 md:flex-row md:gap-x-8 md:pb-12">
             <Input
               id="password"
               type="password"
-              name="password"
               label="Password"
               placeholder="Enter Password"
               containerClassName="flex-1"
-              required
+              error={errors.password?.message}
+              {...register("password", {
+                required: "Password is required",
+                minLength: {
+                  value: 8,
+                  message: "Password must be at least 8 characters",
+                },
+              })}
             />
+
             <Input
               id="confirmPassword"
               type="password"
-              name="confirmPassword"
               label="Confirm Password"
               placeholder="Confirm Password"
               containerClassName="flex-1"
-              required
+              error={errors.confirmPassword?.message}
+              {...register("confirmPassword", {
+                required: "Please confirm your password",
+                validate: (value) =>
+                  value === password || "Passwords do not match",
+              })}
             />
           </div>
-
           <Button
             className="h-12 w-full text-lg"
             variant="gradient"

client/src/hooks/useRegister.tsx

@@ -0,0 +1,33 @@
+import { console } from "node:inspector/promises";
+
+import { useMutation, UseMutationOptions } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+
+import api from "@/lib/api";
+
+type RegistrationDetails = {
+  email: string;
+  password1: string;
+  password2: string;
+  first_name: string;
+  last_name: string;
+};
+
+export const useRegister = (
+  args?: Omit<
+    UseMutationOptions<
+      unknown,
+      AxiosError<{ [key: string]: unknown }>,
+      RegistrationDetails
+    >,
+    "mutationKey" | "mutationFn"
+  >,
+) => {
+  return useMutation({
+    ...args,
+    mutationKey: ["register"],
+    mutationFn: (details: RegistrationDetails) => {
+      return api.post("/users/register/", details);
+    },
+  });
+};

server/api/settings.py

@@ -38,7 +38,7 @@
     else []
 )
 
-
+CSRF_TRUSTED_ORIGINS = [FRONTEND_URL]
 # Application definition
 
 INSTALLED_APPS = [

server/event_registration/tests.py

@@ -29,7 +29,7 @@ def check_data(
             "first_name": first_name,
             "last_name": last_name,
         }
-        response = self.client.post(self.url, data)
+        response = self.client.post(self.url, data, content_type="application/json")
         self.assertEqual(response.status_code, expected_status)
 
     def test_valid_registration(self):

server/event_registration/views.py

@@ -1,10 +1,20 @@
 from .forms import UserRegistrationForm
 from django.http import HttpResponse
+from rest_framework.decorators import api_view, authentication_classes, permission_classes
+import json
 
 
+@api_view(["POST"])
+@authentication_classes([])
+@permission_classes([])
 def register_user(request):
-    form = UserRegistrationForm(request.POST)
-    errors = form.errors.as_data()
+    try:
+        body_unicode = request.body.decode('utf-8')
+        body = json.loads(body_unicode)
+        form = UserRegistrationForm(body)
+        errors = form.errors.as_data()
+    except json.decoder.JSONDecodeError:
+        return HttpResponse(status=400)
 
     if errors.keys() == set(["email"]) and errors["email"][0].code == "unique":
         return HttpResponse(status=409)