feat(Chat): implement chat incident reporting feature
All checks were successful
Deploy to production / deploy (push) Successful in 1m57s

- Added reportChatIncident method in ChatController to handle reporting of chat incidents.
- Introduced a new API route for reporting incidents in chatRouter.
- Implemented chatService methods to ensure the chat report table is created and to handle incident data storage.
- Enhanced frontend components to allow users to report incidents in both multi and random chat dialogs.
- Updated internationalization files to include new strings for reporting functionality in multiple languages.
This commit is contained in:
Torsten Schulz (local)
2026-04-27 15:00:52 +02:00
parent 90e1c0496a
commit ff68fb72c4
12 changed files with 297 additions and 8 deletions

View File

@@ -197,6 +197,9 @@
<img @click="action" src="/images/icons/activity.png" class="icon-btn"
:class="{ disabled: !selectedTargetUser }" :alt="$t('chat.multichat.action')"
:title="selectedTargetUser ? $t('chat.multichat.action_to', { to: selectedTargetUser }) : $t('chat.multichat.action_select_user')" />
<button type="button" class="send-btn report-btn" :disabled="!selectedTargetUser" @click="reportSelectedUser">
{{ $t('chat.multichat.report') }}
</button>
<img @click="roll" src="/images/icons/dice24.png" class="icon-btn" alt="Würfeln" title="Würfeln" />
<img @click="openColorPicker" src="/images/icons/colorpicker.png" class="icon-btn"
:alt="$t('chat.multichat.colorpicker')" :title="$t('chat.multichat.colorpicker')" />
@@ -236,7 +239,7 @@
<script>
import DialogWidget from '@/components/DialogWidget.vue';
import { fetchPublicRooms, fetchRoomCreateOptions, fetchOwnRooms } from '@/api/chatApi.js';
import { fetchPublicRooms, fetchRoomCreateOptions, fetchOwnRooms, reportChatIncident } from '@/api/chatApi.js';
import { mapGetters } from 'vuex';
import { getChatWsUrl, getChatWsCandidates, getChatWsProtocols } from '@/services/chatWs.js';
import { confirmAction } from '@/utils/feedback.js';
@@ -1305,6 +1308,41 @@ export default {
this.sendWithToken(payload);
this.input = '';
},
async reportSelectedUser() {
if (!this.selectedTargetUser || !this.messages.length) return;
const confirmed = await confirmAction(this, {
title: this.$t('chat.multichat.reportConfirmTitle'),
message: this.$t('chat.multichat.reportConfirmMessage', { user: this.selectedTargetUser })
});
if (!confirmed) return;
const payload = {
context: 'multi_chat',
reporterHashedId: this.user?.hashedId || null,
reporterUsername: this.user?.username || null,
offenderUsername: this.selectedTargetUser,
incidentAt: new Date().toISOString(),
chatHistory: this.messages.map((entry) => ({
type: entry?.type || 'message',
user: entry?.user || '',
text: entry?.action
? `${entry.action} ${entry.to || ''}`.trim()
: (entry?.text || ''),
timestamp: Date.now(),
})),
metadata: {
roomId: this.selectedRoom || null,
roomName: this.getSelectedRoomName() || null,
usersInRoom: this.usersInRoom.map((u) => u.name),
}
};
try {
await reportChatIncident(payload);
this.messages.push({ id: Date.now(), user: 'System', text: this.$t('chat.multichat.reportSent') });
} catch (_) {
this.messages.push({ id: Date.now(), user: 'System', text: this.$t('chat.multichat.reportError') });
}
},
roll() {
const payload = { type: 'dice', message: '' };
if (this.debug) console.log('[Chat WS >>]', payload);