Create private route guard

Consume verify token api and refator its implementation to middleware

client/package.json

@@ -16,14 +16,17 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.56.1",
+    "js-cookie": "^3.0.5",
     "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"
   },
   "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",

client/src/App.tsx

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

client/src/components/input.tsx

@@ -5,10 +5,12 @@ import {
   useState,
 } from "react";
 import { Eye, EyeOff, Info, LucideProps } from "lucide-react";
+import { Tooltip } from "react-tooltip";
 
 interface InputProps {
   name?: string;
   label: string;
+  tooltip: string;
   placeholder: string;
   type: React.HTMLInputTypeAttribute | undefined;
   autoComplete: React.HTMLInputAutoCompleteAttribute | undefined;
@@ -18,18 +20,21 @@ interface InputProps {
   disabled?: boolean;
   validation: (value: string) => boolean;
   required?: boolean;
+  maxLength?: number;
 }
 
 const Input = ({
   name,
   label,
+  tooltip,
   placeholder,
   type,
   autoComplete,
   suffixIcon: SuffixIcon,
   disabled,
   validation,
   required,
+  maxLength,
 }: InputProps) => {
   const [value, setValue] = useState("");
   const [obscure, setObscure] = useState(true);
@@ -51,7 +56,20 @@ const Input = ({
         >
           {label}
         </label>
-        <Info size={16} className="text-primary" />
+        <Info
+          size={16}
+          className="text-primary cursor-help"
+          data-tooltip-id={label}
+          data-tooltip-content={tooltip}
+        />
+        <Tooltip
+          id={label}
+          style={{
+            backgroundColor: "rgb(var(--primary))",
+            color: "rgb(var(--foreground))",
+            fontWeight: "bold",
+          }}
+        />
       </div>
       <div className="relative flex-center">
         <input
@@ -64,7 +82,8 @@ const Input = ({
           name={name?.toLowerCase() ?? label.toLowerCase()}
           disabled={disabled}
           required={required}
-          className={`w-full lg:w-[400px] bg-background p-2.5 rounded-lg outline-none border ring-1 focus:ring-2 transition-all placeholder-foreground/50 
+          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
             ${
               hasInput
@@ -81,7 +100,7 @@ const Input = ({
           <button
             type="button"
             onClick={() => setObscure(!obscure)}
-            className="absolute inset-y-0 right-0 flex-center pr-3"
+            className="absolute inset-y-0 right-0 flex-center pr-3 active:scale-90 transition hover:drop-shadow-primary-glow"
           >
             {obscure ? (
               <EyeOff size={24} className="text-primary" />

client/src/components/loading.tsx

@@ -0,0 +1,16 @@
+import { Loader2 } from "lucide-react";
+
+const Loading = () => {
+  return (
+    <section className="flex-center bg-black/15 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"
+          size={32}
+        />
+      </div>
+    </section>
+  );
+};
+
+export { Loading };

client/src/components/or.tsx

@@ -1,9 +1,9 @@
 const Or = () => {
   return (
-    <div className="flex-between gap-x-2 w-[400px]">
-      <span className="h-px w-full flex-1 bg-foreground/40" />
-      <p className="text-lg font-semibold text-foreground/40">Or</p>
-      <span className="h-px flex-1 bg-foreground/40" />
+    <div className="flex-between gap-x-2 w-full md:w-[400px] px-6 lg:px-0">
+      <span className="h-px w-full flex-1 bg-foreground/40 rounded-full" />
+      <p className="text-sm lg:text-lg font-semibold text-foreground/40">Or</p>
+      <span className="h-px flex-1 bg-foreground/40 rounded-full" />
     </div>
   );
 };

client/src/components/switch-auth.tsx

@@ -8,7 +8,7 @@ interface SwitchAuthProps {
 
 const SwitchAuth = ({ label, tag, href }: SwitchAuthProps) => {
   return (
-    <div className="p-4 w-[400px] rounded-md border border-secondary/50 bg-secondary/15 drop-shadow-2xl flex-center gap-x-2">
+    <div className="p-4 w-full md:w-[400px] text-sm lg:text-base rounded-md border border-secondary/50 bg-secondary/15 drop-shadow-2xl flex-center gap-x-2">
       <p className="font-medium">{label}</p>
       <Link
         to={href}

client/src/components/text-button.tsx

@@ -20,8 +20,8 @@ const TextButton = ({
       type={type}
       onClick={onClick}
       disabled={disabled || loading}
-      className="w-full h-10 p-6 rounded-lg bg-accent transition-all hover:drop-shadow-accent-glow border-2 border-transparent hover:border-white/50
-        flex-center font-bold text-lg active:scale-90 disabled:bg-accent/50 disabled:text-foreground/50 disabled:pointer-events-none"
+      className="w-full h-10 p-4 lg:p-6 rounded-lg bg-accent transition-all hover:drop-shadow-accent-glow border-2 border-transparent hover:border-white/50
+        flex-center font-bold lg:text-lg active:scale-90 disabled:bg-accent/50 disabled:text-foreground/50 disabled:pointer-events-none"
     >
       {loading ? <Loader2 className="animate-spin duration-200" /> : label}
     </button>

client/src/constants/collections.ts

@@ -11,57 +11,74 @@ export const SIGNUPINPUTS = [
   {
     name: "username",
     label: "Username",
+    tooltip: "Choose a username between 3 and 20 characters.",
     placeholder: "e.g. john doe",
     type: "text",
     autoComplete: "username",
     suffixIcon: User,
     validation: ValidateUsername,
+    maxLength: 20,
   },
   {
     name: "email",
     label: "Email Address",
+    tooltip:
+      "Please enter a valid email address. Ensure it includes an '@' symbol and a domain name.",
     placeholder: "e.g. [email protected]",
     type: "email",
     autoComplete: "email",
     suffixIcon: Mail,
     validation: ValidateEmail,
+    maxLength: 254,
   },
   {
     name: "password",
     label: "Password",
+    tooltip:
+      "Create a strong password with at least 8 characters. Include a mix of uppercase letters, lowercase letters, numbers, and special characters for better security.",
     placeholder: "e.g. m#P52s@ap$V",
     type: "password",
     autoComplete: "new-password",
     suffixIcon: Lock,
     validation: ValidatePassword,
+    maxLength: 128,
   },
   {
     label: "Confirm Password",
+    tooltip:
+      "Re-enter your password to confirm it matches the one you typed above. Ensure both passwords are identical.",
     placeholder: "e.g. m#P52s@ap$V",
     type: "password",
     autoComplete: "new-password",
     suffixIcon: Lock,
     validation: ValidateConfirmPassword,
+    maxLength: 128,
   },
 ];
 
 export const SIGNININPUTS = [
   {
     name: "email",
     label: "Email Address",
+    tooltip:
+      "Please enter a valid email address. Ensure it includes an '@' symbol and a domain name.",
     placeholder: "e.g. [email protected]",
     type: "email",
     autoComplete: "email",
     suffixIcon: Mail,
     validation: ValidateEmail,
+    maxLength: 254,
   },
   {
     name: "password",
     label: "Password",
+    tooltip:
+      "Create a strong password with at least 8 characters. Include a mix of uppercase letters, lowercase letters, numbers, and special characters for better security.",
     placeholder: "e.g. m#P52s@ap$V",
     type: "password",
     autoComplete: "new-password",
     suffixIcon: Lock,
     validation: ValidatePassword,
+    maxLength: 128,
   },
 ];

client/src/constants/keys.ts

@@ -1,3 +1,4 @@
 export const SIGNUPKEY = "sign-up";
 export const SIGNINKEY = "sign-in";
 export const SIGNOUTKEY = "sign-out";
+export const VERIFYTOKENKEY = "verify-token";

client/src/constants/routes.ts

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