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:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user