From f8449fa6fb7eaaf8a3de6717313f0eb015233d53 Mon Sep 17 00:00:00 2001
From: Fingertips <ghiantan0418@gmail.com>
Date: Thu, 26 Sep 2024 12:33:00 +0800
Subject: [PATCH] Add change password API route; fix tooltip dropshadow and
 dynamic colors

- Implemented a new API route for changing the user's password.
- Consumed the change password API in the client, allowing users to update their passwords.
- Fixed the drop-shadow issue on tooltips, ensuring proper shadow rendering.
- Made both tooltip and page switcher colors dynamic based on the current theme or state.
- Created a `useResize` hook to dynamically change the size of the icon button on small screens.
- Integrated the `useResize` hook into the icon button component for responsive design.
- Improved overall UI consistency and user experience through these updates.
---
 client/src/App.tsx                            | 21 ++--
 client/src/components/hint.tsx                |  3 +-
 client/src/components/icon-button.tsx         | 12 ++-
 client/src/components/page-switcher.tsx       | 63 ++++++++++++
 client/src/components/switch-auth.tsx         | 34 -------
 client/src/constants/keys.ts                  |  1 +
 client/src/constants/routes.ts                |  1 +
 client/src/index.css                          | 16 ++++
 client/src/lib/DTO/change-dto.ts              |  5 +
 client/src/lib/hooks/use-resize.tsx           | 29 ++++++
 client/src/lib/services/auth-service.ts       | 23 +++++
 .../_components/change-password-back.tsx      | 11 +++
 .../_components/change-password-form.tsx      | 96 +++++++++++++++++++
 client/src/pages/change-password/page.tsx     | 18 ++++
 .../_components/forgot-password-back.tsx      |  4 +-
 .../_components/reset-password-back.tsx       |  4 +-
 .../_components/reset-password-form.tsx       |  9 +-
 .../_components/content/change-password.tsx   | 19 ++++
 .../pages/root/_components/content/index.tsx  |  5 +-
 .../root/_components/content/info-pair.tsx    |  6 +-
 .../pages/root/_components/footer/index.tsx   |  6 +-
 .../sign-in/_components/no-account-yet.tsx    |  4 +-
 .../_components/already-have-account.tsx      |  4 +-
 constants/routes.go                           |  1 +
 controllers/auth_controller.go                | 42 +++++++-
 routes/auth_route.go                          |  1 +
 26 files changed, 372 insertions(+), 66 deletions(-)
 create mode 100644 client/src/components/page-switcher.tsx
 delete mode 100644 client/src/components/switch-auth.tsx
 create mode 100644 client/src/lib/DTO/change-dto.ts
 create mode 100644 client/src/lib/hooks/use-resize.tsx
 create mode 100644 client/src/pages/change-password/_components/change-password-back.tsx
 create mode 100644 client/src/pages/change-password/_components/change-password-form.tsx
 create mode 100644 client/src/pages/change-password/page.tsx
 create mode 100644 client/src/pages/root/_components/content/change-password.tsx

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 30811c4..0282717 100644
--- a/client/src/App.tsx
+++ b/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>
   );
diff --git a/client/src/components/hint.tsx b/client/src/components/hint.tsx
index 0cc62c6..b40da3e 100644
--- a/client/src/components/hint.tsx
+++ b/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))",
       }}
diff --git a/client/src/components/icon-button.tsx b/client/src/components/icon-button.tsx
index 5b0fc40..6744bd9 100644
--- a/client/src/components/icon-button.tsx
+++ b/client/src/components/icon-button.tsx
@@ -1,10 +1,11 @@
 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;
@@ -12,14 +13,19 @@ interface IconButtonProps {
 
 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}
