Fix #8204 UI : While login just show the loader in login button. (#8205)

* Fix #8204 UI : While login just show the loader in login button.

* Addressing review comment

openmetadata-ui/src/main/resources/ui/src/authentication/auth-provider/basic-auth.provider.tsx

@@ -82,12 +82,10 @@ const BasicAuthProvider = ({
 }: BasicAuthProps) => {
   const { setLoadingIndicator } = useAuthContext();
   const [loginError, setLoginError] = useState<string | null>(null);
-
   const history = useHistory();
 
   const handleLogin = async (email: string, password: string) => {
     try {
-      setLoadingIndicator(true);
       setLoginError(null);
       try {
         const response = await basicAuthSignIn({ email, password });
@@ -118,8 +116,6 @@ const BasicAuthProvider = ({
         err as AxiosError,
         jsonData['api-error-messages']['unauthorized-user']
       );
-    } finally {
-      setLoadingIndicator(false);
     }
   };
 

openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json

@@ -10,6 +10,14 @@
     "tags": "Tags",
     "settings": "Settings",
     "search-global": "Search for Tables, Topics, Dashboards, Pipelines and ML Models",
+    "om-description": "Centralized Metadata Store, Discover, Collaborate and get your Data Right",
+    "login": "Login",
+    "forgot-password": "Forgot Password",
+    "or-lowercase": "or",
+    "new-to-the-platform": "New to the platform?",
+    "create-account": "Create Account",
+    "username-or-email": "Username or Email",
+    "password": "Password",
     "success": "Success",
     "aborted": "Aborted",
     "failed": "Failed",

openmetadata-ui/src/main/resources/ui/src/pages/login/index.tsx

@@ -15,7 +15,8 @@ import { Button, Divider, Form, Input, Typography } from 'antd';
 import classNames from 'classnames';
 import jwtDecode, { JwtPayload } from 'jwt-decode';
 import { observer } from 'mobx-react';
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 import loginBG from '../../assets/img/login-bg.png';
 import { useAuthContext } from '../../authentication/auth-provider/AuthProvider';
@@ -31,6 +32,7 @@ import './login.style.less';
 import LoginCarousel from './LoginCarousel';
 
 const SigninPage = () => {
+  const [loading, setLoading] = useState(false);
   const [form] = Form.useForm();
 
   const history = useHistory();
@@ -42,6 +44,8 @@ const SigninPage = () => {
     isAuthenticated,
   } = useAuthContext();
 
+  const { t } = useTranslation();
+
   const { isAuthProviderBasic } = useMemo(() => {
     return {
       isAuthProviderBasic: authConfig?.provider === AuthTypes.BASIC,
@@ -160,7 +164,9 @@ const SigninPage = () => {
     email: string;
     password: string;
   }) => {
-    handleLogin(email, password);
+    setLoading(true);
+    await Promise.resolve(handleLogin(email, password));
+    setLoading(false);
   };
 
   const onClickSignUp = () => history.push(ROUTES.REGISTER);
@@ -179,8 +185,7 @@ const SigninPage = () => {
             })}>
             <SVGIcons alt="OpenMetadata Logo" icon={Icons.LOGO} width="152" />
             <Typography.Text className="mt-8 w-80 tw-text-xl text-semi-bold tw-text-grey-muted">
-              Centralized Metadata Store, Discover, Collaborate and get your
+              {t('label.om-description')}{' '}
-              Data Right
             </Typography.Text>
 
             {isAuthProviderBasic ? (
@@ -193,27 +198,29 @@ const SigninPage = () => {
                   onFinish={handleSubmit}>
                   <Form.Item
                     data-testid="email"
-                    label="Username or Email"
+                    label={t('label.username-or-email')}
                     name="email"
                     requiredMark={false}
                     rules={[{ required: true }]}>
-                    <Input placeholder="Email or Username" />
+                    <Input placeholder={t('label.username-or-email')} />
                   </Form.Item>
                   <Form.Item
                     data-testid="password"
-                    label="Password"
+                    label={t('label.password')}
                     name="password"
                     requiredMark={false}
                     rules={[{ required: true }]}>
-                    <Input.Password placeholder="Password" />
+                    <Input.Password placeholder={t('label.password')} />
                   </Form.Item>
 
                   <Button
                     className="w-full"
                     data-testid="login"
+                    disabled={loading}
                     htmlType="submit"
+                    loading={loading}
                     type="primary">
-                    Login
+                    {t('label.login')}
                   </Button>
                 </Form>
                 {loginError && (
@@ -237,7 +244,7 @@ const SigninPage = () => {
                 )}
                 <div className="mt-8" onClick={onClickForgotPassword}>
                   <Typography.Link underline data-testid="forgot-password">
-                    Forgot Password
+                    {t('label.forgot-password')}
                   </Typography.Link>
                 </div>
 
@@ -245,20 +252,20 @@ const SigninPage = () => {
                   <>
                     <Divider className="w-min-0 mt-8 mb-12 justify-center">
                       <Typography.Text className="text-sm" type="secondary">
-                        or
+                        {t('label.or-lowercase')}
                       </Typography.Text>
                     </Divider>
 
                     <div className="mt-4 flex flex-center">
                       <Typography.Text className="mr-4">
-                        New to the platform?
+                        {t('label.new-to-the-platform')}
                       </Typography.Text>
                       <Button
                         ghost
                         data-testid="signup"
                         type="link"
                         onClick={onClickSignUp}>
-                        Create Account
+                        {t('label.create-account')}
                       </Button>
                     </div>
                   </>