Move banner system to store, migrate login/register API handling to own file, display Account details on accountPage

This commit is contained in:
2024-09-19 16:20:12 +02:00
parent 5b3a753233
commit ed264ff026
19 changed files with 250 additions and 141 deletions

View File

@@ -1,61 +1,20 @@
<script setup lang="ts">
import { BannerStateEnum } from '@/data/enums/bannerStateEnum';
import BannerModel from '@/data/models/bannerModel';
import { getBannerMessage } from '@/scripts/contentScripts';
import { ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useFeedbackStore } from '@/data/stores/feedbackStore';
const i18n = useI18n()
const alertBanner = defineModel("alertBanner", { required: true, type: BannerModel })
const title = ref("")
const color = ref("")
const icon = ref("")
function refreshBanner() {
switch (alertBanner.value.bannerState) {
case BannerStateEnum.ERROR: {
title.value = i18n.t('bannerMessages.error'); break;
}
case BannerStateEnum.DATABASERESETSUCCESSFUL: {
title.value = i18n.t('bannerMessages.databaseResetSuccessful'); break;
}
case BannerStateEnum.LOGINSUCCESSFUL: {
title.value = i18n.t('bannerMessages.loginSuccessful'); break;
}
case BannerStateEnum.WRONGLOGIN: {
title.value = i18n.t('bannerMessages.wrongLogin'); break;
}
}
switch (alertBanner.value.bannerState) {
case BannerStateEnum.ERROR:
case BannerStateEnum.WRONGLOGIN:
color.value = "red"
icon.value = "mdi-alert-circle"
break;
case BannerStateEnum.DATABASERESETSUCCESSFUL:
case BannerStateEnum.LOGINSUCCESSFUL:
color.value = "green"
icon.value = "mdi-check-circle"
break
}
}
watch(() => alertBanner.value.bannerState, () => {
refreshBanner()
})
refreshBanner()
const feedbackStore = useFeedbackStore()
</script>
<template>
<v-expand-transition>
<v-row v-if="alertBanner.show">
<v-row v-if="feedbackStore.showBanner">
<v-col>
<v-alert v-model="alertBanner.show" :color="color" :icon="icon" closable>
{{ title }}
<v-alert
v-model="feedbackStore.showBanner"
:color="feedbackStore.color"
:icon="feedbackStore.icon"
closable
>
{{ feedbackStore.title }}
</v-alert>
</v-col>
</v-row>

View File

@@ -35,16 +35,16 @@ const navRail = defineModel("navRail", { type: Boolean })
</v-list-subheader>
<v-expand-transition>
<div v-if="userStore.userAccountId == -1">
<v-list-item v-if="userStore.userAccountId == -1" :title="$t('menu.login')" prepend-icon="mdi-login" to="/login" link />
<div v-if="!userStore.loggedIn">
<v-list-item v-if="!userStore.loggedIn" :title="$t('menu.login')" prepend-icon="mdi-login" to="/login" link />
</div>
</v-expand-transition>
<v-expand-transition>
<div v-if="userStore.userAccountId != -1">
<v-list-item :title="$t('menu.logout')" prepend-icon="mdi-logout" @click="userStore.userAccountId = -1" link />
<div v-if="userStore.loggedIn">
<v-list-item :title="$t('menu.account')" prepend-icon="mdi-account" to="/account" link />
<v-list-item :title="$t('menu.orders')" prepend-icon="mdi-cart-check" to="/orders" link />
<v-list-item :title="$t('menu.logout')" prepend-icon="mdi-logout" @click="userStore.logout" link />
</div>
</v-expand-transition>