Registration and activation

frontend/src/dialogues/auth/PasswordResetDialog.vue

@@ -0,0 +1,45 @@
+<template>
+    <DialogWidget ref="dialog" title="passwordReset.title" :show-close=true :buttons="buttons" @close="closeDialog" name="PasswordReset">
+        <div>
+            <label>{{ $t("passwordReset.email") }} <input type="email" v-model="email" required /></label>
+        </div>
+    </DialogWidget>
+</template>
+
+<script>
+import apiClient from '@/utils/axios.js';
+import DialogWidget from '@/components/DialogWidget.vue';
+
+export default {
+    name: 'PasswordResetDialog',
+    components: {
+        DialogWidget,
+    },
+    data() {
+        return {
+            email: '',
+            buttons: [{ text: this.$t("passwordReset.reset") }]
+        };
+    },
+    methods: {
+        open() {
+            this.$refs.dialog.open();
+        },
+        closeDialog() {
+            this.$refs.dialog.close();
+        },
+        async resetPassword() {
+            try {
+                await apiClient.post('/api/users/requestPasswordReset', {
+                    email: this.email
+                });
+                this.$refs.dialog.close();
+                alert(this.$t("passwordReset.success"));
+            } catch (error) {
+                console.error('Error resetting password:', error);
+                alert(this.$t("passwordReset.failure"));
+            }
+        }
+    }
+};
+</script>

frontend/src/dialogues/auth/RegisterDialog.vue

@@ -0,0 +1,134 @@
+<template>
+    <DialogWidget ref="dialog" title="register.title" :show-close="true" :buttons="buttons" :modal="true"
+        @close="closeDialog" @register="register" width="35em" height="33em" name="RegisterDialog"
+        :isTitleTranslated="true">
+        <div class="form-content">
+            <div>
+                <label>{{ $t("register.email") }}<input type="email" v-model="email" /></label>
+            </div>
+            <div>
+                <label>{{ $t("register.username") }}<input type="text" v-model="username" /></label>
+            </div>
+            <div>
+                <label>{{ $t("register.password") }}<input type="password" v-model="password" /></label>
+            </div>
+            <div>
+                <label>{{ $t("register.repeatPassword") }}<input type="password" v-model="repeatPassword" /></label>
+            </div>
+            <div>
+                <label>{{ $t("register.language") }}<select v-model="language">
+                        <option value="en">{{ $t("register.languages.en") }}</option>
+                        <option value="de">{{ $t("register.languages.de") }}</option>
+                    </select></label>
+            </div>
+        </div>
+        <ErrorDialog ref="errorDialog" />
+    </DialogWidget>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+import apiClient from '@/utils/axios.js';
+import DialogWidget from '@/components/DialogWidget.vue';
+import ErrorDialog from '@/dialogues/standard/ErrorDialog.vue';
+
+export default {
+    name: 'RegisterDialog',
+    components: {
+        DialogWidget,
+        ErrorDialog,
+    },
+    data() {
+        return {
+            email: '',
+            username: '',
+            password: '',
+            repeatPassword: '',
+            language: this.getBrowserLanguage(),
+            buttons: [
+                { text: 'register.close', action: 'close' },
+                { text: 'register.register', action: 'register', disabled: !this.canRegister }
+            ]
+        };
+    },
+    computed: {
+        canRegister() {
+            return this.password && this.repeatPassword && this.password === this.repeatPassword;
+        }
+    },
+    watch: {
+        canRegister(newValue) {
+            this.buttons[1].disabled = !newValue;
+        }
+    },
+    methods: {
+        ...mapActions(['login']),
+        getBrowserLanguage() {
+            const browserLanguage = navigator.language || navigator.languages[0];
+            if (browserLanguage.startsWith('de')) {
+                return 'de';
+            } else {
+                return 'en';
+            }
+        },
+        open() {
+            this.$refs.dialog.open();
+        },
+        closeDialog() {
+            this.$refs.dialog.close();
+        },
+        async register() {
+            if (!this.canRegister) {
+                console.log('pw-fehler');
+                this.$refs.errorDialog.open('tr:register.passwordMismatch');
+                return;
+            }
+
+            try {
+                const response = await apiClient.post('/api/auth/register', {
+                    email: this.email,
+                    username: this.username,
+                    password: this.password,
+                    language: this.language
+                });
+
+                if (response.status === 201) {
+                    console.log(response.data);
+                    this.login(response.data);
+                    this.$refs.dialog.close();
+                    this.$router.push('/activate');
+                } else {
+                    this.$refs.errorDialog.open("tr:register.failure");
+                }
+            } catch (error) {
+                if (error.response && error.response.status === 409) {
+                    this.$refs.errorDialog.open('tr:register.' + error.response.data.error);
+                } else {
+                    console.error('Error registering user:', error);
+                    this.$refs.errorDialog.open('tr:register.' + error.response.data.error);
+                }
+            }
+        }
+    }
+};
+</script>
+
+<style scoped>
+.form-content>div {
+    margin-bottom: 1em;
+}
+
+label {
+    display: block;
+    margin-bottom: 0.5em;
+}
+
+input[type="email"],
+input[type="text"],
+input[type="password"],
+select {
+    width: 100%;
+    padding: 0.5em;
+    box-sizing: border-box;
+}
+</style>

