feat: add frontend version checking for outdated clients

app/Http/Kernel.php

@@ -3,6 +3,7 @@
 namespace App\Http;
 
 use App\Http\Middleware\EnsureModelNotStale;
+use App\Http\Middleware\FrontendVersion;
 use App\Http\Middleware\LogContext;
 use App\Http\Middleware\RequestMetricsMiddleware;
 use App\Http\Middleware\RoomAuthenticate;
@@ -59,6 +60,7 @@ class Kernel extends HttpKernel
             \Illuminate\Routing\Middleware\SubstituteBindings::class,
             \App\Http\Middleware\SetApplicationLocale::class,
             LogContext::class,
+            FrontendVersion::class,
         ],
     ];
 

app/Http/Middleware/FrontendVersion.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Cache;
+use Closure;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Vite;
+use Symfony\Component\HttpFoundation\Response;
+
+class FrontendVersion
+{
+    /**
+     * Handle an incoming request.
+     *
+     * @param  \Closure(\Illuminate\Http\Request): (\Symfony\Component\HttpFoundation\Response)  $next
+     */
+    public function handle(Request $request, Closure $next): Response
+    {
+        $response = $next($request);
+
+        $manifestHash = Cache::flexible('vite-manifest-hash', [30, 60], function () {
+            return Vite::manifestHash();
+        });
+
+        if ($manifestHash) {
+            $response->headers->set('X-Frontend-Version', $manifestHash);
+        }
+
+        return $response;
+    }
+}

lang/en/app.php

@@ -34,6 +34,7 @@
     'error' => 'An error occurred',
     'errors' => [
         'attendance_agreement_missing' => 'Consent to record attendance is required.',
+        'frontend_outdated' => 'Your version of the application is outdated. Please reload to continue.',
         'join_failed' => 'Joining the room has failed because a connection error has occurred.',
         'meeting_attendance_disabled' => 'Attendance logging was not active at this meeting.',
         'meeting_attendance_not_ended' => 'The attendance logs are not yet available for this meeting as it has not yet ended.',

resources/js/components/App.vue

@@ -26,6 +26,7 @@
       </header>
       <main :class="routeClass">
         <router-view />
+        <FrontendOutdatedDialog />
       </main>
       <AppFooter />
     </div>
@@ -37,7 +38,7 @@ import { useLoadingStore } from "../stores/loading";
 import { useSettingsStore } from "../stores/settings";
 import Toast from "primevue/toast";
 import { useRoute } from "vue-router";
-import { computed } from "vue";
+import { computed, watch } from "vue";
 
 const loadingStore = useLoadingStore();
 const settingsStore = useSettingsStore();

resources/js/components/FrontendOutdatedDialog.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { ref, watch } from "vue";
+import { useSettingsStore } from "../stores/settings.js";
+
+const settingsStore = useSettingsStore();
+
+const visible = ref(false);
+
+watch(
+  () => settingsStore.frontendVersion,
+  (newVersion, oldVersion) => {
+    if (oldVersion && newVersion !== oldVersion) {
+      visible.value = true;
+    }
+  },
+);
+
+const reload = () => {
+  window.location.reload();
+};
+</script>
+
+<template>
+  <Dialog
+    v-model:visible="visible"
+    modal
+    :style="{ width: '500px' }"
+    :breakpoints="{ '575px': '90vw' }"
+    :draggable="false"
+    :close-on-escape="false"
+    :dismissable-mask="false"
+    :closable="false"
+  >
+    <span>{{ $t("app.errors.frontend_outdated") }}</span>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <Button :label="$t('app.reload')" @click="reload" />
+      </div>
+    </template>
+  </Dialog>
+</template>

resources/js/services/Api.js

@@ -18,6 +18,17 @@ export class Api {
     this.t = i18n.global.t;
   }
 
+  setupAxiosInterceptors(settingsStore) {
+    // Add a response interceptor
+    axios.interceptors.response.use(function onFulfilled(response) {
+      const frontendHash = response.headers["x-frontend-version"];
+      if (frontendHash !== undefined)
+        settingsStore.setFrontendVersion(frontendHash);
+
+      return response;
+    });
+  }
+
   /**
    * Makes a request with the passed params.
    *

resources/js/stores/loading.js

@@ -1,6 +1,7 @@
 import { defineStore } from "pinia";
 import { useAuthStore } from "./auth";
 import { useSettingsStore } from "./settings";
+import { useApi } from "../composables/useApi.js";
 
 export const useLoadingStore = defineStore("loading", {
   state: () => {
@@ -23,12 +24,15 @@ export const useLoadingStore = defineStore("loading", {
   },
   actions: {
     async initialize() {
+      const api = useApi();
       const auth = useAuthStore();
       const settings = useSettingsStore();
 
       this.setLoading();
       await settings.getSettings();
 
+      settings.setupAxiosInterceptors();
+
       await auth.getCurrentUser();
 
       this.initialized = true;

resources/js/stores/settings.js

@@ -8,6 +8,7 @@ export const useSettingsStore = defineStore("settings", {
   state: () => {
     return {
       settings: null,
+      frontendVersion: null,
     };
   },
   getters: {
@@ -30,5 +31,14 @@ export const useSettingsStore = defineStore("settings", {
         this.settings.theme.rounded,
       );
     },
+
+    setFrontendVersion(version) {
+      this.frontendVersion = version;
+    },
+
+    setupAxiosInterceptors() {
+      const api = useApi();
+      api.setupAxiosInterceptors(this);
+    },
   },
 });