Registration and activation

frontend/src/views/auth/ActivateView.vue

@@ -0,0 +1,95 @@
+<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>