feat(AAiT.web.g1): Implemented change password

RealEskalate · Aug 30, 2023 · a544ee6 · a544ee6
1 parent 6dabf9a
commit a544ee6
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 4 deletions.
diff --git a/aait/web/group-1/app/profile/account/page.tsx b/aait/web/group-1/app/profile/account/page.tsx
@@ -1,17 +1,39 @@
 'use client'
 
-import React from 'react';
+import React, { useState } from 'react';
 import Image from 'next/image';
+import { useChangePasswordMutation } from '@/store/features/user/userApi';
+
 
 export default function Page() {
+  const [changePassword] = useChangePasswordMutation()
+  const [oldPassword, setOldPassword] = useState('')
+  const [newPassword, setNewPassword] = useState('')
+  const [confirmPass, setConfirmPass] = useState('')
+
+  const handleSaveChanges = () => {
+    if(newPassword !== confirmPass) {
+      window.alert("Password don't match")
+      return
+    }
+    changePassword({"oldPassword": oldPassword, "newPassword": newPassword})
+
+  }
+
+
   return (
     <div className='flex flex-col space-y-16 font-montserrat'>
       <div className='flex justify-between'>
         <div>
           <h3 className='text-[13px] text-[#5D5D5D] font-semibold'>Manage Your Account</h3>
           <p className='text-[10px] text-[#868686] font-light'>You can change your password here</p>
         </div>
-        <button className='text-[10px] font-semibold bg-[#264FAD] rounded-md text-white px-12 py-2'>Save Changes</button>
+        <button 
+          className='text-[10px] font-semibold bg-[#264FAD] rounded-md text-white px-12 py-2'
+          onClick={handleSaveChanges}
+        >
+          Save Changes
+        </button>
       </div>
       <form className='grid grid-cols-3 place-items-start items-center text-[11px] font-poppins w-full max-w-md mx-auto gap-y-5'>
         <label className='col-span-1 font-semibold text-[#565656]'>Current Password</label>
@@ -20,6 +42,7 @@ export default function Page() {
             type="password"
             className='focus:outline-none bg-[#EFF3F9]'
             placeholder='Enter your current password'
+            onChange={(e) => setOldPassword(e.target.value)}
             />
           <Image
             src='/images/toggle-password-status.png'
@@ -35,6 +58,7 @@ export default function Page() {
             type="password"
             className='focus:outline-none bg-[#EFF3F9]'
             placeholder='Enter new password'
+            onChange={(e) => setNewPassword(e.target.value)}
             />
           <Image
             src='/images/toggle-password-status.png'
@@ -50,6 +74,7 @@ export default function Page() {
             type="password"
             className='focus:outline-none bg-[#EFF3F9]'
             placeholder='Confirm new password'
+            onChange={(e) => setConfirmPass(e.target.value)}
             />
           <Image
             src='/images/toggle-password-status.png'

diff --git a/aait/web/group-1/app/profile/page.tsx b/aait/web/group-1/app/profile/page.tsx
@@ -82,7 +82,7 @@ export default function Page() {
         <div className='col-span-2 flex items-start justify-center md:justify-start space-x-0 md:space-x-16'>
           <Image
               className='hidden md:block'
-              src={photo ? URL.createObjectURL(photo): currUser?.userProfile}
+              src={photo ? URL.createObjectURL(photo) : currUser?.userProfile}
               width={ 50 }
               height={ 50 }
               alt='small profile image'

diff --git a/aait/web/group-1/store/features/user/userApi.ts b/aait/web/group-1/store/features/user/userApi.ts
@@ -23,7 +23,14 @@ export const profileApi = createApi({
         body: newUserData,
       }),
     }),
+    changePassword: builder.mutation({
+      query: (newPasswordInfo) => ({
+        url: '/auth/change-password',
+        method: 'PATCH',
+        body: newPasswordInfo,
+      }),
+    }),
   }),
 });
 
-export const { useEditProfileMutation } = profileApi;
+export const { useEditProfileMutation, useChangePasswordMutation } = profileApi;