From 6c2f6089c7d44f7bb868f484d15d547468b989a6 Mon Sep 17 00:00:00 2001
From: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com>
Date: Wed, 28 Sep 2022 11:30:38 +0530
Subject: [PATCH] fix(ui): refresh token for basic auth (#7757)

---
 .../basic-auth.authenticator.tsx              | 54 ++++++++-----------
 .../resources/ui/src/axiosAPIs/auth-API.ts    |  2 +-
 .../forgot-password.component.tsx             |  2 +-
 .../resources/ui/src/pages/login/index.tsx    |  6 +--
 .../reset-password.component.tsx              |  4 +-
 .../pages/signup/basic-signup.component.tsx   | 10 ++--
 .../src/main/resources/ui/src/styles/app.less |  3 ++
 .../main/resources/ui/src/styles/spacing.less |  4 ++
 8 files changed, 43 insertions(+), 42 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/authentication/authenticators/basic-auth.authenticator.tsx b/openmetadata-ui/src/main/resources/ui/src/authentication/authenticators/basic-auth.authenticator.tsx
index 90f283f174e..39c05204d71 100644
--- a/openmetadata-ui/src/main/resources/ui/src/authentication/authenticators/basic-auth.authenticator.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/authentication/authenticators/basic-auth.authenticator.tsx
@@ -17,7 +17,10 @@ import React, {
   ReactNode,
   useImperativeHandle,
 } from 'react';
-import { getAccessTokenOnExpiry } from '../../axiosAPIs/auth-API';
+import {
+  AccessTokenResponse,
+  getAccessTokenOnExpiry,
+} from '../../axiosAPIs/auth-API';
 import { AuthTypes } from '../../enums/signin.enum';
 import localState from '../../utils/LocalStorageUtils';
 import { useAuthContext } from '../auth-provider/AuthProvider';
@@ -31,42 +34,31 @@ const BasicAuthenticator = forwardRef(
   ({ children }: BasicAuthenticatorInterface, ref) => {
     const { handleLogout } = useBasicAuth();
     const { setIsAuthenticated, authConfig } = useAuthContext();
+
+    const handleSilentSignIn = async (): Promise<AccessTokenResponse> => {
+      const refreshToken = localState.getRefreshToken();
+
+      if (authConfig.provider !== AuthTypes.BASIC) {
+        Promise.reject('AuthProvider is not Basic');
+      }
+
+      const response = await getAccessTokenOnExpiry({
+        refreshToken: refreshToken as string,
+      });
+
+      localState.setRefreshToken(response.refreshToken);
+      localState.setOidcToken(response.accessToken);
+
+      return Promise.resolve(response);
+    };
+
     useImperativeHandle(ref, () => ({
       invokeLogout() {
         handleLogout();
         setIsAuthenticated(false);
       },
       renewIdToken() {
-        let idToken = '';
-        const refreshToken = localState.getRefreshToken();
-        if (authConfig && authConfig.provider !== undefined) {
-          return new Promise((resolve, reject) => {
-            const { provider } = authConfig;
-            if (provider === AuthTypes.BASIC) {
-              getAccessTokenOnExpiry({
-                refreshToken: refreshToken as string,
-              })
-                .then((res) => {
-                  idToken = res.accessToken;
-                  localState.setOidcToken(res.accessToken);
-                  resolve(idToken);
-                })
-                .catch((err) => {
-                  reject(
-                    `Error while renewing id token from Basic Auth: ${err.message}`
-                  );
-                });
-            } else {
-              reject(
-                `Auth Provider ${provider} not supported for renewing tokens.`
-              );
-            }
-          });
-        } else {
-          return Promise.reject(
-            'Cannot renew id token. Authentication Provider is not present.'
-          );
-        }
+        return handleSilentSignIn();
       },
     }));
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/axiosAPIs/auth-API.ts b/openmetadata-ui/src/main/resources/ui/src/axiosAPIs/auth-API.ts
index f358b68c52e..8fb66ccc403 100644
--- a/openmetadata-ui/src/main/resources/ui/src/axiosAPIs/auth-API.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/axiosAPIs/auth-API.ts
@@ -18,7 +18,7 @@ import { PasswordResetRequest } from '../generated/auth/passwordResetRequest';
 import { RegistrationRequest } from '../generated/auth/registrationRequest';
 import { TokenRefreshRequest } from '../generated/auth/tokenRefreshRequest';
 
-interface AccessTokenResponse {
+export interface AccessTokenResponse {
   accessToken: string;
   refreshToken: string;
   tokenType: string;
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/forgot-password/forgot-password.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/forgot-password/forgot-password.component.tsx
index 1c95642285a..412c40450c8 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/forgot-password/forgot-password.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/forgot-password/forgot-password.component.tsx
@@ -45,7 +45,7 @@ const ForgotPassword = () => {
             <SVGIcons alt="OpenMetadata Logo" icon={Icons.LOGO} width="152" />
           </Col>
           <Col className="flex-center text-center mt-8" span={24}>
-            <Typography.Text strong>
+            <Typography.Text className="tw-text-xl text-semi-bold tw-text-grey-muted">
               Enter your registered email to receive password reset link
             </Typography.Text>
           </Col>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/login/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/login/index.tsx
index c046a1c2f8e..419f1f23fde 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/login/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/login/index.tsx
@@ -178,9 +178,9 @@ const SigninPage = () => {
               'sso-container': !isAuthProviderBasic,
             })}>
             <SVGIcons alt="OpenMetadata Logo" icon={Icons.LOGO} width="152" />
-            <Typography.Text strong className="mt-8 tw-mx-auto tw-text-xl w-83">
-              Centralized Metadata Store, Discover, <br />
-              Collaborate and get your Data Right
+            <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
+              Data Right
             </Typography.Text>
 
             {isAuthProviderBasic ? (
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/reset-password/reset-password.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/reset-password/reset-password.component.tsx
index 8d8f2d10231..968ce0b3193 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/reset-password/reset-password.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/reset-password/reset-password.component.tsx
@@ -104,7 +104,9 @@ const ResetPassword = () => {
             </Col>
 
             <Col className="mt-12 text-center" span={24}>
-              <Typography.Title level={5}>Reset your Password</Typography.Title>
+              <Typography.Text className="tw-text-xl text-semi-bold tw-text-grey-muted">
+                Reset your Password
+              </Typography.Text>
             </Col>
 
             <Col span={24}>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/signup/basic-signup.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/signup/basic-signup.component.tsx
index f122c5c46b2..27ddcd74a10 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/signup/basic-signup.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/signup/basic-signup.component.tsx
@@ -72,13 +72,13 @@ const BasicSignUp = () => {
         <div className="tw-w-5/12">
           <div className="mt-4 tw-text-center flex-center flex-col">
             <SVGIcons alt="OpenMetadata Logo" icon={Icons.LOGO} width="152" />
-            <Typography.Text strong className="mt-8 tw-mx-auto tw-text-xl w-83">
-              Centralized Metadata Store, Discover, <br />
-              Collaborate and get your Data Right
+            <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
+              Data Right
             </Typography.Text>
 
             {isAuthProviderBasic ? (
-              <div className="m-t-lg" style={{ width: '334px' }}>
+              <div style={{ width: '334px' }}>
                 <Row>
                   <Col span={24}>
                     <>
@@ -157,7 +157,7 @@ const BasicSignUp = () => {
                           Create Account
                         </Button>
 
-                        <Divider className="w-min-0 w-max-200 mt-8 mb-12 justify-center">
+                        <Divider className="w-min-0  mt-8 mb-12 justify-center">
                           <Typography.Text type="secondary">or</Typography.Text>
                         </Divider>
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/app.less b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
index 3e3bcc4aa8e..145d658d632 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/app.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
@@ -52,6 +52,9 @@
   margin-right: auto;
   margin-left: auto;
 }
+.text-semi-bold {
+  font-weight: 500;
+}
 .text-center {
   text-align: center;
 }
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less b/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less
index 68ff956aa5d..5607ccc244e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less
@@ -271,3 +271,7 @@
   position: absolute;
   right: 15px;
 }
+
+.w-80 {
+  width: 80%;
+}