Merge pull request #6 from devforth/feature/add-custom-button-text

feat: Enhance OAuth login button text customization and improve provider name handling

Author: ivictbor

custom/OAuthLoginButtons.vue

@@ -11,7 +11,7 @@
       ]"
     >
       <div v-html="provider.icon" class="w-6 h-6 dark:text-white" :class="meta.iconOnly ? 'mr-0' : 'mr-4'" :alt="getProviderName(provider.provider)" />
-      <span v-if="!meta.iconOnly" class="font-medium dark:text-white">Continue with {{ getProviderName(provider.provider) }}</span>
+      <span v-if="!meta.iconOnly" class="font-medium dark:text-white">{{ getButtonText(provider.buttonText) }}</span>
     </a>
   </div>
 </template>
@@ -27,6 +27,9 @@ const props = defineProps({
 const getProviderName = (provider) => {
   return provider.replace('AdminForthAdapter', '').replace('Oauth2', '');
 };
+const getButtonText = (buttonText) => {
+  return buttonText.replace('AdminForthAdapter', '').replace('Oauth2', '');
+};
 
 const handleLogin = (authUrl) => {
   const baseUrl = props.meta.baseUrl;

index.ts

@@ -10,6 +10,7 @@ interface OAuthPluginOptions {
   emailField: string;
   emailConfirmedField?: string;
   adapters: OAuth2Adapter[];
+  buttonText?: string;
   iconOnly?: boolean;
   pill?: boolean;
   authenticationExpireDuration?: number;
@@ -82,7 +83,7 @@ export default class OAuthPlugin extends AdminForthPlugin {
         loginPageInjections: { underInputs: [] }
       };
     }
-
+    
     // Register the component with the correct plugin path
     const componentPath = `@@/plugins/${this.constructor.name}/OAuthLoginButtons.vue`;
     this.componentPath('OAuthLoginButtons.vue');
@@ -91,11 +92,11 @@ export default class OAuthPlugin extends AdminForthPlugin {
       const state = Buffer.from(JSON.stringify({
         provider: adapter.constructor.name
       })).toString('base64');
-
       return {
         authUrl: `${adapter.getAuthUrl()}&state=${state}`,
         provider: adapter.constructor.name,
         icon: adapter.getIcon(),
+        buttonText: `${this.options.buttonText ? this.options.buttonText : 'Continue with'} ${(adapter.getName ? adapter.getName() : adapter.constructor.name)}`,
       };
     });