generated from nhcarrigan/template
feat: implement comment reporting system
Added comprehensive comment reporting infrastructure similar to profile reporting. API Changes: - New CommentReport model in Prisma schema with relations to User and Comment - CommentReportService with CRUD operations, duplicate prevention, and rate limiting - API routes at /comment-reports for creating and managing comment reports - Updated CommentService to include hasPendingReports flag for all comments Frontend Changes: - Created shared CommentDisplayComponent for reusable comment display with report button - Updated ReportModalComponent to handle both profile and comment reports - CommentReportService for API communication - Integrated CommentDisplayComponent into games-list component - Comments with pending reports show "[comment pending admin review]" message Features: - Users can report comments they didn't write - Duplicate prevention (one pending report per comment per user) - Rate limiting (5 pending reports maximum per user) - Admins can review and action comment reports - Comments are hidden during review to prevent abuse Remaining Work: - Need to integrate CommentDisplayComponent into remaining media components (books, music, art, shows, manga) - Need to extend admin-reports page to display comment reports alongside profile reports
This commit is contained in:
@@ -0,0 +1,310 @@
|
||||
/**
|
||||
* @copyright NHCarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
import { Component, Input, Output, EventEmitter, signal, inject } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import type { Comment } from '@library/shared-types';
|
||||
import { AuthService } from '../../services/auth.service';
|
||||
import { SanitizeService } from '../../services/sanitize.service';
|
||||
import { ReportModalComponent } from '../report-modal/report-modal.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-comment-display',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule, ReportModalComponent],
|
||||
template: `
|
||||
<div class="comments-section">
|
||||
@if (comments().length > 0) {
|
||||
@for (comment of comments(); track comment.id) {
|
||||
<div class="comment">
|
||||
<div class="comment-header">
|
||||
@if (comment.user.avatar) {
|
||||
<img [src]="comment.user.avatar" [alt]="comment.user.username" class="comment-avatar">
|
||||
}
|
||||
<span class="comment-author">{{ comment.user.username }}</span>
|
||||
@if (comment.user.inDiscord) {
|
||||
<span class="discord-badge">Discord</span>
|
||||
}
|
||||
@if (comment.user.isVip) {
|
||||
<span class="vip-badge">VIP</span>
|
||||
}
|
||||
@if (comment.user.isMod) {
|
||||
<span class="mod-badge">Mod</span>
|
||||
}
|
||||
@if (comment.user.isStaff) {
|
||||
<span class="staff-badge">Staff</span>
|
||||
}
|
||||
<span class="comment-date">{{ formatDate(comment.createdAt) }}</span>
|
||||
@if (canEditComment(comment)) {
|
||||
<button (click)="startEdit(comment)" class="btn btn-secondary btn-xs">Edit</button>
|
||||
}
|
||||
@if (canDeleteComment(comment)) {
|
||||
<button (click)="onDelete.emit(comment.id)" class="btn btn-danger btn-xs">Delete</button>
|
||||
}
|
||||
@if (canReportComment(comment)) {
|
||||
<button (click)="openReportModal(comment)" class="btn btn-warning btn-xs">Report</button>
|
||||
}
|
||||
</div>
|
||||
@if (editingCommentId() === comment.id) {
|
||||
<div class="comment-edit-form">
|
||||
<textarea
|
||||
[(ngModel)]="editCommentContent"
|
||||
name="editComment"
|
||||
rows="3"
|
||||
></textarea>
|
||||
<div class="comment-edit-actions">
|
||||
<button (click)="saveEdit(comment.id)" class="btn btn-primary btn-xs">Save</button>
|
||||
<button (click)="cancelEdit()" class="btn btn-secondary btn-xs">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
} @else {
|
||||
@if (comment.hasPendingReports) {
|
||||
<div class="comment-pending-review">[comment pending admin review]</div>
|
||||
} @else {
|
||||
<div class="comment-content" [innerHTML]="sanitizeService.sanitizeHtml(comment.content)"></div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
}
|
||||
} @else {
|
||||
<div class="no-comments">No comments yet. Be the first to comment!</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (showReportModal()) {
|
||||
<app-report-modal
|
||||
[reportType]="'comment'"
|
||||
[targetId]="reportingCommentId()"
|
||||
(closeModal)="closeReportModal()"
|
||||
/>
|
||||
}
|
||||
`,
|
||||
styles: [`
|
||||
.comments-section {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.comment {
|
||||
background: #f9fafb;
|
||||
padding: 0.75rem;
|
||||
border-radius: 0.375rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.comment-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.comment-avatar {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.comment-author {
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.discord-badge,
|
||||
.vip-badge,
|
||||
.mod-badge,
|
||||
.staff-badge {
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.discord-badge {
|
||||
background: #5865f2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.vip-badge {
|
||||
background: #fbbf24;
|
||||
color: #78350f;
|
||||
}
|
||||
|
||||
.mod-badge {
|
||||
background: #10b981;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.staff-badge {
|
||||
background: #8b5cf6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.comment-date {
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
font-size: 0.9rem;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.comment-pending-review {
|
||||
font-size: 0.9rem;
|
||||
color: #9b59b6;
|
||||
font-style: italic;
|
||||
padding: 0.5rem;
|
||||
background: #f3e8ff;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.comment-edit-form {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.comment-edit-form textarea {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.375rem;
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.comment-edit-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.no-comments {
|
||||
text-align: center;
|
||||
color: #6b7280;
|
||||
padding: 2rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.25rem 0.75rem;
|
||||
border: none;
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-xs {
|
||||
padding: 0.125rem 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #6b7280;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #4b5563;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background: #f59e0b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-warning:hover {
|
||||
background: #d97706;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class CommentDisplayComponent {
|
||||
private readonly authService = inject(AuthService);
|
||||
readonly sanitizeService = inject(SanitizeService);
|
||||
|
||||
@Input({ required: true }) comments = signal<Comment[]>([]);
|
||||
@Output() onEdit = new EventEmitter<{ commentId: string; content: string }>();
|
||||
@Output() onDelete = new EventEmitter<string>();
|
||||
|
||||
editingCommentId = signal<string | null>(null);
|
||||
editCommentContent = '';
|
||||
showReportModal = signal(false);
|
||||
reportingCommentId = signal<string>('');
|
||||
|
||||
formatDate(date: Date | string): string {
|
||||
const d = new Date(date);
|
||||
return d.toLocaleDateString('en-GB', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
}
|
||||
|
||||
canEditComment(comment: Comment): boolean {
|
||||
const user = this.authService.user();
|
||||
if (!user) return false;
|
||||
return comment.userId === user.id || this.authService.isAdmin();
|
||||
}
|
||||
|
||||
canDeleteComment(comment: Comment): boolean {
|
||||
const user = this.authService.user();
|
||||
if (!user) return false;
|
||||
return comment.userId === user.id || this.authService.isAdmin();
|
||||
}
|
||||
|
||||
canReportComment(comment: Comment): boolean {
|
||||
const user = this.authService.user();
|
||||
if (!user) return false;
|
||||
// Users can report comments they didn't write (but not their own)
|
||||
return comment.userId !== user.id;
|
||||
}
|
||||
|
||||
startEdit(comment: Comment): void {
|
||||
this.editingCommentId.set(comment.id);
|
||||
this.editCommentContent = comment.rawContent ?? comment.content;
|
||||
}
|
||||
|
||||
saveEdit(commentId: string): void {
|
||||
this.onEdit.emit({ commentId, content: this.editCommentContent });
|
||||
this.cancelEdit();
|
||||
}
|
||||
|
||||
cancelEdit(): void {
|
||||
this.editingCommentId.set(null);
|
||||
this.editCommentContent = '';
|
||||
}
|
||||
|
||||
openReportModal(comment: Comment): void {
|
||||
this.reportingCommentId.set(comment.id);
|
||||
this.showReportModal.set(true);
|
||||
}
|
||||
|
||||
closeReportModal(): void {
|
||||
this.showReportModal.set(false);
|
||||
this.reportingCommentId.set('');
|
||||
}
|
||||
}
|
||||
@@ -14,12 +14,13 @@ import { SanitizeService } from '../../services/sanitize.service';
|
||||
import { SuggestionService } from '../../services/suggestion.service';
|
||||
import { PaginationComponent } from '../shared/pagination.component';
|
||||
import { LikeButtonComponent } from '../shared/like-button.component';
|
||||
import { CommentDisplayComponent } from '../comment-display/comment-display.component';
|
||||
import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEntity, Link } from '@library/shared-types';
|
||||
|
||||
@Component({
|
||||
selector: 'app-games-list',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent],
|
||||
imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent, CommentDisplayComponent],
|
||||
template: `
|
||||
<div class="container">
|
||||
<div class="header-section">
|
||||
@@ -608,52 +609,11 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
|
||||
@if (commentsLoading()[game.id]) {
|
||||
<div class="comments-loading">Loading comments...</div>
|
||||
} @else {
|
||||
@for (comment of comments()[game.id] || []; track comment.id) {
|
||||
<div class="comment">
|
||||
<div class="comment-header">
|
||||
@if (comment.user.avatar) {
|
||||
<img [src]="comment.user.avatar" [alt]="comment.user.username" class="comment-avatar">
|
||||
}
|
||||
<span class="comment-author">{{ comment.user.username }}</span>
|
||||
@if (comment.user.inDiscord) {
|
||||
<span class="discord-badge">Discord</span>
|
||||
}
|
||||
@if (comment.user.isVip) {
|
||||
<span class="vip-badge">VIP</span>
|
||||
}
|
||||
@if (comment.user.isMod) {
|
||||
<span class="mod-badge">Mod</span>
|
||||
}
|
||||
@if (comment.user.isStaff) {
|
||||
<span class="staff-badge">Staff</span>
|
||||
}
|
||||
<span class="comment-date">{{ formatDate(comment.createdAt) }}</span>
|
||||
@if (canEditComment(comment)) {
|
||||
<button (click)="startEditComment(game.id, comment)" class="btn btn-secondary btn-xs">Edit</button>
|
||||
}
|
||||
@if (canDeleteComment(comment)) {
|
||||
<button (click)="deleteComment(game.id, comment.id)" class="btn btn-danger btn-xs">Delete</button>
|
||||
}
|
||||
</div>
|
||||
@if (editingCommentId() === comment.id) {
|
||||
<div class="comment-edit-form">
|
||||
<textarea
|
||||
[(ngModel)]="editCommentContent"
|
||||
name="editComment"
|
||||
rows="3"
|
||||
></textarea>
|
||||
<div class="comment-edit-actions">
|
||||
<button (click)="saveCommentEdit(game.id, comment.id)" class="btn btn-primary btn-xs">Save</button>
|
||||
<button (click)="cancelCommentEdit()" class="btn btn-secondary btn-xs">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="comment-content" [innerHTML]="sanitizeService.sanitizeHtml(comment.content)"></div>
|
||||
}
|
||||
</div>
|
||||
} @empty {
|
||||
<div class="no-comments">No comments yet. Be the first to comment!</div>
|
||||
}
|
||||
<app-comment-display
|
||||
[comments]="getCommentsSignal(game.id)"
|
||||
(onEdit)="handleCommentEdit(game.id, $event)"
|
||||
(onDelete)="deleteComment(game.id, $event)"
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
@@ -1739,6 +1699,23 @@ export class GamesListComponent implements OnInit {
|
||||
});
|
||||
}
|
||||
|
||||
handleCommentEdit(gameId: string, event: { commentId: string; content: string }) {
|
||||
this.commentsService.updateCommentOnGame(gameId, event.commentId, event.content).subscribe({
|
||||
next: (updatedComment) => {
|
||||
this.comments.set({
|
||||
...this.comments(),
|
||||
[gameId]: (this.comments()[gameId] || []).map(c =>
|
||||
c.id === event.commentId ? updatedComment : c
|
||||
)
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getCommentsSignal(gameId: string) {
|
||||
return signal(this.comments()[gameId] || []);
|
||||
}
|
||||
|
||||
// Suggestion methods
|
||||
toggleSuggestForm() {
|
||||
this.showSuggestForm.update(v => !v);
|
||||
|
||||
@@ -158,7 +158,8 @@ import { ReportModalComponent } from '../report-modal/report-modal.component';
|
||||
|
||||
@if (reportModalOpen()) {
|
||||
<app-report-modal
|
||||
[reportedUserId]="profile()!.id"
|
||||
[reportType]="'profile'"
|
||||
[targetId]="profile()!.id"
|
||||
[reportedUsername]="profile()!.displayName || profile()!.username"
|
||||
(closeModal)="closeReportModal()"
|
||||
/>
|
||||
|
||||
@@ -4,10 +4,11 @@
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
|
||||
import { Component, inject, signal, input, output } from '@angular/core';
|
||||
import { Component, inject, signal, input, output, computed } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { ReportService } from '../../services/report.service';
|
||||
import { CommentReportService } from '../../services/comment-report.service';
|
||||
import { ToastService } from '../../services/toast.service';
|
||||
import { ReportReason } from '@library/shared-types';
|
||||
|
||||
@@ -19,7 +20,7 @@ import { ReportReason } from '@library/shared-types';
|
||||
<div class="modal-overlay" (click)="onOverlayClick($event)" (keydown.escape)="closeModal.emit()" tabindex="-1">
|
||||
<div class="modal-card" role="dialog" aria-labelledby="modal-title" aria-modal="true">
|
||||
<div class="modal-header">
|
||||
<h2 id="modal-title">Report Profile</h2>
|
||||
<h2 id="modal-title">{{ modalTitle() }}</h2>
|
||||
<button
|
||||
class="close-button"
|
||||
(click)="onClose()"
|
||||
@@ -32,8 +33,7 @@ import { ReportReason } from '@library/shared-types';
|
||||
|
||||
<div class="modal-body">
|
||||
<p class="report-info">
|
||||
You are reporting <strong>{{ reportedUsername() }}</strong>.
|
||||
Please provide a reason and details for this report.
|
||||
{{ reportInfo() }}
|
||||
</p>
|
||||
|
||||
<form (ngSubmit)="onSubmit()" #reportForm="ngForm">
|
||||
@@ -294,11 +294,13 @@ import { ReportReason } from '@library/shared-types';
|
||||
})
|
||||
export class ReportModalComponent {
|
||||
private reportService = inject(ReportService);
|
||||
private commentReportService = inject(CommentReportService);
|
||||
private toastService = inject(ToastService);
|
||||
|
||||
// Inputs
|
||||
reportedUserId = input.required<string>();
|
||||
reportedUsername = input.required<string>();
|
||||
reportType = input.required<'profile' | 'comment'>();
|
||||
targetId = input.required<string>(); // userId for profile, commentId for comment
|
||||
reportedUsername = input<string>(''); // Only used for profile reports
|
||||
|
||||
// Outputs
|
||||
closeModal = output<void>();
|
||||
@@ -308,6 +310,19 @@ export class ReportModalComponent {
|
||||
details = signal<string>('');
|
||||
submitting = signal<boolean>(false);
|
||||
|
||||
// Computed values
|
||||
modalTitle = computed(() => {
|
||||
return this.reportType() === 'profile' ? 'Report Profile' : 'Report Comment';
|
||||
});
|
||||
|
||||
reportInfo = computed(() => {
|
||||
if (this.reportType() === 'profile') {
|
||||
return `You are reporting ${this.reportedUsername()}. Please provide a reason and details for this report.`;
|
||||
} else {
|
||||
return 'You are reporting this comment. Please provide a reason and details for this report.';
|
||||
}
|
||||
});
|
||||
|
||||
// Expose enum for template
|
||||
ReportReason = ReportReason;
|
||||
|
||||
@@ -347,18 +362,30 @@ export class ReportModalComponent {
|
||||
|
||||
this.submitting.set(true);
|
||||
|
||||
this.reportService.createReport(
|
||||
this.reportedUserId(),
|
||||
this.selectedReason(),
|
||||
this.details()
|
||||
).subscribe({
|
||||
if (this.reportType() === 'profile') {
|
||||
this.reportService.createReport(
|
||||
this.targetId(),
|
||||
this.selectedReason(),
|
||||
this.details()
|
||||
).subscribe(this.getSubscribeHandlers());
|
||||
} else {
|
||||
this.commentReportService.createReport({
|
||||
reportedCommentId: this.targetId(),
|
||||
reason: this.selectedReason() as ReportReason,
|
||||
details: this.details(),
|
||||
}).subscribe(this.getSubscribeHandlers());
|
||||
}
|
||||
}
|
||||
|
||||
private getSubscribeHandlers() {
|
||||
return {
|
||||
next: () => {
|
||||
this.toastService.success('Report submitted successfully');
|
||||
this.onClose();
|
||||
},
|
||||
error: (err: { status?: number; error?: { error?: string } }) => {
|
||||
console.error('Error submitting report:', err);
|
||||
// Check if it's a conflict error (duplicate pending report)
|
||||
// Check if it's a conflict error (duplicate pending report or rate limit)
|
||||
if (err.status === 409 && err.error?.error) {
|
||||
this.toastService.error(err.error.error);
|
||||
} else {
|
||||
@@ -366,6 +393,6 @@ export class ReportModalComponent {
|
||||
}
|
||||
this.submitting.set(false);
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
/**
|
||||
* @copyright NHCarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
import { Injectable, inject } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Observable } from 'rxjs';
|
||||
import type {
|
||||
CommentReportWithDetails,
|
||||
CreateCommentReportDto,
|
||||
UpdateCommentReportDto,
|
||||
ReportStatus,
|
||||
} from '@library/shared-types';
|
||||
import { environment } from '../../environments/environment';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class CommentReportService {
|
||||
private readonly http = inject(HttpClient);
|
||||
private readonly apiUrl = `${environment.apiUrl}/comment-reports`;
|
||||
|
||||
createReport(
|
||||
dto: CreateCommentReportDto,
|
||||
): Observable<CommentReportWithDetails> {
|
||||
return this.http.post<CommentReportWithDetails>(this.apiUrl, dto);
|
||||
}
|
||||
|
||||
getAllReports(
|
||||
status?: ReportStatus,
|
||||
): Observable<CommentReportWithDetails[]> {
|
||||
const params: Record<string, string> = {};
|
||||
if (status) {
|
||||
params['status'] = status;
|
||||
}
|
||||
return this.http.get<CommentReportWithDetails[]>(this.apiUrl, { params });
|
||||
}
|
||||
|
||||
getReportById(id: string): Observable<CommentReportWithDetails> {
|
||||
return this.http.get<CommentReportWithDetails>(`${this.apiUrl}/${id}`);
|
||||
}
|
||||
|
||||
updateReport(
|
||||
id: string,
|
||||
dto: UpdateCommentReportDto,
|
||||
): Observable<CommentReportWithDetails> {
|
||||
return this.http.put<CommentReportWithDetails>(`${this.apiUrl}/${id}`, dto);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user