diff --git a/src/components/LoginForm.vue b/src/components/LoginForm.vue
index 931b81791..14bcec01a 100644
--- a/src/components/LoginForm.vue
+++ b/src/components/LoginForm.vue
@@ -19,11 +19,11 @@
size="large"
@click.prevent="redirectToIdp(idpLoginCallbackUrl, idpLoginReturnTo)"
>
-
-
-
- {{ messages.login.loginTextSSO }}
-
+
+
+
+
+ {{ loginSsoButtonText }}
@@ -124,10 +124,8 @@
size="large"
type="submit"
>
-
-
- {{ loginBtnText }}
-
+
+ {{ loginBtnText }}
@@ -188,6 +186,8 @@ const idpLoginEnabled: Ref = inject('idp-login-enabled', ref(false))
const idpLoginCallbackUrl: Ref = inject('idp-login-callback-url', ref(''))
const idpLoginReturnTo: Ref = inject('idp-login-return-to', ref(''))
const idpFullScreenLoader: Ref = inject('idp-full-screen-loader', ref(true))
+const loginSsoButtonText: Ref = inject('login-sso-button-text', ref(messages.login.loginTextSSO))
+const loginButtonText: Ref = 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
diff --git a/src/elements/kong-auth-login/KongAuthLogin.ce.vue b/src/elements/kong-auth-login/KongAuthLogin.ce.vue
index 330a29481..461fc7fc0 100644
--- a/src/elements/kong-auth-login/KongAuthLogin.ce.vue
+++ b/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)"
- >
-
-
-
-
-
-
-
+ />
@@ -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))