adminforth 2.27.0-next.71 → 2.27.0-next.73

package/dist/spa/src/App.vue

@@ -15,7 +15,7 @@
               </svg>
           </button>
         </div>
-        <div class="flex items-center">
+        <div class="flex items-center gap-4">
           <component 
             v-if="coreStore?.adminUser"
             v-for="c in coreStore?.config?.globalInjections?.header || []"
@@ -24,61 +24,61 @@
             :adminUser="coreStore.adminUser"
           />
 
-          <div class="flex items-center ms-3 ">
-            <Tooltip>
-              <IconWifiOff v-if="coreStore.isInternetError" class="blinking-icon w-8 h-8 text-red-500" />
-              <template #tooltip>
-                {{$t('Internet connection lost')}}
-              </template>
-            </Tooltip>
-            <span  
-              v-if="!coreStore.config?.singleTheme"
-              @click="toggleTheme" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black  dark:text-darkSidebarTextHover dark:hover:text-darkSidebarTextActive" role="menuitem">
-              <IconMoonSolid class="w-5 h-5 text-blue-300" v-if="coreStore.theme !== 'dark'" />
-              <IconSunSolid class="w-5 h-5 text-yellow-300" v-else />
-            </span>
-            <div>
-              <button 
-                ref="dropdownUserButton"
-                type="button" class="flex text-sm bg- rounded-full focus:ring-4 focus:ring-lightSidebarDevider dark:focus:ring-darkSidebarDevider dark:bg-" aria-expanded="false" data-dropdown-toggle="dropdown-user">
-                <span class="sr-only">{{ $t('Open user menu') }}</span>
-                  <img 
-                    v-if="coreStore.userAvatarUrl"
-                    class="w-8 h-8 rounded-full object-cover" 
-                    :src="coreStore.userAvatarUrl" 
-                    alt="user photo"
-                  />
-                <svg v-else class="w-8 h-8 text-lightNavbarIcons dark:text-darkNavbarIcons" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
-                  <path fill-rule="evenodd" d="M12 20a7.966 7.966 0 0 1-5.002-1.756l.002.001v-.683c0-1.794 1.492-3.25 3.333-3.25h3.334c1.84 0 3.333 1.456 3.333 3.25v.683A7.966 7.966 0 0 1 12 20ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10c0 5.5-4.44 9.963-9.932 10h-.138C6.438 21.962 2 17.5 2 12Zm10-5c-1.84 0-3.333 1.455-3.333 3.25S10.159 13.5 12 13.5c1.84 0 3.333-1.455 3.333-3.25S13.841 7 12 7Z" clip-rule="evenodd"/>
-                </svg>
-              </button>
-            </div>
-            <div class="z-50 hidden my-4 text-base list-none bg-lightUserMenuBackground divide-y divide-lightUserMenuBorder text-lightUserMenuText rounded shadow dark:shadow-black dark:bg-darkUserMenuBackground dark:divide-darkUserMenuBorder text-darkUserMenuText dark:shadow-black" id="dropdown-user">
-              <div class="px-4 py-3" role="none">
-                <p class="text-sm text-gray-900 dark:text-darkNavbarText" role="none" v-if="coreStore.userFullname">
-                  {{ coreStore.userFullname }}
-                </p>
-                <p class="text-sm font-medium text-gray-900 truncate dark:text-darkSidebarText" role="none">
-                  {{ coreStore.username }}
-                </p>
-              </div>
-
-              <ul class="py-1" role="none">
-                <li v-for="c in userMenuComponents" class="bg-lightUserMenuItemBackground hover:bg-lightUserMenuItemBackgroundHover text-lightUserMenuItemText hover:text-lightUserMenuItemText dark:bg-darkUserMenuItemBackground dark:hover:bg-darkUserMenuItemBackgroundHover dark:text-darkUserMenuItemText dark:hover:darkUserMenuItemTextHover" >
-                  <component 
-                    :is="getCustomComponent(c)"
-                    :meta="c.meta"
-                    :adminUser="coreStore.adminUser"
-                  />
-                </li>
-                <li v-if="coreStore?.config?.settingPages && coreStore.config.settingPages.length > 0">
-                  <UserMenuSettingsButton />
-                </li>
-                <li>
-                  <button @click="logout" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm bg-lightUserMenuItemBackground hover:bg-lightUserMenuItemBackgroundHover text-lightUserMenuItemText hover:text-lightUserMenuItemText dark:bg-darkUserMenuItemBackground dark:hover:bg-darkUserMenuItemBackgroundHover dark:text-darkUserMenuItemText dark:hover:darkUserMenuItemTextHover w-full" role="menuitem">{{ $t('Sign out') }}</button>
-                </li>
-              </ul>
+          <Tooltip v-if="coreStore.isInternetError">
+            <IconWifiOff class="blinking-icon w-8 h-8 text-red-500 hover:scale-110 transition-transform duration-200" />
+            <template #tooltip>
+              {{$t('Internet connection lost')}}
+            </template>
+          </Tooltip>
+
+          <span  
+            v-if="!coreStore.config?.singleTheme"
+            class="flex items-center gap-1 block py-2 text-sm text-black  dark:text-darkSidebarTextHover dark:hover:text-darkSidebarTextActive" role="menuitem">
+            <IconMoonSolid class="w-6 h-6 text-blue-300 hover:scale-110 cursor-pointer transition-transform duration-200" @click="toggleTheme" v-if="coreStore.theme !== 'dark'" />
+            <IconSunSolid class="w-6 h-6 text-yellow-300 hover:scale-110 cursor-pointer transition-transform duration-200" @click="toggleTheme" v-else />
+          </span>
+
+          <div>
+            <button 
+              ref="dropdownUserButton"
+              type="button" class=" hover:scale-110 transition-transform duration-200 flex text-sm bg- rounded-full focus:ring-4 focus:ring-lightSidebarDevider dark:focus:ring-darkSidebarDevider dark:bg-" aria-expanded="false" data-dropdown-toggle="dropdown-user">
+              <span class="sr-only">{{ $t('Open user menu') }}</span>
+                <img 
+                  v-if="coreStore.userAvatarUrl"
+                  class="w-8 h-8 rounded-full object-cover" 
+                  :src="coreStore.userAvatarUrl" 
+                  alt="user photo"
+                />
+              <svg v-else class="w-8 h-8 text-lightNavbarIcons dark:text-darkNavbarIcons" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+                <path fill-rule="evenodd" d="M12 20a7.966 7.966 0 0 1-5.002-1.756l.002.001v-.683c0-1.794 1.492-3.25 3.333-3.25h3.334c1.84 0 3.333 1.456 3.333 3.25v.683A7.966 7.966 0 0 1 12 20ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10c0 5.5-4.44 9.963-9.932 10h-.138C6.438 21.962 2 17.5 2 12Zm10-5c-1.84 0-3.333 1.455-3.333 3.25S10.159 13.5 12 13.5c1.84 0 3.333-1.455 3.333-3.25S13.841 7 12 7Z" clip-rule="evenodd"/>
+              </svg>
+            </button>
+          </div>
+          <div class="z-50 hidden my-4 text-base list-none bg-lightUserMenuBackground divide-y divide-lightUserMenuBorder text-lightUserMenuText rounded shadow dark:shadow-black dark:bg-darkUserMenuBackground dark:divide-darkUserMenuBorder text-darkUserMenuText dark:shadow-black" id="dropdown-user">
+            <div class="px-4 py-3" role="none">
+              <p class="text-sm text-gray-900 dark:text-darkNavbarText" role="none" v-if="coreStore.userFullname">
+                {{ coreStore.userFullname }}
+              </p>
+              <p class="text-sm font-medium text-gray-900 truncate dark:text-darkSidebarText" role="none">
+                {{ coreStore.username }}
+              </p>
             </div>
