feat: props for updating login / sso login button text (#1479)

README.md

@@ -445,6 +445,8 @@ The login element **must** reside at the `{window.location.origin}/login` path i
 | `idpLoginCallbackUrl` | URL | `''` | Set the URL to return to in order to complete the OIDC flow. In most cases, this should be set to `${window.location.origin}/login` |
 | `idpLoginReturnTo` | URL | `''` | Set the URL to return to upon successful IdP login. In most cases, this should be set to `window.location.origin` |
 | `idpFullScreenLoader` | Boolean | `true` | Show the full screen loading skeleton when IdP login is processing |
+| `loginSsoButtonText` | String | `Continue with SSO` | Set the text for the SSO login button. |
+| `loginButtonText` | String | `Log in` | Set the text for the basic authentication login button.  |
 
 > **Note**: When utilizing the props as a native web component, you may need to use dot syntax, as shown here
 >

src/components/LoginForm.vue

@@ -20,8 +20,10 @@
           @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 }}
+          <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">
@@ -123,7 +125,7 @@
           type="submit"
         >
           <ProgressIcon v-if="['pending', 'success'].some(currentState.matches)" class="spin-icon" :size="KUI_ICON_SIZE_40" />
-          {{ loginBtnText }}
+          <span data-testid="kong-auth-login-button-text">{{ loginBtnText }}</span>
         </KButton>
 
         <div v-if="showRegisterLink" class="register-link-wrapper">
@@ -184,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: '',
@@ -283,7 +287,7 @@ const loginBtnText = computed((): string => {
     return ''
   }
 
-  return messages.login.loginText
+  return loginButtonText.value
 })
 
 // Allow forcing the login button to be enabled if the form was autofilled

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

@@ -7,7 +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)"
-        />
+      />
     </BaseCustomElement>
   </TeleportWrapper>
 </template>
@@ -78,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
@@ -131,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

@@ -29,6 +29,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 +40,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)