Refactor api endpoint responses

Handle email verification code and create a form for it

DTO/error_dto.go

@@ -0,0 +1,5 @@
+package dto
+
+type ErrorDTO struct {
+	Error string `json:"error"`
+}

DTO/generic_dto.go

@@ -0,0 +1,5 @@
+package dto
+
+type GenericDTO struct {
+	Message string `json:"message"`
+}

DTO/user_dto.go

@@ -0,0 +1,8 @@
+package dto
+
+import "github.com/Fingertips18/go-auth/models"
+
+type UserDTO struct {
+	Message string      `json:"message"`
+	User    models.User `json:"user"`
+}

client/package.json

@@ -16,17 +16,17 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.56.1",
-    "js-cookie": "^3.0.5",
+    "cookies": "^0.9.1",
     "lucide-react": "^0.440.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.2",
     "react-tooltip": "^5.28.0",
-    "sonner": "^1.5.0"
+    "sonner": "^1.5.0",
+    "zustand": "^4.5.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
-    "@types/js-cookie": "^3.0.6",
     "@types/node": "^22.5.4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
@@ -38,8 +38,8 @@
     "globals": "^15.9.0",
     "postcss": "^8.4.45",
     "tailwindcss": "^3.4.11",
-    "typescript": "^5.5.3",
-    "typescript-eslint": "^8.0.1",
+    "typescript": "^5.6.2",
+    "typescript-eslint": "^8.5.0",
     "vite": "^5.4.1"
   }
 }

client/src/App.tsx

@@ -1,20 +1,25 @@
 import { Route, Routes } from "react-router-dom";
 
-import ProtectedGuard from "@/guards/protected-guard";
+import VerifyEmailPage from "@/pages/verify-email/page";
+import PrivateGuard from "@/guards/private-guard";
 import { AppRoutes } from "@/constants/routes";
 import SignUpPage from "@/pages/sign-up/page";
 import SignInPage from "@/pages/sign-in/page";
+import AuthGuard from "@/guards/auth-guard";
 import RootPage from "@/pages/root/page";
 
 function App() {
   return (
     <main className="h-dvh overflow-x-hidden overflow-y-auto">
       <Routes>
-        <Route element={<ProtectedGuard />}>
+        <Route element={<PrivateGuard />}>
           <Route path={AppRoutes.Root} element={<RootPage />} />
         </Route>
-        <Route path={AppRoutes.SignUp} element={<SignUpPage />} />
-        <Route path={AppRoutes.SignIn} element={<SignInPage />} />
+        <Route element={<AuthGuard />}>
+          <Route path={AppRoutes.SignUp} element={<SignUpPage />} />
+          <Route path={AppRoutes.SignIn} element={<SignInPage />} />
+          <Route path={AppRoutes.VerifyEmail} element={<VerifyEmailPage />} />
+        </Route>
       </Routes>
     </main>
   );

client/src/components/input.tsx

@@ -83,8 +83,8 @@ const Input = ({
           disabled={disabled}
           required={required}
           maxLength={maxLength}
-          className={`w-full md:w-[400px] bg-background p-2.5 rounded-lg outline-none border ring-1 focus:ring-2 transition-all placeholder-foreground/50 
-            px-11 disabled:bg-opacity-25 disabled:border-primary/25 disabled:text-foreground/50 disabled:pointer-events-none
+          className={`w-full md:w-[400px] bg-background py-2.5 rounded-lg outline-none border ring-1 focus:ring-2 transition-all 
+            placeholder-foreground/50 px-11 disabled:bg-opacity-25 disabled:border-primary/25 disabled:text-foreground/50 disabled:pointer-events-none
             ${
               hasInput
                 ? valid

client/src/components/loading.tsx

@@ -2,7 +2,7 @@ import { Loader2 } from "lucide-react";
 
 const Loading = () => {
   return (
-    <section className="flex-center bg-black/15 w-full h-full absolute z-50">
+    <section className="flex-center bg-primary/5 w-full h-full absolute z-50">
       <div className="p-4 rounded-full border border-primary/80 bg-primary/15 drop-shadow-primary-glow backdrop-blur-lg ">
         <Loader2
           className="text-primary animate-spin duration-200 transition-transform"

client/src/constants/collections.ts

@@ -29,7 +29,7 @@ export const SIGNUPINPUTS = [
     autoComplete: "email",
     suffixIcon: Mail,
     validation: ValidateEmail,
-    maxLength: 254,
+    maxLength: 320,
   },
   {
     name: "password",
@@ -67,7 +67,7 @@ export const SIGNININPUTS = [
     autoComplete: "email",
     suffixIcon: Mail,
     validation: ValidateEmail,
-    maxLength: 254,
+    maxLength: 320,
   },
   {
     name: "password",

client/src/constants/keys.ts

@@ -1,4 +1,6 @@
 export const SIGNUPKEY = "sign-up";
 export const SIGNINKEY = "sign-in";
 export const SIGNOUTKEY = "sign-out";
+export const VERIFYEMAILKEY = "verify-email";
+export const RESENDVERIFYKEY = "resend-verify";
 export const VERIFYTOKENKEY = "verify-token";

client/src/constants/routes.ts

@@ -6,5 +6,6 @@ export enum AppRoutes {
   ForgotPassword = "/forgot-password",
   ResetPassword = "/reset-password",
   VerifyEmail = "/verify-email",
+  ResendVerify = "/resend-verify",
   VerifyToken = "/verify-token",
 }

client/src/guards/auth-guard.tsx

@@ -0,0 +1,16 @@
+import { Navigate, Outlet } from "react-router-dom";
+
+import { useAuthStore } from "@/lib/stores/auth-store";
+import { AppRoutes } from "@/constants/routes";
+
+const AuthGuard = () => {
+  const { authorized } = useAuthStore();
+
+  if (authorized) {
+    return <Navigate to={AppRoutes.Root} replace />;
+  }
+
+  return <Outlet />;
+};
+
+export default AuthGuard;