Initial commit
This commit is contained in:
Mindboost
207
pages/settings/_index.vue
Normal file
207
pages/settings/_index.vue
Normal file
@@ -0,0 +1,207 @@
|
||||
<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 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-end text-muted">
|
||||
{{ user.first_name }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-bottom 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-end text-muted">
|
||||
{{ user.last_name }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-bottom 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-end text-muted">
|
||||
{{ user.language == 'de' ? 'German' : 'English' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-bottom 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-end text-muted">
|
||||
{{ user.email }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-bottom 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-end text-muted">•••••••••</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Conditional Manager Details -->
|
||||
<div v-if="user.inviter" class="border-bottom 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-end text-muted">
|
||||
{{ user.inviter.first_name ?? '' }} {{ user.inviter.last_name ?? '' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="user.inviter" class="border-bottom 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-end text-muted">
|
||||
{{ user.inviter.email ?? '' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="user.inviter" class="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-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>
|
||||
|
||||
<!-- Subscription Call-to-Action -->
|
||||
<div class="row pt-5 pb-4 px-2 mx-0">
|
||||
<div
|
||||
class="col-12 rounded text-center py-3 py-md-5"
|
||||
style="background-image: linear-gradient(40.53deg, #E9A446 6.68%, #E9C046 100%)"
|
||||
>
|
||||
<h4 class="text-center text-white">
|
||||
{{ t("Get another free 30 days") }}
|
||||
</h4>
|
||||
<h5 class="text-center px-2 px-md-5 text-white pt-2">
|
||||
{{ t("You can still use Mindboost for 30 days for free. Subscribe to increase your productivity with Mindboost afterwards.") }}
|
||||
</h5>
|
||||
<NuxtLink
|
||||
disabled
|
||||
type="button"
|
||||
class="btn px-4 py-2 mt-2 mt-md-3 fs-5"
|
||||
style="background-color: white; gap: 10px;"
|
||||
>
|
||||
{{ t("Subscribe") }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
|
||||
// Composition API setup
|
||||
const { t } = useI18n()
|
||||
const localePath = useLocalePath()
|
||||
const userStore = useUserStore()
|
||||
const router = useRouter()
|
||||
|
||||
// Computed property for user state
|
||||
const user = computed(() => userStore.user)
|
||||
|
||||
// Logout method
|
||||
const logoutNow = async () => {
|
||||
await userStore.logout()
|
||||
try {
|
||||
await $axios.post('/api/logout')
|
||||
} catch (error) {
|
||||
// Handle the error if needed
|
||||
}
|
||||
router.push(localePath('/auth/login'))
|
||||
}
|
||||
|
||||
function 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'
|
||||
}
|
||||
|
||||
// this.$toast.success(`Manager already has the ${managerPlan} plan`) // Fixed typo
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.account-buttons {
|
||||
gap: 1.5em;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
.account-buttons {
|
||||
flex-direction: column;
|
||||
gap: 0.75em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user