dev-audioprocessing/pages/setting/index.vue

112 lines
3.6 KiB
Vue
Executable File

<template>
<div>
<div class="row justify-content-center">
<div class="col-12 col-sm-12 col-md-8">
<div class="row">
<div class="col-12">
<h4 class="fw-bold text-center pt-5">Account
<nuxt-link :to="localePath('/setting/editaccount')" class="float-end pt-1 text-decoration-none" style="color: #e9c046">Edit</nuxt-link>
</h4>
</div>
</div>
<div class="row pt-4">
<div class="col-6 ">
<h5 class="fw-bold text-start text-muted">{{t('First Name')}}</h5>
</div>
<div class="col-6 ">
<h5 class="fw-bold text-end">{{user.first_name}}</h5>
</div>
</div>
<div class="row pt-4">
<div class="col-6">
<h5 class="fw-bold text-muted">{{t('Last Name')}}</h5>
</div>
<div class="col-6">
<h5 class="fw-bold text-end">{{user.surname}}</h5> </div>
</div>
<div class="row pt-4">
<div class="col-2">
<h5 class="fw-bold text-muted">Email</h5>
</div>
<div class="col-10">
<h5 class="fw-bold text-end">{{user.email}}</h5> </div>
</div>
<div class="row pt-4">
<div class="col-6">
<h5 class="fw-bold text-muted">{{ t('Password') }}</h5>
</div>
<div class="col-6">
<h5 class="fw-bold text-end"></h5> </div>
</div>
<div class="row pt-4">
<div class="col-6">
<h5 class="fw-bold text-muted">{{ t('Language') }}</h5>
</div>
<div class="col-6">
<h5 v-if="user.language=='de'" class="fw-bold text-end">German</h5>
<h5 v-else class="fw-bold text-end">English</h5>
</div>
</div>
<div class="row pt-4">
<div class="col-12 text-center">
<button @click="logoutNow" class="btn col-12 col-sm-12 col-md-3 fw-bold btn-outline-dark">{{t("Log Out")}} </button>
</div>
</div>
<div class="row pt-5 pb-4 px-2">
<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 7 days for free. Subscribe to increase your productivity with Mindboost afterwards.")}}</h5>
<NuxtLink :to="localePath('/setting/subscription')" 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>
import {useUserStore} from '@/stores/user';
import {mapState,mapActions} from "pinia";
export default {
name:'SettingPage',
setup() {
const { t } = useI18n()
const localePath = useLocalePath()
return {
t,
localePath,
}
},
computed:{
...mapState(useUserStore,['user'])
},
methods:{
...mapActions(useUserStore,['logout']),
logoutNow(){
this.logout();
this.$axios.post('/api/logout').then(({data})=>{
console.log(data,'Logout');
this.$router.push(this.localePath('/auth/login'));
console.log('Hain');
}).catch((e)=>{
console.log('Ok');
this.$router.push(this.localePath('/auth/login'));
})
}
}
}
</script>
<style>
</style>