Add global app banners and integrate into layout

Introduce a global app banners store (GUI/src/stores/appBanners.ts) and switch authentication error/notification flows to use it. GUI/src/Layout.vue now consumes the banner store, replaces the single snackbar with a stacked, dismissible banner UI (styles, transitions and z-index included), and adds navigateToBrandTarget() to route the brand button based on auth state. GUI/src/routes/authentication/Login.vue was updated to push errors to the new banner store and remove the local alert. Minor route adjustments in GUI/src/plugins/routesLayout.ts: rename 'Dash' to 'Dashboard' and change Login visibility to Unauthenticated. codexInfo.md updated to document these UI/behavior changes.
This commit is contained in:
Jonas
2026-04-18 23:02:01 +02:00
parent 86ed227566
commit 6c2a149f96
5 changed files with 226 additions and 37 deletions
+8 -15
View File
@@ -2,12 +2,13 @@
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { AuthRequestError, login } from '@/services/authSession'
import { useAppBannersStore } from '@/stores/appBanners'
const showPassword = ref(false)
const userName = ref('')
const password = ref('')
const isSubmitting = ref(false)
const errorMessage = ref('')
const appBannersStore = useAppBannersStore()
const route = useRoute()
const router = useRouter()
@@ -27,12 +28,11 @@ const redirectPath = computed(() => {
async function handleSubmit() {
if (submitDisabled.value) {
errorMessage.value = 'Bitte Benutzername und Passwort eingeben.'
appBannersStore.pushError('Bitte Benutzername und Passwort eingeben.', 'Anmeldung fehlgeschlagen')
return
}
isSubmitting.value = true
errorMessage.value = ''
try {
await login({
@@ -43,9 +43,12 @@ async function handleSubmit() {
await router.replace(redirectPath.value)
} catch (error) {
if (error instanceof AuthRequestError) {
errorMessage.value = error.message
appBannersStore.pushError(error.message, 'Anmeldung fehlgeschlagen')
} else {
errorMessage.value = 'Anmeldung fehlgeschlagen. Bitte versuche es erneut.'
appBannersStore.pushError(
'Anmeldung fehlgeschlagen. Bitte versuche es erneut.',
'Anmeldung fehlgeschlagen',
)
}
} finally {
isSubmitting.value = false
@@ -85,16 +88,6 @@ async function handleSubmit() {
<p>Melde dich mit deinem bestehenden Konto an.</p>
</div>
<v-alert
v-if="errorMessage"
type="error"
variant="tonal"
density="comfortable"
border="start"
>
{{ errorMessage }}
</v-alert>
<v-text-field
v-model="userName"
label="Benutzername"