diff --git a/client/src/components/page-switcher.tsx b/client/src/components/page-switcher.tsx
new file mode 100644
index 0000000..942bb28
--- /dev/null
+++ b/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 };
diff --git a/client/src/components/switch-auth.tsx b/client/src/components/switch-auth.tsx
deleted file mode 100644
index 4531b1f..0000000
--- a/client/src/components/switch-auth.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Link } from "react-router-dom";
-
-interface SwitchAuthProps {
-  label?: string;
-  tag: string;
-  href: string;
-  disabled?: boolean;
-}
-
-const SwitchAuth = ({ label, tag, href, disabled }: SwitchAuthProps) => {
-  return (
-    <div
-      className="p-4 w-full text-sm lg:text-base rounded-md border 
-      border-secondary/50 bg-secondary/15 drop-shadow-2xl flex-center gap-x-2"
-    >
-      {label && <p className="font-medium">{label}</p>}
-      <Link
-        to={href}
-        replace
-        className={`font-bold underline-offset-4 hover:underline transition-all hover:drop-shadow-secondary-glow
-          ${
-            disabled
-              ? "text-secondary/50 pointer-events-none"
-              : "text-secondary"
-          } 
-          `}
-      >
-        {tag}
-      </Link>
-    </div>
-  );
-};
-
-export { SwitchAuth };
diff --git a/client/src/constants/keys.ts b/client/src/constants/keys.ts
index a7c242f..d9c91a2 100644
--- a/client/src/constants/keys.ts
+++ b/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";
diff --git a/client/src/constants/routes.ts b/client/src/constants/routes.ts
index 19b0c90..7abe951 100644
--- a/client/src/constants/routes.ts
+++ b/client/src/constants/routes.ts
@@ -8,4 +8,5 @@ export enum AppRoutes {
   VerifyEmail = "/verify-email",
   ResendVerify = "/resend-verify",
   VerifyToken = "/verify-token",
+  ChangePassword = "/change-password",
 }
diff --git a/client/src/index.css b/client/src/index.css
index b868319..c42cf8f 100644
--- a/client/src/index.css
+++ b/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 {
diff --git a/client/src/lib/DTO/change-dto.ts b/client/src/lib/DTO/change-dto.ts
new file mode 100644
index 0000000..7e8e3cd
--- /dev/null
+++ b/client/src/lib/DTO/change-dto.ts
@@ -0,0 +1,5 @@
+export type ChangeDTO = {
+  email: string;
+  old_password: string;
+  new_password: string;
+};
diff --git a/client/src/lib/hooks/use-resize.tsx b/client/src/lib/hooks/use-resize.tsx
new file mode 100644
index 0000000..ebaf48d
--- /dev/null
+++ b/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 };
diff --git a/client/src/lib/services/auth-service.ts b/client/src/lib/services/auth-service.ts
index 8adcfba..76c2ff0 100644
--- a/client/src/lib/services/auth-service.ts
+++ b/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,
     });