frontend/src/dialogues/chat/RandomChatDialog.vue

@@ -1,6 +1,6 @@
 <template>
-    <DialogWidget ref="dialog" title="randomchat.title" icon="dice24.png" :show-close="true" :buttons="buttons"
-        :modal="false" :isTitleTranslated="true" @close="closeDialog">
+    <DialogWidget ref="dialog" title="randomchat.title" icon="dice24.png" :show-close=true :buttons="buttons"
+        :modal=false :isTitleTranslated=true @close="closeDialog" name="RandomChat">
         <div v-if="chatIsRunning" class="randomchat">
             <div class="headline">
                 {{ $t("randomchat.agerange") }}

frontend/src/dialogues/standard/DataPrivacyDialog.vue

@@ -2,11 +2,11 @@
     <DialogWidget
         ref="dialog"
         title="dataPrivacy.title"
-        isTitleTranslated=true
+        :isTitleTranslated=true
         icon="privacy24.png"
-        :show-close="true"
+        :show-close=true
         :buttons="[{ text: 'Ok' }]"
-        :modal="false"
+        :modal=false
         @close="closeDialog"
         @ok="handleOk"
     >

frontend/src/dialogues/standard/ErrorDialog.vue

@@ -0,0 +1,52 @@
+<template>
+    <DialogWidget ref="dialog" title="error.title" :show-close="true" :buttons="buttons" :modal="true" width="25em"
+        height="15em" name="ErrorDialog" :isTitleTranslated=true>
+        <div class="error-content">
+            <p>{{ translatedErrorMessage }}</p>
+        </div>
+    </DialogWidget>
+</template>
+
+<script>
+import DialogWidget from '@/components/DialogWidget.vue';
+
+export default {
+    name: 'ErrorDialog',
+    components: {
+        DialogWidget,
+    },
+    data() {
+        return {
+            errorMessage: '',
+            buttons: [
+                { text: 'error.close', action: 'close' }
+            ]
+        };
+    },
+    computed: {
+        translatedErrorMessage() {
+            if (this.errorMessage.startsWith('tr:')) {
+                return this.$t(this.errorMessage.substring(3));
+            }
+            return this.errorMessage;
+        }
+    },
+    methods: {
+        open(message) {
+            this.errorMessage = message;
+            this.$refs.dialog.open();
+        },
+        close() {
+            this.$refs.dialog.close();
+        }
+    }
+};
+</script>
+
+<style scoped>
+.error-content {
+    padding: 1em;
+    color: red;
+    text-align: center;
+}
+</style>

frontend/src/dialogues/standard/ImprintDialog.vue

@@ -2,11 +2,11 @@
     <DialogWidget
         ref="dialog"
         title="imprint.title"
-        isTitleTranslated=true
+        :isTitleTranslated=true
         icon="imprint24.png"
         :show-close="true"
         :buttons="[{ text: 'Ok' }]"
-        :modal="false"
+        :modal=false
         @close="closeDialog"
         @ok="handleOk"
     >