add alert with ssowat message

composables/states.ts

@@ -74,6 +74,8 @@ export const usePreferedTheme = async () => {
 export const useRedirectUrl = () =>
   useState<string | null>('redirectUrl', () => null)
 
+export const useQueryMsg = () => useState<string | null>('queryMsg', () => null)
+
 // SETTINGS
 
 export interface Settings {

layouts/default.vue

@@ -3,6 +3,7 @@ import type { User } from '@/composables/states'
 
 const { t } = useI18n()
 const isLoggedIn = useIsLoggedIn()
+const queryMsg = useQueryMsg()
 const settings = await useSettings()
 const user = await useUser<User | null>()
 
@@ -37,6 +38,15 @@ async function logout() {
 
 <template>
   <div class="container mx-auto p-10 min-h-screen flex flex-col">
+    <BaseAlert
+      v-if="queryMsg"
+      variant="warning"
+      icon="alert-outline"
+      :message="t('ssowat.' + queryMsg)"
+      class="mb-4"
+      assertive
+    />
+
     <header class="py-2">
       <div id="focus-reset" class="h-10 -mt-10 focus-target" tabindex="-1">
         <a class="link sr-only focus:not-sr-only" href="#main-target">

locales/en.json

@@ -49,6 +49,7 @@
         "footer": "Skip to footer"
     },
     "ssowat": {
+        "access_denied": "You are not allowed to access this url.",
         "protected": "Please log in to access this url."
     },
     "theme": "Theme",

middleware/auth.global.ts

@@ -1,6 +1,7 @@
 import {
   useIsLoggedIn,
   useRedirectUrl,
+  useQueryMsg,
   useSettings,
 } from '@/composables/states'
 
@@ -18,6 +19,13 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
     redirectUrl.value = null
   }
 
+  const queryMsg = useQueryMsg()
+  if (to.query.msg) {
+    queryMsg.value = from.query.msg as string
+  } else {
+    queryMsg.value = null
+  }
+
   if (to.name === 'login') {
     if (isLoggedIn.value) {
       return navigateTo('/')