96 lines
2.2 KiB
Vue
96 lines
2.2 KiB
Vue
<template>
|
|
<div class="activate-container">
|
|
<h1>{{ $t('activate.title') }}</h1>
|
|
<p v-if="user">{{ $t('activate.message', { username: user.username }) }}</p>
|
|
<form @submit.prevent="activateAccount">
|
|
<div>
|
|
<label>{{ $t('activate.token') }}</label>
|
|
<input type="text" v-model="token" required />
|
|
</div>
|
|
<div>
|
|
<button type="submit">{{ $t('activate.submit') }}</button>
|
|
</div>
|
|
</form>
|
|
<ErrorDialog ref="errorDialog" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex';
|
|
import apiClient from '@/utils/axios.js';
|
|
import ErrorDialog from '@/dialogues/standard/ErrorDialog.vue';
|
|
|
|
export default {
|
|
name: 'ActivateView',
|
|
data() {
|
|
return {
|
|
token: this.$route.query.token || ''
|
|
};
|
|
},
|
|
components: {
|
|
ErrorDialog,
|
|
},
|
|
computed: {
|
|
...mapGetters(['user'])
|
|
},
|
|
methods: {
|
|
async activateAccount() {
|
|
try {
|
|
const response = await apiClient.post('/api/auth/activate', { token: this.token });
|
|
if (response.status === 200) {
|
|
this.user.active = true;
|
|
this.$router.push('/'); // Redirect to login after activation
|
|
}
|
|
} catch (error) {
|
|
console.error('Error activating account:', error);
|
|
this.$refs.errorDialog.open(this.$t('activate.failure'));
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.activate-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
padding: 2em;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
input[type="text"] {
|
|
width: 100%;
|
|
padding: 0.5em;
|
|
margin-bottom: 1em;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
button {
|
|
padding: 0.5em 1em;
|
|
background-color: #007bff;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
</style>
|