Refactor user verification redirection, fix reset password validation and improve loading states

client/src/components/input.tsx

@@ -78,8 +78,8 @@ const Input = ({
           type={isPassword ? (obscure ? "password" : "text") : type}
           placeholder={placeholder}
           autoComplete={autoComplete}
-          id={name?.toLowerCase() ?? label.toLowerCase()}
-          name={name?.toLowerCase() ?? label.toLowerCase()}
+          id={name?.toLowerCase() ?? label.toLowerCase().trim()}
+          name={name?.toLowerCase() ?? label.toLowerCase().trim()}
           disabled={disabled}
           required={required}
           maxLength={maxLength}

client/src/constants/collections.ts

@@ -85,7 +85,7 @@ export const SIGNIN_INPUTS = [
 
 export const RESET_PASSWORD_INPUTS = [
   {
-    name: "old-password",
+    name: "oldPassword",
     label: "Old Password",
     tooltip: "Enter your current password",
     placeholder: "e.g. m#P52s@ap$V",
@@ -96,7 +96,7 @@ export const RESET_PASSWORD_INPUTS = [
     maxLength: 128,
   },
   {
-    name: "new-password",
+    name: "newPassword",
     label: "New Password",
     tooltip:
       "Create a password with at least 8 characters, including uppercase, lowercase, numbers, and special characters for security",

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

@@ -1,4 +1,5 @@
 export type ResetDTO = {
   token: string;
-  password: string;
+  oldpassword: string;
+  newpassword: string;
 };

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

@@ -172,7 +172,8 @@ export const AuthService = {
           "Content-Type": "application/json",
         },
         body: JSON.stringify({
-          password: reset.password,
+          old_password: reset.oldpassword,
+          new_password: reset.newpassword,
         }),
       }
     );

client/src/pages/reset-password/_components/reset-password-form.tsx

@@ -55,7 +55,7 @@ const ResetPasswordForm = () => {
           disabled={isPending}
           {...r}
           validation={(value) => {
-            if (r.name === "new-password") {
+            if (r.name === "newPassword") {
               setConfirmPassword(value);
             }
             if (r.name === undefined) {

client/src/pages/sign-in/_components/sign-in-form.tsx

@@ -6,8 +6,8 @@ import { toast } from "sonner";
 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 { SIGNIN_INPUTS } from "@/constants/collections";
+import { useAuthStore } from "@/lib/stores/auth-store";
 import { SignInDTO } from "@/lib/DTO/sign-in-dto";
 import { Button } from "@/components/text-button";
 import { AppRoutes } from "@/constants/routes";
@@ -25,28 +25,13 @@ const SignInForm = () => {
       setAuthorized(true);
     },
     onError: (error: ErrorResponse) => {
-      toast.error("Please verify to sign in. Didn't get the code?", {
-        className: "gap-x-4",
-        actionButtonStyle: {
-          background: "rgb(var(--accent))",
-          color: "rgb(var(--foreground))",
-          padding: "16px",
-          marginLeft: "16px",
-          filter: `
-            drop-shadow(0 0px 25px rgb(var(--accent))) 
-            drop-shadow(0 0px 50px rgb(var(--accent)))
-          `,
-        },
-        action: {
-          label: "Resend",
-          onClick: () => navigate(AppRoutes.ResendVerify),
-        },
-      });
-
       if (error.status == 403) {
+        toast.error("Please verify to sign in");
         navigate(AppRoutes.VerifyEmail);
+      } else {
+        toast.error(error.message);
+        setAuthorized(false);
       }
-      setAuthorized(false);
     },
   });
 

client/src/pages/verify-email/_components/resend-code.tsx

@@ -22,16 +22,17 @@ const ResendCode = () => {
   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"
+        border-secondary/50 bg-secondary/15 drop-shadow-2xl flex-center gap-x-2"
     >
       <p className="font-medium">Didn't receive a code?</p>
       <button
-        className="font-bold underline-offset-4 hover:underline text-secondary transition-all hover:drop-shadow-secondary-glow"
+        className="font-bold underline-offset-4 hover:underline text-secondary transition-all hover:drop-shadow-secondary-glow
+          disabled:text-secondary/50 disabled:pointer-events-none"
         type="button"
         onClick={onClick}
         disabled={isPending}
       >
-        Resend
+        {isPending ? "Resending..." : "Resend"}
       </button>
     </div>
   );

controllers/auth_controller.go

@@ -1,6 +1,7 @@
 package controllers
 
 import (
+	"fmt"
 	"math/rand"
 	"strconv"
 	"time"
@@ -250,10 +251,11 @@ func ForgotPassword(c fiber.Ctx) error {
 
 func ResetPassword(c fiber.Ctx) error {
 	var data struct {
-		Password string `json:"password"`
+		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: "Either password is invalid or empty"})
+		return c.Status(fiber.StatusBadRequest).JSON(dto.ErrorDTO{Error: "Old or new password is either invalid or empty"})
 	}
 
 	token := c.Params("token")
@@ -271,7 +273,14 @@ func ResetPassword(c fiber.Ctx) error {
 		return c.Status(fiber.StatusInternalServerError).JSON(dto.ErrorDTO{Error: res.Error.Error()})
 	}
 
-	password, err := utils.HashPassword(data.Password)
+	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"})
+	}
+
+	password, err := utils.HashPassword(data.NewPassword)
 	if err != nil {
 		return c.Status(fiber.StatusBadRequest).JSON(dto.ErrorDTO{Error: err.Error()})
 	}