generated from nhcarrigan/template
feat: implement user profiles and settings
Add comprehensive user profile system allowing users to showcase their activity and customize their profiles. Database Changes: - Added profile fields to User model: slug, displayName, bio, profilePublic - Added index on slug field for efficient lookups API Changes: - Added GET /users/me endpoint to fetch current user - Added PUT /users/me endpoint to update user settings - Added GET /users/profile/:identifier endpoint for public profiles - Updated UserService with profile methods and statistics - Modified AuthService to include profile fields in user responses Frontend Changes: - Created ProfileComponent to display user profiles with stats - Created SettingsComponent for profile customization - Added profile and settings routes - Updated header dropdown menu with profile links - Enhanced UserService with profile methods - Added updateUser method to AuthService Features: - Custom profile slugs for clean URLs - Display names separate from usernames - User bios (up to 500 characters) - Public/private profile toggle - Activity statistics (suggestions, likes, comments, acceptance rate) - Badge display (Staff, Mod, VIP, Discord Member) - Beautiful witch-themed styling Closes #45
This commit is contained in:
@@ -49,6 +49,14 @@ export const appRoutes: Route[] = [
|
||||
path: 'my-likes',
|
||||
loadComponent: () => import('./components/my-likes/my-likes.component').then(m => m.MyLikesComponent)
|
||||
},
|
||||
{
|
||||
path: 'profile/:identifier',
|
||||
loadComponent: () => import('./components/profile/profile.component').then(m => m.ProfileComponent)
|
||||
},
|
||||
{
|
||||
path: 'settings',
|
||||
loadComponent: () => import('./components/settings/settings.component').then(m => m.SettingsComponent)
|
||||
},
|
||||
{
|
||||
path: '**',
|
||||
redirectTo: ''
|
||||
|
||||
@@ -50,6 +50,8 @@ import { ApiService } from '../../services/api.service';
|
||||
}
|
||||
@if (showDropdown()) {
|
||||
<div class="dropdown-menu">
|
||||
<a [routerLink]="['/profile', user.slug || user.id]" class="dropdown-item" (click)="closeDropdown()">My Profile</a>
|
||||
<a routerLink="/settings" class="dropdown-item" (click)="closeDropdown()">Settings</a>
|
||||
@if (!user.isAdmin) {
|
||||
<a routerLink="/my-suggestions" class="dropdown-item" (click)="closeDropdown()">My Suggestions</a>
|
||||
}
|
||||
|
||||
@@ -0,0 +1,304 @@
|
||||
/**
|
||||
* @copyright 2026 NHCarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
|
||||
import { Component, inject, signal, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { UserService, UserProfileResponse } from '../../services/user.service';
|
||||
import { ToastService } from '../../services/toast.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-profile',
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
template: `
|
||||
<div class="profile-container">
|
||||
@if (loading()) {
|
||||
<div class="loading">Loading profile...</div>
|
||||
} @else if (error()) {
|
||||
<div class="error">{{ error() }}</div>
|
||||
} @else if (profile()) {
|
||||
<div class="profile-card">
|
||||
<div class="profile-header">
|
||||
@if (profile()?.avatar) {
|
||||
<img [src]="profile()!.avatar" [alt]="profile()!.username" class="profile-avatar" />
|
||||
} @else {
|
||||
<div class="profile-avatar-placeholder">
|
||||
{{ profile()!.username[0]?.toUpperCase() }}
|
||||
</div>
|
||||
}
|
||||
<div class="profile-info">
|
||||
<h1 class="profile-username">{{ profile()!.displayName || profile()!.username }}</h1>
|
||||
@if (profile()!.displayName) {
|
||||
<p class="profile-handle">\@{{ profile()!.username }}</p>
|
||||
}
|
||||
@if (profile()!.slug) {
|
||||
<p class="profile-slug">library.nhcarrigan.com/profile/{{ profile()!.slug }}</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="badges-section">
|
||||
@if (profile()!.badges.isStaff) {
|
||||
<span class="badge badge-staff">Staff</span>
|
||||
}
|
||||
@if (profile()!.badges.isMod) {
|
||||
<span class="badge badge-mod">Moderator</span>
|
||||
}
|
||||
@if (profile()!.badges.isVip) {
|
||||
<span class="badge badge-vip">VIP</span>
|
||||
}
|
||||
@if (profile()!.badges.inDiscord) {
|
||||
<span class="badge badge-member">Discord Member</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (profile()!.bio) {
|
||||
<div class="bio-section">
|
||||
<p class="bio-text">{{ profile()!.bio }}</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="stats-section">
|
||||
<h2>Activity Statistics</h2>
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<span class="stat-value">{{ profile()!.stats.suggestionsCount }}</span>
|
||||
<span class="stat-label">Suggestions</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-value">{{ profile()!.stats.suggestionsAcceptedCount }}</span>
|
||||
<span class="stat-label">Accepted</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-value">{{ profile()!.stats.likesCount }}</span>
|
||||
<span class="stat-label">Likes</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-value">{{ profile()!.stats.commentsCount }}</span>
|
||||
<span class="stat-label">Comments</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<p class="member-since">Member since {{ formatDate(profile()!.createdAt) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.profile-container {
|
||||
max-width: 800px;
|
||||
margin: 2rem auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.loading, .error {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--error-colour, #c41e3a);
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
background: var(--card-background, #1a1a2e);
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.profile-avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid var(--accent-colour, #9b59b6);
|
||||
}
|
||||
|
||||
.profile-avatar-placeholder {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-colour, #9b59b6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.profile-username {
|
||||
margin: 0;
|
||||
font-size: 2rem;
|
||||
color: var(--text-colour, #e0e0e0);
|
||||
}
|
||||
|
||||
.profile-handle {
|
||||
margin: 0.25rem 0;
|
||||
color: var(--text-muted, #a0a0a0);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.profile-slug {
|
||||
margin: 0.25rem 0;
|
||||
color: var(--text-muted, #a0a0a0);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.badges-section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 0.4rem 0.8rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.badge-staff {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-mod {
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-vip {
|
||||
background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-member {
|
||||
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.bio-section {
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 1rem;
|
||||
background: rgba(155, 89, 182, 0.1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.bio-text {
|
||||
margin: 0;
|
||||
color: var(--text-colour, #e0e0e0);
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.stats-section {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.stats-section h2 {
|
||||
margin: 0 0 1rem 0;
|
||||
color: var(--accent-colour, #9b59b6);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
background: rgba(155, 89, 182, 0.2);
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(155, 89, 182, 0.3);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: var(--accent-colour, #9b59b6);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted, #a0a0a0);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.footer-section {
|
||||
text-align: center;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid rgba(155, 89, 182, 0.3);
|
||||
}
|
||||
|
||||
.member-since {
|
||||
margin: 0;
|
||||
color: var(--text-muted, #a0a0a0);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class ProfileComponent implements OnInit {
|
||||
private route = inject(ActivatedRoute);
|
||||
private userService = inject(UserService);
|
||||
private toastService = inject(ToastService);
|
||||
|
||||
profile = signal<UserProfileResponse | null>(null);
|
||||
loading = signal(true);
|
||||
error = signal<string | null>(null);
|
||||
|
||||
ngOnInit(): void {
|
||||
const identifier = this.route.snapshot.paramMap.get('identifier');
|
||||
if (!identifier) {
|
||||
this.error.set('No user identifier provided');
|
||||
this.loading.set(false);
|
||||
return;
|
||||
}
|
||||
|
||||
this.userService.getProfile(identifier).subscribe({
|
||||
next: (profileData: UserProfileResponse) => {
|
||||
this.profile.set(profileData);
|
||||
this.loading.set(false);
|
||||
},
|
||||
error: (err: Error) => {
|
||||
console.error('Error loading profile:', err);
|
||||
this.error.set('Failed to load profile');
|
||||
this.loading.set(false);
|
||||
this.toastService.error('Failed to load profile');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
formatDate(date: Date | string): string {
|
||||
return new Date(date).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,324 @@
|
||||
/**
|
||||
* @copyright 2026 NHCarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
|
||||
import { Component, inject, signal, OnInit } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { UserService, UpdateUserSettingsRequest } from '../../services/user.service';
|
||||
import { AuthService } from '../../services/auth.service';
|
||||
import { ToastService } from '../../services/toast.service';
|
||||
import { User } from '@library/shared-types';
|
||||
|
||||
@Component({
|
||||
selector: 'app-settings',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule],
|
||||
template: `
|
||||
<div class="settings-container">
|
||||
<h1>Profile Settings</h1>
|
||||
|
||||
@if (loading()) {
|
||||
<div class="loading">Loading settings...</div>
|
||||
} @else if (user()) {
|
||||
<form class="settings-form" (ngSubmit)="saveSettings()">
|
||||
<div class="form-section">
|
||||
<h2>Profile Information</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="displayName">Display Name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="displayName"
|
||||
name="displayName"
|
||||
[(ngModel)]="formData.displayName"
|
||||
placeholder="Your display name"
|
||||
maxlength="50"
|
||||
/>
|
||||
<small class="form-help">This will be shown instead of your username</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="slug">Profile URL Slug</label>
|
||||
<input
|
||||
type="text"
|
||||
id="slug"
|
||||
name="slug"
|
||||
[(ngModel)]="formData.slug"
|
||||
placeholder="your-custom-url"
|
||||
maxlength="30"
|
||||
pattern="[a-z0-9-]+"
|
||||
/>
|
||||
<small class="form-help">
|
||||
Your profile will be at: library.nhcarrigan.com/profile/{{ formData.slug || 'your-slug' }}
|
||||
</small>
|
||||
<small class="form-help">Only lowercase letters, numbers, and hyphens allowed</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="bio">Bio</label>
|
||||
<textarea
|
||||
id="bio"
|
||||
name="bio"
|
||||
[(ngModel)]="formData.bio"
|
||||
placeholder="Tell us about yourself..."
|
||||
rows="4"
|
||||
maxlength="500"
|
||||
></textarea>
|
||||
<small class="form-help">{{ (formData.bio?.length || 0) }} / 500 characters</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-section">
|
||||
<h2>Privacy</h2>
|
||||
|
||||
<div class="form-group checkbox-group">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="profilePublic"
|
||||
[(ngModel)]="formData.profilePublic"
|
||||
/>
|
||||
<span>Make my profile public</span>
|
||||
</label>
|
||||
<small class="form-help">
|
||||
When disabled, only you can view your profile
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-section">
|
||||
<h2>Account Information</h2>
|
||||
<div class="info-item">
|
||||
<strong>Username:</strong> {{ user()!.username }}
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<strong>Email:</strong> {{ user()!.email }}
|
||||
</div>
|
||||
@if (user()!.avatar) {
|
||||
<div class="info-item">
|
||||
<strong>Avatar:</strong>
|
||||
<img [src]="user()!.avatar" alt="Avatar" class="avatar-preview" />
|
||||
</div>
|
||||
}
|
||||
<small class="form-help">
|
||||
Username, email, and avatar are managed through Discord and cannot be changed here
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary" [disabled]="saving()">
|
||||
{{ saving() ? 'Saving...' : 'Save Changes' }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.settings-container {
|
||||
max-width: 700px;
|
||||
margin: 2rem auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--accent-colour, #9b59b6);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.settings-form {
|
||||
background: var(--card-background, #1a1a2e);
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
border-bottom: 1px solid rgba(155, 89, 182, 0.3);
|
||||
}
|
||||
|
||||
.form-section:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.form-section h2 {
|
||||
color: var(--accent-colour, #9b59b6);
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-colour, #e0e0e0);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form-group input[type="text"],
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid rgba(155, 89, 182, 0.5);
|
||||
border-radius: 8px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: var(--text-colour, #e0e0e0);
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.form-group input[type="text"]:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-colour, #9b59b6);
|
||||
box-shadow: 0 0 0 2px rgba(155, 89, 182, 0.3);
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
resize: vertical;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.form-help {
|
||||
display: block;
|
||||
margin-top: 0.25rem;
|
||||
color: var(--text-muted, #a0a0a0);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.checkbox-group label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox-group input[type="checkbox"] {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-colour, #e0e0e0);
|
||||
}
|
||||
|
||||
.info-item strong {
|
||||
color: var(--accent-colour, #9b59b6);
|
||||
}
|
||||
|
||||
.avatar-preview {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
margin-left: 0.5rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.75rem 2rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class SettingsComponent implements OnInit {
|
||||
private userService = inject(UserService);
|
||||
private authService = inject(AuthService);
|
||||
private toastService = inject(ToastService);
|
||||
|
||||
user = signal<User | null>(null);
|
||||
loading = signal(true);
|
||||
saving = signal(false);
|
||||
|
||||
formData: UpdateUserSettingsRequest & { bio?: string } = {
|
||||
displayName: '',
|
||||
slug: '',
|
||||
bio: '',
|
||||
profilePublic: true
|
||||
};
|
||||
|
||||
ngOnInit(): void {
|
||||
this.userService.getMe().subscribe({
|
||||
next: (userData: User) => {
|
||||
this.user.set(userData);
|
||||
this.formData = {
|
||||
displayName: userData.displayName || '',
|
||||
slug: userData.slug || '',
|
||||
bio: userData.bio || '',
|
||||
profilePublic: userData.profilePublic ?? true
|
||||
};
|
||||
this.loading.set(false);
|
||||
},
|
||||
error: (err: Error) => {
|
||||
console.error('Error loading user profile:', err);
|
||||
this.toastService.error('Failed to load profile');
|
||||
this.loading.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
saveSettings(): void {
|
||||
this.saving.set(true);
|
||||
|
||||
const updates: UpdateUserSettingsRequest = {
|
||||
displayName: this.formData.displayName || undefined,
|
||||
slug: this.formData.slug || undefined,
|
||||
bio: this.formData.bio || undefined,
|
||||
profilePublic: this.formData.profilePublic
|
||||
};
|
||||
|
||||
this.userService.updateSettings(updates).subscribe({
|
||||
next: (updatedUser: User) => {
|
||||
this.user.set(updatedUser);
|
||||
this.authService.updateUser(updatedUser);
|
||||
this.saving.set(false);
|
||||
this.toastService.success('Settings saved successfully!');
|
||||
},
|
||||
error: (err: Error) => {
|
||||
console.error('Error saving settings:', err);
|
||||
this.toastService.error('Failed to save settings');
|
||||
this.saving.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -123,6 +123,10 @@ export class AuthService {
|
||||
return this.user() !== null;
|
||||
}
|
||||
|
||||
updateUser(user: User): void {
|
||||
this.currentUser.set(user);
|
||||
}
|
||||
|
||||
isAdmin(): boolean {
|
||||
return this.user()?.isAdmin === true;
|
||||
}
|
||||
|
||||
@@ -9,6 +9,35 @@ import { Observable } from 'rxjs';
|
||||
import { ApiService } from './api.service';
|
||||
import { User } from '@library/shared-types';
|
||||
|
||||
export interface UserProfileResponse {
|
||||
id: string;
|
||||
username: string;
|
||||
displayName?: string;
|
||||
avatar?: string;
|
||||
bio?: string;
|
||||
slug?: string;
|
||||
badges: {
|
||||
isStaff: boolean;
|
||||
isMod: boolean;
|
||||
isVip: boolean;
|
||||
inDiscord: boolean;
|
||||
};
|
||||
stats: {
|
||||
suggestionsCount: number;
|
||||
suggestionsAcceptedCount: number;
|
||||
likesCount: number;
|
||||
commentsCount: number;
|
||||
};
|
||||
createdAt: Date;
|
||||
}
|
||||
|
||||
export interface UpdateUserSettingsRequest {
|
||||
slug?: string;
|
||||
displayName?: string;
|
||||
bio?: string;
|
||||
profilePublic?: boolean;
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
@@ -26,4 +55,16 @@ export class UserService {
|
||||
unbanUser(userId: string): Observable<User> {
|
||||
return this.api.post<User>(`/users/${userId}/unban`, {});
|
||||
}
|
||||
|
||||
getMe(): Observable<User> {
|
||||
return this.api.get<User>('/users/me');
|
||||
}
|
||||
|
||||
updateSettings(settings: UpdateUserSettingsRequest): Observable<User> {
|
||||
return this.api.put<User>('/users/me', settings);
|
||||
}
|
||||
|
||||
getProfile(identifier: string): Observable<UserProfileResponse> {
|
||||
return this.api.get<UserProfileResponse>(`/users/profile/${identifier}`);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user