From 2d6d5c0483d79401b4cfa4a1ba87048f18ab2752 Mon Sep 17 00:00:00 2001
From: Chukwumdiebube <chukwumdiebubeojinta@gmail.com>
Date: Sat, 4 Mar 2023 20:36:42 +0100
Subject: [PATCH] reset profile password

---
 .../Settings/Tabs/ChangePasswordTab.jsx       | 104 +++++++++++++++++-
 src/services/UsersService.js                  |   4 +
 2 files changed, 107 insertions(+), 1 deletion(-)

diff --git a/src/components/Settings/Tabs/ChangePasswordTab.jsx b/src/components/Settings/Tabs/ChangePasswordTab.jsx
index a078646..16ef472 100755
--- a/src/components/Settings/Tabs/ChangePasswordTab.jsx
+++ b/src/components/Settings/Tabs/ChangePasswordTab.jsx
@@ -3,6 +3,8 @@
 import React, { useState } from "react";
 import Icons from "../../Helpers/Icons";
 import PasswordSvg from "../PasswordSvg";
+import { toast } from "react-toastify";
+import usersService from "../../../services/UsersService";
 
 export default function ChangePasswordTab() {
   const [oldPass, setOldPass] = useState("hide-password");
@@ -38,6 +40,95 @@ export default function ChangePasswordTab() {
       }
     }
   };
+
+  // Reset Password
+  const reset_profilePass = new usersService()
+  const [loading, setLoading] = useState(false) 
+  const [validation, setValidation] = useState("")
+  // state for password values
+  const [passwordDetails, setPasswordDetails] = useState({
+    prev_pass: '',
+    new_pass: '',
+    confirm_pass: ''
+  })
+  // tracks password changes
+  const handlePasswordChange = ({target:{name, value}}) => {
+    setPasswordDetails(prev => ({...prev, [name]:value}))
+  }
+
+  const handleResetPassword = async(e) => {
+    setValidation("")
+    setLoading(true)
+
+    let resetPassword = {...passwordDetails}
+    let {prev_pass, new_pass, confirm_pass} = resetPassword
+
+    // Check empty fields
+    if(!prev_pass || !new_pass || !confirm_pass) {
+      setLoading(false)
+      setValidation("Please fill the empty fields")
+      return
+    }
+
+    // Checking to see the password has 
+    if(!/^[A-Za-z]\w{6,14}$/.test(new_pass)) {
+      setLoading(false)
+      setValidation("it must be a more 7 alphanumeric characters")
+      return
+    }
+
+    // matching new passwords with confirm_password
+    if(new_pass != confirm_pass){
+      setLoading(false)
+      setValidation("new password does not match")
+      return
+    }
+
+    // matching new passwords with old passwords
+    if(prev_pass === new_pass){
+      setLoading(false)
+      setValidation("you can't use old passwords")
+      return
+    }
+
+    // assigning new values to resetPassword
+    resetPassword.member_id = localStorage.getItem("member_id")
+    resetPassword.session_token = localStorage.getItem("session_token")
+    resetPassword.member_uuid = localStorage.getItem("member_uuid")
+
+    // removed confirm password from the payload
+    delete resetPassword.confirm_pass
+
+    try {
+      const res = await reset_profilePass.resetProfilePassword(resetPassword)
+      console.log(res)
+      
+      if(res.status != 200){
+        setLoading(false)
+        setValidation("An error occurred")
+        return
+      }
+      
+      if(res.status == 200){
+        // if status is okay but can't success not granted
+        if(res.data.status < 0 ) {
+          setLoading(false)
+          setValidation("sorry, error updating password")
+        } else {
+          setLoading(false)
+          // setValidation("password updated successfully")
+          toast.success("password updated successfully")
+  
+          // setPasswordDetails(prev => ({...prev, e.target.name: ''}))
+        }
+      }
+    } catch (error) {
+      setLoading(false)
+      setValidation("something went wrong, try again later")
+    }
+
+  }
+
   return (
     <div className="changePasswordTab w-full">
       <div className="w-full flex xl:flex-row flex-col-reverse space-x-5 xl:items-center">
@@ -58,6 +149,9 @@ export default function ChangePasswordTab() {
                 className="input-field placeholder:text-base text-bese px-12 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
                 type="password"
                 id="old_password"
+                name='prev_pass'
+                value={passwordDetails.prev_pass}
+                onChange={handlePasswordChange}
               />
               <div
                 className="absolute right-6 bottom-[17px] z-10 cursor-pointer"
@@ -83,6 +177,9 @@ export default function ChangePasswordTab() {
                 className="input-field placeholder:text-base text-bese px-12 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
                 type="password"
                 id="new_password"
+                name="new_pass"
+                value={passwordDetails.new_pass}
+                onChange={handlePasswordChange}
               />
               <div
                 className="absolute right-6 bottom-[17px] z-10 cursor-pointer"
@@ -108,6 +205,9 @@ export default function ChangePasswordTab() {
                 className="input-field placeholder:text-base text-bese px-12 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
                 type="password"
                 id="confirm_password"
+                name="confirm_pass"
+                value={passwordDetails.confirm_pass}
+                onChange={handlePasswordChange}
               />
               <div
                 className="absolute right-6 bottom-[17px] z-10 cursor-pointer"
@@ -117,6 +217,7 @@ export default function ChangePasswordTab() {
               </div>
             </div>
           </div>
+          {validation && <p className={`my-5 text-center font-light italic text-sm subpixel-antialiased tracking-wide ${validation == 'Password updated' ? 'text-green-600' : 'text-red-500'} `}>{validation}</p>}
           <div className="flex justify-center space-x-4 items-center">
             <button
               type="button"
@@ -127,9 +228,10 @@ export default function ChangePasswordTab() {
             <button
               type="button"
               className="btn-gradient tracking-wide rounded-full w-[173px] h-[46px] flex justify-center items-center"
+              onClick={handleResetPassword}
             >
               <span className="font-thin text-18 tracking-wide antialiased text-white">
-                Change Password
+              {loading ? <div className="signup btn-loader"></div> : <span>Change Password</span>}
               </span>
             </button>
           </div>
diff --git a/src/services/UsersService.js b/src/services/UsersService.js
index e517681..ac406ef 100644
--- a/src/services/UsersService.js
+++ b/src/services/UsersService.js
@@ -10,6 +10,10 @@ class usersService {
         return this.postAuxEnd('/resetpass', reqData);
     }
 
+    resetProfilePassword(reqData){
+        return this.postAuxEnd('/resetpass-profile', reqData);
+    }
+
     logInUser(reqData) {
         localStorage.setItem("session_token", ``);
         return this.postAuxEnd("/login", reqData);