Mikescher/SimpleCloudNotifier
1
0
Fork 0
Code Pull Requests Actions Releases Activity

Simple Managment webapp [LLM]

Browse Source
This commit is contained in:
Mike Schwörer
2025-12-03 18:34:13 +01:00
parent c860ef9c30
commit 308d6bbba0
11 changed files with 216 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
webapp/public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 97 KiB

27
webapp/src/app/features/account/account-info/account-info.component.html
View File

@@ -78,33 +78,6 @@
</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>

29
webapp/src/app/features/account/account-info/account-info.component.ts
View File

@@ -1,6 +1,5 @@
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';
@@ -9,7 +8,6 @@ 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';
@@ -33,7 +31,6 @@ import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
NzTagModule,
NzSpinModule,
NzProgressModule,
NzPopconfirmModule,
NzModalModule,
NzFormModule,
NzInputModule,
@@ -47,11 +44,9 @@ 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);
@@ -121,28 +116,4 @@ export class AccountInfoComponent implements OnInit {
}
});
}
// 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);
}
});
}
}

3
webapp/src/app/features/keys/key-list/key-list.component.html
View File

@@ -168,10 +168,11 @@
<label
nz-checkbox
[nzChecked]="isPermissionChecked(opt.value)"
[nzDisabled]="opt.value !== 'A' && isPermissionChecked('A')"
(nzCheckedChange)="onPermissionChange(opt.value, $event)"
>
<nz-tag [nzColor]="getPermissionColor(opt.value)">{{ opt.value }}</nz-tag>
{{ opt.label }}
<span class="perm-label">{{ opt.label }}</span>
<span class="perm-desc">- {{ opt.description }}</span>
</label>
}

12
webapp/src/app/features/keys/key-list/key-list.component.scss
View File

