272 lines
7.5 KiB
Vue
272 lines
7.5 KiB
Vue
<template>
|
|
<div>
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 col-lg-9 col-md-11 col-sm-12 col-xl-8">
|
|
<!-- Header Section -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<h1 class="h3 fw-bold text-center pt-3">
|
|
{{ t('Account') }}
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Account Details -->
|
|
<div class="border-bottom row flex-column flex-sm-row mx-0 pt-4">
|
|
<div class="col-6">
|
|
<p class="fw-bold text-start">
|
|
{{ t('First Name') }}
|
|
</p>
|
|
</div>
|
|
<div class="col-6">
|
|
<p class="fw-bold text-sm-end text-muted">
|
|
{{ user.first_name }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-bottom row flex-column flex-sm-row mx-0 pt-4">
|
|
<div class="col-6">
|
|
<p class="fw-bold text-start">
|
|
{{ t('Last Name') }}
|
|
</p>
|
|
</div>
|
|
<div class="col-6">
|
|
<p class="fw-bold text-sm-end text-muted">
|
|
{{ user.surname }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-bottom row flex-column flex-sm-row mx-0 pt-4">
|
|
<div class="col-6">
|
|
<p class="fw-bold text-start">
|
|
{{ t('Language') }}
|
|
</p>
|
|
</div>
|
|
<div class="col-6">
|
|
<p class="fw-bold text-sm-end text-muted">
|
|
{{ user.language == 'de' ? 'German' : 'English' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-bottom row flex-column flex-sm-row mx-0 pt-4">
|
|
<div class="col-6">
|
|
<p class="fw-bold text-start">
|
|
{{ t('Email') }}
|
|
</p>
|
|
</div>
|
|
<div class="col-6">
|
|
<p class="fw-bold text-sm-end text-muted">
|
|
{{ user.email }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-bottom row flex-column flex-sm-row mx-0 pt-4">
|
|
<div class="col-6">
|
|
<p class="fw-bold text-start">
|
|
{{ t('Password') }}
|
|
</p>
|
|
</div>
|
|
<div class="col-6">
|
|
<p class="fw-bold text-sm-end text-muted">•••••••••</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Conditional Manager Details -->
|
|
<div v-if="user.inviter" class="border-bottom row flex-column flex-sm-row mx-0 pt-4">
|
|
<div class="col-6">
|
|
<p class="fw-bold text-start">
|
|
{{ t('Manager Name') }}
|
|
</p>
|
|
</div>
|
|
<div class="col-6">
|
|
<p class="fw-bold text-sm-end text-muted">
|
|
{{ user.inviter.first_name ?? '' }} {{ user.inviter.surname ?? '' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="user.inviter" class="border-bottom row flex-column flex-sm-row mx-0 pt-4">
|
|
<div class="col-6">
|
|
<p class="fw-bold text-start">
|
|
{{ t('Manager Email') }}
|
|
</p>
|
|
</div>
|
|
<div class="col-6">
|
|
<p class="fw-bold text-sm-end text-muted">
|
|
{{ user.inviter.email ?? '' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="user.inviter" class="row flex-column flex-sm-row pt-4">
|
|
<div class="col-6">
|
|
<p class="fw-bold text-start">
|
|
{{ t('Current Package') }}
|
|
</p>
|
|
</div>
|
|
<div class="col-6">
|
|
<p class="fw-bold text-sm-end text-muted">
|
|
{{ showManagerPlan() }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Logout Button -->
|
|
<div class="account-buttons d-flex justify-content-center pt-5">
|
|
<nuxt-link
|
|
:to="localePath('/settings/editaccount')"
|
|
class="btn btn-primary-custom text-decoration-none"
|
|
>
|
|
{{ t('Edit_') }}
|
|
</nuxt-link>
|
|
<button class="btn fw-bold btn-outline-dark" @click="logoutNow">
|
|
{{ t("Log Out") }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<button type="button" class="btn btn-link position-absolute bottom-0 start-50 translate-middle-x mb-3" @click="showModal = true">
|
|
{{ t("Delete Account") }}
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="modal fade"
|
|
tabindex="-1"
|
|
:class="{ show: showModal }"
|
|
:style="showModal ? 'display: block;' : 'display: none;'"
|
|
aria-modal="true"
|
|
role="dialog"
|
|
@click.self="closeModal"
|
|
>
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">{{ t("Delete Account") }}</h5>
|
|
<button type="button" class="btn-close" @click="closeModal" />
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>{{ t('Delete Account Text') }}</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-dark-custom" @click="closeModal">{{ t('Cancel') }}</button>
|
|
<button class="btn btn-primary-custom" @click="deleteAccount">{{ t('Delete Account') }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hintergrund-Overlay -->
|
|
<div v-if="showModal" class="modal-backdrop fade show" />
|
|
</div>
|
|
</template>
|
|
<script>
|
|
|
|
import { mapActions, mapState } from 'pinia'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { computed } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useUserStore } from '@/stores/user'
|
|
|
|
export default {
|
|
name: 'Account',
|
|
setup () {
|
|
const { t } = useI18n()
|
|
const localePath = useLocalePath()
|
|
const userStore = useUserStore()
|
|
const user = useUserStore().user
|
|
const router = useRouter()
|
|
|
|
return { t, localePath, router, user, userStore }
|
|
},
|
|
data () {
|
|
return {
|
|
showModal: false,
|
|
loading: false
|
|
}
|
|
},
|
|
methods: {
|
|
async logoutNow () {
|
|
await this.userStore.logout()
|
|
try {
|
|
await this.$axios.post('/api/logout')
|
|
} catch (error) {
|
|
// Handle the error if needed
|
|
}
|
|
this.$router.push(this.localePath('/auth/login'))
|
|
},
|
|
closeModal () {
|
|
this.showModal = false
|
|
},
|
|
async deleteAccount () {
|
|
this.loading = true
|
|
try {
|
|
await this.$axios.post('/api/account/delete')
|
|
await this.userStore.logout()
|
|
this.$router.push(this.localePath('/auth/login'))
|
|
this.$toast.success('Account gelöscht. Du wurdest ausgeloggt.')
|
|
} catch (error) {
|
|
this.$toast.error('Fehler beim Löschen: ' + (error.response?.data?.message || 'Unbekannter Fehler'))
|
|
} finally {
|
|
this.loading = false
|
|
this.closeModal()
|
|
}
|
|
},
|
|
showManagerPlan () {
|
|
if (user.value.inviter.current_subscription_plan === 1) {
|
|
return 'Basic'
|
|
} else if (user.value.inviter.current_subscription_plan === 2) {
|
|
return 'Team'
|
|
} else if (user.value.inviter.current_subscription_plan === 3) {
|
|
return 'Enterprise'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.btn-primary-custom {
|
|
background-color: #e9c046;
|
|
border-color: #e9c046;
|
|
color: white;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.btn-primary-custom:hover, .btn-primary-custom:focus{
|
|
background-color: transparent;
|
|
border-color: #e9c046;
|
|
color: #e9c046;
|
|
}
|
|
|
|
.account-buttons {
|
|
gap: 1.5em;
|
|
}
|
|
|
|
@media only screen and (max-width: 576px) {
|
|
.account-buttons {
|
|
flex-direction: column;
|
|
gap: 0.75em;
|
|
}
|
|
}
|
|
|
|
.modal {
|
|
z-index: 1050;
|
|
}
|
|
.modal-backdrop {
|
|
z-index: 1040;
|
|
}
|
|
.btn-link {
|
|
color: black;
|
|
transition: 250ms ease-in-out;
|
|
|
|
&:hover, &:focus {
|
|
color: #e9c046;
|
|
}
|
|
}
|
|
</style>
|