refactor: customize string instead

src/components/LoginForm.vue

@@ -19,11 +19,11 @@
           size="large"
           @click.prevent="redirectToIdp(idpLoginCallbackUrl, idpLoginReturnTo)"
         >
-          <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>
+          <ProgressIcon v-if="idpIsLoading" class="spin-icon" :size="KUI_ICON_SIZE_40" />
+          <span v-else class="kong-auth-login-sso-button-icon-wrapper">
+            <ProfileIcon class="kong-auth-login-sso-button-icon" :size="KUI_ICON_SIZE_40" />
+          </span>
+          <span data-testid="kong-auth-login-sso-button-text">{{ loginSsoButtonText }}</span>
         </KButton>
 
         <p v-if="loginWithCredentialsLinkIsVisible" class="basic-auth-link">
@@ -124,10 +124,8 @@
           size="large"
           type="submit"
         >
-          <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>
+          <ProgressIcon v-if="['pending', 'success'].some(currentState.matches)" class="spin-icon" :size="KUI_ICON_SIZE_40" />
+          <span data-testid="kong-auth-login-button-text">{{ loginBtnText }}</span>
         </KButton>
 
         <div v-if="showRegisterLink" class="register-link-wrapper">
@@ -188,6 +186,8 @@ const idpLoginEnabled: Ref<boolean> = inject('idp-login-enabled', ref(false))
 const idpLoginCallbackUrl: Ref<string> = inject('idp-login-callback-url', ref(''))
 const idpLoginReturnTo: Ref<string> = inject('idp-login-return-to', ref(''))
 const idpFullScreenLoader: Ref<boolean> = inject('idp-full-screen-loader', ref(true))
+const loginSsoButtonText: Ref<string> = inject('login-sso-button-text', ref(messages.login.loginTextSSO))
+const loginButtonText: Ref<string> = inject('login-button-text', ref(messages.login.loginText))
 
 const formData = reactive({
   email: '',
@@ -287,7 +287,7 @@ const loginBtnText = computed((): string => {
     return ''
   }
 
-  return messages.login.loginText
+  return loginButtonText.value ? loginButtonText.value : messages.login.loginText
 })
 
 // Allow forcing the login button to be enabled if the form was autofilled

src/elements/kong-auth-login/KongAuthLogin.ce.vue

@@ -7,14 +7,7 @@
         @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>
@@ -85,6 +78,14 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  loginSsoButtonText: {
+    type: String,
+    default: '',
+  },
+  loginButtonText: {
+    type: String,
+    default: '',
+  },
 })
 
 // Import emits from child component with validation, where necessary
@@ -138,12 +139,16 @@ provide(
   computed((): boolean => props.idpFullScreenLoader),
 )
 
+// Custom Strings
+
 // Message props: These provided values default to useI18n() message text so
 // they must be provided in this format so the default value can be set in the child component.
 props.forgotPasswordLinkText && provide('forgot-password-link-text', computed((): string => props.forgotPasswordLinkText))
 props.registerLinkHelpText && provide('register-link-help-text', computed((): string => props.registerLinkHelpText))
 props.registerLinkText && provide('register-link-text', computed((): string => props.registerLinkText))
 props.registerSuccessText && provide('register-success-text', computed((): string => props.registerSuccessText))
+props.loginSsoButtonText && provide('login-sso-button-text', computed((): string => props.loginSsoButtonText))
+props.loginButtonText && provide('login-button-text', computed((): string => props.loginButtonText))
 </script>
 
 <style lang="scss">

src/elements/kong-auth-login/KongAuthLogin.spec.ts

@@ -6,6 +6,7 @@ import KongAuthLogin from './KongAuthLogin.ce.vue'
 import { win } from '../../utils'
 import { getConfigOptions } from '../../composables/useConfigOptions'
 import useI18n from '../../composables/useI18n'
+import { h } from 'vue'
 
 const { messages } = useI18n('en')
 
@@ -29,6 +30,9 @@ const testids = {
   loaderContainer: 'kong-auth-login-gruce-loader',
   gruceLoader: 'full-screen-loader',
   genericSpinnerLoader: 'full-screen-spinner-loader',
+  loginSsoButtonText: 'kong-auth-login-sso-button-text',
+  loginButtonText: 'kong-auth-login-button-text',
+
 }
 
 const user = {
@@ -37,6 +41,51 @@ const user = {
 }
 
 describe('KongAuthLogin.ce.vue', () => {
+  describe('Login Text Props', () => {
+    describe('loginSsoButtonText', () => {
+      it('shows default string if no prop is passed', () => {
+        cy.stub(getConfigOptions, 'userEntity').returns('developer')
+        mount(KongAuthLogin, {
+          props: {
+            basicAuthLoginEnabled: true,
+            idpLoginEnabled: true,
+          },
+        })
+
+        cy.getTestId(testids.loginSsoButtonText).should('be.visible').and('have.text', 'Continue with SSO')
+      })
+      it('shows custom string if prop is passed', () => {
+        const customText = 'custom text content'
+        cy.stub(getConfigOptions, 'userEntity').returns('developer')
+        mount(KongAuthLogin, {
+          props: {
+            loginSsoButtonText: customText,
+            basicAuthLoginEnabled: true,
+            idpLoginEnabled: true,
+          },
+        })
+
+        cy.getTestId(testids.loginSsoButtonText).should('be.visible').and('have.text', customText)
+      })
+    })
+    describe('loginButtonText', () => {
+      it('shows default string if no prop is passed', () => {
+        mount(KongAuthLogin)
+
+        cy.getTestId(testids.loginButtonText).should('be.visible').and('have.text', 'Log in')
+      })
+      it('shows custom string if prop is passed', () => {
+        const customText = 'custom text content'
+        mount(KongAuthLogin, {
+          props: {
+            loginButtonText: customText,
+          },
+        })
+
+        cy.getTestId(testids.loginButtonText).should('be.visible').and('have.text', customText)
+      })
+    })
+  })
   // Required for all Custom Elements
   it('has proper structure and required classes', () => {
     mount(KongAuthLogin)