refactor: remove unused customLayout property and clean up SettingsView component

Author: yaroslav8765

adminforth/spa/src/router/index.ts

@@ -68,7 +68,6 @@ const router = createRouter({
       component: () => import('@/views/SettingsView.vue'),
       meta: { 
         title: 'Settings', 
-        customLayout: true 
       },
     },
     /* IMPORTANT:ADMINFORTH ROUTES */

adminforth/spa/src/views/SettingsView.vue

@@ -1,70 +1,5 @@
 <template>
-  <div>
-    <nav 
-      v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady"
-      class="h-14 top-0 z-20 w-full border-b shadow-sm bg-lightNavbar shadow-headerShadow dark:bg-darkNavbar dark:border-darkSidebarDevider"
-    >
-      <div class="af-header px-3 lg:px-5 lg:pl-3 flex items-center justify-end h-full w-full" >
-          <div class="flex items-center">
-            <component 
-              v-if="coreStore?.adminUser"
-              v-for="c in coreStore?.config?.globalInjections?.header || []"
-              :is="getCustomComponent(c)"
-              :meta="c.meta"
-              :adminUser="coreStore.adminUser"
-            />
-
-            <div class="flex items-center ms-3 ">
-              <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>
-                  <svg 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-white divide-y divide-gray-100 rounded shadow dark:shadow-black dark:bg-darkSidebar dark:divide-darkSidebarDevider 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 coreStore?.config?.globalInjections?.userMenu || []" >
-                    <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 text-black hover:bg-html dark:text-darkSidebarTextHover dark:hover:bg-darkSidebarItemHover dark:hover:text-darkSidebarTextActive w-full" role="menuitem">{{ $t('Sign out') }}</button>
-                  </li>
-                </ul>
-              </div>
-            </div>
-        </div>
-      </div>
-    </nav>
-  </div>
-  <div class="m-4 h-full w-full">
-
+  <div class="m-4 mt-16 h-full w-full">
     <div v-if="!coreStore?.config?.settingPages || coreStore?.config?.settingPages.length === 0">
       <p>No setting pages configured or still loading...</p>
     </div>
@@ -88,28 +23,21 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, watch } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { useCoreStore } from '@/stores/core';
-import { useUserStore } from '@/stores/user';
 import { getCustomComponent, getIcon } from '@/utils';
 import { Dropdown } from 'flowbite';
-import { IconMoonSolid, IconSunSolid } from '@iconify-prerendered/vue-flowbite';
 import adminforth from '@/adminforth';
 import { VerticalTabs } from '@/afcl'
 import { useRoute } from 'vue-router'
-import UserMenuSettingsButton from '../components/UserMenuSettingsButton.vue';
 
 const route = useRoute()
 const coreStore = useCoreStore();
-const userStore = useUserStore();
 const router = useRouter();
 
-const loggedIn = computed(() => { return !!coreStore?.adminUser });
 const routerIsReady = ref(false);
 const loginRedirectCheckIsReady = ref(false);
-const sideBarOpen = ref(false);
-const theme = ref('light');
 const dropdownUserButton = ref<HTMLElement | null>(null);
 const VerticalTabsRef = ref();
 const activeTab = ref('');
@@ -123,11 +51,6 @@ async function initRouter() {
   routerIsReady.value = true;
 }
 
-function toggleTheme() {
-  theme.value = theme.value === 'light' ? 'dark' : 'light';
-  coreStore.toggleTheme();
-}
-
 function settingPageSlotName(c: { slug?: string; pageLabel?: string }, idx: number) {
   const base = (c.slug && c.slug.trim()) || (c.pageLabel && c.pageLabel.trim()) || `tab-${idx}`;
   return base
@@ -137,13 +60,6 @@ function settingPageSlotName(c: { slug?: string; pageLabel?: string }, idx: numb
     .replace(/[^a-z0-9-_]/g, '-') || `tab-${idx}`;
 }
 
-
-async function logout() {
-  userStore.unauthorize();
-  await userStore.logout();
-  router.push({ name: 'login' })
-}
-
 watch(dropdownUserButton, (el) => {
   if (el) {
     const dd = new Dropdown(