From ab1024be75b5777d461d886f9709d2e197a64c8d Mon Sep 17 00:00:00 2001
From: Fingertips <ghiantan0418@gmail.com>
Date: Mon, 23 Sep 2024 18:39:29 +0800
Subject: [PATCH 1/2] Create reset password page - Added a reset password form
 with three inputs: `old password`, `new password`, and `confirm password`. -
 Included a submit button to handle form submission for the password reset. -
 Ensured validation for new password and confirm password fields to match. -
 Applied basic styling consistent with the current design.

---
 client/src/App.tsx                            |  5 ++
 client/src/constants/collections.ts           | 43 +++++++++++++-
 client/src/constants/keys.ts                  |  1 +
 .../_components/reset-password-form.tsx       | 56 +++++++++++++++++++
 client/src/pages/reset-password/page.tsx      | 18 ++++++
 .../sign-in/_components/sign-in-form.tsx      | 10 ++--
 .../sign-up/_components/sign-up-form.tsx      |  4 +-
 7 files changed, 127 insertions(+), 10 deletions(-)
 create mode 100644 client/src/pages/reset-password/_components/reset-password-form.tsx
 create mode 100644 client/src/pages/reset-password/page.tsx

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 386f2b1..30811c4 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,6 +1,7 @@
 import { Route, Routes } from "react-router-dom";
 
 import { ForgotPasswordPage } from "@/pages/forgot-password/page";
+import { ResetPasswordPage } from "@/pages/reset-password/page";
 import VerifyEmailPage from "@/pages/verify-email/page";
 import PrivateGuard from "@/guards/private-guard";
 import { AppRoutes } from "@/constants/routes";
@@ -25,6 +26,10 @@ function App() {
           path={AppRoutes.ForgotPassword}
           element={<ForgotPasswordPage />}
         />
+        <Route
+          path={`${AppRoutes.ResetPassword}/:token`}
+          element={<ResetPasswordPage />}
+        />
       </Routes>
     </main>
   );
diff --git a/client/src/constants/collections.ts b/client/src/constants/collections.ts
index 453f821..27a6ab2 100644
--- a/client/src/constants/collections.ts
+++ b/client/src/constants/collections.ts
@@ -7,7 +7,7 @@ import {
   ValidateUsername,
 } from "@/lib/utils/validations";
 
