Add password reset localization and chat configuration

- Implemented German and English localization for password reset functionality.
- Added WebSocket URL resolution logic in chat services to support various environments and configurations.
- Created centralized chat configuration for event keys and payload mappings.
- Developed RoomsView component for admin chat room management, including create, edit, and delete functionalities.

frontend/src/views/admin/RoomDialog.vue

@@ -1,175 +0,0 @@
-<template>
-  <DialogWidget ref="dialog" :title="$t(room && room.id ? 'admin.chatrooms.edit' : 'admin.chatrooms.create')"
-    :show-close="true" :buttons="buttons" name="RoomDialog" :modal="true" :isTitleTranslated="true"
-    @close="closeDialog">
-    <form class="dialog-form" @submit.prevent="save">
-      <label>
-        {{ $t('admin.chatrooms.title') }}
-        <input v-model="localRoom.title" required />
-      </label>
-      <label>
-        {{ $t('admin.chatrooms.type') }}
-        <select v-model="localRoom.roomTypeId" required>
-          <option v-for="type in roomTypes" :key="type.id" :value="type.id">{{ type.tr }}</option>
-        </select>
-      </label>
-      <label>
-        <input type="checkbox" v-model="localRoom.isPublic" />
-        {{ $t('admin.chatrooms.isPublic') }}
-      </label>
-      <label>
-        <input type="checkbox" v-model="showGenderRestriction" />
-        {{ $t('admin.chatrooms.genderRestriction.show') }}
-      </label>
-      <label v-if="showGenderRestriction">
-        {{ $t('admin.chatrooms.genderRestriction.label') }}
-        <select v-model="localRoom.genderRestrictionId">
-          <option v-for="g in genderRestrictions" :key="g.id" :value="g.id">{{ g.tr }}</option>
-        </select>
-      </label>
-      <label>
-        <input type="checkbox" v-model="showMinAge" />
-        {{ $t('admin.chatrooms.minAge.show') }}
-      </label>
-      <label v-if="showMinAge">
-        {{ $t('admin.chatrooms.minAge.label') }}
-        <input v-model.number="localRoom.minAge" type="number" />
-      </label>
-      <label>
-        <input type="checkbox" v-model="showMaxAge" />
-        {{ $t('admin.chatrooms.maxAge.show') }}
-      </label>
-      <label v-if="showMaxAge">
-        {{ $t('admin.chatrooms.maxAge.label') }}
-        <input v-model.number="localRoom.maxAge" type="number" />
-      </label>
-      <label>
-        <input type="checkbox" v-model="showPassword" />
-        {{ $t('admin.chatrooms.password.show') }}
-      </label>
-      <label v-if="showPassword">
-        {{ $t('admin.chatrooms.password.label') }}
-        <input v-model="localRoom.password" type="password" />
-      </label>
-      <label>
-        <input type="checkbox" v-model="localRoom.friendsOfOwnerOnly" />
-        {{ $t('admin.chatrooms.friendsOfOwnerOnly') }}
-      </label>
-      <label>
-        <input type="checkbox" v-model="showRequiredUserRight" />
-        {{ $t('admin.chatrooms.requiredUserRight.show') }}
-      </label>
-      <label v-if="showRequiredUserRight">
-        {{ $t('admin.chatrooms.requiredUserRight.label') }}
-        <select v-model="localRoom.requiredUserRightId">
-          <option v-for="r in userRights" :key="r.id" :value="r.id">{{ r.tr }}</option>
-        </select>
-      </label>
-    </form>
-  </DialogWidget>
-</template>
-<script>
-
-import DialogWidget from '@/components/DialogWidget.vue';
-
-export default {
-  name: 'RoomDialog',
-  props: {
-    modelValue: Boolean,
-    room: Object
-  },
-  data() {
-    return {
-  dialog: null,
-  localRoom: this.room ? { ...this.room } : { title: '', isPublic: true },
-      roomTypes: [],
-      genderRestrictions: [],
-      userRights: [],
-      showGenderRestriction: !!(this.room && this.room.genderRestrictionId),
-      showMinAge: !!(this.room && this.room.minAge),
-      showMaxAge: !!(this.room && this.room.maxAge),
-      showPassword: !!(this.room && this.room.password),
-      showRequiredUserRight: !!(this.room && this.room.requiredUserRightId),
-      buttons: [
-        { text: 'common.save', action: this.save },
-        { text: 'common.cancel', action: this.closeDialog }
-      ]
-  },
-  watch: {
-    room: {
-      handler(newVal) {
-        this.localRoom = newVal ? { ...newVal } : { title: '', isPublic: true };
-        this.showGenderRestriction = !!(newVal && newVal.genderRestrictionId);
-        this.showMinAge = !!(newVal && newVal.minAge);
-        this.showMaxAge = !!(newVal && newVal.maxAge);
-        this.showPassword = !!(newVal && newVal.password);
-        this.showRequiredUserRight = !!(newVal && newVal.requiredUserRightId);
-      },
-      immediate: true
-    }
-  },
-  mounted() {
-  this.dialog = this.$refs.dialog;
-  this.fetchRoomTypes();
-  this.fetchGenderRestrictions();
-  this.fetchUserRights();
-  },
-  methods: {
-    async fetchRoomTypes() {
-      // API-Call, z.B. this.roomTypes = await apiClient.get('/api/room-types')
-    },
-    async fetchGenderRestrictions() {
-      // API-Call, z.B. this.genderRestrictions = await apiClient.get('/api/gender-restrictions')
-    },
-    async fetchUserRights() {
-      // API-Call, z.B. this.userRights = await apiClient.get('/api/user-rights')
-    },
-    open(roomData) {
-      this.localRoom = roomData ? { ...roomData } : { title: '', isPublic: true };
-      this.dialog.open();
-    },
-    closeDialog() {
-      this.dialog.close();
-    },
-    save() {
-      this.$emit('save', this.localRoom);
-      this.closeDialog();
-    }
-  }
-}
-</script>
-<style scoped>
-.room-dialog-content {
-  padding: 16px;
-}
-.dialog-title {
-  font-weight: bold;
-  font-size: 1.2em;
-  margin-bottom: 12px;
-  display: block;
-}
-.dialog-fields > * {
-  margin-bottom: 8px;
-}
-.dialog-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  margin-top: 16px;
-}
-.save-btn, .cancel-btn {
-  padding: 6px 18px;
-  border: none;
-  border-radius: 3px;
-  background: #eee;
-  cursor: pointer;
-}
-.save-btn {
-  background: #1976d2;
-  color: #fff;
-}
-.cancel-btn {
-  background: #eee;
-  color: #333;
-}
-</style>

