remove eslint error & initials unit tests

package.json

@@ -22,9 +22,11 @@
     "axios": "^1.7.2",
     "dotenv": "^16.4.5",
     "formik": "^2.4.6",
+    "jwt-decode": "^4.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",
+    "react-loader-spinner": "^6.1.6",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.23.1",
     "redux": "^5.0.1",

src/__test__/HSButton.test.tsx

@@ -0,0 +1,10 @@
+import HSButton from '@/components/form/HSButton';
+import { render, screen } from '@testing-library/react';
+import { describe, it } from 'vitest';
+
+describe('HSButton component Tests', () => {
+  it('it should render the HSButton', () => {
+    render(<HSButton title="tittle" />);
+    screen.debug();
+  });
+});

src/__test__/signIn.test.tsx

@@ -0,0 +1,9 @@
+import { describe, it } from 'vitest';
+import SignIn from '@/pages/SignIn';
+import { render, screen } from '@testing-library/react';
+describe('Sign Component Tests', () => {
+  it('it should render Sign In title on Sign Pagde', () => {
+    render(<SignIn />);
+    screen.debug();
+  });
+});

src/app/store.ts

@@ -1,7 +1,10 @@
 import { configureStore } from '@reduxjs/toolkit';
+import signInReducer from '../features/Auth/SignInSlice';
 
 export const store = configureStore({
-  reducer: {},
+  reducer: {
+    signIn: signInReducer,
+  },
 });
 
 export type RootState = ReturnType<typeof store.getState>;

src/components/form/HSButton.tsx

@@ -2,7 +2,7 @@ import { Link } from 'react-router-dom';
 
 interface MyButtonProps {
   path?: string;
-  title: string;
+  title: string | JSX.Element;
   styles?: string;
   click?: () => void;
   icon?: JSX.Element;

src/features/Auth/SignInSlice.tsx

@@ -0,0 +1,107 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { jwtDecode } from 'jwt-decode';
+
+interface SignInState {
+  token: string | null;
+  loading: boolean;
+  error: string | null;
+  message: string | null;
+  role: string | null;
+  needsVerification: boolean;
+  needs2FA: boolean;
+}
+
+interface DecodedToken {
+  user: {
+    userType: {
+      name: string;
+    };
+  };
+}
+
+interface LoginResponse {
+  token: string;
+  message: string;
+}
+
+interface LoginError {
+  message: string;
+}
+
+const initialState: SignInState = {
+  token: null,
+  loading: false,
+  error: null,
+  message: null,
+  role: null,
+  needsVerification: false,
+  needs2FA: false,
+};
+
+export const loginUser = createAsyncThunk(
+  'signIn/loginUser',
+  async (credentials: { email: string; password: string }, thunkAPI) => {
+    try {
+      const response = await axios.post(
+        'https://dynamites-ecomm-be.onrender.com/api/v1/user/login',
+        credentials
+      );
+      return response.data;
+    } catch (error: any) {
+      return thunkAPI.rejectWithValue(error.response.data);
+    }
+  }
+);
+
+const signInSlice = createSlice({
+  name: 'signIn',
+  initialState,
+  reducers: {
+    logout(state) {
+      state.token = null;
+      state.role = null;
+      state.needsVerification = false;
+      state.needs2FA = false;
+      localStorage.removeItem('token');
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(loginUser.pending, (state) => {
+      state.loading = true;
+      state.error = null;
+      state.message = null;
+      state.needsVerification = false;
+      state.needs2FA = false;
+    });
+    builder.addCase(
+      loginUser.fulfilled,
+      (state, action: PayloadAction<LoginResponse>) => {
+        state.loading = false;
+        state.message = action.payload.message;
+
+        if (action.payload.message.includes('2FA')) {
+          state.needs2FA = true;
+          state.token = null;
+        } else {
+          state.token = action.payload.token;
+          localStorage.setItem('token', action.payload.token);
+          const decodedToken = jwtDecode<DecodedToken>(action.payload.token);
+          state.role = decodedToken.user.userType.name;
+        }
+      }
+    );
+    builder.addCase(loginUser.rejected, (state, action: PayloadAction<any>) => {
+      state.loading = false;
+      state.error = action.payload.message;
+      state.message = null;
+      if (action.payload.message.includes('verify your email')) {
+        state.needsVerification = true;
+      }
+    });
+  },
+});
+
+export const { logout } = signInSlice.actions;
+
+export default signInSlice.reducer;