Migrate the Footer component (as a layout one)

resources/js_vue3/app.js

@@ -8,15 +8,11 @@ import router from './router'
 import Notifications from '@kyvg/vue3-notification'
 import FontAwesomeIcon from './icons'
 
-import ResponsiveWidthWrapper from '@/layouts/ResponsiveWidthWrapper.vue'
-import FormWrapper from '@/layouts/FormWrapper.vue'
-
-
 const app = createApp(App)
 
 // Immutable app properties provided by the laravel blade view
 app.config.globalProperties.$2fauth = {
-    config: window.appConfig,
+    config: window.appConfig, //{"proxyAuth":false,"proxyLogoutUrl":false,"subdirectory":""}
     version: window.appVersion,
     isDemoApp: window.isDemoApp,
     isTestingApp: window.isTestingApp,
@@ -35,9 +31,17 @@ app.use(i18nVue, {
     }
 })
 app.use(Notifications)
+
+import ResponsiveWidthWrapper from '@/layouts/ResponsiveWidthWrapper.vue'
+import FormWrapper from '@/layouts/FormWrapper.vue'
+import Footer from '@/layouts/Footer.vue'
+
+// Components registration
 app
     .component('font-awesome-icon', FontAwesomeIcon)
     .component('responsive-width-wrapper', ResponsiveWidthWrapper)
     .component('form-wrapper', FormWrapper)
+    .component('vue-footer', Footer)
 
+// App mounting
 app.mount('#app')

resources/js_vue3/layouts/Footer.vue

@@ -0,0 +1,46 @@
+<template>
+    <footer>
+        <div class="columns is-gapless" v-if="showButtons">
+            <div class="column has-text-centered">
+                <div class="field is-grouped">
+                    <slot></slot>
+                </div>
+            </div>
+        </div>
+        <div v-if="editMode" class="content has-text-centered">
+            <button id="lnkExitEdit" class="button is-ghost is-like-text" @click="$emit('exit-edit')">{{ $t('commons.done') }}</button>
+        </div>
+        <div v-else class="content has-text-centered">
+            <div v-if="$route.meta.showAbout === true" class="is-size-6">
+                <router-link id="lnkAbout" :to="{ name: 'about' }" class="has-text-grey">
+                    2FAuth – <span class="has-text-weight-bold">v{{ $2fauth.version }}</span>
+                </router-link>
+            </div>
+            <div v-else>
+                <router-link id="lnkSettings"  :to="{ name: 'settings.options' }" class="has-text-grey">
+                    {{ $t('settings.settings') }}<span v-if="appSettings.latestRelease && appSettings.checkForUpdate" class="release-flag"></span>
+                </router-link>
+                <span v-if="!$2fauth.config.proxyAuth || ($2fauth.config.proxyAuth && $2fauth.config.proxyLogoutUrl)">
+                    - <button id="lnkSignOut" class="button is-text is-like-text has-text-grey" @click="logout">{{ $t('auth.sign_out') }}</button>
+                </span>
+            </div>
+        </div>
+    </footer>
+</template>
+
+
+<script setup>
+    import { useAppSettingsStore } from '@/stores/appSettings'
+    const appSettings = useAppSettingsStore()
+
+    const props = defineProps({
+        showButtons: true,
+        editMode: false,
+    })
+
+    function logout() {
+        if(confirm(this.$t('auth.confirm.logout'))) {
+            this.appLogout()
+        }
+    }
+</script>

resources/js_vue3/router.js

@@ -1,15 +1,28 @@
 import { createRouter, createWebHistory } from 'vue-router'
 
-import Accounts from './views/Accounts.vue'
+import Accounts 		from './views/Accounts.vue'
+import SettingsOptions  from './views/settings/Options.vue'
+// import SettingsAccount  from './views/settings/Account'
+// import SettingsOAuth    from './views/settings/OAuth'
+// import SettingsWebAuthn from './views/settings/WebAuthn'
+// import EditCredential   from './views/settings/Credentials/Edit'
+// import GeneratePAT      from './views/settings/PATokens/Create'
 
 const router = createRouter({
-  history: createWebHistory('/'),
-  routes: [
-    { path: '/accounts', name: 'accounts', component: Accounts, meta: { requiresAuth: true }, alias: '/', props: true },
-    
-    // Lazy loaded view
-    { path: '/about', name: 'about', component: () => import('./views/About.vue') }
-  ]
+	history: createWebHistory('/'),
+	routes: [
+		{ path: '/accounts', name: 'accounts', component: Accounts, meta: { requiresAuth: true }, alias: '/', props: true },
+
+		{ path: '/settings/options', name: 'settings.options', component: SettingsOptions, meta: { requiresAuth: true, showAbout: true } },
+		// { path: '/settings/account', name: 'settings.account', component: SettingsAccount, meta: { requiresAuth: true, showAbout: true } },
+		// { path: '/settings/oauth', name: 'settings.oauth.tokens', component: SettingsOAuth, meta: { requiresAuth: true, showAbout: true } },
+		// { path: '/settings/oauth/pat/create', name: 'settings.oauth.generatePAT', component: GeneratePAT, meta: { requiresAuth: true, showAbout: true } },
+		// { path: '/settings/webauthn/:credentialId/edit', name: 'settings.webauthn.editCredential', component: EditCredential, meta: { requiresAuth: true, showAbout: true }, props: true },
+		// { path: '/settings/webauthn', name: 'settings.webauthn.devices', component: SettingsWebAuthn, meta: { requiresAuth: true, showAbout: true } },
+
+		// Lazy loaded view
+		{ path: '/about', name: 'about', component: () => import('./views/About.vue') }
+	]
 })
 
 export default router

resources/js_vue3/stores/appSettings.js

@@ -0,0 +1,18 @@
+import { defineStore } from 'pinia'
+// import { useApi } from '@/api/useAPI.js'
+
+// const api = useApi()
+
+export const useAppSettingsStore = defineStore({
+	id: 'settings',
+
+	state: () => {
+        return { ...window.appSettings }
+    },
+
+	actions: {
+		updateSetting(setting) {
+			this.settings = { ...this.state.settings, ...setting }
+		},
+	},
+})

resources/js_vue3/views/settings/Options.vue

@@ -0,0 +1,7 @@
+<script>
+
+</script>
+
+<template>
+    <p>toto</p>
+</template>