From 37ad447db59dfceecd34edf51f842c736999fa00 Mon Sep 17 00:00:00 2001
From: kiisi <kiisifelix06@gmail.com>
Date: Fri, 9 Aug 2024 15:03:22 +0100
Subject: [PATCH 1/3] feat: Change password API integration on settings page

---
 src/actions/createOrg.ts                      |  2 +-
 .../account/_component.tsx/password.tsx       | 91 ++++++++++++++++++-
 2 files changed, 90 insertions(+), 3 deletions(-)

diff --git a/src/actions/createOrg.ts b/src/actions/createOrg.ts
index ee02d67c2..98778d914 100644
--- a/src/actions/createOrg.ts
+++ b/src/actions/createOrg.ts
@@ -23,7 +23,7 @@ export const createOrg = async (
     };
   }
   try {
-    const response = await axios.post(
+    const response = await (
       `${apiUrl}/api/v1/organisations`,
       validatedFields.data,
       {
diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password.tsx
index e72a0c5ad..9b69dc8b6 100644
--- a/src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password.tsx
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password.tsx
@@ -1,13 +1,78 @@
 "use client";
 
-import { useState } from "react";
+import axios from "axios";
+import { useSession } from "next-auth/react";
+import { ChangeEvent, useState } from "react";
 
+import { getApiUrl } from "~/actions/getApiUrl";
 import CustomButton from "~/components/common/common-button/common-button";
 import CustomInput from "~/components/common/input/input";
 import PasswordSuccessfulModal from "~/components/common/modals/password-successful";
+import { toast } from "~/components/ui/use-toast";
 
 const Password = () => {
+  const { data } = useSession();
+
   const [open, setOpen] = useState<boolean>(false);
+
+  const [isPending, setIsPending] = useState(false);
+
+  const [formData, setFormData] = useState({
+    oldPassword: "",
+    password: "",
+    confirmPassword: "",
+  });
+
+  const formDataHandler = (
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    setFormData((previous) => ({
+      ...previous,
+      [event.target.name]: event.target.value,
+    }));
+  };
+
+  const submit = async () => {
+    if (formData.password !== formData.confirmPassword) {
+      return toast({
+        title: "Warning!",
+        description: "Password does not match",
+      });
+    }
+    try {
+      setIsPending(true);
+      const baseUrl = await getApiUrl();
+      const API_URL = `${baseUrl}/api/v1/auth/change-password`;
+
+      const payload = {
+        oldPassword: formData.oldPassword,
+        newPassword: formData.password,
+      };
+
+      const response = await axios.post(API_URL, payload, {
+        headers: {
+          Authorization: `Bearer ${data?.access_token}`,
+        },
+      });
+      toast({
+        title: "Success",
+        description: response.data.message,
+      });
+    } catch (error) {
+      const errorMessage = (error as HttpError)?.response?.data?.message;
+      toast({
+        title: "Error",
+        description: errorMessage,
+      });
+      setIsPending(false);
+    } finally {
+      setIsPending(false);
+    }
+  };
+
+  const disabled =
+    !formData.confirmPassword || !formData.oldPassword || !formData.password;
+
   return (
     <div className="w-full max-w-[674px] px-8 pt-[50px]">
       <div className="mb-8">
@@ -25,25 +90,39 @@ const Password = () => {
             label="Current Password"
             className="border-border"
             type="password"
+            name="oldPassword"
+            value={formData.oldPassword}
+            onChange={formDataHandler}
           />
           <CustomInput
             placeholder="Enter new password"
             label="New Password"
             className="border-border"
             type="password"
+            name="password"
+            value={formData.password}
+            onChange={formDataHandler}
           />
           <CustomInput
             placeholder="Confirm new password"
             label="Confrim new Password"
             className="border-border"
             type="password"
+            name="confirmPassword"
+            value={formData.confirmPassword}
+            onChange={formDataHandler}
           />
         </div>
         <div className="flex items-center justify-start gap-6">
           <CustomButton variant="outline" onClick={() => setOpen(false)}>
             Cancel
           </CustomButton>
-          <CustomButton className="bg-primary" onClick={() => setOpen(true)}>
+          <CustomButton
+            isDisabled={disabled}
+            onClick={submit}
+            className="bg-primary"
+            isLoading={isPending}
+          >
             Update Password
           </CustomButton>
         </div>
@@ -53,4 +132,12 @@ const Password = () => {
   );
 };
 
+interface HttpError {
+  response?: {
+    data?: {
+      message?: string;
+    };
+  };
+}
+
 export default Password;

From 7d9de840cbe84b56ade13a24bc3a43f6aea80b82 Mon Sep 17 00:00:00 2001
From: kiisi <kiisifelix06@gmail.com>
Date: Fri, 9 Aug 2024 15:09:59 +0100
Subject: [PATCH 2/3] feat: add success modal

---
 .../settings/account/_component.tsx/password.tsx       | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password.tsx
index 9b69dc8b6..25b5bbb22 100644
--- a/src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password.tsx
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password.tsx
@@ -49,14 +49,16 @@ const Password = () => {
         newPassword: formData.password,
       };
 
-      const response = await axios.post(API_URL, payload, {
+      await axios.post(API_URL, payload, {
         headers: {
           Authorization: `Bearer ${data?.access_token}`,
         },
       });
-      toast({
-        title: "Success",
-        description: response.data.message,
+      setOpen(true);
+      setFormData({
+        oldPassword: "",
+        password: "",
+        confirmPassword: "",
       });
     } catch (error) {
       const errorMessage = (error as HttpError)?.response?.data?.message;

From a7c499d1251ba9d4bc55c4f1ab2a18469f0da270 Mon Sep 17 00:00:00 2001
From: kiisi <kiisifelix06@gmail.com>
Date: Fri, 9 Aug 2024 15:15:48 +0100
Subject: [PATCH 3/3] fix: lint issues

---
 src/actions/createOrg.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/actions/createOrg.ts b/src/actions/createOrg.ts
index 98778d914..ee02d67c2 100644
--- a/src/actions/createOrg.ts
+++ b/src/actions/createOrg.ts
@@ -23,7 +23,7 @@ export const createOrg = async (
     };
   }
   try {
-    const response = await (
+    const response = await axios.post(
       `${apiUrl}/api/v1/organisations`,
       validatedFields.data,
       {