= ({
+ id,
+ placeholder,
+ register,
+ error,
+}) => {
+ const [showPassword, setShowPassword] = useState(false);
+
+ return (
+
+
+
+ {error &&
{error.message}
}
+
+ );
+};
+
+export default PasswordInput;
diff --git a/src/components/password/updateModal.tsx b/src/components/password/updateModal.tsx
new file mode 100644
index 0000000..9ed4748
--- /dev/null
+++ b/src/components/password/updateModal.tsx
@@ -0,0 +1,102 @@
+import React, { useState } from "react";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { toast, ToastContainer } from "react-toastify";
+import { AxiosError } from "axios";
+import { useDispatch } from "react-redux";
+
+import updatePasswordSchema from "../../schemas/updatePasswordSchema";
+import { updatePassword } from "../../redux/api/updatePasswordApiSlice";
+import PasswordInput from "../common/auth/password";
+
+interface UpdatePasswordProps {
+ setPasswordModal: (isOpen: boolean) => void;
+}
+
+const UpdatePasswordmod: React.FC
= ({
+ setPasswordModal,
+}) => {
+ const dispatch = useDispatch();
+ const [loading, setLoading] = useState(false);
+ const {
+ register,
+ handleSubmit,
+ formState: { errors },
+ } = useForm({
+ resolver: yupResolver(updatePasswordSchema),
+ });
+
+ const onSubmit = async (data: {
+ oldPassword: string;
+ newPassword: string;
+ confirmPassword: string;
+ }) => {
+ try {
+ setLoading(true);
+ // @ts-ignore
+ const response = await dispatch(updatePassword(data)).unwrap();
+ setLoading(false);
+ toast.success(response.message);
+ setTimeout(() => {
+ setPasswordModal(false);
+ }, 3000);
+ } catch (err) {
+ setLoading(false);
+ const error = err as AxiosError;
+ toast.error(error.message);
+ }
+ };
+
+ return (
+
+
+
+
+ Update Password
+
+
+
+
+
+ {PasswordModal && (
+
+ )}
+
+ );
+};
+
+export default UpdatePasswordPage;
diff --git a/src/redux/api/updatePasswordApiSlice.ts b/src/redux/api/updatePasswordApiSlice.ts
new file mode 100644
index 0000000..4afe4e1
--- /dev/null
+++ b/src/redux/api/updatePasswordApiSlice.ts
@@ -0,0 +1,69 @@
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import { AxiosError } from "axios";
+
+import axios from "./api";
+
+interface UpdatePasswordState {
+ loading: boolean;
+ error: string | null;
+}
+
+const initialState: UpdatePasswordState = {
+ loading: false,
+ error: null,
+};
+
+interface UpdatePasswordPayload {
+ oldPassword: string;
+ newPassword: string;
+ confirmPassword: string;
+}
+
+interface UpdatePasswordResponse {
+ message: string;
+}
+
+interface UpdatePasswordError {
+ message: string;
+}
+const token = localStorage.getItem("accessToken");
+export const updatePassword = createAsyncThunk<
+UpdatePasswordResponse,
+UpdatePasswordPayload,
+{ rejectValue: UpdatePasswordError }
+>("updatePassword", async (payload, { rejectWithValue }) => {
+ try {
+ const response = await axios.put("/users/passwordupdate", payload, {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ },
+ });
+ return response.data;
+ } catch (error) {
+ const axiosError = error as AxiosError;
+ return rejectWithValue(axiosError.response?.data as UpdatePasswordError);
+ }
+});
+
+const updatePasswordApiSlice = createSlice({
+ name: "updatePassword",
+ initialState,
+ reducers: {},
+ extraReducers: (builder) => {
+ builder
+ .addCase(updatePassword.pending, (state) => {
+ state.loading = true;
+ state.error = null;
+ })
+ .addCase(updatePassword.fulfilled, (state) => {
+ state.loading = false;
+ state.error = null;
+ })
+ .addCase(updatePassword.rejected, (state, { payload }) => {
+ state.loading = false;
+ state.error = payload?.message || null;
+ });
+ },
+});
+
+export default updatePasswordApiSlice.reducer;
diff --git a/src/redux/store.ts b/src/redux/store.ts
index 3105127..5eaf138 100644
--- a/src/redux/store.ts
+++ b/src/redux/store.ts
@@ -6,6 +6,7 @@ import otpVerificationReucer from "./api/otpApiSclice";
import getLinkReducer from "./reducers/getLinkSlice";
import resetReducer from "./reducers/resetPasswordSlice";
import categoriesReducer from "./reducers/categoriesSlice";
+import updatePasswordApiSlice from "./api/updatePasswordApiSlice";
const store = configureStore({
reducer: {
@@ -15,6 +16,7 @@ const store = configureStore({
getLink: getLinkReducer,
reset: resetReducer,
categories: categoriesReducer,
+ updatePassword: updatePasswordApiSlice,
},
});
diff --git a/src/routes/AppRoutes.tsx b/src/routes/AppRoutes.tsx
index 0e477f9..a768e5d 100644
--- a/src/routes/AppRoutes.tsx
+++ b/src/routes/AppRoutes.tsx
@@ -11,6 +11,7 @@ import GetLinkPage from "../pages/GetLinkPage";
import ResetPassword from "../pages/ResetPassword";
import SellerDashboard from "../dashboard/sellers/Index";
import AddProduct from "../dashboard/sellers/AddProduct";
+import UpdatePasswordPage from "../pages/passwordUpdatePage";
const AppRoutes = () => (
@@ -26,6 +27,7 @@ const AppRoutes = () => (
} />
} />
} />
+ } />
);
diff --git a/src/schemas/updatePasswordSchema.ts b/src/schemas/updatePasswordSchema.ts
new file mode 100644
index 0000000..6bfd0b1
--- /dev/null
+++ b/src/schemas/updatePasswordSchema.ts
@@ -0,0 +1,24 @@
+import { object, string, ref } from "yup";
+
+const updatePasswordSchema = object({
+ oldPassword: string().required("Old password is required"),
+ newPassword: string()
+ .required("New password is required")
+ .min(8, "Password must be at least 8 characters long")
+ .matches(/[a-z]/, "Password must contain at least one lowercase letter")
+ .matches(/[A-Z]/, "Password must contain at least one uppercase letter")
+ .matches(/[0-9]/, "Password must contain at least one number")
+ .matches(
+ /[!@#$%^&*(),.?":{}|<>]/,
+ "Password must contain at least one special character",
+ )
+ .notOneOf(
+ [ref("oldPassword")],
+ "New password must be different from old password",
+ ),
+ confirmPassword: string()
+ .required("Confirm password is required")
+ .oneOf([ref("newPassword")], "Confirm password must match new password"),
+});
+
+export default updatePasswordSchema;