feat: allow slots for buttons in login to be customized

Kong · Apr 9, 2024 · 26aaea3 · 26aaea3
1 parent d8ac430
commit 26aaea3
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/src/components/LoginForm.vue b/src/components/LoginForm.vue
@@ -19,9 +19,11 @@
           size="large"
           @click.prevent="redirectToIdp(idpLoginCallbackUrl, idpLoginReturnTo)"
         >
-          <ProgressIcon v-if="idpIsLoading" class="spin-icon" :size="KUI_ICON_SIZE_40" />
-          <ProfileIcon v-else :size="KUI_ICON_SIZE_40" />
-          {{ messages.login.loginTextSSO }}
+          <slot name="login-sso-button">
+            <ProgressIcon v-if="idpIsLoading" class="spin-icon" :size="KUI_ICON_SIZE_40" />
+            <ProfileIcon v-else :size="KUI_ICON_SIZE_40" />
+            <span data-testid="kong-auth-login-sso-button-default-text">{{ messages.login.loginTextSSO }}</span>
+          </slot>
         </KButton>
 
         <p v-if="loginWithCredentialsLinkIsVisible" class="basic-auth-link">
@@ -122,8 +124,10 @@
           size="large"
           type="submit"
         >
-          <ProgressIcon v-if="['pending', 'success'].some(currentState.matches)" class="spin-icon" :size="KUI_ICON_SIZE_40" />
-          {{ loginBtnText }}
+          <slot name="login-button">
+            <ProgressIcon v-if="['pending', 'success'].some(currentState.matches)" class="spin-icon" :size="KUI_ICON_SIZE_40" />
+            <span data-testid="kong-auth-login-button-default-text">{{ loginBtnText }}</span>
+          </slot>
         </KButton>
 
         <div v-if="showRegisterLink" class="register-link-wrapper">

diff --git a/src/elements/kong-auth-login/KongAuthLogin.ce.vue b/src/elements/kong-auth-login/KongAuthLogin.ce.vue
@@ -7,7 +7,14 @@
         @idp-is-loading="(emitData: any) => $emit('idp-is-loading', emitData)"
         @login-success="(emitData: any) => $emit('login-success', emitData)"
         @verify-email-success="(emitData: any) => $emit('verify-email-success', emitData)"
-        />
+      >
+        <template #login-sso-button>
+          <slot name="login-sso-button" />
+        </template>
+        <template #login-button>
+          <slot name="login-button" />
+        </template>
+    </LoginForm>
     </BaseCustomElement>
   </TeleportWrapper>
 </template>