Merge pull request #28 from monicasmith463/feature/frontend-signup-api

Feature: frontend signup API call working

Author: monicasmith463

backend/app/api/routes/users.py

@@ -48,9 +48,7 @@ def read_users(session: SessionDep, skip: int = 0, limit: int = 100) -> Any:
     return UsersPublic(data=users, count=count)
 
 
-@router.post(
-    "/", dependencies=[Depends(get_current_active_superuser)], response_model=UserPublic
-)
+@router.post("/", response_model=UserPublic)
 def create_user(*, session: SessionDep, user_in: UserCreate) -> Any:
     """
     Create new user.

backend/tests/api/routes/test_users.py

@@ -132,20 +132,6 @@ def test_create_user_existing_username(
     assert "_id" not in created_user
 
 
-def test_create_user_by_normal_user(
-    client: TestClient, normal_user_token_headers: dict[str, str]
-) -> None:
-    username = random_email()
-    password = random_lower_string()
-    data = {"email": username, "password": password}
-    r = client.post(
-        f"{settings.API_V1_STR}/users/",
-        headers=normal_user_token_headers,
-        json=data,
-    )
-    assert r.status_code == 403
-
-
 def test_retrieve_users(
     client: TestClient, superuser_token_headers: dict[str, str], db: Session
 ) -> None:

frontend/package.json

@@ -6,8 +6,11 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start",
+    "start": "next start -H 0.0.0.0",
     "lint": "next lint",
+    "lint:fix": "next lint --fix",
+    "format": "prettier --write .",
+    "clean": "npm run lint:fix && npm run format",
     "generate-client": "openapi-ts"
   },
   "dependencies": {
@@ -23,7 +26,7 @@
     "@tailwindcss/postcss": "^4.0.9",
     "@tanstack/react-query": "^5.90.5",
     "@tanstack/react-router": "^1.133.21",
-    "apexcharts": "^4.3.0",
+        "apexcharts": "^4.3.0",
     "autoprefixer": "^10.4.20",
     "axios": "^1.12.2",
     "flatpickr": "^4.6.13",

frontend/src/app/layout.tsx

@@ -5,6 +5,13 @@ import { Outfit } from 'next/font/google';
 import { SidebarProvider } from '@/context/SidebarContext';
 import { ThemeProvider } from '@/context/ThemeContext';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { OpenAPI } from "@/client/core/OpenAPI";
+
+OpenAPI.TOKEN = async () => {
+  return localStorage.getItem("access_token") || ""
+}
+
+OpenAPI.BASE = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";
 
 const queryClient = new QueryClient();
 

frontend/src/components/auth/SignUpForm.tsx

@@ -4,17 +4,23 @@ import Label from "@/components/form/Label";
 import { ChevronLeftIcon, EyeCloseIcon, EyeIcon } from "@/icons";
 import Link from "next/link";
 import React, { useState } from "react";
-import { namePattern, passwordRules } from "@/utils";
+import { namePattern, emailPattern, passwordRules } from "@/utils";
 import { useForm } from "react-hook-form";
+import { useSignup } from "@/hooks/useSignup";
+import SpinnerButton from "../ui/button/SpinnerButton";
+
 
 type FormData = {
   firstName: string;
   lastName: string;
   password: string;
+  email: string;
 };
 
 export default function SignUpForm() {
   const [showPassword, setShowPassword] = useState(false);
+  const signupMutation = useSignup();
+
   const {
     register,
     handleSubmit,
@@ -24,6 +30,23 @@ export default function SignUpForm() {
   });
   const onSubmit = (data: FormData) => {
     console.log("Form data:", data);
+    signupMutation.mutate(
+      {
+        requestBody: {
+          full_name: data.firstName + " " + data.lastName,
+          password: data.password,
+          email: data.email,
+        },
+      },
+      {
+        onSuccess: (res) => {
+          console.log("Signup success:", res);
+        },
+        onError: (err) => {
+          console.error("Signup failed:", err);
+        },
+      }
+    );
   };
 
   return (
@@ -34,7 +57,7 @@ export default function SignUpForm() {
           className="inline-flex items-center text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
         >
           <ChevronLeftIcon />
-          Back to dashboard
+          Back to home
         </Link>
       </div>
 
@@ -81,7 +104,22 @@ export default function SignUpForm() {
                 hint={errors.lastName?.message}
               />
             </div>
-
+            {/* Email */}
+            <div className="sm:col-span-2">
+              <Label>
+                Email<span className="text-error-500">*</span>
+              </Label>
+              <Input
+                placeholder="Enter your email"
+                type="email"
+                {...register("email", {
+                  required: "Email is required",
+                  pattern: emailPattern
+                })}
+                error={!!errors.email}
+                hint={errors.email?.message}
+              />
+            </div>
             {/* Password */}
             <div className="sm:col-span-2">
               <Label>
@@ -107,19 +145,18 @@ export default function SignUpForm() {
                 </span>
               </div>
             </div>
-
             {/* Submit Button */}
             <div className="sm:col-span-2">
-              <button
-                type="submit"
+              <SpinnerButton
                 className="flex items-center justify-center w-full px-4 py-3 text-sm font-medium text-white transition rounded-lg bg-brand-500 shadow-theme-xs hover:bg-brand-600"
+                disabled={signupMutation.isPending}
+                loading={signupMutation.isPending}
               >
                 Sign Up
-              </button>
+              </SpinnerButton>
             </div>
           </div>
         </form>
-
         <div className="mt-5">
           <p className="text-sm font-normal text-center text-gray-700 dark:text-gray-400 sm:text-start">
             Already have an account?{" "}

frontend/src/hooks/useSignup.ts

@@ -0,0 +1,10 @@
+import { useMutation } from "@tanstack/react-query";
+import { UsersService } from "@/client";
+import type { UsersCreateUserData } from "@/client";
+
+export const useSignup = () => {
+  return useMutation({
+    mutationFn: (data: UsersCreateUserData) =>
+      UsersService.createUser({ requestBody: data.requestBody }),
+  });
+};