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.
This commit is contained in:
Torsten Schulz (local)
@@ -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>
|
||||
113
frontend/src/views/admin/RoomsView.vue
Normal file
113
frontend/src/views/admin/RoomsView.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user