use toast instea modal for info messages (#932)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

components/security/ChangePasswordSection.tsx

@@ -2,13 +2,11 @@ import React, { SyntheticEvent, useState } from "react";
 
 import { ErrorCode } from "@lib/auth";
 import { useLocale } from "@lib/hooks/useLocale";
-
-import Modal from "@components/Modal";
+import showToast from "@lib/notification";
 
 const ChangePasswordSection = () => {
   const [oldPassword, setOldPassword] = useState("");
   const [newPassword, setNewPassword] = useState("");
-  const [successModalOpen, setSuccessModalOpen] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const { t } = useLocale();
@@ -18,10 +16,6 @@ const ChangePasswordSection = () => {
     [ErrorCode.NewPasswordMatchesOld]: t("new_password_matches_old_password"),
   };
 
-  const closeSuccessModal = () => {
-    setSuccessModalOpen(false);
-  };
-
   async function changePasswordHandler(e: SyntheticEvent) {
     e.preventDefault();
 
@@ -44,7 +38,7 @@ const ChangePasswordSection = () => {
       if (response.status === 200) {
         setOldPassword("");
         setNewPassword("");
-        setSuccessModalOpen(true);
+        showToast(t("password_has_been_changed"), "success");
         return;
       }
 
@@ -112,12 +106,6 @@ const ChangePasswordSection = () => {
           <hr className="mt-4" />
         </div>
       </form>
-      <Modal
-        heading={t("password_updated_successfully")}
-        description={t("password_has_been_changed")}
-        open={successModalOpen}
-        handleClose={closeSuccessModal}
-      />
     </>
   );
 };