generated from nhcarrigan/template
feat: implement user profiles with achievements and primary badge system (#58)
## Summary This PR implements comprehensive user profile enhancements including: - User profile pages showing stats, badges, social links, and bio - Achievement system with 62 achievements across 5 categories - Primary badge selection allowing users to display their preferred badge - Admin profile editing capabilities ## Changes ### User Profiles (#45) - **Frontend**: User profile pages with stats display - Profile cards showing avatar, display name, username, and bio - Social links section (Website, GitHub, Bluesky, LinkedIn, Twitch, YouTube, Discord) - Stats display (suggestions, accepted suggestions, likes, comments) - Recent achievements section - Badge display - Report button for other users' profiles - **Backend**: Profile API endpoints - Get user profile by username or ID - Profile includes stats, badges, and achievement points ### Achievement System (#48) - **Database**: UserAchievement model for tracking progress - **62 Total Achievements** across 5 categories: - **Suggestions (15)**: First suggestion through ultimate curator - **Likes (12)**: First like through legendary fan - **Comments (12)**: First comment through review legend - **Engagement (15)**: Login streaks and activity milestones - **Reports (8)**: Valid reports and accuracy tracking - **Backend**: AchievementService with real-time checking - Integrated into all user interaction points - API endpoints for achievement data - Progress tracking to avoid recalculation - **Frontend**: Achievements page and profile integration - Full achievements page with category filtering - Tier-based styling (Bronze, Silver, Gold, Platinum, Diamond) - Progress indicators for in-progress achievements - Recent achievements on profile pages ### Primary Badge System (#49) - **Database**: Add primaryBadge field to User model - **Backend**: Update profile endpoints to include primary badge - **Frontend**: Primary badge selection in settings - Only shows badges the user has earned - Displayed on profile page - Displayed in comments (next to username) - Falls back to no badge if selection is invalid - **Admin Features**: Admin can edit any user's primary badge ### Admin Enhancements - Comprehensive profile editing modal for admins - Edit display name, bio, slug, social links - Set primary badge for users - Visual feedback for save/error states - Admin action buttons in report review modals - Ban user, delete comment, edit profile - Integrated with report workflow ### Quality Improvements - Improved dropdown option contrast for readability - Hide all badges when no primary badge is selected - "View All" achievements link only shown on own profile - Improved achievement text readability ## Testing - ✅ User profiles display correctly with stats and badges - ✅ Achievement checking works for all interaction types - ✅ Primary badge selection persists and displays correctly - ✅ Admin profile editing saves successfully - ✅ Report workflow integrated with admin actions - ✅ Achievements page shows all 62 achievements with filtering - ✅ Text readability improved across components Closes #45 Closes #48 Closes #49 Co-authored-by: Hikari <hikari@nhcarrigan.com> Reviewed-on: #58 Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com> Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>
This commit was merged in pull request #58.
This commit is contained in:
@@ -0,0 +1,398 @@
|
||||
/**
|
||||
* @copyright 2026 NHCarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
|
||||
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';
|
||||
|
||||
@Component({
|
||||
selector: 'app-report-modal',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule],
|
||||
template: `
|
||||
<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">{{ modalTitle() }}</h2>
|
||||
<button
|
||||
class="close-button"
|
||||
(click)="onClose()"
|
||||
aria-label="Close modal"
|
||||
type="button"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<p class="report-info">
|
||||
{{ reportInfo() }}
|
||||
</p>
|
||||
|
||||
<form (ngSubmit)="onSubmit()" #reportForm="ngForm">
|
||||
<div class="form-group">
|
||||
<label for="reason">Reason *</label>
|
||||
<select
|
||||
id="reason"
|
||||
name="reason"
|
||||
[(ngModel)]="selectedReason"
|
||||
required
|
||||
class="form-control"
|
||||
aria-required="true"
|
||||
>
|
||||
<option value="" disabled>Select a reason</option>
|
||||
<option [value]="ReportReason.INAPPROPRIATE_CONTENT">Inappropriate Content</option>
|
||||
<option [value]="ReportReason.HARASSMENT">Harassment</option>
|
||||
<option [value]="ReportReason.SPAM">Spam</option>
|
||||
<option [value]="ReportReason.IMPERSONATION">Impersonation</option>
|
||||
<option [value]="ReportReason.OFFENSIVE_NAME">Offensive Name</option>
|
||||
<option [value]="ReportReason.MALICIOUS_LINKS">Malicious Links</option>
|
||||
<option [value]="ReportReason.OTHER">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="details">Details *</label>
|
||||
<textarea
|
||||
id="details"
|
||||
name="details"
|
||||
[(ngModel)]="details"
|
||||
required
|
||||
minlength="10"
|
||||
maxlength="1000"
|
||||
rows="5"
|
||||
class="form-control"
|
||||
placeholder="Please provide specific details about why you are reporting this profile (10-1000 characters)"
|
||||
aria-required="true"
|
||||
[attr.aria-invalid]="detailsInvalid()"
|
||||
></textarea>
|
||||
<div class="character-count" [class.invalid]="detailsInvalid()">
|
||||
{{ details().length }} / 1000 characters
|
||||
@if (details().length < 10 && details().length > 0) {
|
||||
<span class="error-text">(minimum 10 characters)</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
class="button button-secondary"
|
||||
(click)="onClose()"
|
||||
[disabled]="submitting()"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="button button-danger"
|
||||
[disabled]="!reportForm.valid || submitting()"
|
||||
>
|
||||
@if (submitting()) {
|
||||
<span>Submitting...</span>
|
||||
} @else {
|
||||
<span>Submit Report</span>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.modal-card {
|
||||
background: var(--card-background, #1a1a2e);
|
||||
border-radius: 12px;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.5rem;
|
||||
border-bottom: 2px solid rgba(155, 89, 182, 0.3);
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
margin: 0;
|
||||
color: var(--accent-colour, #9b59b6);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 2rem;
|
||||
color: var(--text-colour, #e0e0e0);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
line-height: 1;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
color: var(--accent-colour, #9b59b6);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.report-info {
|
||||
margin: 0 0 1.5rem 0;
|
||||
color: var(--text-colour, #e0e0e0);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.report-info strong {
|
||||
color: var(--accent-colour, #9b59b6);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-colour, #e0e0e0);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
background: rgba(155, 89, 182, 0.1);
|
||||
border: 2px solid rgba(155, 89, 182, 0.3);
|
||||
border-radius: 8px;
|
||||
color: var(--text-colour, #e0e0e0);
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-colour, #9b59b6);
|
||||
}
|
||||
|
||||
.form-control:invalid:not(:focus):not(:placeholder-shown) {
|
||||
border-color: var(--error-colour, #c41e3a);
|
||||
}
|
||||
|
||||
textarea.form-control {
|
||||
resize: vertical;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
select.form-control {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e0e0e0"><path d="M7 10l5 5 5-5z"/></svg>');
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0.75rem center;
|
||||
background-size: 1.5rem;
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
|
||||
select.form-control option {
|
||||
background: #2d2d2d;
|
||||
color: #e0e0e0;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.character-count {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-muted, #a0a0a0);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.character-count.invalid {
|
||||
color: var(--error-colour, #c41e3a);
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: var(--error-colour, #c41e3a);
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 2px solid rgba(155, 89, 182, 0.3);
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
background: rgba(155, 89, 182, 0.2);
|
||||
color: var(--text-colour, #e0e0e0);
|
||||
border: 2px solid rgba(155, 89, 182, 0.3);
|
||||
}
|
||||
|
||||
.button-secondary:hover:not(:disabled) {
|
||||
background: rgba(155, 89, 182, 0.3);
|
||||
border-color: var(--accent-colour, #9b59b6);
|
||||
}
|
||||
|
||||
.button-danger {
|
||||
background: linear-gradient(135deg, #c41e3a 0%, #e74c3c 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.button-danger:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(196, 30, 58, 0.4);
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class ReportModalComponent {
|
||||
private reportService = inject(ReportService);
|
||||
private commentReportService = inject(CommentReportService);
|
||||
private toastService = inject(ToastService);
|
||||
|
||||
// Inputs
|
||||
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>();
|
||||
|
||||
// State
|
||||
selectedReason = signal<string>('');
|
||||
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;
|
||||
|
||||
/**
|
||||
* Check if details are invalid (less than 10 characters or more than 1000).
|
||||
*/
|
||||
detailsInvalid(): boolean {
|
||||
const length = this.details().length;
|
||||
return (length > 0 && length < 10) || length > 1000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle overlay click to close modal.
|
||||
*/
|
||||
onOverlayClick(event: MouseEvent): void {
|
||||
if ((event.target as HTMLElement).classList.contains('modal-overlay')) {
|
||||
this.onClose();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Close the modal.
|
||||
*/
|
||||
onClose(): void {
|
||||
this.closeModal.emit();
|
||||
}
|
||||
|
||||
/**
|
||||
* Submit the report.
|
||||
*/
|
||||
onSubmit(): void {
|
||||
// Validate form
|
||||
if (!this.selectedReason() || this.detailsInvalid()) {
|
||||
this.toastService.error('Please fill in all required fields correctly');
|
||||
return;
|
||||
}
|
||||
|
||||
this.submitting.set(true);
|
||||
|
||||
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 or rate limit)
|
||||
if (err.status === 409 && err.error?.error) {
|
||||
this.toastService.error(err.error.error);
|
||||
} else {
|
||||
this.toastService.error('Failed to submit report. Please try again.');
|
||||
}
|
||||
this.submitting.set(false);
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user