generated from nhcarrigan/template
feat: base64 uploads, reusable forms, Discord roles, and UX improvements (#66)
## Summary This PR includes multiple feature additions and fixes to improve the library application: ### 🎨 Base64 Image Upload Support - Fixed Fastify body limit (1MB → 10MB) to accommodate base64-encoded images - Corrected base64 size calculation and validation logic - Improved error handling with proper 400 status codes and helpful messages - Removed duplicate validation that was blocking uploads - Users can now upload cover images up to 5MB (decoded size) ### 📝 Reusable Form Components - Created 6 form components: `GameForm`, `BookForm`, `MusicForm`, `ShowForm`, `MangaForm`, `ArtForm` - All forms support both 'add' and 'edit' modes with pre-population - Integrated inline editing into all detail views (edit/delete buttons) - Enhanced admin suggestions workflow with full forms instead of basic modals - Added scroll-to-top when clicking edit in list views for better UX ### 🖼️ Default Cover Image - Added beautiful library reading image as default cover for all media types - Fixed static asset serving to use correct MIME types - Updated all 12 components (6 list views + 6 detail views) to always show images ### 🔒 Tiered Rate Limiting - Unauthenticated users: 100 requests/minute - Authenticated users: 500 requests/minute (5x more lenient) - Admin users: No rate limits (complete bypass via allowList) ### 🎮 Discord Integration - Auto-assign library member role to users in NHCarrigan Discord server - Checks server membership on every login - Only assigns role if user is in server and doesn't have it yet - Graceful error handling without blocking login - Similar pattern to badge refresh flow ### 📚 Documentation - Added comprehensive CLAUDE.md with: - Project structure and tech stack - Development workflow and commands - Database schema documentation - Authentication flow details - Security features - Code style conventions - Common gotchas and solutions ## Test Plan - [x] Base64 image uploads work for cover images up to 5MB - [x] Helpful error messages appear for validation failures - [x] Edit/delete buttons appear on all detail views for admin users - [x] Inline edit forms display and save correctly - [x] Admin suggestions workflow uses full forms for all media types - [x] Scroll-to-top works when editing from list views - [x] Default cover image displays when no cover is provided - [x] Static assets serve with correct MIME types - [x] Rate limiting works correctly for different user types - [x] Discord role assignment works on login - [x] All builds pass without errors - [x] No TypeScript errors ## Related Issues Closes #65 - Base64 image upload issue ✨ This pull request was created with help from Hikari~ 🌸 Reviewed-on: #66 Co-authored-by: Hikari <hikari@nhcarrigan.com> Co-committed-by: Hikari <hikari@nhcarrigan.com>
This commit was merged in pull request #66.
This commit is contained in:
@@ -14,18 +14,28 @@ import { AuthService } from '../../services/auth.service';
|
||||
import { SanitizeService } from '../../services/sanitize.service';
|
||||
import { CommentDisplayComponent } from '../comment-display/comment-display.component';
|
||||
import { LikeButtonComponent } from '../shared/like-button.component';
|
||||
import { Book, Comment, BookStatus } from '@library/shared-types';
|
||||
import { BookFormComponent } from '../shared/book-form.component';
|
||||
import { Book, Comment, BookStatus, UpdateBookDto } from '@library/shared-types';
|
||||
|
||||
@Component({
|
||||
selector: 'app-book-detail',
|
||||
standalone: true,
|
||||
imports: [CommonModule, RouterLink, FormsModule, CommentDisplayComponent, LikeButtonComponent],
|
||||
imports: [CommonModule, RouterLink, FormsModule, CommentDisplayComponent, LikeButtonComponent, BookFormComponent],
|
||||
template: `
|
||||
<div class="container">
|
||||
<div class="breadcrumb">
|
||||
<a routerLink="/books" class="breadcrumb-link">← Back to Books</a>
|
||||
</div>
|
||||
|
||||
@if (showEditForm() && authService.user()?.isAdmin && book()) {
|
||||
<app-book-form
|
||||
mode="edit"
|
||||
[book]="book()!"
|
||||
(formSubmit)="saveEdit($event)"
|
||||
(formCancel)="cancelEdit()"
|
||||
></app-book-form>
|
||||
}
|
||||
|
||||
@if (loading()) {
|
||||
<div class="loading">Loading book details...</div>
|
||||
} @else if (error()) {
|
||||
@@ -36,11 +46,9 @@ import { Book, Comment, BookStatus } from '@library/shared-types';
|
||||
</div>
|
||||
} @else if (book()) {
|
||||
<div class="book-detail-card">
|
||||
@if (book()!.coverImage) {
|
||||
<div class="book-cover-section">
|
||||
<img [src]="book()!.coverImage" [alt]="book()!.title" class="book-cover-large">
|
||||
</div>
|
||||
}
|
||||
<div class="book-cover-section">
|
||||
<img [src]="book()!.coverImage || '/assets/default-cover.jpg'" [alt]="book()!.title" class="book-cover-large">
|
||||
</div>
|
||||
|
||||
<div class="book-content">
|
||||
<div class="book-header">
|
||||
@@ -51,6 +59,12 @@ import { Book, Comment, BookStatus } from '@library/shared-types';
|
||||
</div>
|
||||
|
||||
<p class="author">by {{ book()!.author }}</p>
|
||||
@if (authService.user()?.isAdmin) {
|
||||
<div class="admin-actions">
|
||||
<button (click)="editBook()" class="btn btn-edit">✏️ Edit</button>
|
||||
<button (click)="deleteBook()" class="btn btn-delete">🗑️ Delete</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (book()!.series) {
|
||||
<p class="series">
|
||||
@@ -309,6 +323,35 @@ import { Book, Comment, BookStatus } from '@library/shared-types';
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
|
||||
.admin-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 1rem;
|
||||
background: #fef3c7;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #fbbf24;
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-edit:hover {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
.series {
|
||||
color: #8b6f47;
|
||||
font-size: 1rem;
|
||||
@@ -542,6 +585,7 @@ export class BookDetailComponent implements OnInit {
|
||||
commentsLoading = signal(false);
|
||||
error = signal<string | null>(null);
|
||||
newCommentContent = '';
|
||||
showEditForm = signal(false);
|
||||
|
||||
ngOnInit() {
|
||||
const bookId = this.route.snapshot.paramMap.get('id');
|
||||
@@ -651,4 +695,45 @@ export class BookDetailComponent implements OnInit {
|
||||
return `${hours} hour${hours === 1 ? '' : 's'} ${mins} minute${mins === 1 ? '' : 's'}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
editBook() {
|
||||
this.showEditForm.set(true);
|
||||
}
|
||||
|
||||
cancelEdit() {
|
||||
this.showEditForm.set(false);
|
||||
}
|
||||
|
||||
saveEdit(data: UpdateBookDto) {
|
||||
const book = this.book();
|
||||
if (!book) return;
|
||||
|
||||
this.booksService.updateBook(book.id, data).subscribe({
|
||||
next: (updatedBook) => {
|
||||
this.book.set(updatedBook);
|
||||
this.showEditForm.set(false);
|
||||
},
|
||||
error: (err) => {
|
||||
alert('Failed to update book: ' + (err.error?.message || 'Unknown error'));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
deleteBook() {
|
||||
const book = this.book();
|
||||
if (!book) return;
|
||||
|
||||
if (!confirm(`Are you sure you want to delete "${book.title}"? This action cannot be undone.`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.booksService.deleteBook(book.id).subscribe({
|
||||
next: () => {
|
||||
this.router.navigate(['/books']);
|
||||
},
|
||||
error: (err) => {
|
||||
alert('Failed to delete book: ' + (err.error?.message || 'Unknown error'));
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user