Merge pull request #2 from devforth/open-signup

Open signup

Author: SerVitasik

custom/OAuthCallback.vue

@@ -7,24 +7,28 @@
 <script setup>
 import { onMounted } from 'vue';
 import { useUserStore } from '@/stores/user';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 import { callAdminForthApi } from '@/utils';
 import { Spinner } from '@/afcl';
 
 const router = useRouter();
 const userStore = useUserStore();
+const route = useRoute();
 
 onMounted(async () => {
   const urlParams = new URLSearchParams(window.location.search);
   const code = urlParams.get('code');
   const state = urlParams.get('state');
-  const redirectUri = window.location.origin + '/oauth/callback';
+  
+  const baseUrl = route.meta.baseUrl;
+  const normalizedBaseUrl = baseUrl.endsWith('/') ? baseUrl : `${baseUrl}/`;
+  const redirectUri = window.location.origin + normalizedBaseUrl + 'oauth/callback';
+  
   if (code && state && redirectUri) {
     const encodedCode = encodeURIComponent(code);
     const encodedState = encodeURIComponent(state);
-    const encodedRedirectUri = encodeURIComponent(redirectUri);
     const response = await callAdminForthApi({
-      path: `/oauth/callback?code=${encodedCode}&state=${encodedState}&redirect_uri=${encodedRedirectUri}`,
+      path: `/oauth/callback?code=${encodedCode}&state=${encodedState}&redirect_uri=${redirectUri}`,
       method: 'GET',
     });
     if (response.allowedLogin) {

custom/OAuthLoginButtons.vue

@@ -10,7 +10,7 @@
         meta.pill ? 'rounded-full' : 'rounded-md'
       ]"
     >
-      <div v-html="provider.icon" class="w-6 h-6" :class="meta.iconOnly ? 'mr-0' : 'mr-4'" :alt="getProviderName(provider.provider)" />
+      <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>
     </a>
   </div>
@@ -29,7 +29,10 @@ const getProviderName = (provider) => {
 };
 
 const handleLogin = (authUrl) => {
-  const redirectUri = window.location.origin + '/oauth/callback';
+  const baseUrl = props.meta.baseUrl;
+  const baseUrlSlashed = baseUrl.endsWith('/') ? baseUrl : `${baseUrl}/`;
+  const redirectUri = window.location.origin + baseUrlSlashed + 'oauth/callback';
+  
   const url = new URL(authUrl);
   url.searchParams.set('redirect_uri', redirectUri);
   return url.toString();

index.ts

@@ -47,15 +47,15 @@ export default class OAuthPlugin extends AdminForthPlugin {
 
     this.adminforth = adminforth;
     this.resource = resource;
-
     adminforth.config.customization.customPages.push({
       path: '/oauth/callback',
       component: { 
         file: this.componentPath('OAuthCallback.vue'), 
         meta: { 
           title: 'OAuth Callback',
-          customLayout: true 
-        }
+          customLayout: true,
+          baseUrl: adminforth.config.baseUrl,
+        },
       }
     });
 
@@ -87,7 +87,6 @@ export default class OAuthPlugin extends AdminForthPlugin {
     const componentPath = `@@/plugins/${this.constructor.name}/OAuthLoginButtons.vue`;
     this.componentPath('OAuthLoginButtons.vue');
 
-    const baseUrl = adminforth.config.baseUrl || '';
     const providers = this.options.adapters.map(adapter => {
       const state = Buffer.from(JSON.stringify({
         provider: adapter.constructor.name
@@ -96,7 +95,6 @@ export default class OAuthPlugin extends AdminForthPlugin {
       return {
         authUrl: `${adapter.getAuthUrl()}&state=${state}`,
         provider: adapter.constructor.name,
-        baseUrl,
         icon: adapter.getIcon(),
       };
     });
@@ -107,6 +105,7 @@ export default class OAuthPlugin extends AdminForthPlugin {
         providers,
         iconOnly: this.options.iconOnly,
         pill: this.options.pill,
+        baseUrl: adminforth.config.baseUrl,
       }
     });
   }