diff --git a/client/src/pages/change-password/_components/change-password-back.tsx b/client/src/pages/change-password/_components/change-password-back.tsx
new file mode 100644
index 0000000..7f30dac
--- /dev/null
+++ b/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 };
diff --git a/client/src/pages/change-password/_components/change-password-form.tsx b/client/src/pages/change-password/_components/change-password-form.tsx
new file mode 100644
index 0000000..d8837ff
--- /dev/null
+++ b/client/src/pages/change-password/_components/change-password-form.tsx
@@ -0,0 +1,96 @@
+import { useMutation } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
+import { FormEvent, useState } from "react";
+import { toast } from "sonner";
+
+import { GenericResponse } from "@/lib/classes/generic-response-class";
+import { ErrorResponse } from "@/lib/classes/error-response-class";
+import { RESET_PASSWORD_INPUTS } from "@/constants/collections";
+import { AuthService } from "@/lib/services/auth-service";
+import { useAuthStore } from "@/lib/stores/auth-store";
+import { useUserStore } from "@/lib/stores/user-store";
+import { CHANGEPASSWORD } from "@/constants/keys";
+import { Button } from "@/components/text-button";
+import { ChangeDTO } from "@/lib/DTO/change-dto";
+import { AppRoutes } from "@/constants/routes";
+import { Input } from "@/components/input";
+
+const ChangePasswordForm = () => {
+  const { setLoading: setGlobalLoading } = useAuthStore();
+  const { user } = useUserStore();
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const navigate = useNavigate();
+
+  const { mutate, isPending } = useMutation({
+    mutationKey: [CHANGEPASSWORD],
+    mutationFn: AuthService.changePassword,
+    onSuccess: (res: GenericResponse) => {
+      toast.success(res.message);
+      setGlobalLoading(false);
+      navigate(AppRoutes.Root);
+    },
+    onError: (error: ErrorResponse) => {
+      toast.error(error.message);
+      setGlobalLoading(false);
+    },
+  });
+
+  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (!user?.email_address) {
+      toast.error("No email address was provided");
+      return;
+    }
+
+    const formData = new FormData(e.currentTarget);
+
+    const changePasswordData = Object.fromEntries(
+      formData.entries()
+    ) as ChangeDTO;
+
+    changePasswordData.email = user.email_address;
+
+    setGlobalLoading(true);
+
+    mutate(changePasswordData);
+  };
+
+  return (
+    <form
+      onSubmit={onSubmit}
+      className="p-4 lg:p-6 w-full md:w-fit rounded-md border border-primary/50 bg-primary/15 drop-shadow-2xl space-y-4 lg:space-y-6"
+    >
+      {RESET_PASSWORD_INPUTS.map((r) => (
+        <Input
+          key={r.label}
+          required
+          disabled={isPending}
+          {...r}
+          validation={(value) => {
+            if (r.name === "newPassword") {
+              setConfirmPassword(value);
+            }
+            if (r.name === undefined) {
+              return r.validation({
+                pass1: value,
+                pass2: confirmPassword,
+              });
+            }
+
+            return r.validation(value);
+          }}
+        />
+      ))}
+
+      <Button
+        label="Change"
+        disabled={isPending}
+        loading={isPending}
+        type="submit"
+      />
+    </form>
+  );
+};
+
+export { ChangePasswordForm };
diff --git a/client/src/pages/change-password/page.tsx b/client/src/pages/change-password/page.tsx
new file mode 100644
index 0000000..cbeb870
--- /dev/null
+++ b/client/src/pages/change-password/page.tsx
@@ -0,0 +1,18 @@
+import { Title } from "@/components/title";
+
+import { ChangePasswordForm } from "./_components/change-password-form";
+import { ChangePasswordBack } from "./_components/change-password-back";
+
+const ChangePasswordPage = () => {
+  return (
+    <section className="px-4 lg:px-0 h-full flex-center flex-col gap-y-6 w-fit mx-auto">
+      <Title title="Change Password" />
+
+      <ChangePasswordForm />
+
+      <ChangePasswordBack />
+    </section>
+  );
+};
+
+export { ChangePasswordPage };
diff --git a/client/src/pages/forgot-password/_components/forgot-password-back.tsx b/client/src/pages/forgot-password/_components/forgot-password-back.tsx
index 33c53a1..8c9cc03 100644
--- a/client/src/pages/forgot-password/_components/forgot-password-back.tsx
+++ b/client/src/pages/forgot-password/_components/forgot-password-back.tsx
@@ -1,11 +1,11 @@
+import { PageSwitcher } from "@/components/page-switcher";
 import { useAuthStore } from "@/lib/stores/auth-store";
-import { SwitchAuth } from "@/components/switch-auth";
 import { AppRoutes } from "@/constants/routes";
 
 const ForgotPasswordBack = () => {
   const { loading } = useAuthStore();
 
-  return <SwitchAuth href={AppRoutes.SignIn} tag="Back" disabled={loading} />;
+  return <PageSwitcher href={AppRoutes.SignIn} tag="Back" disabled={loading} />;
 };
 
 export { ForgotPasswordBack };
