From e75f64ef66507e633d7dedc45049098584169d0d Mon Sep 17 00:00:00 2001
From: hutamatr <hutamatr@gmail.com>
Date: Fri, 18 Aug 2023 14:05:00 +0700
Subject: [PATCH 01/12] feat: create modal-slice

---
 src/store/modalSlice.ts | 25 +++++++++++++++++++++++++
 src/store/store.ts      |  2 ++
 2 files changed, 27 insertions(+)
 create mode 100644 src/store/modalSlice.ts

diff --git a/src/store/modalSlice.ts b/src/store/modalSlice.ts
new file mode 100644
index 0000000..67c2c2e
--- /dev/null
+++ b/src/store/modalSlice.ts
@@ -0,0 +1,25 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+interface IModalState {
+  isModalShow: boolean;
+}
+
+const initialState: IModalState = {
+  isModalShow: false,
+};
+
+export const modalSlice = createSlice({
+  name: 'modal',
+  initialState,
+  reducers: {
+    showModalHandler: (state) => {
+      state.isModalShow = !state.isModalShow;
+    },
+  },
+});
+
+const { actions, reducer } = modalSlice;
+
+export const { showModalHandler } = actions;
+
+export default reducer;
diff --git a/src/store/store.ts b/src/store/store.ts
index 8cd882a..95b9951 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -5,6 +5,7 @@ import storage from 'redux-persist/lib/storage';
 
 import authReducer from './authSlice';
 import cartReducer from './cartSlice';
+import modalReducer from './modalSlice';
 import orderReducer from './orderSlice';
 import productsReducer from './productSlice';
 import userReducer from './userSlice';
@@ -23,6 +24,7 @@ const reducers = combineReducers({
   products: productsReducer,
   wishlist: wishlistReducer,
   order: orderReducer,
+  modal: modalReducer,
 });
 
 const persistedReducer = persistReducer(rootPersistConfig, reducers);

From 36f227d8537f543661f2addd8dffe058f4d1d0ec Mon Sep 17 00:00:00 2001
From: hutamatr <hutamatr@gmail.com>
Date: Fri, 18 Aug 2023 14:11:53 +0700
Subject: [PATCH 02/12] style: changes classname styles

---
 src/components/Layout/Layout.tsx  |   7 +-
 src/components/UI/Input/index.tsx |   2 +-
 src/pages/HomePage/index.tsx      |   4 +-
 src/pages/ProductPage/index.tsx   |   2 +-
 src/pages/SignUpPage/index.tsx    | 214 +++++++++++++++---------------
 5 files changed, 112 insertions(+), 117 deletions(-)

diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index 6d7b3e5..467e3a0 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -16,12 +16,7 @@ export default function Layout() {
       >
         <Navigation />
       </header>
-      <main
-        className={clsx(
-          'layout flex min-h-screen flex-col gap-y-5',
-          'dark:bg-dark-brown'
-        )}
-      >
+      <main className={clsx('layout flex flex-col', 'dark:bg-dark-brown')}>
         <Outlet />
       </main>
       <Footer />
diff --git a/src/components/UI/Input/index.tsx b/src/components/UI/Input/index.tsx
index d480e37..52c972d 100644
--- a/src/components/UI/Input/index.tsx
+++ b/src/components/UI/Input/index.tsx
@@ -56,7 +56,7 @@ const Input = forwardRef<unknown, IInputFormProps>(
           ref={ref as LegacyRef<HTMLTextAreaElement>}
           className={clsx(
             className,
-            'w-full border-none bg-white-bone p-2 text-sm font-medium outline-none',
+            'w-full rounded border-2 bg-white-bone p-2 font-medium outline-none',
             'dark:bg-dark-brown dark:text-white-bone dark:placeholder:text-white-bone',
             'placeholder:text-sm focus:ring-0'
           )}
diff --git a/src/pages/HomePage/index.tsx b/src/pages/HomePage/index.tsx
index 8b56a75..01a00b2 100644
--- a/src/pages/HomePage/index.tsx
+++ b/src/pages/HomePage/index.tsx
@@ -49,8 +49,8 @@ export default function Home() {
       <Hero />
       <section
         className={clsx(
-          'grid min-h-max grid-cols-1 items-center gap-8',
-          'md:min-h-fit md:grid-cols-2 md:grid-rows-1 md:gap-10 md:p-10'
+          'mt-4 grid min-h-max grid-cols-1 items-center gap-8',
+          'md:mt-0 md:min-h-fit md:grid-cols-2 md:grid-rows-1 md:gap-10 md:p-10'
         )}
       >
         <div className='flex flex-col gap-y-8'>
diff --git a/src/pages/ProductPage/index.tsx b/src/pages/ProductPage/index.tsx
index d4c2180..348f2f5 100644
--- a/src/pages/ProductPage/index.tsx
+++ b/src/pages/ProductPage/index.tsx
@@ -18,7 +18,7 @@ export default function Product() {
     <>
       <section
         className={clsx(
-          'flex min-h-[25vh] flex-col items-center justify-center gap-y-4 border-b border-b-dark-brown p-6',
+          'mb-4 flex min-h-[25vh] flex-col items-center justify-center gap-y-4 border-b border-b-dark-brown p-6',
           'dark:border-b-white-bone',
           'md:min-h-fit md:py-12'
         )}
diff --git a/src/pages/SignUpPage/index.tsx b/src/pages/SignUpPage/index.tsx
index f1de3d6..e3c286b 100644
--- a/src/pages/SignUpPage/index.tsx
+++ b/src/pages/SignUpPage/index.tsx
@@ -59,117 +59,117 @@ export default function Register() {
   return (
     <>
       <Toaster position='top-center' />
-      <section
-        className={clsx('m-auto flex w-full flex-col gap-y-4', 'md:max-w-xs')}
-      >
-        <h1
-          className={clsx(
-            'text-center text-sm font-bold',
-            'dark:text-white-bone',
-            'md:text-lg'
-          )}
-        >
-          Sign Up
-        </h1>
-        <form
-          onSubmit={handleSubmit(RegisterSubmitHandler)}
-          className={clsx('flex flex-col gap-y-4', 'md:gap-y-5')}
-        >
-          <Input
-            title='You Name'
-            type='text'
-            placeholder='Your Name'
-            {...register('username', {
-              required: true,
-            })}
-            aria-invalid={errors.username ? 'true' : 'false'}
-            errors={
-              errors.username && (
-                <span className='block text-xs text-red-800'>
-                  {errors.username?.message}
-                </span>
-              )
-            }
-          />
-
-          <Input
-            title='Your Email'
-            type='email'
-            placeholder='name@example.com'
-            {...register('email', {
-              required: true,
-            })}
-            aria-invalid={errors.email ? 'true' : 'false'}
-            errors={
-              errors.email && (
-                <span className='block text-xs text-red-800'>
-                  {errors.email?.message}
-                </span>
-              )
-            }
-          />
-
-          <Input
-            title='Password'
-            isPassword
-            isPassView={isPassView}
-            onViewPasswordHandler={viewPasswordHandler}
-            type={isPassView ? 'text' : 'password'}
-            placeholder='••••••••'
-            {...register('password', {
-              required: true,
-            })}
-            aria-invalid={errors.password ? 'true' : 'false'}
-            errors={
-              errors.password && (
-                <span className='block text-xs text-red-800'>
-                  {errors.password?.message}
-                </span>
-              )
-            }
-          />
-
-          <Input
-            title='Confirm Password'
-            isPassView={isPassView}
-            type={isPassView ? 'text' : 'password'}
-            placeholder='••••••••'
-            {...register('confirmPassword', {
-              required: true,
-            })}
-            aria-invalid={errors.confirmPassword ? 'true' : 'false'}
-            errors={
-              errors.confirmPassword && (
-                <span className='block text-xs text-red-800'>
-                  {errors.confirmPassword?.message}
-                </span>
-              )
-            }
-          />
-          <button
-            type='submit'
-            disabled={isSubmitting}
+      <section className='grid min-h-[90vh] place-items-center'>
+        <div className={clsx('flex w-full flex-col gap-y-4', 'md:max-w-xs')}>
+          <h1
             className={clsx(
-              'bg-dark-brown py-3 text-xs font-light text-white',
-              'disabled:cursor-not-allowed disabled:bg-dark-brown/50',
-              'dark:bg-white-bone dark:font-medium dark:text-dark-brown'
+              'text-center font-bold',
+              'dark:text-white-bone',
+              'md:text-lg'
             )}
           >
-            {isSubmitting ? 'Loading...' : 'Sign Up'}
-          </button>
-        </form>
-        <p className={clsx('text-center text-sm', 'dark:text-white-bone')}>
-          Already have an account?{' '}
-          <Link
-            to='/login'
-            className={clsx(
-              'font-semibold text-dark-brown underline',
-              'dark:text-white-bone'
-            )}
+            Sign Up
+          </h1>
+          <form
+            onSubmit={handleSubmit(RegisterSubmitHandler)}
+            className={clsx('flex flex-col gap-y-4', 'md:gap-y-5')}
           >
-            Log In
-          </Link>
-        </p>
+            <Input
+              title='You Name'
+              type='text'
+              placeholder='Your Name'
+              {...register('username', {
+                required: true,
+              })}
+              aria-invalid={errors.username ? 'true' : 'false'}
+              errors={
+                errors.username && (
+                  <span className='block text-xs text-red-800'>
+                    {errors.username?.message}
+                  </span>
+                )
+              }
+            />
+
+            <Input
+              title='Your Email'
+              type='email'
+              placeholder='name@example.com'
+              {...register('email', {
+                required: true,
+              })}
+              aria-invalid={errors.email ? 'true' : 'false'}
+              errors={
+                errors.email && (
+                  <span className='block text-xs text-red-800'>
+                    {errors.email?.message}
+                  </span>
+                )
+              }
+            />
+
+            <Input
+              title='Password'
+              isPassword
+              isPassView={isPassView}
+              onViewPasswordHandler={viewPasswordHandler}
+              type={isPassView ? 'text' : 'password'}
+              placeholder='••••••••'
+              {...register('password', {
+                required: true,
+              })}
+              aria-invalid={errors.password ? 'true' : 'false'}
+              errors={
+                errors.password && (
+                  <span className='block text-xs text-red-800'>
+                    {errors.password?.message}
+                  </span>
+                )
+              }
+            />
+
+            <Input
+              title='Confirm Password'
+              isPassView={isPassView}
+              type={isPassView ? 'text' : 'password'}
+              placeholder='••••••••'
+              {...register('confirmPassword', {
+                required: true,
+              })}
+              aria-invalid={errors.confirmPassword ? 'true' : 'false'}
+              errors={
+                errors.confirmPassword && (
+                  <span className='block text-xs text-red-800'>
+                    {errors.confirmPassword?.message}
+                  </span>
+                )
+              }
+            />
+            <button
+              type='submit'
+              disabled={isSubmitting}
+              className={clsx(
+                'bg-dark-brown py-3 text-xs font-light text-white',
+                'disabled:cursor-not-allowed disabled:bg-dark-brown/50',
+                'dark:bg-white-bone dark:font-medium dark:text-dark-brown'
+              )}
+            >
+              {isSubmitting ? 'Loading...' : 'Sign Up'}
+            </button>
+          </form>
+          <p className={clsx('text-center text-sm', 'dark:text-white-bone')}>
+            Already have an account?{' '}
+            <Link
+              to='/login'
+              className={clsx(
+                'font-semibold text-dark-brown underline',
+                'dark:text-white-bone'
+              )}
+            >
+              Log In
+            </Link>
+          </p>
+        </div>
       </section>
     </>
   );

From 3e3d6063caf78a3db1fcd9c4194cb22a2165dff7 Mon Sep 17 00:00:00 2001
From: hutamatr <hutamatr@gmail.com>
Date: Fri, 18 Aug 2023 14:13:27 +0700
Subject: [PATCH 03/12] refactor: refactor modal base component

---
 src/components/UI/Modal/index.tsx | 30 +++++++++++++++++++++++-------
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/components/UI/Modal/index.tsx b/src/components/UI/Modal/index.tsx
index 2254d36..a9f6775 100644
--- a/src/components/UI/Modal/index.tsx
+++ b/src/components/UI/Modal/index.tsx
@@ -7,6 +7,7 @@ interface IModalBackdropProps {
 
 interface IModalCardProps {
   children: React.ReactNode;
+  modalCardClassName: string;
 }
 
 type TModalProps = IModalBackdropProps & IModalCardProps;
@@ -14,26 +15,39 @@ type TModalProps = IModalBackdropProps & IModalCardProps;
 function ModalBackdrop({ onCloseModalHandler }: IModalBackdropProps) {
   return (
     <div
-      className='fixed left-0 top-0 z-20 min-h-full w-full bg-slate-900/75'
+      className='fixed left-0 top-0 z-[100] min-h-full w-full bg-slate-800/50'
       onClick={onCloseModalHandler}
     />
   );
 }
 
-function ModalCard({ children }: IModalCardProps) {
+function ModalCard({ children, modalCardClassName }: IModalCardProps) {
   return (
     <section
       className={clsx(
-        'fixed bottom-0 left-0 right-0 z-30 mx-auto flex max-h-full max-w-lg flex-col overflow-y-scroll rounded-md bg-white-bone p-5 shadow',
-        'sm:top-1/4 sm:max-h-fit'
+        'fixed bottom-0 z-[110] w-full',
+        'md:bottom-auto md:left-1/2 md:top-1/2 md:w-auto md:-translate-x-1/2 md:-translate-y-1/2'
       )}
     >
-      {children}
+      <div
+        className={clsx(
+          modalCardClassName,
+          'flex flex-col rounded-t-2xl bg-white-bone p-4 shadow',
+          'dark:bg-dark-brown',
+          'md:rounded-md md:p-6'
+        )}
+      >
+        {children}
+      </div>
     </section>
   );
 }
 
-export const Modal = ({ children, onCloseModalHandler }: TModalProps) => {
+export const Modal = ({
+  children,
+  onCloseModalHandler,
+  modalCardClassName,
+}: TModalProps) => {
   return (
     <>
       {createPortal(
@@ -41,7 +55,9 @@ export const Modal = ({ children, onCloseModalHandler }: TModalProps) => {
         document.getElementById('modal-backdrop')!
       )}
       {createPortal(
-        <ModalCard>{children}</ModalCard>,
+        <ModalCard modalCardClassName={modalCardClassName}>
+          {children}
+        </ModalCard>,
         document.getElementById('modal-card')!
       )}
     </>

From f30051b0fa26fd67b02e39139be8427e3d609114 Mon Sep 17 00:00:00 2001
From: hutamatr <hutamatr@gmail.com>
Date: Fri, 18 Aug 2023 14:16:45 +0700
Subject: [PATCH 04/12] feat: create logout, change-password, forgot-password
 async thunk

---
 src/store/authSlice.ts  | 108 +++++++++++++++++++++++++++++-----------
 src/types/types.ts      |  18 +++++++
 src/utils/formSchema.ts |  23 +++++++++
 3 files changed, 120 insertions(+), 29 deletions(-)

diff --git a/src/store/authSlice.ts b/src/store/authSlice.ts
index b74d5d3..7668612 100644
--- a/src/store/authSlice.ts
+++ b/src/store/authSlice.ts
@@ -1,15 +1,24 @@
-import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { AxiosResponse } from 'axios';
 
-import { axiosPublic } from '@utils/axiosInterceptor';
+import { axiosPrivate, axiosPublic } from '@utils/axiosInterceptor';
 
 import { RootState } from './store';
 
-import { IAccount, ILogin, IRefreshToken, IRegister, IUser } from 'types/types';
+import {
+  IAccount,
+  IChangePassword,
+  IForgotPassword,
+  ILogin,
+  IRefreshToken,
+  IRegister,
+  IUser,
+} from 'types/types';
 
 export interface IAuthState {
   isAuthenticated: boolean;
   accessToken: string | null;
+  refreshToken: string | null;
   user: IUser | null;
   status: 'pending' | 'fulfilled' | 'rejected' | 'idle';
   errorMessage: string | null;
@@ -19,6 +28,7 @@ export interface IAuthState {
 const initialState: IAuthState = {
   isAuthenticated: false,
   accessToken: null,
+  refreshToken: null,
   user: null,
   status: 'idle',
   errorMessage: null,
@@ -54,6 +64,15 @@ export const loginUser = createAsyncThunk(
   }
 );
 
+export const logoutUser = createAsyncThunk('auth/logoutUser', async () => {
+  const response: AxiosResponse = await axiosPublic({
+    method: 'GET',
+    url: '/auth/logout',
+    withCredentials: true,
+  });
+  return response.data;
+});
+
 export const refreshToken = createAsyncThunk(
   'auth/refreshToken',
   async (_, { getState }) => {
@@ -61,19 +80,39 @@ export const refreshToken = createAsyncThunk(
     const response: AxiosResponse<IRefreshToken> = await axiosPublic.post(
       '/token/refresh',
       {
-        refreshToken: state.auth.accessToken,
+        refreshToken: state.auth.refreshToken,
       }
-      // {
-      //   withCredentials: true,
-      // }
     );
-    const newUser: IAccount = {
-      user: {
-        ...(state.auth.user as IUser),
-      },
-      jwt: response.data?.jwt,
-    };
-    return newUser;
+
+    return response.data;
+  }
+);
+
+export const changePassword = createAsyncThunk(
+  'auth/changePassword',
+  async (passwordChanged: IChangePassword, { getState }) => {
+    const state = getState() as RootState;
+    const response: AxiosResponse<IAccount> = await axiosPrivate.post(
+      `/auth/change-password`,
+      passwordChanged,
+      {
+        headers: {
+          Authorization: `Bearer ${state.auth.accessToken}`,
+        },
+      }
+    );
+    return response.data;
+  }
+);
+
+export const forgotPassword = createAsyncThunk(
+  'auth/forgotPassword',
+  async (userEmail: IForgotPassword) => {
+    const response: AxiosResponse = await axiosPublic.post(
+      `/auth/forgot-password`,
+      userEmail
+    );
+    return response.data;
   }
 );
 
@@ -81,13 +120,9 @@ export const authSlice = createSlice({
   name: 'auth',
   initialState,
   reducers: {
-    logoutHandler: (state) => {
-      state.isAuthenticated = false;
-      state.accessToken = null;
-      state.user = null;
-      state.errorMessage = null;
-      state.successMessage = null;
-      state.status = 'idle';
+    addTokenHandler: (state, action: PayloadAction<IRefreshToken>) => {
+      state.accessToken = action.payload.jwt;
+      state.refreshToken = action.payload.refreshToken;
     },
   },
   extraReducers: (builder) => {
@@ -101,6 +136,7 @@ export const authSlice = createSlice({
         state.status = 'fulfilled';
         state.isAuthenticated = true;
         state.accessToken = action.payload.jwt;
+        state.refreshToken = action.payload.refreshToken;
         state.user = action.payload.user;
         state.successMessage = 'Successfully registered new user!';
       })
@@ -108,10 +144,12 @@ export const authSlice = createSlice({
         state.status = 'rejected';
         state.isAuthenticated = false;
         state.accessToken = null;
+        state.refreshToken = null;
         state.user = null;
         state.errorMessage = 'Failed to register new user!';
-      })
+      });
 
+    builder
       .addCase(loginUser.pending, (state) => {
         state.status = 'pending';
         state.errorMessage = null;
@@ -121,6 +159,7 @@ export const authSlice = createSlice({
         state.status = 'fulfilled';
         state.isAuthenticated = true;
         state.accessToken = action.payload.jwt;
+        state.refreshToken = action.payload.refreshToken;
         state.user = action.payload.user;
         state.successMessage = 'Successfully logged in!';
       })
@@ -128,20 +167,31 @@ export const authSlice = createSlice({
         state.status = 'rejected';
         state.isAuthenticated = false;
         state.accessToken = null;
+        state.refreshToken = null;
         state.user = null;
         state.errorMessage = 'Failed to login user!';
-      })
-
-      .addCase(refreshToken.fulfilled, (state, action) => {
-        state.isAuthenticated = true;
-        state.accessToken = action.payload.jwt;
-        state.user = action.payload.user as IAuthState['user'];
       });
+
+    builder.addCase(refreshToken.fulfilled, (state, action) => {
+      state.isAuthenticated = true;
+      state.accessToken = action.payload.jwt;
+      state.refreshToken = action.payload.refreshToken;
+    });
+
+    builder.addCase(logoutUser.fulfilled, (state) => {
+      state.isAuthenticated = false;
+      state.accessToken = null;
+      state.refreshToken = null;
+      state.user = null;
+      state.errorMessage = null;
+      state.successMessage = null;
+      state.status = 'idle';
+    });
   },
 });
 
 const { actions, reducer } = authSlice;
 
-export const { logoutHandler } = actions;
+export const { addTokenHandler } = actions;
 
 export default reducer;
diff --git a/src/types/types.ts b/src/types/types.ts
index 315da31..a2718b1 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -29,8 +29,26 @@ export interface IUser {
   phone_number: string;
 }
 
+export interface IUserUpdate {
+  username: string;
+  email: string;
+  phone_number: string;
+  address: string;
+}
+
+export interface IChangePassword {
+  password: string;
+  currentPassword: string;
+  passwordConfirmation: string;
+}
+
+export interface IForgotPassword {
+  email: string;
+}
+
 export interface IAccount {
   jwt: string;
+  refreshToken: string;
   user: IUser;
 }
 
diff --git a/src/utils/formSchema.ts b/src/utils/formSchema.ts
index f7b9d05..42dad56 100644
--- a/src/utils/formSchema.ts
+++ b/src/utils/formSchema.ts
@@ -22,3 +22,26 @@ export const signInSchema = z.object({
     .min(1, 'Password is required')
     .min(8, 'Password must have more than 8 characters'),
 });
+
+export const userDetailSchema = z.object({
+  name: z.string().min(4, 'Name is required'),
+  email: z.string().email('Invalid email').min(1, 'Email is required'),
+  phone: z.string().min(10, 'Phone number is required'),
+  address: z.string().max(300, 'Address is required'),
+});
+
+export const changePasswordSchema = z.object({
+  currentPassword: z
+    .string()
+    .min(1, 'Password is required')
+    .min(8, 'Password must have more than 8 characters'),
+  newPassword: z
+    .string()
+    .min(1, 'Password is required')
+    .min(8, 'Password must have more than 8 characters'),
+  confirmNewPassword: z.string().min(1, 'Password confirmation is required'),
+});
+
+export const forgotPasswordSchema = z.object({
+  email: z.string().email('Invalid email').min(1, 'Email is required'),
+});

From 3db5d3a1ada2762ce4b5e71dcc569ad962c9cdbf Mon Sep 17 00:00:00 2001
From: hutamatr <hutamatr@gmail.com>
Date: Fri, 18 Aug 2023 14:18:53 +0700
Subject: [PATCH 05/12] feat: create forgot-password component & add on sign-in
 page

---
 src/components/MyAccount/ForgotPassword.tsx |  98 ++++++++++++
 src/pages/SignInPage/index.tsx              | 158 +++++++++++---------
 2 files changed, 184 insertions(+), 72 deletions(-)
 create mode 100644 src/components/MyAccount/ForgotPassword.tsx

diff --git a/src/components/MyAccount/ForgotPassword.tsx b/src/components/MyAccount/ForgotPassword.tsx
new file mode 100644
index 0000000..e0a10b3
--- /dev/null
+++ b/src/components/MyAccount/ForgotPassword.tsx
@@ -0,0 +1,98 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import clsx from 'clsx';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import { z } from 'zod';
+
+import { Modal } from '@components/UI';
+import Input from '@components/UI/Input';
+
+import { forgotPassword } from '@store/authSlice';
+import { showModalHandler } from '@store/modalSlice';
+import { useAppDispatch } from '@store/store';
+
+import { forgotPasswordSchema } from '@utils/formSchema';
+
+import { IForgotPassword } from 'types/types';
+
+type FormSchemaType = z.infer<typeof forgotPasswordSchema>;
+
+export default function ForgotPassword() {
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting },
+  } = useForm<FormSchemaType>({
+    resolver: zodResolver(forgotPasswordSchema),
+  });
+
+  const dispatch = useAppDispatch();
+
+  const modalHandler = () => {
+    dispatch(showModalHandler());
+  };
+
+  const sendEmailForgotPasswordHandler: SubmitHandler<FormSchemaType> = async (
+    data,
+    event
+  ) => {
+    event?.preventDefault();
+
+    const emailUser: IForgotPassword = {
+      email: data.email,
+    };
+
+    const res = await dispatch(forgotPassword(emailUser));
+
+    if (res.meta.requestStatus === 'fulfilled') {
+      modalHandler();
+      toast.success('Email sent successfully!', { duration: 3000 });
+    }
+
+    if (res.meta.requestStatus === 'rejected') {
+      toast.error('Failed to send email!', {
+        duration: 3000,
+      });
+    }
+
+    reset();
+  };
+
+  return (
+    <Modal
+      onCloseModalHandler={modalHandler}
+      modalCardClassName={clsx('flex flex-col gap-y-3 lg:top-0 lg:max-w-2xl')}
+    >
+      <div className='flex flex-col gap-y-2'>
+        <h1 className='text-center text-lg font-semibold'>Forgot Password</h1>
+        <p className='text-sm'>
+          please input your email, we will send information to your email.
+        </p>
+      </div>
+      <form
+        onSubmit={handleSubmit(sendEmailForgotPasswordHandler)}
+        className={clsx('flex flex-col gap-y-4', 'md:gap-y-5')}
+      >
+        <Input
+          title='Email'
+          type='email'
+          {...register('email', { required: true })}
+        />
+        <div className='flex flex-col gap-y-2'>
+          <button
+            type='submit'
+            disabled={isSubmitting}
+            className={clsx(
+              'flex flex-row items-center justify-center gap-x-2 rounded-sm bg-dark-brown py-3 font-light text-white',
+              'disabled:cursor-not-allowed',
+              'dark:bg-white-bone dark:font-semibold dark:text-dark-brown'
+            )}
+          >
+            {isSubmitting ? 'Submitting...' : 'Submit'}
+          </button>
+        </div>
+      </form>
+    </Modal>
+  );
+}
diff --git a/src/pages/SignInPage/index.tsx b/src/pages/SignInPage/index.tsx
index 2c986d3..887033d 100644
--- a/src/pages/SignInPage/index.tsx
+++ b/src/pages/SignInPage/index.tsx
@@ -6,9 +6,11 @@ import { toast, Toaster } from 'react-hot-toast';
 import { Link, useNavigate } from 'react-router-dom';
 import { z } from 'zod';
 
+import ForgotPassword from '@components/MyAccount/ForgotPassword';
 import Input from '@components/UI/Input';
 
 import { loginUser } from '@store/authSlice';
+import { showModalHandler } from '@store/modalSlice';
 import { useAppDispatch, useAppSelector } from '@store/store';
 
 import { signInSchema } from '@utils/formSchema';
@@ -28,12 +30,17 @@ export default function Login() {
 
   const dispatch = useAppDispatch();
   const { status } = useAppSelector((state) => state.auth);
+  const { isModalShow } = useAppSelector((state) => state.modal);
   const navigate = useNavigate();
 
   const viewPasswordHandler = () => {
     setIsPassView((prevState) => !prevState);
   };
 
+  const showForgotPasswordHandler = () => {
+    dispatch(showModalHandler());
+  };
+
   const loginSubmitHandler: SubmitHandler<FormSchemaType> = async (
     data,
     event
@@ -64,83 +71,90 @@ export default function Login() {
   return (
     <>
       <Toaster position='top-center' />
-      <section
-        className={clsx('m-auto flex w-full flex-col gap-y-4', 'md:max-w-xs')}
-      >
-        <h1
-          className={clsx(
-            'text-center text-sm font-bold',
-            'dark:text-white-bone',
-            'md:text-lg'
-          )}
-        >
-          Sign In
-        </h1>
-        <form
-          onSubmit={handleSubmit(loginSubmitHandler)}
-          className={clsx('flex flex-col gap-y-4', 'md:gap-y-5')}
-        >
-          <Input
-            title='Your Email'
-            type='email'
-            placeholder='name@example.com'
-            {...register('email', {
-              required: true,
-            })}
-            aria-invalid={errors.email ? 'true' : 'false'}
-            errors={
-              errors.email && (
-                <span className='block text-xs text-red-800'>
-                  {errors.email?.message}
-                </span>
-              )
-            }
-          />
-
-          <Input
-            title='Password'
-            isPassword
-            isPassView={isPassView}
-            onViewPasswordHandler={viewPasswordHandler}
-            type={isPassView ? 'text' : 'password'}
-            placeholder='••••••••'
-            {...register('password', {
-              required: true,
-            })}
-            aria-invalid={errors.password ? 'true' : 'false'}
-            errors={
-              errors.password && (
-                <span className='block text-xs text-red-800'>
-                  {errors.password?.message}
-                </span>
-              )
-            }
-          />
-          <button
+      <section className='grid min-h-[90vh] place-items-center'>
+        <div className={clsx('flex w-full flex-col gap-y-4', 'md:max-w-xs')}>
+          <h1
             className={clsx(
-              'flex flex-row items-center justify-center gap-x-2 bg-dark-brown py-3 font-light text-white',
-              'disabled:cursor-not-allowed',
-              'dark:bg-white-bone dark:font-semibold dark:text-dark-brown'
+              'text-center font-bold',
+              'dark:text-white-bone',
+              'md:text-lg'
             )}
-            disabled={isSubmitting || status === 'pending'}
-            type='submit'
           >
-            {isSubmitting ? 'loading...' : 'Login'}
-          </button>
-        </form>
-        <p className={clsx('text-center text-sm', 'dark:text-white-bone')}>
-          Don&apos;t have an account?{' '}
-          <Link
-            to='/register'
-            className={clsx(
-              'font-semibold text-dark-brown underline',
-              'dark:text-white-bone'
-            )}
+            Sign In
+          </h1>
+          <form
+            onSubmit={handleSubmit(loginSubmitHandler)}
+            className={clsx('flex flex-col gap-y-4', 'md:gap-y-5')}
           >
-            Sign Up
-          </Link>
-        </p>
+            <Input
+              title='Your Email'
+              type='email'
+              placeholder='name@example.com'
+              {...register('email', {
+                required: true,
+              })}
+              aria-invalid={errors.email ? 'true' : 'false'}
+              errors={
+                errors.email && (
+                  <span className='block text-xs text-red-800'>
+                    {errors.email?.message}
+                  </span>
+                )
+              }
+            />
+
+            <Input
+              title='Password'
+              isPassword
+              isPassView={isPassView}
+              onViewPasswordHandler={viewPasswordHandler}
+              type={isPassView ? 'text' : 'password'}
+              placeholder='••••••••'
+              {...register('password', {
+                required: true,
+              })}
+              aria-invalid={errors.password ? 'true' : 'false'}
+              errors={
+                errors.password && (
+                  <span className='block text-xs text-red-800'>
+                    {errors.password?.message}
+                  </span>
+                )
+              }
+            />
+            <button
+              className={clsx(
+                'flex flex-row items-center justify-center gap-x-2 bg-dark-brown py-3 font-light text-white',
+                'disabled:cursor-not-allowed',
+                'dark:bg-white-bone dark:font-semibold dark:text-dark-brown'
+              )}
+              disabled={isSubmitting || status === 'pending'}
+              type='submit'
+            >
+              {isSubmitting ? 'loading...' : 'Login'}
+            </button>
+          </form>
+          <p className={clsx('text-center text-sm', 'dark:text-white-bone')}>
+            Don&apos;t have an account?{' '}
+            <Link
+              to='/register'
+              className={clsx(
+                'font-semibold text-dark-brown underline',
+                'dark:text-white-bone'
+              )}
+            >
+              Sign Up
+            </Link>
+          </p>
+          <button
+            className={clsx('text-center text-sm text-red-500 underline')}
+            onClick={showForgotPasswordHandler}
+          >
+            Forgot your password?
+          </button>
+        </div>
       </section>
+      {isModalShow && <ForgotPassword />}
     </>
   );
 }

From eaba671cc4208b7765b80b662ee3c8588347d9d9 Mon Sep 17 00:00:00 2001
From: hutamatr <hutamatr@gmail.com>
Date: Fri, 18 Aug 2023 14:21:25 +0700
Subject: [PATCH 06/12] feat: create update user detail async thunk

---
 src/components/Footer/NavigationFooter.tsx |  4 +--
 src/components/Navigation/DropdownNav.tsx  | 14 ++++-----
 src/store/userSlice.ts                     | 35 +++++++++++++++++++++-
 3 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/src/components/Footer/NavigationFooter.tsx b/src/components/Footer/NavigationFooter.tsx
index f6ef975..1b33e1b 100644
--- a/src/components/Footer/NavigationFooter.tsx
+++ b/src/components/Footer/NavigationFooter.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { Link } from 'react-router-dom';
 
-import { logoutHandler } from '@store/authSlice';
+import { logoutUser } from '@store/authSlice';
 import { useAppDispatch, useAppSelector } from '@store/store';
 
 export default function NavigationFooter() {
@@ -11,7 +11,7 @@ export default function NavigationFooter() {
   const dispatch = useAppDispatch();
 
   const logOutUserHandler = () => {
-    dispatch(logoutHandler());
+    dispatch(logoutUser());
   };
 
   return (
diff --git a/src/components/Navigation/DropdownNav.tsx b/src/components/Navigation/DropdownNav.tsx
index f2f055d..ee73d6b 100644
--- a/src/components/Navigation/DropdownNav.tsx
+++ b/src/components/Navigation/DropdownNav.tsx
@@ -4,8 +4,8 @@ import { NavLink } from 'react-router-dom';
 
 import Avatar from '@components/UI/svg/Avatar';
 
-import { logoutHandler } from '@store/authSlice';
-import { persistor, useAppDispatch } from '@store/store';
+import { logoutUser } from '@store/authSlice';
+import { useAppDispatch } from '@store/store';
 
 interface IDropdownNavProps {
   onCloseMenu: () => void;
@@ -21,11 +21,11 @@ export default function DropdownNav({
   // const { wishListItems } = useWish();
 
   const logoutUserHandler = () => {
-    dispatch(logoutHandler());
-    persistor.pause();
-    persistor.flush().then(() => {
-      return persistor.purge();
-    });
+    dispatch(logoutUser());
+    // persistor.pause();
+    // persistor.flush().then(() => {
+    //   return persistor.purge();
+    // });
   };
 
   return (
diff --git a/src/store/userSlice.ts b/src/store/userSlice.ts
index 893c37b..022730a 100644
--- a/src/store/userSlice.ts
+++ b/src/store/userSlice.ts
@@ -5,7 +5,7 @@ import { axiosPrivate } from '@utils/axiosInterceptor';
 
 import { RootState } from './store';
 
-import { IUser } from 'types/types';
+import { IUser, IUserUpdate } from 'types/types';
 
 export interface IUserState {
   user: IUser | null;
@@ -34,6 +34,23 @@ export const fetchUser = createAsyncThunk(
   }
 );
 
+export const updateUserDetail = createAsyncThunk(
+  'user/updateUserDetail',
+  async (userData: IUserUpdate, { getState }) => {
+    const state = getState() as RootState;
+    const response: AxiosResponse<IUser> = await axiosPrivate.put(
+      `/users/${state.user.user?.id}`,
+      userData,
+      {
+        headers: {
+          Authorization: `Bearer ${state.auth.accessToken}`,
+        },
+      }
+    );
+    return response.data;
+  }
+);
+
 export const userSlice = createSlice({
   name: 'user',
   initialState,
@@ -55,6 +72,22 @@ export const userSlice = createSlice({
         state.user = null;
         state.errorMessage = 'Failed to get user!';
       });
+
+    builder
+      .addCase(updateUserDetail.pending, (state) => {
+        state.status = 'pending';
+        state.errorMessage = null;
+        state.successMessage = null;
+      })
+      .addCase(updateUserDetail.fulfilled, (state, action) => {
+        state.status = 'fulfilled';
+        state.user = action.payload;
+        state.successMessage = 'User updated successfully';
+      })
+      .addCase(updateUserDetail.rejected, (state) => {
+        state.status = 'rejected';
+        state.errorMessage = 'Failed to update user detail!';
+      });
   },
 });
 

From 51077b9d26fa89b9916a5e4ceca09cd60e37aec1 Mon Sep 17 00:00:00 2001
From: hutamatr <hutamatr@gmail.com>
Date: Fri, 18 Aug 2023 14:22:34 +0700
Subject: [PATCH 07/12] refactor: refactor show modal handler

---
 .../ProductDetails/AddToCartModal.tsx         | 38 ++++++++++++++++---
 src/pages/ProductDetailsPage/index.tsx        |  9 ++---
 2 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/src/components/ProductDetails/AddToCartModal.tsx b/src/components/ProductDetails/AddToCartModal.tsx
index 81992b0..81bb8fe 100644
--- a/src/components/ProductDetails/AddToCartModal.tsx
+++ b/src/components/ProductDetails/AddToCartModal.tsx
@@ -4,6 +4,9 @@ import { useNavigate } from 'react-router-dom';
 
 import { Image, Modal } from '@components/UI';
 
+import { showModalHandler } from '@store/modalSlice';
+import { useAppDispatch } from '@store/store';
+
 import { IProductData } from 'types/types';
 
 interface IAddToCartModalProps extends IProductData {
@@ -16,16 +19,33 @@ export default function AddToCartModal({
 }: IAddToCartModalProps) {
   const navigate = useNavigate();
 
+  const dispatch = useAppDispatch();
+
   const toCartHandler = () => navigate('/cart');
 
+  const modalHandler = () => {
+    dispatch(showModalHandler());
+  };
+
   return (
-    <Modal onCloseModalHandler={onCloseModalHandler}>
+    <Modal
+      onCloseModalHandler={modalHandler}
+      modalCardClassName={clsx('sm:top-1/4 sm:max-h-fit')}
+    >
       <MdClose
-        className='absolute right-6 cursor-pointer text-2xl'
+        className={clsx(
+          'absolute right-6 cursor-pointer text-2xl text-dark-brown',
+          'dark:text-white-bone'
+        )}
         onClick={onCloseModalHandler}
       />
       <div className='flex flex-col gap-y-6 p-4'>
-        <h1 className='text-center text-xl font-semibold'>
+        <h1
+          className={clsx(
+            'text-center text-xl font-semibold',
+            'dark:text-white-bone'
+          )}
+        >
           Added Successfully
         </h1>
         <div className='flex flex-row items-center justify-center gap-x-4'>
@@ -35,7 +55,12 @@ export default function AddToCartModal({
             alt={data?.attributes.name}
             className='w-32 rounded-sm object-contain ring-1 ring-dark-brown'
           />
-          <div className='flex flex-col font-medium'>
+          <div
+            className={clsx(
+              'flex flex-col font-medium',
+              'dark:text-white-bone'
+            )}
+          >
             <span className={clsx('text-lg font-semibold', 'md:text-xl')}>
               {data?.attributes.name}
             </span>
@@ -46,8 +71,9 @@ export default function AddToCartModal({
         </div>
         <button
           className={clsx(
-            'border-2 border-dark-brown bg-dark-brown py-3 font-semibold uppercase text-white-bone',
-            'hover:bg-white-bone hover:text-dark-brown'
+            'rounded-sm border-2 border-dark-brown bg-dark-brown py-3 font-semibold uppercase text-white-bone',
+            'hover:bg-white-bone hover:text-dark-brown',
+            'dark:bg-white-bone dark:text-dark-brown dark:hover:border-white-bone dark:hover:bg-transparent dark:hover:text-white-bone'
           )}
           onClick={toCartHandler}
         >
diff --git a/src/pages/ProductDetailsPage/index.tsx b/src/pages/ProductDetailsPage/index.tsx
index 0be9ac2..2f3b0f5 100644
--- a/src/pages/ProductDetailsPage/index.tsx
+++ b/src/pages/ProductDetailsPage/index.tsx
@@ -9,6 +9,7 @@ import Review from '@components/ProductDetails/Review';
 import Loading from '@components/UI/Loading';
 
 import { addToCart } from '@store/cartSlice';
+import { showModalHandler } from '@store/modalSlice';
 import { fetchAllProducts } from '@store/productSlice';
 import { useAppDispatch, useAppSelector } from '@store/store';
 import { addWishlist, removeWishlist } from '@store/wishlistSlice';
@@ -17,7 +18,6 @@ import { INewProductToCart, IProduct, IProductData } from 'types/types';
 
 export default function ProductDetails() {
   const [quantity, setQuantity] = useState(1);
-  const [isModalShow, setIsModalShow] = useState(false);
   const [isOnWishList, setIsOnWishList] = useState(false);
 
   const { productId } = useParams();
@@ -29,6 +29,7 @@ export default function ProductDetails() {
   );
   const { isAuthenticated } = useAppSelector((state) => state.auth);
   const { wishlist } = useAppSelector((state) => state.wishlist);
+  const { isModalShow } = useAppSelector((state) => state.modal);
 
   useEffect(() => {
     if (wishlist.find((item) => item.id === product?.data.id)) {
@@ -52,17 +53,15 @@ export default function ProductDetails() {
 
   const addToCartHandler = useCallback(() => {
     const itemToCart: INewProductToCart = {
-      // product_id: product?.data.id as number,
-      // price: product?.data.attributes.price as string,
       quantity: +quantity,
       product: product?.data as IProduct,
     };
     dispatch(addToCart(itemToCart));
-    setIsModalShow(true);
+    dispatch(showModalHandler());
   }, [quantity, product?.data, dispatch]);
 
   const closeModalBackdropHandler = () => {
-    setIsModalShow(false);
+    dispatch(showModalHandler());
   };
 
   const isOnWishListHandler = () => {

From 8238ec68a49c33099a1b757dde8b5911f2bb44db Mon Sep 17 00:00:00 2001
From: hutamatr <hutamatr@gmail.com>
Date: Fri, 18 Aug 2023 14:23:46 +0700
Subject: [PATCH 08/12] feat: add update user detail form

---
 src/components/MyAccount/AccountDetails.tsx | 202 ++++++++++++++------
 1 file changed, 145 insertions(+), 57 deletions(-)

diff --git a/src/components/MyAccount/AccountDetails.tsx b/src/components/MyAccount/AccountDetails.tsx
index dbf295e..08b5169 100644
--- a/src/components/MyAccount/AccountDetails.tsx
+++ b/src/components/MyAccount/AccountDetails.tsx
@@ -1,70 +1,158 @@
+import { zodResolver } from '@hookform/resolvers/zod';
 import clsx from 'clsx';
+import { useEffect, useState } from 'react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import PhoneInput from 'react-phone-number-input';
+import { z } from 'zod';
 
+import Input from '@components/UI/Input';
 import Loading from '@components/UI/Loading';
 
-import { useAppSelector } from '@store/store';
+import { useAppDispatch, useAppSelector } from '@store/store';
+import { updateUserDetail } from '@store/userSlice';
 
-import { IUser } from 'types/types';
+import { userDetailSchema } from '@utils/formSchema';
 
-export default function AccountDetails({
-  username,
-  email,
-  address,
-  phone_number,
-}: IUser) {
-  const { status } = useAppSelector((state) => state.auth);
+import 'react-phone-number-input/style.css';
+
+import { IUserUpdate } from 'types/types';
+
+type FormSchemaType = z.infer<typeof userDetailSchema>;
+
+export default function AccountDetails() {
+  const dispatch = useAppDispatch();
+  // const { status } = useAppSelector((state) => state.auth);
+
+  const [phoneNumber, setPhoneNumber] = useState<string>('');
+  const {
+    register,
+    handleSubmit,
+    formState: { isSubmitting },
+    setValue,
+  } = useForm<FormSchemaType>({
+    resolver: zodResolver(userDetailSchema),
+  });
+
+  const { user, status } = useAppSelector((state) => state.user);
+
+  useEffect(() => {
+    if (user?.id) {
+      setValue('name', user.username);
+      setValue('email', user.email);
+      setValue('phone', user.phone_number);
+      setValue('address', user.address);
+      setPhoneNumber(user.phone_number);
+    }
+  }, [
+    setValue,
+    user?.id,
+    user?.username,
+    user?.email,
+    user?.phone_number,
+    user?.address,
+  ]);
+
+  const updateUserHandler: SubmitHandler<FormSchemaType> = async (
+    data,
+    event
+  ) => {
+    event?.preventDefault();
+
+    const updatedUser: IUserUpdate = {
+      username: data.name,
+      email: data.email,
+      phone_number: phoneNumber,
+      address: data.address,
+    };
+
+    const res = await dispatch(updateUserDetail(updatedUser));
+
+    if (res.meta.requestStatus === 'fulfilled') {
+      toast.success('Update user successfully!', { duration: 3000 });
+    }
+
+    if (res.meta.requestStatus === 'rejected') {
+      toast.error('Update user detail failed!', {
+        duration: 3000,
+      });
+    }
+  };
 
   return (
-    <section className='mx-auto p-6'>
-      {status === 'pending' && <Loading />}
-      {status === 'rejected' && (
-        <p className='mx-auto py-6 text-center font-medium uppercase text-red-700'>
-          Failed to view user data!
-        </p>
-      )}
-      {status === 'fulfilled' && (
-        <>
-          <h2
-            className={clsx(
-              'mb-4 text-lg font-semibold',
-              'dark:text-white-bone'
-            )}
-          >
-            User Detail
-          </h2>
-          <div
-            className={clsx('mb-6 flex items-center', 'dark:text-white-bone')}
-          >
-            <span className='w-24'>Name :</span>
-            <span>{username}</span>
-          </div>
-          <div
-            className={clsx('mb-6 flex items-center', 'dark:text-white-bone')}
-          >
-            <span className='w-24'>Email :</span>
-            <span>{email}</span>
-          </div>
-          <div
-            className={clsx('mb-6 flex items-center', 'dark:text-white-bone')}
-          >
-            <span className='w-24'>Phone :</span>
-            <span>{phone_number}</span>
+    <section className={clsx('', 'md:px-6')}>
+      <div
+        className={clsx(
+          'mb-4 flex flex-col gap-y-2',
+          'md:flex-row md:items-center md:gap-x-8'
+        )}
+      >
+        <h2 className={clsx('text-2xl font-semibold', 'dark:text-white-bone')}>
+          Your Profile
+        </h2>
+        {status === 'rejected' && (
+          <p className='text-sm text-red-700'>Failed to view user data!</p>
+        )}
+      </div>
+      {status === 'pending' ? (
+        <Loading />
+      ) : (
+        <form
+          onSubmit={handleSubmit(updateUserHandler)}
+          className={clsx('flex flex-col gap-y-4', 'md:gap-y-5')}
+        >
+          <div className={clsx('grid grid-cols-1 gap-4', 'md:grid-cols-3')}>
+            <Input
+              title='Name'
+              type='text'
+              {...register('name', { required: true })}
+            />
+            <Input
+              title='Email'
+              type='email'
+              {...register('email', { required: true })}
+            />
+            <div className='flex flex-col gap-y-1'>
+              <label
+                htmlFor='phone'
+                className={clsx(
+                  'text-xs font-medium text-dark-brown',
+                  'dark:text-white-bone'
+                )}
+              >
+                Phone Number
+              </label>
+              <PhoneInput
+                placeholder='Enter phone number'
+                value={phoneNumber}
+                onChange={(value) => setPhoneNumber(value as string)}
+                className={clsx(
+                  'w-full rounded bg-white-bone font-medium',
+                  'dark:bg-dark-brown dark:placeholder:text-white-bone',
+                  'placeholder:text-sm focus:ring-0'
+                )}
+              />
+            </div>
           </div>
-          {/* <h2
-            className={clsx(
-              'mb-4 text-lg font-semibold',
-              'dark:text-white-bone'
-            )}
-          >
-            Address :
-          </h2> */}
-          <div
-            className={clsx('mb-6 flex items-center', 'dark:text-white-bone')}
-          >
-            <span className='w-24'>Address :</span>
-            <span>{address}</span>
+          <Input
+            title='Address'
+            isTextArea={true}
+            {...register('address', { required: true })}
+          />
+          <div className='flex flex-col gap-y-2'>
+            <button
+              type='submit'
+              disabled={isSubmitting}
+              className={clsx(
+                'mx-auto block w-fit flex-row gap-x-2 rounded-sm bg-dark-brown px-4 py-3 font-light text-white',
+                'disabled:cursor-not-allowed disabled:bg-dark-brown/80',
+                'dark:bg-white-bone dark:font-semibold dark:text-dark-brown dark:disabled:bg-white-bone/80'
+              )}
+            >
+              {isSubmitting ? 'Updating...' : 'Update Profile'}
+            </button>
           </div>
-        </>
+        </form>
       )}
     </section>
   );

From 288b176bcd09bd84b8565b454200fc398c569433 Mon Sep 17 00:00:00 2001
From: hutamatr <hutamatr@gmail.com>
Date: Fri, 18 Aug 2023 14:24:38 +0700
Subject: [PATCH 09/12] feat: create change password form component

---
 src/components/MyAccount/ChangePassword.tsx | 120 ++++++++++++++++++++
 1 file changed, 120 insertions(+)
 create mode 100644 src/components/MyAccount/ChangePassword.tsx

diff --git a/src/components/MyAccount/ChangePassword.tsx b/src/components/MyAccount/ChangePassword.tsx
new file mode 100644
index 0000000..fdf661b
--- /dev/null
+++ b/src/components/MyAccount/ChangePassword.tsx
@@ -0,0 +1,120 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import clsx from 'clsx';
+import { useState } from 'react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import { z } from 'zod';
+
+import Input from '@components/UI/Input';
+
+import { changePassword, logoutUser } from '@store/authSlice';
+import { useAppDispatch } from '@store/store';
+
+import { changePasswordSchema } from '@utils/formSchema';
+
+import { IChangePassword } from 'types/types';
+
+type FormSchemaType = z.infer<typeof changePasswordSchema>;
+
+export default function ChangePassword() {
+  const [isPassView, setIsPassView] = useState(false);
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting },
+  } = useForm<FormSchemaType>({
+    resolver: zodResolver(changePasswordSchema),
+  });
+
+  const dispatch = useAppDispatch();
+
+  const viewPasswordHandler = () => {
+    setIsPassView((prevState) => !prevState);
+  };
+
+  const updatePasswordHandler: SubmitHandler<FormSchemaType> = async (
+    data,
+    event
+  ) => {
+    event?.preventDefault();
+
+    const changedPassword: IChangePassword = {
+      currentPassword: data.currentPassword,
+      password: data.newPassword,
+      passwordConfirmation: data.confirmNewPassword,
+    };
+
+    const res = await dispatch(changePassword(changedPassword));
+
+    if (res.meta.requestStatus === 'fulfilled') {
+      dispatch(logoutUser())
+        .unwrap()
+        .then(() => {
+          setTimeout(() => {
+            toast.success('Change password successfully!', {
+              duration: 3000,
+            });
+          }, 1000);
+        });
+    }
+
+    if (res.meta.requestStatus === 'rejected') {
+      toast.error('Change password failed!', {
+        duration: 3000,
+      });
+    }
+
+    reset();
+  };
+
+  return (
+    <section className={clsx('flex flex-col gap-y-4', 'md:px-6')}>
+      <h2 className={clsx('text-2xl font-semibold', 'dark:text-white-bone')}>
+        Change Password*
+      </h2>
+      <form
+        onSubmit={handleSubmit(updatePasswordHandler)}
+        className={clsx(
+          'flex w-full flex-col gap-y-4',
+          'md:max-w-xl md:gap-y-5'
+        )}
+      >
+        <Input
+          title='Current Password'
+          type={isPassView ? 'text' : 'password'}
+          isPassword
+          isPassView={isPassView}
+          onViewPasswordHandler={viewPasswordHandler}
+          {...register('currentPassword', { required: true })}
+        />
+        <Input
+          title='New Password'
+          type={isPassView ? 'text' : 'password'}
+          {...register('newPassword', { required: true })}
+        />
+        <Input
+          title='Confirm New Password'
+          type={isPassView ? 'text' : 'password'}
+          {...register('confirmNewPassword', { required: true })}
+        />
+        <div className='flex flex-col gap-y-2'>
+          <button
+            type='submit'
+            disabled={isSubmitting}
+            className={clsx(
+              'mx-auto block w-fit flex-row gap-x-2 rounded-sm bg-dark-brown px-4 py-3 font-light text-white',
+              'disabled:cursor-not-allowed disabled:bg-dark-brown/80',
+              'dark:bg-white-bone dark:font-semibold dark:text-dark-brown dark:disabled:bg-white-bone/80'
+            )}
+          >
+            {isSubmitting ? 'Updating...' : 'Change Password'}
+          </button>
+        </div>
+      </form>
+      <span className={clsx('text-xs text-dark-brown', 'dark:text-white-bone')}>
+        * you will be logged in again after changing your password
+      </span>
+    </section>
+  );
+}

From 0312857fadfab514410835d943b7805e4ce14993 Mon Sep 17 00:00:00 2001
From: hutamatr <hutamatr@gmail.com>
Date: Fri, 18 Aug 2023 14:25:54 +0700
Subject: [PATCH 10/12] feat: add change-password & user detail form on profile
 page

---
 src/pages/MyAccountPage/index.tsx | 112 +++++++++++++++++++-----------
 1 file changed, 71 insertions(+), 41 deletions(-)

diff --git a/src/pages/MyAccountPage/index.tsx b/src/pages/MyAccountPage/index.tsx
index d3cf6ca..d7b2130 100644
--- a/src/pages/MyAccountPage/index.tsx
+++ b/src/pages/MyAccountPage/index.tsx
@@ -1,16 +1,17 @@
 import clsx from 'clsx';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import { Toaster } from 'react-hot-toast';
 
 import AccountDetails from '@components/MyAccount/AccountDetails';
-import Loading from '@components/UI/Loading';
+import ChangePassword from '@components/MyAccount/ChangePassword';
 
 import { useAppDispatch, useAppSelector } from '@store/store';
 import { fetchUser } from '@store/userSlice';
 
-import { IUser } from 'types/types';
-
 export default function MyAccount() {
-  const { user, status, errorMessage } = useAppSelector((state) => state.user);
+  const [isChangePassword, setIsChangePassword] = useState(false);
+
+  const { user } = useAppSelector((state) => state.user);
 
   const dispatch = useAppDispatch();
 
@@ -18,47 +19,76 @@ export default function MyAccount() {
     dispatch(fetchUser());
   }, [dispatch]);
 
+  const switchToChangePasswordHandler = () => {
+    setIsChangePassword(false);
+  };
+
+  const switchToProfileHandler = () => {
+    setIsChangePassword(true);
+  };
+
   return (
     <>
-      {status === 'pending' && <Loading />}
-      {status === 'rejected' && (
-        <p className='mx-auto py-6 text-center font-medium uppercase text-red-700'>
-          {errorMessage}
-        </p>
-      )}
-      {status === 'fulfilled' && (
-        <>
-          <section
+      <Toaster position='top-center' />
+      <section
+        className={clsx(
+          'flex min-h-[30vh] flex-col items-center justify-center gap-y-4 border-b border-b-dark-brown',
+          'dark:border-b-white-bone',
+          'md:min-h-fit md:py-12'
+        )}
+      >
+        <h1
+          className={clsx(
+            'font-noto text-3xl uppercase',
+            'dark:text-white-bone',
+            'md:text-4xl'
+          )}
+        >
+          My Account
+        </h1>
+        <div
+          className={clsx(
+            'flex flex-col items-center justify-center gap-y-1',
+            'dark:text-white-bone'
+          )}
+        >
+          <span className='max-w-md text-lg font-medium uppercase'>
+            {user?.username}
+          </span>
+          <span className='text-sm font-light'>{user?.email}</span>
+        </div>
+      </section>
+      <section className={clsx('grid grid-cols-1', 'md:grid-cols-12')}>
+        <div
+          className={clsx(
+            'flex flex-row items-center gap-x-4 p-4',
+            'md:col-start-1 md:col-end-4 md:flex-col md:items-start md:gap-y-2 md:border-r-2 md:border-r-dark-brown/50',
+            'dark:border-r-white-bone/50'
+          )}
+        >
+          <button
+            onClick={switchToChangePasswordHandler}
+            className={clsx(
+              'text-dark-brown underline',
+              'dark:text-white-bone'
+            )}
+          >
+            Profile
+          </button>
+          <button
+            onClick={switchToProfileHandler}
             className={clsx(
-              'flex min-h-[30vh] flex-col items-center justify-center gap-y-4 border-b border-b-dark-brown p-6',
-              'dark:border-b-white-bone',
-              'md:min-h-fit md:py-12'
+              'text-dark-brown underline',
+              'dark:text-white-bone'
             )}
           >
-            <h1
-              className={clsx(
-                'font-noto text-3xl uppercase',
-                'dark:text-white-bone',
-                'md:text-4xl'
-              )}
-            >
-              My Account
-            </h1>
-            <div
-              className={clsx(
-                'flex flex-col items-center justify-center gap-y-1',
-                'dark:text-white-bone'
-              )}
-            >
-              <span className='max-w-md text-lg font-medium uppercase'>
-                {user?.username}
-              </span>
-              <span className='text-sm font-light'>{user?.email}</span>
-            </div>
-          </section>
-          <AccountDetails {...(user as IUser)} />
-        </>
-      )}
+            Change Password
+          </button>
+        </div>
+        <div className={clsx('mb-8', 'md:col-start-4 md:col-end-13 md:p-6')}>
+          {isChangePassword ? <ChangePassword /> : <AccountDetails />}
+        </div>
+      </section>
     </>
   );
 }

From b8161b9f8a2b93cbe970949da04662fd04a7b105 Mon Sep 17 00:00:00 2001
From: hutamatr <hutamatr@gmail.com>
Date: Fri, 18 Aug 2023 14:26:27 +0700
Subject: [PATCH 11/12] refactor: change favicon icon

---
 index.html         |   2 +-
 public/favicon.ico | Bin 0 -> 934 bytes
 2 files changed, 1 insertion(+), 1 deletion(-)
 create mode 100644 public/favicon.ico

diff --git a/index.html b/index.html
index 4dd1ce1..3c605e6 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Urban Fashion</title>
   </head>
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..88f6f83c24edb7083bdfac455ee7c8fb0b87ce5f
GIT binary patch
literal 934
zcmV;X16lluP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px&U`a$lR9HvVmPt$#VHC&zg%GSsd!dxAXj~9nFhtqGg-8_9fKaxU+OjJ#+%z$0
zG#d4y>{|f~BFJK8Gb|DeAyE(!q6UwEF)T?14)g#P($;)UAhJzout<EDIn4Xs`^|se
z^06j=4C}Ft#`<pov|24X+S@QcKaY@0VX&~U*p!Z&QlS51AC$GVIO^sGOG``i_w^x4
zB!Z`xH)9A!0OMn0D0^B84u=DYOa^Ofz9HfC)D)hTDWK8(Lh_YV@NH~pgU|v{&(5N*
zwg%rvN05+|g8fcT>n8X%G=z$B1&+IWAWRrxP{){20xT{rqOG+B@4CAY8XgY+6DPr9
zu_$Ab+GuZWL3dXd!XqQ$>*r7Dzac<hZ!a3^mGJTP!^MzL#zjU{dr|ouDwPT;S5sl{
z;IJ;p8UP}5xk3SfK!BK73AkLYF%>D_lX#`YavX4WL9|E=Hk-Y|e+|IR8`p6yEe(#l
zcK=o4KM(8mdUSTYF|=()P98PDom=U+|L~E?l9NCmdV5e)RRyh1ivoGczXKQ@8G)j-
z801OJ%8G}4dGXc*%*;%qy0Q|zJ?~c}<MDXNE80Q;GM1Yf>J4p3T6nebtgVq(C^x+V
zI-L$(Z#$u^tA$#v-mrf7d_HmticAae^~+~eRa9Vne9UO!k`bMgUq}sb_jWq&J)qwO
zqDZ09#7hn~HnzylFEAYd>2GmV1Z@CYTU%u1Z6|=89kO!sO{V}UzS!tU+6vg&*&{R8
z$RuP^17!0_VxnjRkcE_yoohM;m;yLB2=F93$M`Y|3J%7p(*d-0KNAH6j*fVonN1Ba
zH#diuHPsj%9!6qvGWP7<x1q#j+DXMRw0?oJiwk7&32WkQcp;gbm_UiV2&8plrBZM>
zYwrbg0Lb(cUzWnl+h<)+qjy5GP#Tm<1Ox^m=zK8D&CQnsQ30^oI}s)nA}II*<!#C+
z0LiA&XwdjdiNV1EBqSx{;Gx3?h=qj($YMn+zRb+b3;|~X5iJs}tJ-QAXaOu8`l(W(
zw73X6*lft+62Red5hoEZ$2{Wd3R!$2NU_m1MgU7e2M0c(x~dW$9-e4!Y6KZD5~&Qw
z+}-KsUH01)069(mf6MD;gBoYg1+AzJCKQ_nV3LH&ciRDe1JeMta82k1<p2Nx07*qo
IM6N<$f>hI)UH||9

literal 0
HcmV?d00001


From fb996cac09fe537453876ae7a03b8ef895851076 Mon Sep 17 00:00:00 2001
From: hutamatr <hutamatr@gmail.com>
Date: Fri, 18 Aug 2023 14:29:34 +0700
Subject: [PATCH 12/12] chore: install react-phone-number-input package

---
 package.json |  3 ++-
 yarn.lock    | 32 ++++++++++++++++++++++++++++++--
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 4f24fdd..ea97309 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "urban-fashion-shop",
   "private": true,
-  "version": "1.1.4",
+  "version": "1.2.3",
   "type": "module",
   "engines": {
     "node": ">= 16",
@@ -35,6 +35,7 @@
     "react-hook-form": "^7.45.2",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^4.10.1",
+    "react-phone-number-input": "^3.3.2",
     "react-redux": "^8.1.2",
     "react-router-dom": "^6.14.2",
     "react-toggle-dark-mode": "^1.1.1",
diff --git a/yarn.lock b/yarn.lock
index 0331f81..a85e964 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -998,7 +998,7 @@ chokidar@^3.5.3:
   optionalDependencies:
     fsevents "~2.3.2"
 
-classnames@^2.2.6:
+classnames@^2.2.6, classnames@^2.3.1:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
   integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
@@ -1092,6 +1092,11 @@ convert-source-map@^1.7.0:
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
   integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
 
+country-flag-icons@^1.5.4:
+  version "1.5.7"
+  resolved "https://registry.yarnpkg.com/country-flag-icons/-/country-flag-icons-1.5.7.tgz#f1f2ddf14f3cbf01cba6746374aeba94db35d4b4"
+  integrity sha512-AdvXhMcmSp7nBSkpGfW4qR/luAdRUutJqya9PuwRbsBzuoknThfultbv7Ib6fWsHXC43Es/4QJ8gzQQdBNm75A==
+
 cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
@@ -1695,6 +1700,13 @@ inherits@2:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
+input-format@^0.3.8:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/input-format/-/input-format-0.3.8.tgz#9445b0cab2f0457fbe36d77d607e942fd37345c5"
+  integrity sha512-tLR0XRig1xIcG1PtIpMd/uoltvkAI62CN9OIbtj4/tEJAkqTCQLNHUZ9N4M46w0dopny7Rlt/lRH5Xzp7e6F+g==
+  dependencies:
+    prop-types "^15.8.1"
+
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
@@ -1825,6 +1837,11 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+libphonenumber-js@^1.10.39:
+  version "1.10.41"
+  resolved "https://registry.yarnpkg.com/libphonenumber-js/-/libphonenumber-js-1.10.41.tgz#14b6be5894bed3385808a6a088031b5b8a27c105"
+  integrity sha512-4rmmF4u4vD3eGNuuCGjCPwRwO+fIuu1WWcS7VwbPTiMFkJd8F02v8o5pY5tlYuMR+xOvJ88mtOHpkm0Tnu2LcQ==
+
 lilconfig@2.1.0, lilconfig@^2.0.5, lilconfig@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
@@ -2237,7 +2254,7 @@ prettier@^3.0.0:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.1.tgz#65271fc9320ce4913c57747a70ce635b30beaa40"
   integrity sha512-fcOWSnnpCrovBsmFZIGIy9UqK2FaI7Hqax+DIO0A9UxeVoY4iweyaFjS5TavZN97Hfehph0nhsZnjlVKzEQSrQ==
 
-prop-types@^15.7.2:
+prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -2305,6 +2322,17 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-phone-number-input@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/react-phone-number-input/-/react-phone-number-input-3.3.2.tgz#2164e58484ddd08786636b75989f0cace75b9c12"
+  integrity sha512-h/XdyBlmy9DApKqSbmXvvvJYL1nxA3omUsCc1aeeXkt63k2QJs971jE8T/ItV9vgljBLL36BEuKs0pZlJflGew==
+  dependencies:
+    classnames "^2.3.1"
+    country-flag-icons "^1.5.4"
+    input-format "^0.3.8"
+    libphonenumber-js "^1.10.39"
+    prop-types "^15.8.1"
+
 react-redux@^8.1.2:
   version "8.1.2"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.1.2.tgz#9076bbc6b60f746659ad6d51cb05de9c5e1e9188"