+
+            <ul class="py-1" role="none">
+              <li v-for="c in userMenuComponents" class="bg-lightUserMenuItemBackground hover:bg-lightUserMenuItemBackgroundHover text-lightUserMenuItemText hover:text-lightUserMenuItemText dark:bg-darkUserMenuItemBackground dark:hover:bg-darkUserMenuItemBackgroundHover dark:text-darkUserMenuItemText dark:hover:darkUserMenuItemTextHover" >
+                <component 
+                  :is="getCustomComponent(c)"
+                  :meta="c.meta"
+                  :adminUser="coreStore.adminUser"
+                />
+              </li>
+              <li v-if="coreStore?.config?.settingPages && coreStore.config.settingPages.length > 0">
+                <UserMenuSettingsButton />
+              </li>
+              <li>
+                <button @click="logout" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm bg-lightUserMenuItemBackground hover:bg-lightUserMenuItemBackgroundHover text-lightUserMenuItemText hover:text-lightUserMenuItemText dark:bg-darkUserMenuItemBackground dark:hover:bg-darkUserMenuItemBackgroundHover dark:text-darkUserMenuItemText dark:hover:darkUserMenuItemTextHover w-full" role="menuitem">{{ $t('Sign out') }}</button>
+              </li>
+            </ul>
           </div>
         </div>
       </div>

package/dist/spa/src/utils/utils.ts

