Add change password API route; fix tooltip dropshadow and dynamic colors

client/src/App.tsx

@@ -2,6 +2,7 @@ import { Route, Routes } from "react-router-dom";
 
 import { ForgotPasswordPage } from "@/pages/forgot-password/page";
 import { ResetPasswordPage } from "@/pages/reset-password/page";
+import { ChangePasswordPage } from "@/pages/change-password/page";
 import VerifyEmailPage from "@/pages/verify-email/page";
 import PrivateGuard from "@/guards/private-guard";
 import { AppRoutes } from "@/constants/routes";
@@ -16,20 +17,24 @@ function App() {
       <Routes>
         <Route element={<PrivateGuard />}>
           <Route path={AppRoutes.Root} element={<RootPage />} />
+          <Route
+            path={AppRoutes.ChangePassword}
+            element={<ChangePasswordPage />}
+          />
         </Route>
         <Route element={<AuthGuard />}>
           <Route path={AppRoutes.SignUp} element={<SignUpPage />} />
           <Route path={AppRoutes.SignIn} element={<SignInPage />} />
           <Route path={AppRoutes.VerifyEmail} element={<VerifyEmailPage />} />
+          <Route
+            path={AppRoutes.ForgotPassword}
+            element={<ForgotPasswordPage />}
+          />
+          <Route
+            path={`${AppRoutes.ResetPassword}/:token`}
+            element={<ResetPasswordPage />}
+          />
         </Route>
-        <Route
-          path={AppRoutes.ForgotPassword}
-          element={<ForgotPasswordPage />}
-        />
-        <Route
-          path={`${AppRoutes.ResetPassword}/:token`}
-          element={<ResetPasswordPage />}
-        />
       </Routes>
     </main>
   );

client/src/components/hint.tsx