diff --git a/client/src/pages/reset-password/_components/reset-password-back.tsx b/client/src/pages/reset-password/_components/reset-password-back.tsx
index 83b0ae0..c2b7d6c 100644
--- a/client/src/pages/reset-password/_components/reset-password-back.tsx
+++ b/client/src/pages/reset-password/_components/reset-password-back.tsx
@@ -1,11 +1,11 @@
+import { PageSwitcher } from "@/components/page-switcher";
 import { useAuthStore } from "@/lib/stores/auth-store";
-import { SwitchAuth } from "@/components/switch-auth";
 import { AppRoutes } from "@/constants/routes";
 
 const ResetPasswordBack = () => {
   const { loading } = useAuthStore();
 
-  return <SwitchAuth href={AppRoutes.SignIn} tag="Back" disabled={loading} />;
+  return <PageSwitcher href={AppRoutes.SignIn} tag="Back" disabled={loading} />;
 };
 
 export { ResetPasswordBack };
diff --git a/client/src/pages/reset-password/_components/reset-password-form.tsx b/client/src/pages/reset-password/_components/reset-password-form.tsx
index 2e33763..854929a 100644
--- a/client/src/pages/reset-password/_components/reset-password-form.tsx
+++ b/client/src/pages/reset-password/_components/reset-password-form.tsx
@@ -37,7 +37,10 @@ const ResetPasswordForm = () => {
   const onSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (!token) return;
+    if (!token) {
+      toast.error("No token was provided");
+      return;
+    }
 
     const formData = new FormData(e.currentTarget);
 
@@ -47,8 +50,6 @@ const ResetPasswordForm = () => {
       new_password: formData.get("new-password") as string,
     };
 
-    console.log(resetPasswordData);
-
     setGlobalLoading(true);
 
     mutate(resetPasswordData);
@@ -82,7 +83,7 @@ const ResetPasswordForm = () => {
       ))}
 
       <Button
-        label="Sign In"
+        label="Reset"
         disabled={isPending}
         loading={isPending}
         type="submit"
diff --git a/client/src/pages/root/_components/content/change-password.tsx b/client/src/pages/root/_components/content/change-password.tsx
new file mode 100644
index 0000000..fc10027
--- /dev/null
+++ b/client/src/pages/root/_components/content/change-password.tsx
@@ -0,0 +1,19 @@
+import { PageSwitcher } from "@/components/page-switcher";
+import { useAuthStore } from "@/lib/stores/auth-store";
+import { AppRoutes } from "@/constants/routes";
+
+const ChangePassword = () => {
+  const { loading } = useAuthStore();
+
+  return (
+    <PageSwitcher
+      label="Want to update your password?"
+      tag="Change"
+      href={AppRoutes.ChangePassword}
+      isAccent
+      disabled={loading}
+    />
+  );
+};
+
+export { ChangePassword };
diff --git a/client/src/pages/root/_components/content/index.tsx b/client/src/pages/root/_components/content/index.tsx
index 821ffaa..77dfd39 100644
--- a/client/src/pages/root/_components/content/index.tsx
+++ b/client/src/pages/root/_components/content/index.tsx
@@ -1,6 +1,7 @@
 import { useUserStore } from "@/lib/stores/user-store";
 import { formatDate } from "@/lib/utils/date";
 
+import { ChangePassword } from "./change-password";
 import { WelcomeUser } from "./welcome-user";
 import { InfoPair } from "./info-pair";
 
