Move banner system to store, migrate login/register API handling to own file, display Account details on accountPage
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user