@@ -12,12 +12,113 @@ import type { AdminForthActionFront, AdminForthResourceColumnInputCommon, AdminF
 import { i18nInstance } from '../i18n'
 import { useI18n } from 'vue-i18n';
 import { onBeforeRouteLeave } from 'vue-router';
+import { reconnect } from '@/websocket';
 
 
 
 const LS_LANG_KEY = `afLanguage`;
 const MAX_CONSECUTIVE_EMPTY_RESULTS = 2;
 const ITEMS_PER_PAGE_LIMIT = 100;
+const AUTOLOGIN_QUERY_PARAM = 'autologin';
+
+export function getAutologinCredentials(autologin: unknown): { username: string, password: string } | null {
+  if (typeof autologin !== 'string') {
+    return null;
+  }
+
+  const separatorIndex = autologin.indexOf(':');
+  if (separatorIndex === -1) {
+    return null;
+  }
+
+  return {
+    username: autologin.slice(0, separatorIndex),
+    password: autologin.slice(separatorIndex + 1),
+  };
+}
+
+function buildLoginRedirectQuery() {
+  const { path, query } = router.currentRoute.value;
+  const nextQuery = new URLSearchParams();
+
+  for (const [key, rawValue] of Object.entries(query)) {
+    if (key === AUTOLOGIN_QUERY_PARAM || rawValue == null) {
+      continue;
+    }
+
+    if (Array.isArray(rawValue)) {
+      rawValue.forEach((value) => {
+        if (value != null) {
+          nextQuery.append(key, value);
+        }
+      });
+      continue;
+    }
+
+    nextQuery.set(key, rawValue);
+  }
+
+  const next = nextQuery.size > 0 ? `${path}?${nextQuery.toString()}` : path;
+  const autologin = typeof query[AUTOLOGIN_QUERY_PARAM] === 'string'
+    ? query[AUTOLOGIN_QUERY_PARAM]
+    : undefined;
+
+  return {
+    next,
+    autologin,
+  };
+}
+
+async function tryAutologin(autologin: string): Promise<boolean> {
+  const credentials = getAutologinCredentials(autologin);
+  if (!credentials) {
+    return false;
+  }
+
+  const response = await fetch(`${import.meta.env.VITE_ADMINFORTH_PUBLIC_PATH || ''}/adminapi/v1/login`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'accept-language': localStorage.getItem(LS_LANG_KEY) || 'en',
+    },
+    body: JSON.stringify({
+      username: credentials.username,
+      password: credentials.password,
+      rememberMe: false,
+    }),
+  });
+
+  const loginResponse = await response.json();
+  if (loginResponse?.error) {
+    return false;
+  }
+
+  const userStore = useUserStore();
+  const coreStore = useCoreStore();
+  userStore.authorize();
+  reconnect();
+  await coreStore.fetchMenuAndResource();
+  return !!coreStore.adminUser;
+}
+
+export async function redirectToLogin() {
+  const currentPath = router.currentRoute.value.path;
+  const homeRoute = router.getRoutes().find(route => route.name === 'home');
+  const homePagePath = (homeRoute?.redirect as string) || '/';
+  const { next, autologin } = buildLoginRedirectQuery();
+
+  if (autologin && await tryAutologin(autologin)) {
+    return;
+  }
+
+  const query: Record<string, string> = {};
+
+  if (currentPath !== '/login' && currentPath !== homePagePath) {
+    query.next = next;
+  }
+
+  await router.push({ name: 'login', query });
+}
 
 export async function callApi({path, method, body, headers, silentError = false, abortSignal}: {
   path: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' 
@@ -43,20 +144,7 @@ export async function callApi({path, method, body, headers, silentError = false,
     if (r.status == 401 ) {
       useUserStore().unauthorize();
       useCoreStore().resetAdminUser();
-      const currentPath = router.currentRoute.value.path;
-      const homeRoute = router.getRoutes().find(route => route.name === 'home');
-      const homePagePath = (homeRoute?.redirect as string) || '/';
-      let next = '';
-      if (currentPath !== '/login' && currentPath !== homePagePath) {
-        if (Object.keys(router.currentRoute.value.query).length > 0) {
-          next = currentPath + '?' + Object.entries(router.currentRoute.value.query).map(([key, value]) => `${key}=${value}`).join('&');
-        } else {
-          next = currentPath;
-        }
-        await router.push({ name: 'login', query: { next: next } });
-      } else {
-        await router.push({ name: 'login' });
-      }
+      await redirectToLogin();
       return null;
     } 
     return await r.json();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "2.27.0-next.71",
+  "version": "2.27.0-next.73",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "module": "dist/index.js",