@@ -60,7 +60,17 @@
label {
display: flex;
align-items: center;
gap: 4px;
margin-left: 0;
}
nz-tag {
width: 32px;
text-align: center;
margin-right: 8px;
}
.perm-label {
min-width: 100px;
}
.perm-desc {

5
webapp/src/app/features/keys/key-list/key-list.component.ts
View File

@@ -184,7 +184,10 @@ export class KeyListComponent implements OnInit {
onPermissionChange(perm: TokenPermission, checked: boolean): void {
if (checked) {
if (!this.newKeyPermissions.includes(perm)) {
if (perm === 'A') {
// Admin selected - clear other permissions
this.newKeyPermissions = ['A'];
} else if (!this.newKeyPermissions.includes(perm)) {
this.newKeyPermissions = [...this.newKeyPermissions, perm];
}
} else {

69
webapp/src/app/features/messages/message-list/message-list.component.html
View File

@@ -7,9 +7,8 @@
</button>
</div>
<nz-card class="filter-card">
<div class="filter-bar">
<nz-input-group nzSearch [nzAddOnAfter]="searchButton" style="width: 300px;">
<div class="search-bar">
<nz-input-group nzSearch [nzAddOnAfter]="searchButton">
<input
type="text"
nz-input
@@ -23,36 +22,28 @@
<span nz-icon nzType="search"></span>
</button>
</ng-template>
<nz-select
[(ngModel)]="priorityFilter"
nzPlaceHolder="Priority"
nzAllowClear
style="width: 150px;"
(ngModelChange)="applyFilters()"
>
<nz-option [nzValue]="0" nzLabel="Low"></nz-option>
<nz-option [nzValue]="1" nzLabel="Normal"></nz-option>
<nz-option [nzValue]="2" nzLabel="High"></nz-option>
</nz-select>
<input
type="text"
nz-input
placeholder="Channel name"
[(ngModel)]="channelFilter"
style="width: 200px;"
(keyup.enter)="applyFilters()"
/>
@if (searchText || priorityFilter !== null || channelFilter) {
<button nz-button (click)="clearFilters()">
<span nz-icon nzType="close"></span>
Clear
</button>
}
</div>
</nz-card>
@if (hasActiveFilters()) {
<div class="active-filters">
@if (appliedSearchText) {
<nz-tag nzMode="closeable" (nzOnClose)="clearSearch()">
"{{ appliedSearchText }}"
</nz-tag>
}
@for (channel of channelFilter; track channel) {
<nz-tag nzMode="closeable" (nzOnClose)="removeChannelFilter(channel)">
{{ getChannelDisplayName(channel) }}
</nz-tag>
}
@if (priorityFilter.length > 0) {
<nz-tag nzMode="closeable" (nzOnClose)="clearPriorityFilter()">
{{ getPriorityLabel(+priorityFilter[0]) }}
</nz-tag>
}
<a class="clear-all" (click)="clearAllFilters()">Clear all</a>
</div>
}
<nz-card>
<nz-table
@@ -67,9 +58,19 @@
<thead>
<tr>
<th nzWidth="40%">Title</th>
<th nzWidth="15%">Channel</th>
<th
nzWidth="15%"
[nzFilters]="channelFilters()"
[nzFilterMultiple]="true"
(nzFilterChange)="onChannelFilterChange($event)"
>Channel</th>
<th nzWidth="15%">Sender</th>
<th nzWidth="10%">Priority</th>
<th
nzWidth="10%"
[nzFilters]="priorityFilters"
[nzFilterMultiple]="false"
(nzFilterChange)="onPriorityFilterChange($event)"
>Priority</th>
<th nzWidth="20%">Time</th>
</tr>
</thead>

20
webapp/src/app/features/messages/message-list/message-list.component.scss
View File

@@ -9,10 +9,28 @@
}
}
.filter-card {
.search-bar {
margin-bottom: 16px;
}
.active-filters {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
nz-tag {
max-width: none;
}
.clear-all {
margin-left: 8px;
font-size: 12px;
cursor: pointer;
}
}
.message-title {
font-weight: 500;
color: #333;

97
webapp/src/app/features/messages/message-list/message-list.component.ts
View File

@@ -2,10 +2,9 @@ import { Component, inject, signal, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Router } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { NzTableModule } from 'ng-zorro-antd/table';
import { NzTableModule, NzTableFilterList } from 'ng-zorro-antd/table';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzInputModule } from 'ng-zorro-antd/input';
import { NzSelectModule } from 'ng-zorro-antd/select';
import { NzTagModule } from 'ng-zorro-antd/tag';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzEmptyModule } from 'ng-zorro-antd/empty';
@@ -26,7 +25,6 @@ import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
NzTableModule,
NzButtonModule,
NzInputModule,
NzSelectModule,
NzTagModule,
NzIconModule,
NzEmptyModule,
@@ -49,13 +47,39 @@ export class MessageListComponent implements OnInit {
// Filters
searchText = '';
priorityFilter: number | null = null;
channelFilter = '';
appliedSearchText = '';
priorityFilter: string[] = [];
channelFilter: string[] = [];
// Filter options
priorityFilters: NzTableFilterList = [
{ text: 'Low', value: '0' },
{ text: 'Normal', value: '1' },
{ text: 'High', value: '2' },
];
channelFilters = signal<NzTableFilterList>([]);
ngOnInit(): void {
this.loadChannels();
this.loadMessages();
}
loadChannels(): void {
const userId = this.authService.getUserId();
if (!userId) return;
this.apiService.getChannels(userId, 'all_any').subscribe({
next: (response) => {
this.channelFilters.set(
response.channels.map(ch => ({
text: ch.display_name,
value: ch.internal_name,
}))
);
}
});
}
loadMessages(append = false): void {
this.loading.set(true);
@@ -64,14 +88,14 @@ export class MessageListComponent implements OnInit {
trimmed: true,
};
if (this.searchText) {
params.search = this.searchText;
if (this.appliedSearchText) {
params.search = this.appliedSearchText;
}
if (this.priorityFilter !== null) {
params.priority = this.priorityFilter;
if (this.priorityFilter.length === 1) {
params.priority = parseInt(this.priorityFilter[0], 10);
}
if (this.channelFilter) {
params.channel = this.channelFilter;
if (this.channelFilter.length > 0) {
params.channel = this.channelFilter.join(',');
}
if (append && this.nextPageToken()) {
params.next_page_token = this.nextPageToken()!;
@@ -98,16 +122,59 @@ export class MessageListComponent implements OnInit {
}
applyFilters(): void {
this.appliedSearchText = this.searchText;
this.loadMessages();
}
clearFilters(): void {
this.searchText = '';
this.priorityFilter = null;
this.channelFilter = '';
onPriorityFilterChange(filters: string[] | null): void {
this.priorityFilter = filters ?? [];
this.loadMessages();
}
onChannelFilterChange(filters: string[] | null): void {
this.channelFilter = filters ?? [];
this.loadMessages();
}
clearSearch(): void {
this.searchText = '';
this.appliedSearchText = '';
this.loadMessages();
}
clearChannelFilter(): void {
this.channelFilter = [];
this.loadMessages();
}
removeChannelFilter(channel: string): void {
this.channelFilter = this.channelFilter.filter(c => c !== channel);
this.loadMessages();
}
clearPriorityFilter(): void {
this.priorityFilter = [];
this.loadMessages();
}
clearAllFilters(): void {
this.searchText = '';
this.appliedSearchText = '';
this.channelFilter = [];
this.priorityFilter = [];
this.loadMessages();
}
hasActiveFilters(): boolean {
return !!this.appliedSearchText || this.channelFilter.length > 0 || this.priorityFilter.length > 0;
}
getChannelDisplayName(internalName: string): string {
const filters = this.channelFilters();
const channel = filters.find(f => f.value === internalName);
return channel?.text?.toString() ?? internalName;
}
loadMore(): void {
if (this.nextPageToken()) {
this.loadMessages(true);

19
webapp/src/app/features/subscriptions/subscription-list/subscription-list.component.html
View File

@@ -16,10 +16,21 @@
<nz-card>
<nz-tabset (nzSelectedIndexChange)="onTabChange($event)">
<nz-tab nzTitle="All"></nz-tab>
<nz-tab nzTitle="Outgoing"></nz-tab>
<nz-tab nzTitle="Own"></nz-tab>
<nz-tab nzTitle="Deactivated"></nz-tab>
<nz-tab nzTitle="External"></nz-tab>
<nz-tab nzTitle="Incoming"></nz-tab>
</nz-tabset>
@if (getTabDescription()) {
<nz-alert
nzType="info"
[nzMessage]="getTabDescription()!"
nzShowIcon
style="margin-bottom: 16px;"
></nz-alert>
}
<nz-table
#subscriptionTable
[nzData]="subscriptions()"
@@ -31,7 +42,7 @@
<ng-template #noResultTpl></ng-template>
<thead>
<tr>
<th nzWidth="10%">Direction</th>
<th nzWidth="10%">Type</th>
<th nzWidth="20%">Channel</th>
<th nzWidth="20%">Subscriber</th>
<th nzWidth="20%">Owner</th>
@@ -44,8 +55,8 @@
@for (sub of subscriptions(); track sub.subscription_id) {
<tr>
<td>
<nz-tag [nzColor]="isOutgoing(sub) ? 'blue' : 'purple'">
{{ getDirectionLabel(sub) }}
<nz-tag [nzColor]="getTypeLabel(sub).color">
{{ getTypeLabel(sub).label }}
</nz-tag>
</td>
<td>

54
webapp/src/app/features/subscriptions/subscription-list/subscription-list.component.ts
View File

@@ -13,6 +13,7 @@ import { NzModalModule } from 'ng-zorro-antd/modal';
import { NzFormModule } from 'ng-zorro-antd/form';
import { NzInputModule } from 'ng-zorro-antd/input';
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
import { NzAlertModule } from 'ng-zorro-antd/alert';
import { ApiService } from '../../../core/services/api.service';
import { AuthService } from '../../../core/services/auth.service';
import { NotificationService } from '../../../core/services/notification.service';
@@ -20,7 +21,19 @@ import { UserCacheService, ResolvedUser } from '../../../core/services/user-cach
import { Subscription, SubscriptionFilter } from '../../../core/models';
import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
type TabDirection = 'both' | 'outgoing' | 'incoming';
type SubscriptionTab = 'all' | 'own' | 'deactivated' | 'external' | 'incoming';
interface TabConfig {
filter: SubscriptionFilter;
}
const TAB_CONFIGS: Record<SubscriptionTab, TabConfig> = {
all: { filter: {} },
own: { filter: { direction: 'outgoing', confirmation: 'confirmed', external: 'false' } },
deactivated: { filter: { direction: 'outgoing', confirmation: 'unconfirmed', external: 'false' } },
external: { filter: { direction: 'outgoing', confirmation: 'all', external: 'true' } },
incoming: { filter: { direction: 'incoming', confirmation: 'all', external: 'true' } },
};
@Component({
selector: 'app-subscription-list',
@@ -40,6 +53,7 @@ type TabDirection = 'both' | 'outgoing' | 'incoming';
NzFormModule,
NzInputModule,
NzToolTipModule,
NzAlertModule,
RelativeTimePipe,
],
templateUrl: './subscription-list.component.html',
@@ -54,7 +68,7 @@ export class SubscriptionListComponent implements OnInit {
subscriptions = signal<Subscription[]>([]);
userNames = signal<Map<string, ResolvedUser>>(new Map());
loading = signal(false);
direction: TabDirection = 'both';
activeTab: SubscriptionTab = 'all';
// Create subscription modal
showCreateModal = signal(false);
@@ -72,10 +86,7 @@ export class SubscriptionListComponent implements OnInit {
this.loading.set(true);
const filter: SubscriptionFilter = {};
if (this.direction !== 'both') {
filter.direction = this.direction;
}
const filter = TAB_CONFIGS[this.activeTab].filter;
this.apiService.getSubscriptions(userId, filter).subscribe({
next: (response) => {
@@ -108,8 +119,8 @@ export class SubscriptionListComponent implements OnInit {
}
onTabChange(index: number): void {
const directions: TabDirection[] = ['both', 'outgoing', 'incoming'];
this.direction = directions[index];
const tabs: SubscriptionTab[] = ['all', 'own', 'deactivated', 'external', 'incoming'];
this.activeTab = tabs[index];
this.loadSubscriptions();
}
@@ -199,10 +210,29 @@ export class SubscriptionListComponent implements OnInit {
return { label: 'Pending', color: 'orange' };
}
getDirectionLabel(sub: Subscription): string {
if (this.isOutgoing(sub)) {
return 'Outgoing';
getTypeLabel(sub: Subscription): { label: string; color: string } {
const userId = this.authService.getUserId();
if (sub.subscriber_user_id === sub.channel_owner_user_id) {
return { label: 'Own', color: 'green' };
}
if (sub.subscriber_user_id === userId) {
return { label: 'External', color: 'blue' };
}
return { label: 'Incoming', color: 'purple' };
}
getTabDescription(): string | null {
switch (this.activeTab) {
case 'own':
return 'Active subscriptions to your channels.';
case 'deactivated':
return 'Deactivated subscriptions to your channels. These can be reactivated by you.';
case 'external':
return 'Your subscriptions to channels owned by other users.';
case 'incoming':
return 'Subscription from other users to your channels.';
default:
return null;
}
return 'Incoming';
}
}