fix(csrf): make errors more apparent (#4889)

src_assets/common/assets/web/Navbar.vue

@@ -1,73 +1,78 @@
 <template>
-  <nav class="navbar navbar-expand-lg navbar-sunshine">
-    <div class="container-fluid">
-      <a class="navbar-brand" href="./" title="Sunshine">
-        <img src="/images/logo-sunshine-45.png" height="45" alt="Sunshine">
-      </a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
-              aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-      </button>
-      <div class="collapse navbar-collapse" id="navbarSupportedContent">
-        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-          <li class="nav-item">
-            <a class="nav-link" href="./">
-              <Home :size="18" class="icon"></Home>
-              {{ $t('navbar.home') }}
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="./pin">
-              <Lock :size="18" class="icon"></Lock>
-              {{ $t('navbar.pin') }}
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="./apps">
-              <Layers :size="18" class="icon"></Layers>
-              {{ $t('navbar.applications') }}
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="./featured">
-              <Star :size="18" class="icon"></Star>
-              {{ $t('navbar.featured') }}
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="./config">
-              <Settings :size="18" class="icon"></Settings>
-              {{ $t('navbar.configuration') }}
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="./password">
-              <Shield :size="18" class="icon"></Shield>
-              {{ $t('navbar.password') }}
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="./troubleshooting">
-              <Info :size="18" class="icon"></Info>
-              {{ $t('navbar.troubleshoot') }}
-            </a>
-          </li>
-          <li class="nav-item">
-            <ThemeToggle/>
-          </li>
-        </ul>
+  <div>
+    <nav class="navbar navbar-expand-lg navbar-sunshine">
+      <div class="container-fluid">
+        <a class="navbar-brand" href="./" title="Sunshine">
+          <img src="/images/logo-sunshine-45.png" height="45" alt="Sunshine">
+        </a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+            <li class="nav-item">
+              <a class="nav-link" href="./">
+                <Home :size="18" class="icon"></Home>
+                {{ $t('navbar.home') }}
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./pin">
+                <Lock :size="18" class="icon"></Lock>
+                {{ $t('navbar.pin') }}
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./apps">
+                <Layers :size="18" class="icon"></Layers>
+                {{ $t('navbar.applications') }}
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./featured">
+                <Star :size="18" class="icon"></Star>
+                {{ $t('navbar.featured') }}
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./config">
+                <Settings :size="18" class="icon"></Settings>
+                {{ $t('navbar.configuration') }}
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./password">
+                <Shield :size="18" class="icon"></Shield>
+                {{ $t('navbar.password') }}
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./troubleshooting">
+                <Info :size="18" class="icon"></Info>
+                {{ $t('navbar.troubleshoot') }}
+              </a>
+            </li>
+            <li class="nav-item">
+              <ThemeToggle/>
+            </li>
+          </ul>
+        </div>
       </div>
-    </div>
-  </nav>
+    </nav>
+    <Notification></Notification>
+  </div>
 </template>
 
 <script>
 import { Home, Lock, Layers, Star, Settings, Shield, Info } from 'lucide-vue-next'
 import ThemeToggle from './ThemeToggle.vue'
+import Notification from './Notification.vue'
 
 export default {
   components: {
     ThemeToggle,
+    Notification,
     Home,
     Lock,
     Layers,