This repository has been archived on 2024-07-22. You can view files and clone it, but cannot push or open issues or pull requests.
Zaimki/components/Account.vue

72 lines
2.1 KiB
Vue

<template>
<section>
<Alert type="danger" :message="error"/>
<form @submit.prevent="changeUsername">
<h3 class="h6"><T>user.account.changeUsername.header</T></h3>
<div class="input-group mb-3">
<input type="text" class="form-control" v-model="username"
required minlength="4" maxlength="16"/>
<div class="input-group-append">
<button class="btn btn-outline-primary">
<T>user.account.changeUsername.action</T>
</button>
</div>
</div>
</form>
<div>
<h3 class="h6"><T>user.account.changeEmail.header</T></h3>
<p>{{ email }}</p>
</div>
<p v-if="$user().roles === 'admin'">
<span class="badge badge-primary"><T>user.account.admin</T></span>
</p>
<button class="btn btn-outline-secondary btn-sm" @click="logout">
<Icon v="sign-out"/>
<T>user.logout</T>
</button>
</section>
</template>
<script>
export default {
data() {
return {
username: this.$user().username,
email: this.$user().email,
error: '',
};
},
methods: {
async changeUsername() {
await this.post(`/user/change-username`, {
username: this.username
}, {
headers: {...this.$auth()},
});
},
async post(url, data, options = {}) {
this.error = '';
const response = await this.$axios.$post(url, data, options);
if (response.error) {
this.error = response.error;
return;
}
this.$store.commit('setToken', response.token);
this.$cookies.set('token', this.$store.state.token);
},
logout() {
this.$store.commit('setToken', null);
this.$cookies.removeAll();
}
},
}
</script>