frontend/src/views/admin/RoomsView.vue

@@ -0,0 +1,113 @@
+<template>
+    <div class="admin-chat-rooms">
+        <h2>{{ $t('admin.chatrooms.title') }}</h2>
+        <button class="create-btn" @click="openCreateDialog">{{ $t('admin.chatrooms.create') }}</button>
+        <table class="rooms-table">
+            <thead>
+                <tr>
+                    <th>{{ $t('admin.chatrooms.roomName') }}</th>
+                    <th>{{ $t('admin.chatrooms.type') }}</th>
+                    <th>{{ $t('admin.chatrooms.isPublic') }}</th>
+                    <th>{{ $t('admin.chatrooms.actions') }}</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="room in rooms" :key="room.id">
+                    <td>{{ room.title }}</td>
+                    <td>{{ room.roomTypeTr || room.roomTypeId }}</td>
+                    <td>{{ room.isPublic ? $t('common.yes') : $t('common.no') }}</td>
+                    <td>
+                        <button @click="editRoom(room)">{{ $t('common.edit') }}</button>
+                        <button @click="deleteRoom(room)">{{ $t('common.delete') }}</button>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    <RoomDialog ref="roomDialog" :room="selectedRoom" @save="saveRoom" />
+    <ChooseDialog ref="chooseDialog" />
+    </div>
+</template>
+
+<script>
+import RoomDialog from '@/dialogues/admin/RoomDialog.vue';
+import ChooseDialog from '@/dialogues/standard/ChooseDialog.vue';
+import apiClient from '@/utils/axios.js';
+
+export default {
+    name: 'RoomsView',
+    components: { RoomDialog, ChooseDialog },
+    data() {
+        return {
+            rooms: [],
+            selectedRoom: null,
+        }
+    },
+    mounted() {
+        this.fetchRooms();
+    },
+    methods: {
+        openCreateDialog() {
+            this.selectedRoom = null;
+            this.$refs.roomDialog.open();
+        },
+        editRoom(room) {
+            this.selectedRoom = { ...room };
+            this.$refs.roomDialog.open(this.selectedRoom);
+        },
+        async deleteRoom(room) {
+            if (!room.id) return;
+            const confirmed = await this.$refs.chooseDialog.open({
+                title: this.$t('common.confirm'),
+                message: this.$t('admin.chatrooms.confirmDelete')
+            });
+            if (!confirmed) return;
+            await apiClient.delete(`/api/admin/chat/rooms/${room.id}`);
+            this.fetchRooms();
+        },
+        async fetchRooms() {
+            const res = await apiClient.get('/api/admin/chat/rooms');
+            this.rooms = res.data;
+        },
+        async saveRoom(roomData) {
+            // Remove forbidden and associated object fields before sending to backend
+            const { id, ownerId, passwordHash, roomType, genderRestriction, ...cleanData } = roomData;
+            if (roomData.id) {
+                await apiClient.put(`/api/admin/chat/rooms/${roomData.id}`, cleanData);
+            } else {
+                await apiClient.post('/api/admin/chat/rooms', cleanData);
+            }
+            this.fetchRooms();
+        },
+    },
+}
+</script>
+
+<style scoped>
+.admin-chat-rooms {
+    max-width: 900px;
+    margin: 0 auto;
+}
+.create-btn {
+    margin-bottom: 12px;
+    padding: 6px 18px;
+    border: none;
+    border-radius: 3px;
+    background: #1976d2;
+    color: #fff;
+    cursor: pointer;
+}
+.rooms-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+.rooms-table th, .rooms-table td {
+    border: 1px solid #ddd;
+    padding: 8px;
+}
+.rooms-table th {
+    background: #f5f5f5;
+}
+.rooms-table td button {
+    margin-right: 6px;
+}
+</style>

