fix(web, mirinae): apply sign-in loader for external auth cases & dif…

…ferentiate style type of spinner for each button style type (#1593) * fix: apply sign-in loader for external auth cases Signed-off-by: Wanjin Noh <[email protected]> * fix(button): differentiate style type of spinner for each button style type Signed-off-by: Wanjin Noh <[email protected]> --------- Signed-off-by: Wanjin Noh <[email protected]>
cloudforet-io · Aug 16, 2023 · 160e36d · 160e36d · vercel · Aug 16, 2023
1 parent 82e309a
commit 160e36d
Show file tree

Hide file tree

Showing 13 changed files with 68 additions and 22 deletions.
diff --git a/apps/web/src/services/auth/authenticator/index.ts b/apps/web/src/services/auth/authenticator/index.ts
@@ -29,6 +29,7 @@ abstract class Authenticator {
         try {
             if (SpaceRouter.router) {
                 await store.dispatch('user/signOut');
+                await store.dispatch('display/hideSignInErrorMessage');
                 LocalStorageAccessor.removeItem('hideNotificationEmailModal');
                 await store.dispatch('error/resetErrorState');
                 await store.dispatch('domain/resetBillingEnabled');

diff --git a/apps/web/src/services/auth/sign-in/external/GOOGLE_OAUTH2/authenticator/google-auth.ts b/apps/web/src/services/auth/sign-in/external/GOOGLE_OAUTH2/authenticator/google-auth.ts
@@ -37,6 +37,7 @@ class GoogleAuth extends Authenticator {
 
     static async onSuccess(accessToken) {
         try {
+            store.dispatch('user/startSignIn');
             GoogleAuth.accessToken = accessToken;
             const credentials = {
                 access_token: accessToken,
@@ -46,6 +47,8 @@ class GoogleAuth extends Authenticator {
             await GoogleAuth.signOut();
             await store.dispatch('display/showSignInErrorMessage');
             throw new Error(e);
+        } finally {
+            store.dispatch('user/finishSignIn');
         }
     }
 

diff --git a/apps/web/src/services/auth/sign-in/external/KB_SSO/authenticator/kb-auth.ts b/apps/web/src/services/auth/sign-in/external/KB_SSO/authenticator/kb-auth.ts
@@ -11,6 +11,7 @@ import { AUTH_ROUTE } from '@/services/auth/route-config';
 class KbAuth extends Authenticator {
     static async signIn(onSignInCallback, query) {
         try {
+            store.dispatch('user/startSignIn');
             const clientIP = await SpaceConnector.client.identity.user.getIp();
             const credentials = {
                 secureToken: query.secureToken,
@@ -25,6 +26,8 @@ class KbAuth extends Authenticator {
             if (onSignInCallback) onSignInCallback();
         } catch (e) {
             await KbAuth.onSignInFail();
+        } finally {
+            store.dispatch('user/finishSignIn');
         }
     }
 

diff --git a/apps/web/src/services/auth/sign-in/external/KEYCLOAK/authenticator/keycloak-auth.ts b/apps/web/src/services/auth/sign-in/external/KEYCLOAK/authenticator/keycloak-auth.ts
@@ -40,15 +40,21 @@ class KeycloakAuth extends Authenticator {
     }
 
     private static async keycloakSignIn(auth) {
-        if (!auth) {
-            await KeycloakAuth.onSignInFail();
-            return;
-        }
-        if (KeycloakAuth.keycloak.token && KeycloakAuth.keycloak.idToken) {
-            // eslint-disable-next-line camelcase
-            await super.signIn(
-                { access_token: KeycloakAuth.keycloak.token },
-            );
+        try {
+            store.dispatch('user/startSignIn');
+            if (!auth) {
+                await KeycloakAuth.onSignInFail();
+                return;
+            }
+            if (KeycloakAuth.keycloak.token && KeycloakAuth.keycloak.idToken) {
+                // eslint-disable-next-line camelcase
+                await super.signIn(
+                    { access_token: KeycloakAuth.keycloak.token },
+                );
+            }
+        } catch (e) {
+            store.dispatch('user/finishSignIn');
+            throw e;
         }
     }
 

diff --git a/apps/web/src/services/auth/sign-in/local/authenticator/space-auth.ts b/apps/web/src/services/auth/sign-in/local/authenticator/space-auth.ts
@@ -1,9 +1,16 @@
+import { store } from '@/store';
+
 import { Authenticator } from '@/services/auth/authenticator';
 
 class SpaceAuth extends Authenticator {
     // eslint-disable-next-line class-methods-use-this
     static async signIn(userId, credentials, userType?): Promise<void> {
-        await super.signIn(userId, credentials, userType);
+        try {
+            store.dispatch('user/startSignIn');
+            await super.signIn(userId, credentials, userType);
+        } finally {
+            store.dispatch('user/finishSignIn');
+        }
     }
 
     // eslint-disable-next-line class-methods-use-this

diff --git a/apps/web/src/services/auth/sign-in/local/template/ID_PW.vue b/apps/web/src/services/auth/sign-in/local/template/ID_PW.vue
@@ -96,7 +96,7 @@ export default defineComponent({
         const state = reactive({
             userId: '' as string | undefined,
             password: '',
-            loading: false,
+            loading: computed(() => store.state.user.isSignInLoading),
         });
 
         const validationState = reactive({
@@ -131,11 +131,9 @@ export default defineComponent({
         };
 
         const signIn = async () => {
-            state.loading = true;
             checkUserId();
             await checkPassword();
             if (!validationState.isIdValid || !validationState.isPasswordValid) {
-                state.loading = false;
                 return;
             }
             const credentials = {
@@ -153,8 +151,6 @@ export default defineComponent({
                 ErrorHandler.handleError(e);
                 state.password = '';
                 await store.dispatch('display/showSignInErrorMessage');
-            } finally {
-                state.loading = false;
             }
         };
 

diff --git a/apps/web/src/store/modules/user/actions.ts b/apps/web/src/store/modules/user/actions.ts
@@ -175,3 +175,11 @@ export const getUser = async ({ commit, state }, userId): Promise<void> => {
         commit('setUser', userInfo);
     }
 };
+
+export const startSignIn = ({ commit }) => {
+    commit('setIsSignInLoading', true);
+};
+
+export const finishSignIn = ({ commit }) => {
+    commit('setIsSignInLoading', false);
+};
diff --git a/apps/web/src/store/modules/user/index.ts b/apps/web/src/store/modules/user/index.ts
@@ -29,6 +29,7 @@ const state: UserState = {
     roles: storedUserState.roles,
     requiredActions: storedUserState.requiredActions,
     emailVerified: storedUserState.emailVerified,
+    isSignInLoading: false,
 };
 
 export default {

diff --git a/apps/web/src/store/modules/user/mutations.ts b/apps/web/src/store/modules/user/mutations.ts
@@ -1,3 +1,5 @@
+import type { Mutation } from 'vuex';
+
 import type { UserState, UserRole } from './type';
 
 export const setUser = (state: UserState, userInfo: UserState): void => {
@@ -27,3 +29,7 @@ export const setTimezone = (state: UserState, timezone: string): void => {
 export const setRoles = (state: UserState, roles: Array<UserRole>): void => {
     state.roles = roles;
 };
+
+export const setIsSignInLoading: Mutation<UserState> = (state, isSignInLoading: boolean): void => {
+    state.isSignInLoading = isSignInLoading;
+};
diff --git a/apps/web/src/store/modules/user/type.ts b/apps/web/src/store/modules/user/type.ts
@@ -25,6 +25,7 @@ export interface UserState {
     roles?: Array<UserRole>;
     requiredActions?: string[];
     emailVerified?: boolean;
+    isSignInLoading?: boolean;
 }
 
 export interface SignInRequest {

diff --git a/packages/mirinae/src/inputs/buttons/button/PButton.stories.mdx b/packages/mirinae/src/inputs/buttons/button/PButton.stories.mdx
@@ -171,13 +171,21 @@ export const Template = (args, {argTypes})=>({
         {{
             components:{ PButton },
             template: `
-                <div style="display:flex; align-items:center; justify-content:center; margin-top: 50px; background-color: white">
+                <div style="display:flex; align-items:center; justify-content:center; margin-top: 50px; background-color: white; gap: 1rem;">
                     <p-button
                         styleType="primary"
                         :loading="true"
                     >
                         <div class="loading-btn">
-                            Loading
+                            Loading (primary)
+                        </div>
+                    </p-button>
+                    <p-button
+                        styleType="tertiary"
+                        :loading="true"
+                    >
+                        <div class="loading-btn">
+                            Loading (tertiary)
                         </div>
                     </p-button>
                 </div>`,

diff --git a/packages/mirinae/src/inputs/buttons/button/PButton.vue b/packages/mirinae/src/inputs/buttons/button/PButton.vue
@@ -25,6 +25,7 @@
     >
         <p-spinner v-if="loading"
                    :size="loadingIconSize"
+                   :style-type="spinnerStyleType"
         />
         <p-i v-if="iconLeft"
              :name="iconLeft"
@@ -51,7 +52,8 @@ import {
 } from 'vue';
 
 import PSpinner from '@/feedbacks/loading/spinner/PSpinner.vue';
-import { SPINNER_SIZE } from '@/feedbacks/loading/spinner/type';
+import type { SpinnerStyleType } from '@/feedbacks/loading/spinner/type';
+import { SPINNER_SIZE, SPINNER_STYLE_TYPE } from '@/feedbacks/loading/spinner/type';
 import PI from '@/foundation/icons/PI.vue';
 import type { ButtonProps, ButtonSize } from '@/inputs/buttons/button/type';
 import { BUTTON_SIZE, BUTTON_STYLE } from '@/inputs/buttons/button/type';
@@ -67,6 +69,8 @@ const LOADING_SIZE: Record<ButtonSize, string> = {
     md: SPINNER_SIZE.sm,
     lg: SPINNER_SIZE.sm,
 };
+const WHITE_SPINNER_TYPES: string[] = [BUTTON_STYLE.primary, BUTTON_STYLE.substitutive, BUTTON_STYLE.highlight, BUTTON_STYLE.positive, BUTTON_STYLE['negative-primary']];
+
 export default defineComponent<ButtonProps>({
     name: 'PButton',
     components: {
@@ -122,6 +126,10 @@ export default defineComponent<ButtonProps>({
             component: computed(() => (props.href ? 'a' : 'button')),
             iconSize: computed(() => ICON_SIZE[props.size ?? ''] ?? ICON_SIZE.md),
             loadingIconSize: computed(() => LOADING_SIZE[props.size ?? ''] ?? LOADING_SIZE.md),
+            spinnerStyleType: computed<SpinnerStyleType>(() => {
+                if (WHITE_SPINNER_TYPES.includes(props.styleType)) return SPINNER_STYLE_TYPE.white;
+                return SPINNER_STYLE_TYPE.gray;
+            }),
         });
 
         /* Event */

diff --git a/packages/mirinae/src/styles/colorsets.ts b/packages/mirinae/src/styles/colorsets.ts
@@ -1,10 +1,8 @@
-import {
-    palette,
-} from '@/styles/colors.cjs';
+import colors from '@/styles/colors.cjs';
 
 const {
     blue, coral, gray, green, indigo, peacock, red, violet, yellow,
-} = palette;
+} = colors.palette;
 
 export const MASSIVE_CHART_COLORS = [
     violet[400], violet[600], blue[400], blue[600], coral[400], coral[600],