Initial commit
This commit is contained in:
Mindboost
271
pages/settings/account.vue
Normal file
271
pages/settings/account.vue
Normal file
@@ -0,0 +1,271 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user