@@ -9,7 +10,7 @@ const Content = () => {
 
   return (
     <section className="h-[calc(100dvh_-_56px)] flex-center max-w-screen-lg mx-auto px-4 lg:px-0">
-      <div className="w-fit space-y-6">
+      <div className="w-full sm:w-fit space-y-6">
         <WelcomeUser name={user?.username} />
 
         <div className="w-full rounded-md border border-secondary/50 bg-secondary/15 drop-shadow-2xl">
@@ -28,6 +29,8 @@ const Content = () => {
           />
           <InfoPair label="Verified" value={user!.is_verified ? "Yes" : "No"} />
         </div>
+
+        <ChangePassword />
       </div>
     </section>
   );
diff --git a/client/src/pages/root/_components/content/info-pair.tsx b/client/src/pages/root/_components/content/info-pair.tsx
index 9917178..f5c491b 100644
--- a/client/src/pages/root/_components/content/info-pair.tsx
+++ b/client/src/pages/root/_components/content/info-pair.tsx
@@ -5,7 +5,11 @@ interface InfoPairProps {
 
 const InfoPair = ({ label, value }: InfoPairProps) => {
   return (
-    <p className="font-medium flex items-center gap-x-2 px-6 py-4 border-b border-secondary/50">
+    <p
+      className="font-medium flex items-center gap-x-2 px-6 py-4 
+      border-b border-secondary/50 overflow-x-auto
+      scroll-x secondary-scroll"
+    >
       {label}:<span className="font-semibold text-secondary">{value}</span>
     </p>
   );
diff --git a/client/src/pages/root/_components/footer/index.tsx b/client/src/pages/root/_components/footer/index.tsx
index 212ab8f..e9f0bca 100644
--- a/client/src/pages/root/_components/footer/index.tsx
+++ b/client/src/pages/root/_components/footer/index.tsx
@@ -1,8 +1,10 @@
 const Footer = () => {
   return (
     <footer className="bg-secondary/10 backdrop-blur-lg border-t border-secondary/25 p-4">
-      <p className="max-w-screen-lg mx-auto text-center text-sm font-medium text-foreground/60">
-        &copy; {new Date().getUTCFullYear()} Fingertips. All rights reserved.
+      <p className="max-w-screen-lg mx-auto text-center text-xs lg:text-sm font-medium text-foreground/60">
+        &copy; {new Date().getUTCFullYear()} Fingertips{" "}
+        <span className="text-foreground/40 font-medium">(Ghian)</span>. All
+        rights reserved.
       </p>
     </footer>
   );
diff --git a/client/src/pages/sign-in/_components/no-account-yet.tsx b/client/src/pages/sign-in/_components/no-account-yet.tsx
index 14c0704..4dcd005 100644
--- a/client/src/pages/sign-in/_components/no-account-yet.tsx
+++ b/client/src/pages/sign-in/_components/no-account-yet.tsx
@@ -1,12 +1,12 @@
+import { PageSwitcher } from "@/components/page-switcher";
 import { useAuthStore } from "@/lib/stores/auth-store";
-import { SwitchAuth } from "@/components/switch-auth";
 import { AppRoutes } from "@/constants/routes";
 
 const NoAccountYet = () => {
   const { loading } = useAuthStore();
 
   return (
-    <SwitchAuth
+    <PageSwitcher
       label="Don't have an account yet?"
       tag="Sign Up"
       href={AppRoutes.SignUp}
diff --git a/client/src/pages/sign-up/_components/already-have-account.tsx b/client/src/pages/sign-up/_components/already-have-account.tsx
index 50e7999..1fd4c15 100644
--- a/client/src/pages/sign-up/_components/already-have-account.tsx
+++ b/client/src/pages/sign-up/_components/already-have-account.tsx
@@ -1,12 +1,12 @@
+import { PageSwitcher } from "@/components/page-switcher";
 import { useAuthStore } from "@/lib/stores/auth-store";
-import { SwitchAuth } from "@/components/switch-auth";
 import { AppRoutes } from "@/constants/routes";
 
 const AlreadyHaveAccount = () => {
   const { loading } = useAuthStore();
 
   return (
-    <SwitchAuth
+    <PageSwitcher
       label="Already have an account?"
       tag="Sign In"
       href={AppRoutes.SignIn}
diff --git a/constants/routes.go b/constants/routes.go
index 7600533..82d2c4e 100644
--- a/constants/routes.go
+++ b/constants/routes.go
@@ -14,4 +14,5 @@ const (
 	VERIFYTOKEN    = "/verify-token"
 	FORGOTPASSWORD = "/forgot-password"
 	RESETPASSWORD  = "/reset-password"
+	CHANGEPASSWORD = "/change-password"
 )
diff --git a/controllers/auth_controller.go b/controllers/auth_controller.go
index 5422fd6..8cd4acf 100644
--- a/controllers/auth_controller.go
+++ b/controllers/auth_controller.go
@@ -1,7 +1,6 @@
 package controllers
 
 import (
-	"fmt"
 	"math/rand"
 	"strconv"
 	"time"
@@ -271,9 +270,6 @@ func ResetPassword(c fiber.Ctx) error {
 		return c.Status(fiber.StatusInternalServerError).JSON(dto.ErrorDTO{Error: res.Error.Error()})
 	}
 
-	fmt.Println("Password", user.Password)
-	fmt.Println("Old Password", data.OldPassword)
-
 	if err := utils.VerifyPassword([]byte(user.Password), []byte(data.OldPassword)); err != nil {
 		return c.Status(fiber.StatusBadRequest).JSON(dto.ErrorDTO{Error: "Password did not match"})
 	}
@@ -298,3 +294,41 @@ func ResetPassword(c fiber.Ctx) error {
 
 	return c.Status(fiber.StatusOK).JSON(dto.GenericDTO{Message: "Password reset success details has been sent to your email"})
 }
+
+func ChangePassword(c fiber.Ctx) error {
+	var data struct {
+		Email       string `json:"email"`
+		OldPassword string `json:"old_password"`
+		NewPassword string `json:"new_password"`
+	}
+	if err := c.Bind().JSON(&data); err != nil {
+		return c.Status(fiber.StatusBadRequest).JSON(dto.ErrorDTO{Error: "Old or new password is either invalid or empty"})
+	}
+
+	var user models.User
+	res := database.Instance.Where("email_address = ?", data.Email).First(&user)
+	if res.Error != nil {
+		if res.Error == gorm.ErrRecordNotFound {
+			return c.Status(fiber.StatusNotFound).JSON(dto.ErrorDTO{Error: "User not found"})
+		}
+		return c.Status(fiber.StatusInternalServerError).JSON(dto.ErrorDTO{Error: res.Error.Error()})
+	}
+
+	if err := utils.VerifyPassword([]byte(user.Password), []byte(data.OldPassword)); err != nil {
+		return c.Status(fiber.StatusBadRequest).JSON(dto.ErrorDTO{Error: "Password did not match"})
+	}
+
+	password, err := utils.HashPassword(data.NewPassword)
+	if err != nil {
+		return c.Status(fiber.StatusBadRequest).JSON(dto.ErrorDTO{Error: err.Error()})
+	}
+
+	user.Password = password
+
+	res = database.Instance.Save(&user)
+	if res.Error != nil {
+		return c.Status(fiber.StatusInternalServerError).JSON(dto.ErrorDTO{Error: "Unable to save change password credentials"})
+	}
+
+	return c.Status(fiber.StatusOK).JSON(dto.GenericDTO{Message: "Password change success"})
+}
diff --git a/routes/auth_route.go b/routes/auth_route.go
index 04910e7..9f95b61 100644
--- a/routes/auth_route.go
+++ b/routes/auth_route.go
@@ -18,4 +18,5 @@ func UseAuthRoute(app *fiber.App) {
 	app.Get(fmt.Sprintf("%s%s", constants.AUTH, constants.VERIFYTOKEN), controllers.VerifyToken, middlewares.VerifyToken)
 	app.Post(fmt.Sprintf("%s%s", constants.AUTH, constants.FORGOTPASSWORD), controllers.ForgotPassword)
 	app.Post(fmt.Sprintf("%s%s/:token", constants.AUTH, constants.RESETPASSWORD), controllers.ResetPassword)
+	app.Post(fmt.Sprintf("%s%s", constants.AUTH, constants.CHANGEPASSWORD), controllers.ChangePassword)
 }