-export const SIGNUPINPUTS = [
+export const SIGNUP_INPUTS = [
   {
     name: "username",
     label: "Username",
@@ -35,7 +35,7 @@ export const SIGNUPINPUTS = [
     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.",
+      "Create a password with at least 8 characters, including uppercase, lowercase, numbers, and special characters for security.",
     placeholder: "e.g. m#P52s@ap$V",
     type: "password",
     autoComplete: "new-password",
@@ -56,7 +56,7 @@ export const SIGNUPINPUTS = [
   },
 ];
 
-export const SIGNININPUTS = [
+export const SIGNIN_INPUTS = [
   {
     name: "email",
     label: "Email Address",
@@ -82,3 +82,40 @@ export const SIGNININPUTS = [
     maxLength: 128,
   },
 ];
+
+export const RESET_PASSWORD_INPUTS = [
+  {
+    name: "old-password",
+    label: "Old Password",
+    tooltip: "Enter your current password",
+    placeholder: "e.g. m#P52s@ap$V",
+    type: "password",
+    autoComplete: "new-password",
+    suffixIcon: Lock,
+    validation: ValidatePassword,
+    maxLength: 128,
+  },
+  {
+    name: "new-password",
+    label: "New Password",
+    tooltip:
+      "Create a password with at least 8 characters, including uppercase, lowercase, numbers, and special characters for 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,
+  },
+];
diff --git a/client/src/constants/keys.ts b/client/src/constants/keys.ts
index f22fa6f..a7c242f 100644
--- a/client/src/constants/keys.ts
+++ b/client/src/constants/keys.ts
@@ -5,3 +5,4 @@ export const VERIFYEMAILKEY = "verify-email";
 export const RESENDVERIFYKEY = "resend-verify";
 export const VERIFYTOKENKEY = "verify-token";
 export const FORGOTPASSWORDKEY = "forgot-password";
+export const RESETPASSWORDKEY = "reset-password";
diff --git a/client/src/pages/reset-password/_components/reset-password-form.tsx b/client/src/pages/reset-password/_components/reset-password-form.tsx
new file mode 100644
index 0000000..92018a3
--- /dev/null
+++ b/client/src/pages/reset-password/_components/reset-password-form.tsx
@@ -0,0 +1,56 @@
+import { useMutation } from "@tanstack/react-query";
+import { FormEvent, useState } from "react";
+
+import { RESET_PASSWORD_INPUTS } from "@/constants/collections";
+import { RESETPASSWORDKEY } from "@/constants/keys";
+import { Button } from "@/components/text-button";
+import { Input } from "@/components/input";
+
+const ResetPasswordForm = () => {
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const { isPending } = useMutation({
+    mutationKey: [RESETPASSWORDKEY],
+  });
+
+  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+  };
+
+  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 === "new-password") {
+              setConfirmPassword(value);
+            }
+            if (r.name === undefined) {
+              return r.validation({
+                pass1: value,
+                pass2: confirmPassword,
+              });
+            }
+
+            return r.validation(value);
+          }}
+        />
+      ))}
+
+      <Button
+        label="Sign In"
+        disabled={isPending}
+        loading={isPending}
+        type="submit"
+      />
+    </form>
+  );
+};
+
+export { ResetPasswordForm };
diff --git a/client/src/pages/reset-password/page.tsx b/client/src/pages/reset-password/page.tsx
new file mode 100644
index 0000000..05f0a65
--- /dev/null
+++ b/client/src/pages/reset-password/page.tsx
@@ -0,0 +1,18 @@
+import { ResetPasswordForm } from "./_components/reset-password-form";
+
+const ResetPasswordPage = () => {
+  return (
+    <section className="px-4 lg:px-0 h-full flex-center flex-col gap-y-6 w-fit mx-auto">
+      <h2
+        className="text-lg lg:text-2xl font-extrabold text-center uppercase w-full
+        rounded-md border border-primary/50 bg-primary/15 drop-shadow-2xl p-4"
+      >
+        Reset Password
+      </h2>
+
+      <ResetPasswordForm />
+    </section>
+  );
+};
+
+export { ResetPasswordPage };
diff --git a/client/src/pages/sign-in/_components/sign-in-form.tsx b/client/src/pages/sign-in/_components/sign-in-form.tsx
index d6ed026..98a5dc0 100644
--- a/client/src/pages/sign-in/_components/sign-in-form.tsx
+++ b/client/src/pages/sign-in/_components/sign-in-form.tsx
@@ -7,7 +7,7 @@ import { GenericResponse } from "@/lib/classes/generic-response-class";
 import { ErrorResponse } from "@/lib/classes/error-response-class";
 import { AuthService } from "@/lib/services/auth-service";
 import { useAuthStore } from "@/lib/stores/auth-store";
-import { SIGNININPUTS } from "@/constants/collections";
+import { SIGNIN_INPUTS } from "@/constants/collections";
 import { SignInDTO } from "@/lib/DTO/sign-in-dto";
 import { Button } from "@/components/text-button";
 import { AppRoutes } from "@/constants/routes";