frontend/src/views/home/NoLoginView.vue

@@ -68,13 +68,16 @@ export default {
     methods: {
         ...mapActions(['login']),
         openRandomChat() {
-            this.$refs.randomChatDialog.open();
+            const dlg = this.$refs.randomChatDialog;
+            if (dlg && typeof dlg.open === 'function') dlg.open();
         },
         openRegisterDialog() {
-            this.$refs.registerDialog.open();
+            const dlg = this.$refs.registerDialog;
+            if (dlg && typeof dlg.open === 'function') dlg.open();
         },
         openPasswordResetDialog() {
-            this.$refs.passwordResetDialog.open();
+            const dlg = this.$refs.passwordResetDialog;
+            if (dlg && typeof dlg.open === 'function') dlg.open();
         },
         focusPassword() {
             this.$refs.passwordInput.focus();

frontend/src/views/social/DiaryView.vue

@@ -14,7 +14,7 @@
     <div v-if="diaryEntries.length === 0">{{ $t('socialnetwork.diary.noEntries') }}</div>
     <div v-else class="diary-entries">
         <div v-for="entry in diaryEntries" :key="entry.id" class="diary-entry">
-            <p v-html="entry.text"></p>
+            <p v-html="sanitizedText(entry)"></p>
             <div class="entry-info">
                 <span class="entry-timestamp">{{ new Date(entry.createdAt).toLocaleString() }}</span>
                 <span class="entry-actions">
@@ -39,6 +39,7 @@
 import { mapGetters } from 'vuex';
 import apiClient from '@/utils/axios.js';
 import ChooseDialog from "@/dialogues/standard/ChooseDialog.vue";
+import DOMPurify from 'dompurify';
 
 export default {
     name: 'DiaryView',
@@ -59,6 +60,9 @@ export default {
         ...mapGetters(['user']),
     },
     methods: {
+        sanitizedText(entry) {
+            return DOMPurify.sanitize(entry.text);
+        },
         async loadDiaryEntries(page) {
             try {
                 console.log(page);

frontend/src/views/social/ForumTopicView.vue

@@ -3,7 +3,7 @@
     <h3 v-if="forumTopic">{{ forumTopic }}</h3>
     <ul class="messages">
         <li v-for="message in messages" :key="message.id">
-            <div v-html="message.text"></div>
+            <div v-html="sanitizedMessage(message)"></div>
             <div class="footer">
                 <span class="link" @click="openProfile(message.lastMessageUser.hashedId)">
                     {{ message.lastMessageUser.username }}
@@ -23,6 +23,7 @@
 import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import apiClient from '../../utils/axios'
+import DOMPurify from 'dompurify'
 
 export default {
     name: 'ForumTopicView',
@@ -87,6 +88,9 @@ export default {
         },
         openForum() {
             this.$router.push(`/socialnetwork/forum/${this.forumId}`);
+        },
+        sanitizedMessage(message) {
+            return DOMPurify.sanitize(message.text);
         }
     }
 }

frontend/src/views/social/GuestbookView.vue

@@ -7,7 +7,7 @@
             <div v-for="entry in guestbookEntries" :key="entry.id" class="guestbook-entry">
                 <img v-if="entry.image" :src="entry.image.url" alt="Entry Image"
                     style="max-width: 400px; max-height: 400px;" />
-                <p v-html="entry.contentHtml"></p>
+                <p v-html="sanitizedContent(entry)"></p>
                 <div class="entry-info">
                     <span class="entry-timestamp">{{ new Date(entry.createdAt).toLocaleString() }}</span>
                     <span class="entry-user">
@@ -30,6 +30,7 @@
 <script>
 import { mapActions, mapGetters } from 'vuex';
 import apiClient from '@/utils/axios.js';
+import DOMPurify from 'dompurify';
 
 export default {
     name: 'GuestbookView',
@@ -73,6 +74,9 @@ export default {
                 console.error('Error fetching image:', error);
             }
         },
+        sanitizedContent(entry) {
+            return DOMPurify.sanitize(entry.contentHtml);
+        },
     },
     mounted() {
         this.loadGuestbookEntries(1);