= ({
+ id,
+ placeholder,
+ register,
+ error,
+}) => {
+ const [showPassword, setShowPassword] = useState(false);
+
+ return (
+
+
+
+ {error &&
{error.message}
}
+
+ );
+};
+
+export default PasswordInput;
diff --git a/src/components/common/auth/verifyButton.tsx b/src/components/common/auth/verifyButton.tsx
new file mode 100644
index 0000000..f9ccc3c
--- /dev/null
+++ b/src/components/common/auth/verifyButton.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+
+interface VerifayButtonProps {
+ text: string;
+ textColor: string;
+ disabled?: boolean;
+ dataTestId?: string;
+}
+
+const VerifyButton: React.FC
= ({
+ text,
+ textColor,
+ disabled,
+ dataTestId,
+}) => (
+
+);
+
+export default VerifyButton;
diff --git a/src/components/password/UpdateModal.tsx b/src/components/password/UpdateModal.tsx
new file mode 100644
index 0000000..57f585c
--- /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
+
+
+
+
+
+
+
+
+ eagles
+
+
+
+
+ verify your identity
+
+
+
+
+ Protecting your account is our priority. Please confirm your
+ identity by providing the code sent to your email address
+
+
+
+ It may take a minute to receive verification message.
+
+
+
+
+
+ {PasswordModal && (
+
+ )}
+
+ );
+};
+
+export default UpdatePasswordPage;
diff --git a/src/redux/api/otpApiSclice.ts b/src/redux/api/otpApiSclice.ts
new file mode 100644
index 0000000..4e69790
--- /dev/null
+++ b/src/redux/api/otpApiSclice.ts
@@ -0,0 +1,62 @@
+import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
+
+import axios from "./api";
+
+interface OtpState {
+ loading: boolean;
+ error: string | null;
+ success: boolean;
+}
+
+const initialState: OtpState = {
+ loading: false,
+ error: null,
+ success: false,
+};
+
+interface VerifyOtpPayload {
+ otp: number;
+ token: string;
+}
+
+export const verifyOtp = createAsyncThunk(
+ "verifyOtp",
+ async ({ otp, token }: VerifyOtpPayload, thunkAPI) => {
+ try {
+ const response = await axios.post(`/users/2fa-verify?token=${token}`, {
+ otp,
+ token,
+ });
+ return response.data;
+ } catch (error) {
+ // @ts-ignore
+ return thunkAPI.rejectWithValue(error.response.data);
+ }
+ },
+);
+
+export const otpVerificationApiSlice = createSlice({
+ name: "verifyOtp",
+ initialState,
+ reducers: {},
+ extraReducers: (builder) => {
+ builder
+ .addCase(verifyOtp.pending, (state) => {
+ state.loading = true;
+ state.error = null;
+ state.success = false;
+ })
+ .addCase(verifyOtp.fulfilled, (state) => {
+ state.loading = false;
+ state.success = true;
+ })
+ // @ts-ignore
+ .addCase(verifyOtp.rejected, (state, action: PayloadAction) => {
+ state.loading = false;
+ // @ts-ignore
+ state.error = action.payload.message;
+ });
+ },
+});
+
+export default otpVerificationApiSlice.reducer;
diff --git a/src/redux/api/updatePasswordApiSlice.ts b/src/redux/api/updatePasswordApiSlice.ts
new file mode 100644
index 0000000..bea1167
--- /dev/null
+++ b/src/redux/api/updatePasswordApiSlice.ts
@@ -0,0 +1,67 @@
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import axios, { AxiosError } from "axios";
+
+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 8509031..b5a2097 100644
--- a/src/redux/store.ts
+++ b/src/redux/store.ts
@@ -2,11 +2,15 @@ import { configureStore } from "@reduxjs/toolkit";
import loginReducer from "./api/loginApiSlice";
import registerReducer from "./reducers/registerSlice";
+import otpVerificationReucer from "./api/otpApiSclice";
+import updatePasswordApiSlice from "./api/updatePasswordApiSlice";
const store = configureStore({
reducer: {
login: loginReducer,
register: registerReducer,
+ otpVerification: otpVerificationReucer,
+ password: updatePasswordApiSlice,
},
});
diff --git a/src/routes/AppRoutes.tsx b/src/routes/AppRoutes.tsx
index 41f21d1..963ecdb 100644
--- a/src/routes/AppRoutes.tsx
+++ b/src/routes/AppRoutes.tsx
@@ -4,6 +4,8 @@ import RootLayout from "../components/layouts/RootLayout";
import Homepage from "../pages/Homepage";
import Login from "../pages/Login";
import RegisterUser from "../pages/RegisterUser";
+import OtpVerificationForm from "../pages/otpVerfication";
+import UpdatePasswordPage from "../pages/passwordUpdatePage";
const AppRoutes = () => (
@@ -12,6 +14,8 @@ const AppRoutes = () => (
} />
} />
+ } />
+ } />
);
diff --git a/src/schemas/otpSchema.ts b/src/schemas/otpSchema.ts
new file mode 100644
index 0000000..870e1ab
--- /dev/null
+++ b/src/schemas/otpSchema.ts
@@ -0,0 +1,7 @@
+import * as Yup from "yup";
+
+const otpSchema = Yup.object().shape({
+ value: Yup.string(),
+});
+
+export default otpSchema;
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;
diff --git a/tsconfig.json b/tsconfig.json
index 3e8e540..ef545c1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,6 +5,11 @@
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
+ "noImplicitAny": false,
+ "types": [
+ "jest",
+ "@testing-library/react"
+ ],
/* Bundler mode */
"moduleResolution": "bundler",