Simple Managment webapp [LLM]
This commit is contained in:
@@ -0,0 +1,132 @@
|
||||
<div class="page-content">
|
||||
<div class="page-header">
|
||||
<h2>Account</h2>
|
||||
<button nz-button (click)="loadUser()">
|
||||
<span nz-icon nzType="reload"></span>
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@if (loading()) {
|
||||
<div class="loading-container">
|
||||
<nz-spin nzSimple nzSize="large"></nz-spin>
|
||||
</div>
|
||||
} @else if (user()) {
|
||||
<nz-card nzTitle="User Information">
|
||||
<nz-descriptions nzBordered [nzColumn]="2">
|
||||
<nz-descriptions-item nzTitle="User ID" [nzSpan]="2">
|
||||
<span class="mono">{{ user()!.user_id }}</span>
|
||||
</nz-descriptions-item>
|
||||
<nz-descriptions-item nzTitle="Username">
|
||||
{{ user()!.username || '(Not set)' }}
|
||||
<button nz-button nzSize="small" nzType="link" (click)="openEditModal()">
|
||||
<span nz-icon nzType="edit"></span>
|
||||
</button>
|
||||
</nz-descriptions-item>
|
||||
<nz-descriptions-item nzTitle="Account Type">
|
||||
@if (user()!.is_pro) {
|
||||
<nz-tag nzColor="gold">Pro</nz-tag>
|
||||
} @else {
|
||||
<nz-tag>Free</nz-tag>
|
||||
}
|
||||
</nz-descriptions-item>
|
||||
<nz-descriptions-item nzTitle="Messages Sent">
|
||||
{{ user()!.messages_sent }}
|
||||
</nz-descriptions-item>
|
||||
<nz-descriptions-item nzTitle="Created">
|
||||
{{ user()!.timestamp_created | relativeTime }}
|
||||
</nz-descriptions-item>
|
||||
<nz-descriptions-item nzTitle="Last Read">
|
||||
{{ user()!.timestamp_lastread | relativeTime }}
|
||||
</nz-descriptions-item>
|
||||
<nz-descriptions-item nzTitle="Last Sent">
|
||||
{{ user()!.timestamp_lastsent | relativeTime }}
|
||||
</nz-descriptions-item>
|
||||
</nz-descriptions>
|
||||
</nz-card>
|
||||
|
||||
<nz-card nzTitle="Quota" class="mt-16">
|
||||
<div class="quota-info">
|
||||
<div class="quota-progress">
|
||||
<nz-progress
|
||||
[nzPercent]="getQuotaPercent()"
|
||||
[nzStatus]="getQuotaStatus()"
|
||||
nzType="circle"
|
||||
></nz-progress>
|
||||
</div>
|
||||
<div class="quota-details">
|
||||
<p><strong>{{ user()!.quota_used }}</strong> / {{ user()!.quota_max }} messages used today</p>
|
||||
<p class="quota-remaining">{{ user()!.quota_remaining }} remaining</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nz-divider></nz-divider>
|
||||
|
||||
<nz-descriptions [nzColumn]="2" nzSize="small">
|
||||
<nz-descriptions-item nzTitle="Max Body Size">
|
||||
{{ user()!.max_body_size | number }} bytes
|
||||
</nz-descriptions-item>
|
||||
<nz-descriptions-item nzTitle="Max Title Length">
|
||||
{{ user()!.max_title_length }} chars
|
||||
</nz-descriptions-item>
|
||||
<nz-descriptions-item nzTitle="Default Channel">
|
||||
{{ user()!.default_channel }}
|
||||
</nz-descriptions-item>
|
||||
<nz-descriptions-item nzTitle="Default Priority">
|
||||
{{ user()!.default_priority }}
|
||||
</nz-descriptions-item>
|
||||
</nz-descriptions>
|
||||
</nz-card>
|
||||
|
||||
<nz-card nzTitle="Actions" class="mt-16">
|
||||
<div class="action-section">
|
||||
<button nz-button nzType="default" (click)="logout()">
|
||||
<span nz-icon nzType="logout"></span>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nz-divider nzText="Danger Zone" nzOrientation="left"></nz-divider>
|
||||
|
||||
<div class="danger-section">
|
||||
<p>Deleting your account will permanently remove all your data including messages, channels, subscriptions, and keys.</p>
|
||||
<button
|
||||
nz-button
|
||||
nzType="primary"
|
||||
nzDanger
|
||||
nz-popconfirm
|
||||
nzPopconfirmTitle="Are you absolutely sure? This action cannot be undone."
|
||||
nzPopconfirmPlacement="top"
|
||||
(nzOnConfirm)="deleteAccount()"
|
||||
[nzLoading]="deleting()"
|
||||
>
|
||||
<span nz-icon nzType="delete"></span>
|
||||
Delete Account
|
||||
</button>
|
||||
</div>
|
||||
</nz-card>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Edit Username Modal -->
|
||||
<nz-modal
|
||||
[(nzVisible)]="showEditModal"
|
||||
nzTitle="Edit Username"
|
||||
(nzOnCancel)="closeEditModal()"
|
||||
(nzOnOk)="saveUsername()"
|
||||
[nzOkLoading]="saving()"
|
||||
>
|
||||
<ng-container *nzModalContent>
|
||||
<nz-form-item class="mb-0">
|
||||
<nz-form-label>Username</nz-form-label>
|
||||
<nz-form-control>
|
||||
<input
|
||||
type="text"
|
||||
nz-input
|
||||
placeholder="Enter your username"
|
||||
[(ngModel)]="editUsername"
|
||||
/>
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
</ng-container>
|
||||
</nz-modal>
|
||||
@@ -0,0 +1,45 @@
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.quota-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.quota-details {
|
||||
p {
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
|
||||
.quota-remaining {
|
||||
color: #666;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.danger-section {
|
||||
p {
|
||||
color: #666;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
import { Component, inject, signal, OnInit } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Router } from '@angular/router';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { NzCardModule } from 'ng-zorro-antd/card';
|
||||
import { NzButtonModule } from 'ng-zorro-antd/button';
|
||||
import { NzIconModule } from 'ng-zorro-antd/icon';
|
||||
import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
|
||||
import { NzTagModule } from 'ng-zorro-antd/tag';
|
||||
import { NzSpinModule } from 'ng-zorro-antd/spin';
|
||||
import { NzProgressModule } from 'ng-zorro-antd/progress';
|
||||
import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
|
||||
import { NzModalModule } from 'ng-zorro-antd/modal';
|
||||
import { NzFormModule } from 'ng-zorro-antd/form';
|
||||
import { NzInputModule } from 'ng-zorro-antd/input';
|
||||
import { NzDividerModule } from 'ng-zorro-antd/divider';
|
||||
import { ApiService } from '../../../core/services/api.service';
|
||||
import { AuthService } from '../../../core/services/auth.service';
|
||||
import { NotificationService } from '../../../core/services/notification.service';
|
||||
import { UserWithExtra } from '../../../core/models';
|
||||
import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
|
||||
|
||||
@Component({
|
||||
selector: 'app-account-info',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
NzCardModule,
|
||||
NzButtonModule,
|
||||
NzIconModule,
|
||||
NzDescriptionsModule,
|
||||
NzTagModule,
|
||||
NzSpinModule,
|
||||
NzProgressModule,
|
||||
NzPopconfirmModule,
|
||||
NzModalModule,
|
||||
NzFormModule,
|
||||
NzInputModule,
|
||||
NzDividerModule,
|
||||
RelativeTimePipe,
|
||||
],
|
||||
templateUrl: './account-info.component.html',
|
||||
styleUrl: './account-info.component.scss'
|
||||
})
|
||||
export class AccountInfoComponent implements OnInit {
|
||||
private apiService = inject(ApiService);
|
||||
private authService = inject(AuthService);
|
||||
private notification = inject(NotificationService);
|
||||
private router = inject(Router);
|
||||
|
||||
user = signal<UserWithExtra | null>(null);
|
||||
loading = signal(true);
|
||||
deleting = signal(false);
|
||||
|
||||
// Edit username modal
|
||||
showEditModal = signal(false);
|
||||
editUsername = '';
|
||||
saving = signal(false);
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loadUser();
|
||||
}
|
||||
|
||||
loadUser(): void {
|
||||
const userId = this.authService.getUserId();
|
||||
if (!userId) return;
|
||||
|
||||
this.loading.set(true);
|
||||
this.apiService.getUser(userId).subscribe({
|
||||
next: (user) => {
|
||||
this.user.set(user);
|
||||
this.loading.set(false);
|
||||
},
|
||||
error: () => {
|
||||
this.loading.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getQuotaPercent(): number {
|
||||
const user = this.user();
|
||||
if (!user || user.quota_max === 0) return 0;
|
||||
return Math.round((user.quota_used / user.quota_max) * 100);
|
||||
}
|
||||
|
||||
getQuotaStatus(): 'success' | 'normal' | 'exception' {
|
||||
const percent = this.getQuotaPercent();
|
||||
if (percent >= 90) return 'exception';
|
||||
if (percent >= 70) return 'normal';
|
||||
return 'success';
|
||||
}
|
||||
|
||||
// Edit username
|
||||
openEditModal(): void {
|
||||
const user = this.user();
|
||||
this.editUsername = user?.username || '';
|
||||
this.showEditModal.set(true);
|
||||
}
|
||||
|
||||
closeEditModal(): void {
|
||||
this.showEditModal.set(false);
|
||||
}
|
||||
|
||||
saveUsername(): void {
|
||||
const userId = this.authService.getUserId();
|
||||
if (!userId) return;
|
||||
|
||||
this.saving.set(true);
|
||||
this.apiService.updateUser(userId, {
|
||||
username: this.editUsername || undefined
|
||||
}).subscribe({
|
||||
next: () => {
|
||||
this.notification.success('Username updated');
|
||||
this.closeEditModal();
|
||||
this.saving.set(false);
|
||||
this.loadUser();
|
||||
},
|
||||
error: () => {
|
||||
this.saving.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Logout
|
||||
logout(): void {
|
||||
this.authService.logout();
|
||||
this.router.navigate(['/login']);
|
||||
}
|
||||
|
||||
// Delete account
|
||||
deleteAccount(): void {
|
||||
const userId = this.authService.getUserId();
|
||||
if (!userId) return;
|
||||
|
||||
this.deleting.set(true);
|
||||
this.apiService.deleteUser(userId).subscribe({
|
||||
next: () => {
|
||||
this.notification.success('Account deleted');
|
||||
this.authService.logout();
|
||||
this.router.navigate(['/login']);
|
||||
},
|
||||
error: () => {
|
||||
this.deleting.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user