feat: implement change password functionality in settings

- Added changePasswordHandler function in Settings page
- Setup state for password form inputs
- Added Zod schema validation for new password
- Implemented changePassword async thunk in authSlice

Author: sabbirhosen44

src/pages/settings/SettingPage.tsx

@@ -23,23 +23,34 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useToast } from "@/hooks/use-toast";
 import { AppDispatch, RootState } from "@/store";
-import { loadUser, updateProfile } from "@/store/slices/authSlice";
+import {
+  changePassword,
+  loadUser,
+  updateProfile,
+} from "@/store/slices/authSlice";
 import { ProfileForm } from "@/types";
 import { useEffect, useState } from "react";
 import { FaRegTrashCan } from "react-icons/fa6";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router";
+import { passwordFormValues, passwordSchema } from "@/schemas";
+import { FaEye, FaEyeSlash } from "react-icons/fa";
 
 const SettingPage = () => {
   const { user, isAuthenticated, isLoading } = useSelector(
     (state: RootState) => state.auth
   );
+  const [isShowCurrentPassword, setIsShowCurrentPassword] =
+    useState<boolean>(false);
+  const [isShowNewPassword, setIsShowNewPassword] = useState<boolean>(false);
+  const [isShowConfirmPassword, setIsShowConfirmPassword] =
+    useState<boolean>(false);
   const [profileForm, setProfileForm] = useState<ProfileForm>({
     name: user?.name,
     email: user?.email,
     imageFile: null,
   });
-  const [passwordForm, setPasswordForm] = useState({
+  const [passwordForm, setPasswordForm] = useState<passwordFormValues>({
     currentPassword: "",
     newPassword: "",
     confirmPassword: "",
@@ -84,7 +95,10 @@ const SettingPage = () => {
   const profileFormChangeHandler = (field: string, value: any) => {
     setProfileForm((prev) => ({ ...prev, [field]: value }));
   };
-  const passwordFormChangeHandler = (field: string, value: string) => {
+  const passwordFormChangeHandler = (
+    field: keyof passwordFormValues,
+    value: string
+  ) => {
     setPasswordForm((prev) => ({ ...prev, [field]: value }));
   };
 
@@ -114,7 +128,30 @@ const SettingPage = () => {
     }
   };
 
-  const updatePasswordHandler = () => {};
+  const updatePasswordHandler = async () => {
+    try {
+      const validateData = passwordSchema.parse(passwordForm);
+
+      const formData = new FormData();
+      formData.append("currentPassword", validateData.currentPassword);
+      formData.append("newPassword", validateData.newPassword);
+
+      const result = await dispatch(changePassword(formData));
+      if (changePassword.fulfilled.match(result)) {
+        showToast("Password update successfully", "success");
+      } else {
+        throw new Error(result.payload as string);
+      }
+    } catch (error: any) {
+      let errorMessage;
+      if (error.errors) {
+        errorMessage = error.errors[0].message;
+      } else {
+        errorMessage = error.message;
+      }
+      showToast(`${errorMessage} ` || "Failed to updated Password", "error");
+    }
+  };
 
   if (isLoading) return <LoadingSnipper>Loading Settings...</LoadingSnipper>;
 
@@ -232,35 +269,53 @@ const SettingPage = () => {
           </CardHeader>
           <CardContent className="space-y-6">
             <div className="grid sm:grid-cols-2 gap-4">
-              <div className="space-y-2">
+              <div className="relative space-y-2">
                 <Label>Current Password</Label>
                 <Input
-                  type="password"
+                  type={isShowCurrentPassword ? "text" : "password"}
                   className=" border border-border"
                   onChange={(e) =>
                     passwordFormChangeHandler("currentPassword", e.target.value)
                   }
                 />
+                <div
+                  className={`absolute right-4 top-1/2   cursor-pointer`}
+                  onClick={() => setIsShowCurrentPassword((prev) => !prev)}
+                >
+                  {isShowCurrentPassword ? <FaEyeSlash /> : <FaEye />}
+                </div>
               </div>
-              <div className="space-y-2">
+              <div className="space-y-2 relative">
                 <Label>New Password</Label>
                 <Input
-                  type="password"
+                  type={isShowNewPassword ? "text" : "password"}
                   className=" border border-border"
                   onChange={(e) =>
                     passwordFormChangeHandler("newPassword", e.target.value)
                   }
                 />
+                <div
+                  className={`absolute right-4 top-1/2   cursor-pointer`}
+                  onClick={() => setIsShowNewPassword((prev) => !prev)}
+                >
+                  {isShowNewPassword ? <FaEyeSlash /> : <FaEye />}
+                </div>
               </div>
-              <div className="space-y-2">
+              <div className="space-y-2 relative">
                 <Label>Confirm New Password</Label>
                 <Input
-                  type="password"
+                  type={isShowConfirmPassword ? "text" : "password"}
                   className=" border border-border"
                   onChange={(e) =>
                     passwordFormChangeHandler("confirmPassword", e.target.value)
                   }
                 />
+                <div
+                  className={`absolute right-4 top-1/2   cursor-pointer`}
+                  onClick={() => setIsShowConfirmPassword((prev) => !prev)}
+                >
+                  {isShowConfirmPassword ? <FaEyeSlash /> : <FaEye />}
+                </div>
               </div>
             </div>
             <Button onClick={updatePasswordHandler}>Update Password</Button>

src/schemas/index.ts

@@ -18,3 +18,30 @@ export const snippetFormSchema = z.object({
 });
 
 export type SnippetFormInput = z.infer<typeof snippetFormSchema>;
+
+export const passwordSchema = z
+  .object({
+    currentPassword: z.string(),
+    newPassword: z
+      .string()
+      .min(8, { message: "Password must be atleast 8 characters" })
+      .regex(/[A-Z]/, {
+        message: "Password must include atleast one uppercase letter",
+      })
+      .regex(/[a-z]/, {
+        message: "Password must include atleast one lowercase letter",
+      })
+      .regex(/[0-9]/, {
+        message: "Password must include atleast one number",
+      })
+      .regex(/[^a-zA-z0-9]/, {
+        message: "Password must include atleast one special character",
+      }),
+    confirmPassword: z.string(),
+  })
+  .refine((data) => data.newPassword === data.confirmPassword, {
+    message: "Password do not match",
+    path: ["confirmPassword"],
+  });
+
+export type passwordFormValues = z.infer<typeof passwordSchema>;

src/store/slices/authSlice.ts

@@ -184,8 +184,31 @@ export const updateProfile = createAsyncThunk(
 );
 
 export const changePassword = createAsyncThunk(
-  "auth/updatePassword",
-  async (_, { rejectWithValue }) => {}
+  "auth/changePassword",
+  async (passwordFormData: FormData, { rejectWithValue }) => {
+    try {
+      const token = localStorage.getItem("token");
+      if (!token) {
+        return rejectWithValue("No authentication token");
+      }
+
+      const response = await axios.put(
+        `${API}/auth/change-password`,
+        passwordFormData,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
+
+      return response.data.data;
+    } catch (error: any) {
+      return rejectWithValue(
+        error.response?.data?.message || "Failed to update profile data"
+      );
+    }
+  }
 );
 
 export const deleteAccount = createAsyncThunk(
@@ -312,11 +335,22 @@ const authSlice = createSlice({
       .addCase(updateProfile.fulfilled, (state, action) => {
         state.isLoading = false;
         state.user = action.payload;
-        console.log(state.user);
       })
       .addCase(updateProfile.rejected, (state, action) => {
         state.isLoading = false;
         state.error = action.payload as string;
+      })
+      // Change Password
+      .addCase(changePassword.pending, (state) => {
+        state.isLoading = true;
+        state.error = null;
+      })
+      .addCase(changePassword.fulfilled, (state, action) => {
+        state.isLoading = false;
+      })
+      .addCase(changePassword.rejected, (state, action) => {
+        state.isLoading = false;
+        state.error = action.payload as string;
       });
   },
 });