fix(ui): forgot password success feedback (open-metadata#11437)

madsemildahlgaard · May 8, 2023 · 94ef30c · 94ef30c
1 parent 7c60c85
commit 94ef30c
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 13 deletions.
diff --git a/...src/main/resources/ui/src/components/authentication/auth-provider/basic-auth.provider.tsx b/...src/main/resources/ui/src/components/authentication/auth-provider/basic-auth.provider.tsx
@@ -166,7 +166,6 @@ const BasicAuthProvider = ({
 
   const handleForgotPassword = async (email: string) => {
     try {
-      setLoadingIndicator(true);
       await generatePasswordResetLink(email);
     } catch (err) {
       if (
@@ -177,8 +176,6 @@ const BasicAuthProvider = ({
       } else {
         showErrorToast(t('server.email-not-found'));
       }
-    } finally {
-      setLoadingIndicator(false);
     }
   };
 

diff --git a/...metadata-ui/src/main/resources/ui/src/pages/forgot-password/forgot-password.component.tsx b/...metadata-ui/src/main/resources/ui/src/pages/forgot-password/forgot-password.component.tsx
@@ -13,7 +13,7 @@
 
 import { Button, Card, Col, Divider, Form, Input, Row, Typography } from 'antd';
 import { useBasicAuth } from 'components/authentication/auth-provider/basic-auth.provider';
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 import { ROUTES } from '../../constants/constants';
@@ -24,17 +24,24 @@ const ForgotPassword = () => {
   const { t } = useTranslation();
   const { handleForgotPassword } = useBasicAuth();
   const history = useHistory();
+  const [loading, setLoading] = useState(false);
 
   const [showResetLinkSentAlert, setShowResetLinkSentAlert] = useState(false);
 
-  const handleSubmit = async (data: { email: string }) => {
-    try {
-      handleForgotPassword && (await handleForgotPassword(data.email));
-      setShowResetLinkSentAlert(true);
-    } catch (error) {
-      setShowResetLinkSentAlert(false);
-    }
-  };
+  const handleSubmit = useCallback(
+    async (data: { email: string }) => {
+      try {
+        setLoading(true);
+        handleForgotPassword && (await handleForgotPassword(data.email));
+        setShowResetLinkSentAlert(true);
+      } catch (error) {
+        setShowResetLinkSentAlert(false);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [setShowResetLinkSentAlert, handleForgotPassword]
+  );
 
   return (
     <div className="h-full py-24 forgot-password-container ">
@@ -77,7 +84,7 @@ const ForgotPassword = () => {
               </Form.Item>
             </Col>
             <Col className="m-t-md" span={24}>
-              <Button className="w-full" htmlType="submit" type="primary">
+              <Button block htmlType="submit" loading={loading} type="primary">
                 {t('label.submit')}
               </Button>
             </Col>