@@ -22,8 +22,9 @@ const Hint = ({ id, content, isSecondary, isAccent }: HintProps) => {
     <Tooltip
       id={id}
       content={content}
-      className={`backdrop-blur-2xl border border-primary/50 drop-shadow-${color}-glow`}
+      className="backdrop-blur-2xl border border-primary/50"
       style={{
+        filter: `drop-shadow(0 0px 25px rgb(var(--${color}))) drop-shadow(0 0px 50px rgb(var(--${color})))`,
         backgroundColor: `rgb(var(--${color})/0.1)`,
         color: "rgb(var(--foreground))",
       }}

client/src/components/icon-button.tsx

@@ -1,25 +1,31 @@
 import { Loader2, LucideProps } from "lucide-react";
 
+import { useResize } from "@/lib/hooks/use-resize";
+
 interface IconButtonProps {
   icon: React.ForwardRefExoticComponent<
     Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>
   >;
-  size?: number;
   onClick: () => void;
   disabled?: boolean;
   loading?: boolean;
 }
 
 const IconButton = ({
   icon: Icon,
-  size = 22,
   onClick,
   disabled,
   loading,
 }: IconButtonProps) => {
+  const { width } = useResize();
+
+  const lg = width > 1024;
+
+  const size = lg ? 22 : 16;
+
   return (
     <button
-      className="w-10 h-10 rounded-full flex-center transition-colors bg-accent/40 
+      className="w-8 lg:w-10 h-8 lg:h-10 rounded-full flex-center transition-colors bg-accent/40 
         hover:bg-accent hover:drop-shadow-accent-glow disabled:pointer-events-none
         disabled:bg-accent/50 disabled:text-foreground/50"
       disabled={disabled || loading}

client/src/components/page-switcher.tsx

@@ -0,0 +1,63 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+
+interface PageSwitcherProps {
+  label?: string;
+  tag: string;
+  href: string;
+  disabled?: boolean;
+  isPrimary?: boolean;
+  isAccent?: boolean;
+}
+
+const PageSwitcher = ({
+  label,
+  tag,
+  href,
+  disabled,
+  isPrimary,
+  isAccent,
+}: PageSwitcherProps) => {
+  const [hovered, setHovered] = useState(false);
+
+  let color;
+
+  if (isPrimary) {
+    color = "primary";
+  } else if (isAccent) {
+    color = "accent";
+  } else {
+    color = "secondary";
+  }
+
+  return (
+    <div
+      className="p-4 w-full text-sm lg:text-base rounded-md border flex-center drop-shadow-2xl gap-x-2"
+      style={{
+        borderColor: `rgb(var(--${color})/0.5)`,
+        backgroundColor: `rgb(var(--${color})/0.15)`,
+      }}
+    >
+      {label && <p className="font-medium">{label}</p>}
+      <Link
+        to={href}
+        replace
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        className={`font-bold underline-offset-4 hover:underline transition-all 
+          ${disabled && `pointer-events-none`} 
+        `}
+        style={{
+          filter: hovered
+            ? `drop-shadow(0 0px 25px rgb(var(--${color}))) drop-shadow(0 0px 50px rgb(var(--${color})))`
+            : "none",
+          color: disabled ? `rgb(var(--${color})/0.5)` : `rgb(var(--${color}))`,
+        }}
+      >
+        {tag}
+      </Link>
+    </div>
+  );
+};
+
+export { PageSwitcher };

client/src/constants/keys.ts

@@ -6,3 +6,4 @@ export const RESENDVERIFYKEY = "resend-verify";
 export const VERIFYTOKENKEY = "verify-token";
 export const FORGOTPASSWORDKEY = "forgot-password";
 export const RESETPASSWORDKEY = "reset-password";
+export const CHANGEPASSWORD = "change-password";

client/src/constants/routes.ts

@@ -8,4 +8,5 @@ export enum AppRoutes {
   VerifyEmail = "/verify-email",
   ResendVerify = "/resend-verify",
   VerifyToken = "/verify-token",
+  ChangePassword = "/change-password",
 }

client/src/index.css

@@ -44,6 +44,22 @@
   ::-webkit-scrollbar-thumb:hover {
     background-color: rgb(var(--primary));
   }
+
+  .scroll-x::-webkit-scrollbar {
+    height: 1px;
+  }
+
+  .secondary-scroll::-webkit-scrollbar-track {
+    background-color: rgb(var(--secondary) / 0.25);
+  }
+  .secondary-scroll::-webkit-scrollbar-thumb {
+    background-color: rgb(var(--secondary) / 0.8);
+    border-radius: 9999px;
+    transition: all 5s ease-out;
+  }
+  .secondary-scroll::-webkit-scrollbar-thumb:hover {
+    background-color: rgb(var(--secondary));
+  }
 }
 
 @layer utilities {

client/src/lib/DTO/change-dto.ts

@@ -0,0 +1,5 @@
+export type ChangeDTO = {
+  email: string;
+  old_password: string;
+  new_password: string;
+};

client/src/lib/hooks/use-resize.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+
+const useResize = () => {
+  const [size, setSize] = useState({
+    width: 0,
+    height: 0,
+  });
+
+  const getSize = () => {
+    setSize({
+      width: window.innerWidth,
+      height: window.innerHeight,
+    });
+  };
+
+  useEffect(() => {
+    getSize();
+
+    window.addEventListener("resize", getSize);
+
+    return () => {
+      window.removeEventListener("resize", getSize);
+    };
+  }, []);
+
+  return size;
+};
+
+export { useResize };

client/src/lib/services/auth-service.ts

@@ -3,6 +3,7 @@ import { ErrorResponse } from "@/lib/classes/error-response-class";
 import { UserResponse } from "@/lib/classes/user-response-class";
 import { SignUpDTO } from "@/lib/DTO/sign-up-dto";
 import { SignInDTO } from "@/lib/DTO/sign-in-dto";
+import { ChangeDTO } from "@/lib/DTO/change-dto";
 import { AppRoutes } from "@/constants/routes";
 import { ResetDTO } from "@/lib/DTO/reset-dto";
 
@@ -187,6 +188,28 @@ export const AuthService = {
       });
     }
 
+    return new GenericResponse({
+      message: data.message,
+    });
+  },
+  changePassword: async (change: ChangeDTO) => {
+    const res = await fetch(`${baseURL}${AppRoutes.ChangePassword}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(change),
+    });
+
+    const data = await res.json();
+
+    if (!res.ok) {
+      throw new ErrorResponse({
+        status: res.status,
+        message: data.error,
+      });
+    }
+
     return new GenericResponse({
       message: data.message,
     });

client/src/pages/change-password/_components/change-password-back.tsx

@@ -0,0 +1,11 @@
+import { PageSwitcher } from "@/components/page-switcher";
+import { useAuthStore } from "@/lib/stores/auth-store";
+import { AppRoutes } from "@/constants/routes";
+
+const ChangePasswordBack = () => {
+  const { loading } = useAuthStore();
+
+  return <PageSwitcher href={AppRoutes.Root} tag="Back" disabled={loading} />;
+};
+
+export { ChangePasswordBack };