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
+125
-20
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useDisplay, useTheme } from 'vuetify'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
@@ -11,6 +12,7 @@ import {
|
||||
logout,
|
||||
type CurrentUser,
|
||||
} from '@/services/authSession'
|
||||
import { useAppBannersStore } from '@/stores/appBanners'
|
||||
|
||||
const display = useDisplay()
|
||||
const theme = useTheme()
|
||||
@@ -21,7 +23,8 @@ const currentYear = new Date().getFullYear()
|
||||
const themeStorageKey = 'theme'
|
||||
const currentUser = ref<CurrentUser | null>(null)
|
||||
const isLoggingOut = ref(false)
|
||||
const authMessage = ref('')
|
||||
const appBannersStore = useAppBannersStore()
|
||||
const { banners } = storeToRefs(appBannersStore)
|
||||
|
||||
function normalizeRoutePath(path: string) {
|
||||
if (!path || path === '/') {
|
||||
@@ -107,14 +110,6 @@ const themeLabel = computed(() =>
|
||||
)
|
||||
const isAuthenticated = computed(() => currentUser.value !== null)
|
||||
const userLabel = computed(() => currentUser.value?.userName ?? 'Konto')
|
||||
const showAuthMessage = computed({
|
||||
get: () => authMessage.value.length > 0,
|
||||
set: (nextValue: boolean) => {
|
||||
if (!nextValue) {
|
||||
authMessage.value = ''
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
function applyTheme(nextTheme: 'light' | 'dark', persist = true) {
|
||||
theme.global.name.value = nextTheme
|
||||
@@ -133,6 +128,11 @@ function toggleTheme() {
|
||||
applyTheme(isDarkTheme.value ? 'light' : 'dark')
|
||||
}
|
||||
|
||||
function navigateToBrandTarget() {
|
||||
const targetRouteName = isAuthenticated.value ? 'Dashboard' : 'Home'
|
||||
void router.push({ name: targetRouteName })
|
||||
}
|
||||
|
||||
async function refreshAuthState(options: { force?: boolean } = {}) {
|
||||
try {
|
||||
currentUser.value = await fetchCurrentUser({ force: options.force === true })
|
||||
@@ -147,7 +147,6 @@ async function handleLogout() {
|
||||
}
|
||||
|
||||
isLoggingOut.value = true
|
||||
authMessage.value = ''
|
||||
|
||||
try {
|
||||
await logout()
|
||||
@@ -155,9 +154,9 @@ async function handleLogout() {
|
||||
await router.replace({ name: 'Login' })
|
||||
} catch (error) {
|
||||
if (error instanceof AuthRequestError) {
|
||||
authMessage.value = error.message
|
||||
appBannersStore.pushError(error.message, 'Abmeldung fehlgeschlagen')
|
||||
} else {
|
||||
authMessage.value = 'Abmeldung fehlgeschlagen. Bitte versuche es erneut.'
|
||||
appBannersStore.pushError('Abmeldung fehlgeschlagen. Bitte versuche es erneut.', 'Abmeldung fehlgeschlagen')
|
||||
}
|
||||
} finally {
|
||||
isLoggingOut.value = false
|
||||
@@ -165,6 +164,10 @@ async function handleLogout() {
|
||||
}
|
||||
}
|
||||
|
||||
function dismissBanner(id: string) {
|
||||
appBannersStore.dismiss(id)
|
||||
}
|
||||
|
||||
function changeWebsiteTitle() {
|
||||
if (activeRoute.value) {
|
||||
document.title = `Hoard | ${activeRoute.value.name}`
|
||||
@@ -207,7 +210,7 @@ watch(
|
||||
/>
|
||||
</template>
|
||||
|
||||
<button type="button" class="brand-button" @click="router.push({ name: 'Home' })">
|
||||
<button type="button" class="brand-button" @click="navigateToBrandTarget">
|
||||
<span class="brand-mark">
|
||||
<img :src="iconImage" alt="Hoard Icon" class="brand-logo" />
|
||||
</span>
|
||||
@@ -385,14 +388,28 @@ watch(
|
||||
</v-footer>
|
||||
</v-main>
|
||||
|
||||
<v-snackbar
|
||||
v-model="showAuthMessage"
|
||||
color="error"
|
||||
location="bottom right"
|
||||
timeout="4500"
|
||||
<section
|
||||
v-if="banners.length > 0"
|
||||
class="app-banner-stack"
|
||||
aria-live="polite"
|
||||
aria-label="Systemmeldungen"
|
||||
>
|
||||
{{ authMessage }}
|
||||
</v-snackbar>
|
||||
<transition-group name="app-banner-transition" tag="div" class="app-banner-list">
|
||||
<v-alert
|
||||
v-for="banner in banners"
|
||||
:key="banner.id"
|
||||
:class="['app-banner-item', `app-banner-item--${banner.type}`]"
|
||||
:type="banner.type"
|
||||
variant="tonal"
|
||||
border="start"
|
||||
closable
|
||||
@click:close="dismissBanner(banner.id)"
|
||||
>
|
||||
<p v-if="banner.title" class="app-banner-title">{{ banner.title }}</p>
|
||||
<p class="app-banner-text">{{ banner.message }}</p>
|
||||
</v-alert>
|
||||
</transition-group>
|
||||
</section>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
@@ -578,6 +595,84 @@ watch(
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.app-banner-stack {
|
||||
position: fixed;
|
||||
right: max(var(--space-4), env(safe-area-inset-right));
|
||||
bottom: max(var(--space-4), env(safe-area-inset-bottom));
|
||||
z-index: 2100;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.app-banner-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
width: min(420px, calc(100vw - (2 * var(--space-4))));
|
||||
}
|
||||
|
||||
:deep(.app-banner-item) {
|
||||
pointer-events: auto;
|
||||
border: 1px solid var(--color-border) !important;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
:deep(.app-banner-item .v-alert__overlay),
|
||||
:deep(.app-banner-item .v-alert__underlay) {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.app-banner-item .v-alert__content) {
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
:deep(.app-banner-item--error) {
|
||||
background-color: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface) 90%) !important;
|
||||
}
|
||||
|
||||
:deep(.app-banner-item--warning) {
|
||||
background-color: color-mix(in srgb, var(--color-warning) 10%, var(--color-surface) 90%) !important;
|
||||
}
|
||||
|
||||
:deep(.app-banner-item--info) {
|
||||
background-color: color-mix(in srgb, var(--color-info) 10%, var(--color-surface) 90%) !important;
|
||||
}
|
||||
|
||||
:deep(.app-banner-item--success) {
|
||||
background-color: color-mix(in srgb, var(--color-success) 10%, var(--color-surface) 90%) !important;
|
||||
}
|
||||
|
||||
.app-banner-title,
|
||||
.app-banner-text {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.app-banner-title {
|
||||
margin-bottom: 2px;
|
||||
color: var(--color-text);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.app-banner-text {
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.app-banner-transition-enter-active,
|
||||
.app-banner-transition-leave-active {
|
||||
transition: opacity 180ms ease, transform 180ms ease;
|
||||
}
|
||||
|
||||
.app-banner-transition-enter-from,
|
||||
.app-banner-transition-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
.app-banner-transition-move {
|
||||
transition: transform 180ms ease;
|
||||
}
|
||||
|
||||
@media (width <= 960px) {
|
||||
.hoard-app-bar {
|
||||
padding-inline:
|
||||
@@ -645,6 +740,16 @@ watch(
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.app-banner-stack {
|
||||
right: var(--hoard-mobile-safe-right);
|
||||
left: var(--hoard-mobile-safe-left);
|
||||
bottom: calc(var(--hoard-mobile-safe-bottom) + var(--space-1));
|
||||
}
|
||||
|
||||
.app-banner-list {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 600px) {
|
||||
|
||||
Reference in New Issue
Block a user