@@ -52,13 +52,13 @@ const SignInForm = () => {
       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"
     >
-      {SIGNININPUTS.map((s) => (
+      {SIGNIN_INPUTS.map((i) => (
         <Input
-          key={s.label}
+          key={i.label}
           required
           disabled={isPending}
-          {...s}
-          validation={s.validation}
+          {...i}
+          validation={i.validation}
         />
       ))}
 
diff --git a/client/src/pages/sign-up/_components/sign-up-form.tsx b/client/src/pages/sign-up/_components/sign-up-form.tsx
index f4d24fd..338d88e 100644
--- a/client/src/pages/sign-up/_components/sign-up-form.tsx
+++ b/client/src/pages/sign-up/_components/sign-up-form.tsx
@@ -5,7 +5,7 @@ import { toast } from "sonner";
 
 import { ErrorResponse } from "@/lib/classes/error-response-class";
 import { AuthService } from "@/lib/services/auth-service";
-import { SIGNUPINPUTS } from "@/constants/collections";
+import { SIGNUP_INPUTS } from "@/constants/collections";
 import { SignUpDTO } from "@/lib/DTO/sign-up-dto";
 import { Button } from "@/components/text-button";
 import { AppRoutes } from "@/constants/routes";
@@ -41,7 +41,7 @@ const SignUpForm = () => {
       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"
     >
-      {SIGNUPINPUTS.map((s) => (
+      {SIGNUP_INPUTS.map((s) => (
         <Input
           key={s.label}
           required

From 0e077b244a81f751f21c00c32912d3d05e196487 Mon Sep 17 00:00:00 2001
From: Fingertips <ghiantan0418@gmail.com>
Date: Mon, 23 Sep 2024 19:40:37 +0800
Subject: [PATCH 2/2] Consume reset password api - Integrated the reset
 password API into the form submission flow. - Handled API request to send
 `old password`, `new password`, and `confirm password` data. - Implemented
 error handling for invalid responses from the API. - Displayed success and
 error messages based on API response. - Updated form state to handle loading
 and submission status. - Redirected to `sign-in` page if successful.

---
 client/src/lib/DTO/reset-dto.ts               |  4 +++
 client/src/lib/services/auth-service.ts       | 28 ++++++++++++++++++
 client/src/lib/stores/auth-store.ts           |  2 +-
 .../_components/forgot-password-form.tsx      | 29 ++++++++++++++-----
 .../_components/reset-password-form.tsx       | 29 ++++++++++++++++++-
 client/src/pages/reset-password/page.tsx      |  5 ++++
 controllers/auth_controller.go                |  6 ++--
 7 files changed, 90 insertions(+), 13 deletions(-)
 create mode 100644 client/src/lib/DTO/reset-dto.ts

diff --git a/client/src/lib/DTO/reset-dto.ts b/client/src/lib/DTO/reset-dto.ts
new file mode 100644
index 0000000..9422bf1
--- /dev/null
+++ b/client/src/lib/DTO/reset-dto.ts
@@ -0,0 +1,4 @@
+export type ResetDTO = {
+  token: string;
+  password: string;
+};
diff --git a/client/src/lib/services/auth-service.ts b/client/src/lib/services/auth-service.ts
index 648bddb..a5a380c 100644
--- a/client/src/lib/services/auth-service.ts
+++ b/client/src/lib/services/auth-service.ts
@@ -4,6 +4,7 @@ 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 { AppRoutes } from "@/constants/routes";
+import { ResetDTO } from "../DTO/reset-dto";
 
 const baseURL =
   import.meta.env.VITE_ENV === "development"
@@ -158,6 +159,33 @@ export const AuthService = {
       });
     }
 
+    return new GenericResponse({
+      message: data.message,
+    });
+  },
+  resetPassword: async (reset: ResetDTO) => {
+    const res = await fetch(
+      `${baseURL}${AppRoutes.ResetPassword}/${reset.token}`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          password: reset.password,
+        }),
+      }
+    );
+
+    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/lib/stores/auth-store.ts b/client/src/lib/stores/auth-store.ts
index 1f6860a..3581a56 100644
--- a/client/src/lib/stores/auth-store.ts
+++ b/client/src/lib/stores/auth-store.ts
@@ -1,5 +1,5 @@
-import { create } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
+import { create } from "zustand";
 
 interface AuthStoreState {
   email: string;
diff --git a/client/src/pages/forgot-password/_components/forgot-password-form.tsx b/client/src/pages/forgot-password/_components/forgot-password-form.tsx
index 3db235e..a841d7e 100644
--- a/client/src/pages/forgot-password/_components/forgot-password-form.tsx
+++ b/client/src/pages/forgot-password/_components/forgot-password-form.tsx
@@ -1,7 +1,6 @@
 import { useMutation } from "@tanstack/react-query";
-import { useNavigate } from "react-router-dom";
+import { FormEvent, useState } from "react";
 import { Mail } from "lucide-react";
-import { FormEvent } from "react";
 import { toast } from "sonner";
 
 import { GenericResponse } from "@/lib/classes/generic-response-class";
@@ -10,18 +9,17 @@ import { AuthService } from "@/lib/services/auth-service";
 import { ValidateEmail } from "@/lib/utils/validations";
 import { FORGOTPASSWORDKEY } from "@/constants/keys";
 import { Button } from "@/components/text-button";
-import { AppRoutes } from "@/constants/routes";
 import { Input } from "@/components/input";
 
 const ForgotPasswordForm = () => {
-  const navigate = useNavigate();
-
+  const [submitted, setSubmitted] = useState(false);
+  const [email, setEmail] = useState("");
   const { mutate, isPending } = useMutation({
     mutationKey: [FORGOTPASSWORDKEY],
     mutationFn: AuthService.forgotPassword,
     onSuccess: (res: GenericResponse) => {
       toast.success(res.message);
-      navigate(AppRoutes.ResetPassword);
+      setSubmitted(true);
     },
     onError: (error: ErrorResponse) => toast.error(error.message),
   });
@@ -33,10 +31,25 @@ const ForgotPasswordForm = () => {
 
     const forgotPasswordData = Object.fromEntries(formData.entries());
 
-    mutate(forgotPasswordData["email"] as string);
+    const emailData = forgotPasswordData["email"] as string;
+
+    setEmail(emailData);
+
+    mutate(emailData);
   };
 
-  return (
+  return submitted ? (
+    <div 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">
+      <div className="w-16 h-16 bg-accent rounded-full flex items-center justify-center mx-auto mb-4">
+        <Mail className="h-8 w-8 text-white" />
+      </div>
+      <p className="text-sm text-foreground/80 text-center lg:w-[386px] mx-auto">
+        If an account exists for{" "}
+        <span className="font-medium text-primary">{email}</span>, you will
+        receive a password reset link shortly.
+      </p>
+    </div>
+  ) : (
     <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"
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 92018a3..eccc1ae 100644
--- a/client/src/pages/reset-password/_components/reset-password-form.tsx
+++ b/client/src/pages/reset-password/_components/reset-password-form.tsx
@@ -1,19 +1,46 @@
+import { useNavigate, useParams } from "react-router-dom";
 import { useMutation } from "@tanstack/react-query";
 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 { RESETPASSWORDKEY } from "@/constants/keys";
 import { Button } from "@/components/text-button";
+import { AppRoutes } from "@/constants/routes";
+import { ResetDTO } from "@/lib/DTO/reset-dto";
 import { Input } from "@/components/input";
 
 const ResetPasswordForm = () => {
+  const navigate = useNavigate();
+  const { token } = useParams();
   const [confirmPassword, setConfirmPassword] = useState("");
-  const { isPending } = useMutation({
+  const { mutate, isPending } = useMutation({
     mutationKey: [RESETPASSWORDKEY],
+    mutationFn: AuthService.resetPassword,
+    onSuccess: (res: GenericResponse) => {
+      toast.success(res.message);
+      navigate(AppRoutes.SignIn);
+    },
+    onError: (error: ErrorResponse) => toast.error(error.message),
   });
 
   const onSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
+
+    if (!token) return;
+
+    const formData = new FormData(e.currentTarget);
+
+    const resetPasswordData = Object.fromEntries(
+      formData.entries()
+    ) as ResetDTO;
+
+    resetPasswordData.token = token;
+
+    mutate(resetPasswordData);
   };
 
   return (
diff --git a/client/src/pages/reset-password/page.tsx b/client/src/pages/reset-password/page.tsx
index 05f0a65..83af043 100644
--- a/client/src/pages/reset-password/page.tsx
+++ b/client/src/pages/reset-password/page.tsx
@@ -1,3 +1,6 @@
+import { SwitchAuth } from "@/components/switch-auth";
+import { AppRoutes } from "@/constants/routes";
+
 import { ResetPasswordForm } from "./_components/reset-password-form";
 
 const ResetPasswordPage = () => {
@@ -11,6 +14,8 @@ const ResetPasswordPage = () => {
       </h2>
 
       <ResetPasswordForm />
+
+      <SwitchAuth href={AppRoutes.Root} tag="Back" />
     </section>
   );
 };
diff --git a/controllers/auth_controller.go b/controllers/auth_controller.go
index 0a66b35..bbcd928 100644
--- a/controllers/auth_controller.go
+++ b/controllers/auth_controller.go
@@ -256,14 +256,14 @@ func ResetPassword(c fiber.Ctx) error {
 		return c.Status(fiber.StatusBadRequest).JSON(dto.ErrorDTO{Error: "Either password is invalid or empty"})
 	}
 
-	id := c.Params("token")
-	if id == "" {
+	token := c.Params("token")
+	if token == "" {
 		return c.Status(fiber.StatusBadRequest).JSON(dto.ErrorDTO{Error: "Missing token"})
 	}
 
 	var user models.User
 
-	res := database.Instance.Where("reset_password_token = ?", id).First(&user)
+	res := database.Instance.Where("reset_password_token = ?", token).First(&user)
 	if res.Error != nil {
 		if res.Error == gorm.ErrRecordNotFound {
 			return c.Status(fiber.StatusNotFound).JSON(dto.ErrorDTO{Error: "User not found"})