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>

frontend/src/views/home/LoggedInView.vue

@@ -2,12 +2,22 @@
     <div>
         <h1>Welcome to Home (Logged In)</h1>
         <p>Here are your exclusive features.</p>
+        <button @click="handleLogout">Logout</button>
     </div>
 </template>
 
 <script>
+import { mapActions } from 'vuex';
+
+
 export default {
     name: 'HomeLoggedInView',
+    methods: {
+        ...mapActions(['logout']),
+        handleLogout() {
+            this.logout();
+        }
+    }
 };
 </script>
 

frontend/src/views/home/NoLoginView.vue

@@ -12,18 +12,19 @@
                 <div>
                     <div>
                         <input data-object-name="user-name" size="20" type="text"
-                            :placeholder="$t('home.nologin.login.name')" :title="$t('home.nologin.login.namedescription')">
+                            :placeholder="$t('home.nologin.login.name')"
+                            :title="$t('home.nologin.login.namedescription')">
                     </div>
                     <div>
                         <input data-object-name="password" size="20" type="password"
-                            :placeholder="$t('home.nologin.login.password')" :title="$t('home.nologin.login.passworddescription')">
+                            :placeholder="$t('home.nologin.login.password')"
+                            :title="$t('home.nologin.login.passworddescription')">
                     </div>
                     <div>
                         <label id="o1p5irxv" name="o1p5irxv" class="Wt-valid" title=""><input id="ino1p5irxv"
                                 data-object-name="remember-me" name="ino1p5irxv" type="checkbox"
                                 onchange="var e=event||window.event,o=this;Wt._p_.update(o,'s53',e,true);"><span
-                                id="to1p5irxv" name="to1p5irxv" style="white-space:normal;">Eingeloggt bleiben
-                                (ACHTUNG!!! Dafür wird ein Cookie gesetzt!)</span></label>
+                                id="to1p5irxv" name="to1p5irxv" style="white-space:normal;">Eingeloggt bleiben</span></label>
                     </div>
                 </div>
                 <div class="Wt-buttons">
@@ -32,30 +33,41 @@
                         class="Wt-btn with-label">Einloggen</button>
                 </div>
                 <div class="Wt-buttons">
-                    <span id="o1p5iry0" data-object-name="lost-password"
-                        onclick="var e=event||window.event,o=this;if(o.classList.contains('Wt-disabled')){Wt4_9_1.cancelEvent(e);return;}Wt._p_.update(o,'s57',e,true);">Ich
-                        habe mein Paßwort vergessen</span> | <span id="o1p5iry1" data-object-name="register"
-                        onclick="var e=event||window.event,o=this;if(o.classList.contains('Wt-disabled')){Wt4_9_1.cancelEvent(e);return;}Wt._p_.update(o,'s58',e,true);">Ich
-                        möchte mich neu anmelden</span>
+                    <span id="o1p5iry0" data-object-name="lost-password" @click="openPasswordResetDialog"
+                        class="link">{{
+                        $t('home.nologin.login.lostpassword') }}</span> | <span id="o1p5iry1"
+                        @click="openRegisterDialog" class="link">{{ $t('home.nologin.login.register') }}</span>
                 </div>
             </div>
         </div>
         <div class="mascot"><img src="/images/mascot/mascot_female.png" /></div>
         <RandomChatDialog ref="randomChatDialog" />
+        <RegisterDialog ref="registerDialog" />
+        <PasswordResetDialog ref="passwordResetDialog" />
     </div>
 </template>
 
 <script>
 import RandomChatDialog from '@/dialogues/chat/RandomChatDialog.vue';
+import RegisterDialog from '@/dialogues/auth/RegisterDialog.vue';
+import PasswordResetDialog from '@/dialogues/auth/PasswordResetDialog.vue';
 
-export default { 
+export default {
     name: 'HomeNoLoginView',
     components: {
         RandomChatDialog,
+        RegisterDialog,
+        PasswordResetDialog,
     },
     methods: {
         openRandomChat() {
             this.$refs.randomChatDialog.open();
+        },
+        openRegisterDialog() {
+            this.$refs.registerDialog.open();
+        },
+        openPasswordResetDialog() {
+            this.$refs.passwordResetDialog.open();
         }
     }
 };
@@ -68,33 +80,38 @@ export default {
     justify-content: center;
     overflow: hidden;
     gap: 2em;
-    height:100%;
+    height: 100%;
 }
-.home-structure > div {
+
+.home-structure>div {
     flex: 1;
     text-align: center;
     display: flex;
 }
+
 .mascot {
     justify-content: center;
     align-items: center;
     background-color: #fdf1db;
 }
+
 .actions {
     display: flex;
     flex-direction: column;
     gap: 2em;
 }
-.actions > div {
+
+.actions>div {
     flex: 1;
     background-color: #fdf1db;
     align-items: center;
-    justify-content:center;
+    justify-content: center;
     display: flex;
     color: #7E471B;
     flex-direction: column;
 }
-.actions > div > h2 {
+
+.actions>div>h2 {
     color: #F9A22C;
 }
-</style>
+</style>