Replace local Kicker component with the 2fauth/ui one

resources/js/App.vue

@@ -1,28 +1,18 @@
 <script setup>
     import { RouterView } from 'vue-router'
+    import { Kicker } from '@2fauth/ui'
 
     const { t } = useI18n()
+    const { language } = useNavigatorLanguage()
     const route = useRoute()
-    const kickUser = ref(null)
+    const user = inject('userStore')
+
+    const mustKick = ref(false)
     const kickUserAfter = ref(null)
     const isProtectedRoute = ref(route.meta.watchedByKicker)
 
-    watch(
+    mustKick.value = user.isAuthenticated
-        () => route.name,
-        () => {
-            isProtectedRoute.value = route.meta.watchedByKicker
-        }
-    )
-
-    // const kickInactiveUser = computed(() => kickUser && kickUserAfter.value > 0 && isProtectedRoute.value)
-
-    onBeforeMount(async () => {
-        const { useUserStore } = await import('./stores/user.js')
-        const { language } = useNavigatorLanguage()
-        const user = useUserStore()
-
     kickUserAfter.value = parseInt(user.preferences.kickUserAfter)
-        kickUser.value = user.isAuthenticated
 
     watch(
         () => user.preferences.kickUserAfter,
@@ -33,13 +23,20 @@
     watch(
         () => user.isAuthenticated,
         () => {
-                kickUser.value = user.isAuthenticated
+            mustKick.value = user.isAuthenticated
         }
     )
+
     watch(language, () => {
         user.applyLanguage()
     })
-    })
+
+    watch(
+        () => route.name,
+        () => {
+            isProtectedRoute.value = route.meta.watchedByKicker
+        }
+    )
 
     router.afterEach((to, from) => {
         to.meta.title = t('title.' + to.name)
@@ -61,5 +58,9 @@
     <main class="main-section">
         <RouterView />
     </main>
-    <kicker v-if="kickUser && kickUserAfter > 0 && isProtectedRoute" :kickAfter="kickUserAfter"></kicker>
+    <Kicker
+        v-if="mustKick && kickUserAfter > 0 && isProtectedRoute"
+        :kickAfter="kickUserAfter"
+        @kicked="() => user.logout({ kicked: true})"
+    />
 </template>

resources/js/app.js

@@ -40,8 +40,6 @@ app.use(router)
 app.use(Notifications)
 
 // Global components registration
-import Kicker           from '@/components/Kicker.vue'
-
 import {
     FormField,
     FormPasswordField,
@@ -76,7 +74,6 @@ app
     .component('FormToggle', FormToggle)
     .component('FormCheckbox', FormCheckbox)
     .component('FormButtons', FormButtons)
-    .component('Kicker', Kicker)
 
 // Global error handling
 // import { useNotify } from '@2fauth/ui'
@@ -90,9 +87,6 @@ app
 // Helpers
 // app.config.globalProperties.$helpers = helpers
 
-// App mounting
-app.mount('#app')
-
 // App inject for footer
 // TODO : Try to avoid those global injection
 import { useUserStore } from '@/stores/user'
@@ -105,3 +99,6 @@ user.applyUserPrefs()
 
 app.provide('userStore', user)
 app.provide('appSettingsStore', appSettings)
+
+// App mounting
+app.mount('#app')

resources/js/components/Kicker.vue

@@ -1,70 +0,0 @@
-<script setup>
-    import { useUserStore } from '@/stores/user'
-
-    const user = useUserStore()
-    const events = ref(['mousedown', 'scroll', 'keypress'])
-    const logoutTimer = ref(null)
-    // const elapsed = ref(0)
-    // const counter = ref(null)
-
-    const props = defineProps({
-        kickAfter: {
-            type: Number,
-            required: true
-        },
-    })
-
-    watch(
-        () => props.kickAfter,
-        () => {
-            restartTimer()
-        }
-    )
-
-    onMounted(() => {
-        events.value.forEach(function (event) {
-            window.addEventListener(event, restartTimer)
-        }, this)
-
-        startTimer()
-    })
-
-    onUnmounted(() => {
-        events.value.forEach(function (event) {
-            window.removeEventListener(event, restartTimer)
-        }, this)
-
-        stopTimer()
-    })
-
-    function startTimer() {
-        logoutTimer.value = setTimeout(logoutUser, props.kickAfter * 60 * 1000)
-        // counter.value = setInterval(() => {
-        //     elapsed.value += 1
-        //     console.log(elapsed.value + '/' + props.kickAfter * 60)
-        // }, 1000)
-    }
-
-    // Triggers the user logout
-    function logoutUser() {
-        clearTimeout(logoutTimer.value)
-        user.logout({ kicked: true})
-    }
-
-    // Restarts the timer
-    function restartTimer() {
-        stopTimer()
-        startTimer()
-    }
-
-    // Stops the timer
-    function stopTimer() {
-        clearTimeout(logoutTimer.value)
-        // elapsed.value = 0
-        // clearInterval(counter.value)
-    }
-</script>
-
-<template>
-
-</template>

resources/js/stores/user.js

@@ -78,7 +78,7 @@ export const useUserStore = defineStore({
                 authService.logout({ returnError: true }).then(() => {
                     if (kicked) {
                         notify.clear()
-                        notify.warn({ text: t('message.auth.autolock_triggered_punchline'), duration:-1 })
+                        notify.warn({ text: this.$i18n.global.t('message.auth.autolock_triggered_punchline'), duration:-1 })
                     }
                     this.tossOut()
                 })
@@ -163,7 +163,7 @@ export const useUserStore = defineStore({
             })
             .catch(error => {
                 const notify = useNotify()
-                notify.alert({ text: t('error.data_cannot_be_refreshed_from_server') })
+                notify.alert({ text: this.$i18n.global.t('error.data_cannot_be_refreshed_from_server') })
             })
         }