AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UX Changes, Tasks, WebP, and More! (#1280)

Browse source 
* When account updates occur for a user, send an event to them to tell them to refresh their account information (if they are on the site at the time). This way if we revoke permissions, the site will reactively adapt.

* Some cleanup on the user preferences to remove some calls we don't need anymore.

* Removed old bulk cleanup bookmark code as it's no longer needed.

* Tweaked the messaging for stat collection to reflect what we collect now versus when this was initially implemented.

* Implemented the ability for users to configure their servers to save bookmarks as webP. Reorganized the tabs for Admin dashboard to account for upcoming features.

* Implemented the ability to bulk convert bookmarks (as many times as the user wants).

Added a display of Reoccurring Jobs to the Tasks admin tab. Currently it's just placeholder, but will be enhanced further later in the release.

* Tweaked the wording around the convert switch.

* Moved System actions to the task tab

* Added a controller just for Tachiyomi so we can have dedicated APIs for that client. Deprecated an existing API on the Reader route.

* Fixed the unit tests
This commit is contained in:
Joseph Milazzo 2022-05-23 18:19:52 -05:00 • committed by GitHub
parent dd83b6a9a1
commit e0a2fc615f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
51 changed files with 971 additions and 271 deletions
Download patch file Download diff file Expand all files Collapse all files

4
UI/Web/src/app/_models/events/user-update-event.ts Normal file
View file

@ -0,0 +1,4 @@
export interface UserUpdateEvent {
userId: number;
userName: string;
}

7
UI/Web/src/app/_models/job/job.ts Normal file
View file

@ -0,0 +1,7 @@
export interface Job {
id: string;
title: string;
cron: string;
createdAt: string;
lastExecution: string;
}

16
UI/Web/src/app/_services/account.service.ts
View file

@ -1,14 +1,15 @@
import { HttpClient } from '@angular/common/http';
import { Injectable, OnDestroy } from '@angular/core';
import { Observable, of, ReplaySubject, Subject } from 'rxjs';
import { map, takeUntil } from 'rxjs/operators';
import { filter, map, switchMap, takeUntil } from 'rxjs/operators';
import { environment } from 'src/environments/environment';
import { Preferences } from '../_models/preferences/preferences';
import { User } from '../_models/user';
import { Router } from '@angular/router';
import { MessageHubService } from './message-hub.service';
import { EVENTS, MessageHubService } from './message-hub.service';
import { ThemeService } from './theme.service';
import { InviteUserResponse } from '../_models/invite-user-response';
import { UserUpdateEvent } from '../_models/events/user-update-event';
@Injectable({
providedIn: 'root'
@ -32,7 +33,12 @@ export class AccountService implements OnDestroy {
private readonly onDestroy = new Subject<void>();
constructor(private httpClient: HttpClient, private router: Router,
private messageHub: MessageHubService, private themeService: ThemeService) {}
private messageHub: MessageHubService, private themeService: ThemeService) {
messageHub.messages$.pipe(filter(evt => evt.event === EVENTS.UserUpdate),
map(evt => evt.payload as UserUpdateEvent),
switchMap(() => this.refreshToken()))
.subscribe(() => {});
}
ngOnDestroy(): void {
this.onDestroy.next();
@ -211,6 +217,7 @@ export class AccountService implements OnDestroy {
private refreshToken() {
if (this.currentUser === null || this.currentUser === undefined) return of();
console.log('refreshing token and updating user account');
return this.httpClient.post<{token: string, refreshToken: string}>(this.baseUrl + 'account/refresh-token', {token: this.currentUser.token, refreshToken: this.currentUser.refreshToken}).pipe(map(user => {
if (this.currentUser) {
@ -218,8 +225,7 @@ export class AccountService implements OnDestroy {
this.currentUser.refreshToken = user.refreshToken;
}
this.currentUserSource.next(this.currentUser);
this.startRefreshTokenTimer();
this.setCurrentUser(this.currentUser);
return user;
}));
}

24
UI/Web/src/app/_services/message-hub.service.ts
View file

@ -7,6 +7,7 @@ import { environment } from 'src/environments/environment';
import { LibraryModifiedEvent } from '../_models/events/library-modified-event';
import { NotificationProgressEvent } from '../_models/events/notification-progress-event';
import { ThemeProgressEvent } from '../_models/events/theme-progress-event';
import { UserUpdateEvent } from '../_models/events/user-update-event';
import { User } from '../_models/user';
export enum EVENTS {
@ -58,6 +59,14 @@ export enum EVENTS {
* A user updates an entities read progress
*/
UserProgressUpdate = 'UserProgressUpdate',
/**
* A user updates account or preferences
*/
UserUpdate = 'UserUpdate',
/**
* When bulk bookmarks are being converted
*/
ConvertBookmarksProgress = 'ConvertBookmarksProgress',
}
export interface Message<T> {
@ -139,6 +148,13 @@ export class MessageHubService {
});
});
this.hubConnection.on(EVENTS.ConvertBookmarksProgress, resp => {
this.messagesSource.next({
event: EVENTS.ConvertBookmarksProgress,
payload: resp.body
});
});
this.hubConnection.on(EVENTS.LibraryModified, resp => {
this.messagesSource.next({
event: EVENTS.LibraryModified,
@ -175,6 +191,14 @@ export class MessageHubService {
});
});
this.hubConnection.on(EVENTS.UserUpdate, resp => {
console.log('got UserUpdate', resp);
this.messagesSource.next({
event: EVENTS.UserUpdate,
payload: resp.body as UserUpdateEvent
});
});
this.hubConnection.on(EVENTS.Error, resp => {
this.messagesSource.next({
event: EVENTS.Error,

9
UI/Web/src/app/_services/server.service.ts
View file

@ -3,6 +3,7 @@ import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
import { ServerInfo } from '../admin/_models/server-info';
import { UpdateVersionEvent } from '../_models/events/update-version-event';
import { Job } from '../_models/job/job';
@Injectable({
providedIn: 'root'
@ -40,4 +41,12 @@ export class ServerService {
isServerAccessible() {
return this.httpClient.get<boolean>(this.baseUrl + 'server/accessible');
}
getReoccuringJobs() {
return this.httpClient.get<Job[]>(this.baseUrl + 'server/jobs');
}
convertBookmarks() {
return this.httpClient.post(this.baseUrl + 'server/convert-bookmarks', {});
}
}

1
UI/Web/src/app/admin/_models/server-settings.ts
View file

@ -9,4 +9,5 @@ export interface ServerSettings {
baseUrl: string;
bookmarksDirectory: string;
emailServiceUrl: string;
convertBookmarkToWebP: boolean;
}

6
UI/Web/src/app/admin/admin.module.ts
View file

@ -20,6 +20,9 @@ import { LibrarySelectorComponent } from './library-selector/library-selector.co
import { EditUserComponent } from './edit-user/edit-user.component';
import { UserSettingsModule } from '../user-settings/user-settings.module';
import { SidenavModule } from '../sidenav/sidenav.module';
import { ManageMediaSettingsComponent } from './manage-media-settings/manage-media-settings.component';
import { ManageEmailSettingsComponent } from './manage-email-settings/manage-email-settings.component';
import { ManageTasksSettingsComponent } from './manage-tasks-settings/manage-tasks-settings.component';
@ -39,6 +42,9 @@ import { SidenavModule } from '../sidenav/sidenav.module';
RoleSelectorComponent,
LibrarySelectorComponent,
EditUserComponent,
ManageMediaSettingsComponent,
ManageEmailSettingsComponent,
ManageTasksSettingsComponent,
],
imports: [
CommonModule,

20
UI/Web/src/app/admin/dashboard/dashboard.component.html
View file

@ -8,18 +8,30 @@
<li *ngFor="let tab of tabs" [ngbNavItem]="tab">
<a ngbNavLink routerLink="." [fragment]="tab.fragment">{{ tab.title | sentenceCase }}</a>
<ng-template ngbNavContent>
<ng-container *ngIf="tab.fragment === ''">
<ng-container *ngIf="tab.fragment === TabID.General">
<app-manage-settings></app-manage-settings>
</ng-container>
<ng-container *ngIf="tab.fragment === 'users'">
<ng-container *ngIf="tab.fragment === TabID.Email">
<app-manage-email-settings></app-manage-email-settings>
</ng-container>
<ng-container *ngIf="tab.fragment === TabID.Media">
<app-manage-media-settings></app-manage-media-settings>
</ng-container>
<ng-container *ngIf="tab.fragment === TabID.Users">
<app-manage-users></app-manage-users>
</ng-container>
<ng-container *ngIf="tab.fragment === 'libraries'">
<ng-container *ngIf="tab.fragment === TabID.Libraries">
<app-manage-library></app-manage-library>
</ng-container>
<ng-container *ngIf="tab.fragment === 'system'">
<ng-container *ngIf="tab.fragment === TabID.System">
<app-manage-system></app-manage-system>
</ng-container>
<ng-container *ngIf="tab.fragment === TabID.Tasks">
<app-manage-tasks-settings></app-manage-tasks-settings>
</ng-container>
<ng-container *ngIf="tab.fragment === TabID.Plugins">
Nothing here yet. This will be built out in a future update.
</ng-container>
</ng-template>
</li>
</ul>

27
UI/Web/src/app/admin/dashboard/dashboard.component.ts
View file

@ -5,7 +5,16 @@ import { ServerService } from 'src/app/_services/server.service';
import { Title } from '@angular/platform-browser';
import { NavService } from '../../_services/nav.service';
enum TabID {
General = '',
Email = 'email',
Media = 'media',
Users = 'users',
Libraries = 'libraries',
System = 'system',
Plugins = 'plugins',
Tasks = 'tasks'
}
@Component({
selector: 'app-dashboard',
@ -15,14 +24,22 @@ import { NavService } from '../../_services/nav.service';
export class DashboardComponent implements OnInit {
tabs: Array<{title: string, fragment: string}> = [
{title: 'General', fragment: ''},
{title: 'Users', fragment: 'users'},
{title: 'Libraries', fragment: 'libraries'},
{title: 'System', fragment: 'system'},
{title: 'General', fragment: TabID.General},
{title: 'Users', fragment: TabID.Users},
{title: 'Libraries', fragment: TabID.Libraries},
{title: 'Media', fragment: TabID.Media},
{title: 'Email', fragment: TabID.Email},
//{title: 'Plugins', fragment: TabID.Plugins},
{title: 'Tasks', fragment: TabID.Tasks},
{title: 'System', fragment: TabID.System},
];
counter = this.tabs.length + 1;
active = this.tabs[0];
get TabID() {
return TabID;
}
constructor(public route: ActivatedRoute, private serverService: ServerService,
private toastr: ToastrService, private titleService: Title, public navService: NavService) {
this.route.fragment.subscribe(frag => {

29
UI/Web/src/app/admin/manage-email-settings/manage-email-settings.component.html Normal file
View file

@ -0,0 +1,29 @@
<div class="container-fluid">
<form [formGroup]="settingsForm" *ngIf="serverSettings !== undefined">
<h4>Email Services (SMTP)</h4>
<p>Kavita comes out of the box with an email service to power flows like invite user, forgot password, etc. Emails sent via our service are deleted immediately. You can use your own
email service. Set the url of the email service and use the Test button to ensure it works. At any time you can reset to ours. There is no way to disable emails although you are not required to use a
valid email address for users. Confirmation links will always be saved to logs. Emails will not be sent if you are not accessing Kavita via a publically reachable url.
</p>
<div class="mb-3">
<label for="settings-emailservice" class="form-label">Email Service Url</label>&nbsp;<i class="fa fa-info-circle" placement="right" [ngbTooltip]="emailServiceTooltip" role="button" tabindex="0"></i>
<ng-template #emailServiceTooltip>Use fully qualified url of the email service. Do not include ending slash.</ng-template>
<span class="visually-hidden" id="settings-emailservice-help"><ng-container [ngTemplateOutlet]="emailServiceTooltip"></ng-container></span>
<div class="input-group">
<input id="settings-emailservice" aria-describedby="settings-emailservice-help" class="form-control" formControlName="emailServiceUrl" type="text" aria-describedby="change-bookmarks-dir">
<button class="btn btn-outline-secondary" (click)="resetEmailServiceUrl()">
Reset
</button>
<button class="btn btn-outline-secondary" (click)="testEmailServiceUrl()">
Test
</button>
</div>
</div>
<div class="col-auto d-flex d-md-block justify-content-sm-center text-md-end">
<button type="button" class="flex-fill btn btn-secondary me-2" (click)="resetToDefaults()">Reset to Default</button>
<button type="button" class="flex-fill btn btn-secondary me-2" (click)="resetForm()">Reset</button>
<button type="submit" class="flex-fill btn btn-primary" (click)="saveSettings()" [disabled]="!settingsForm.touched && !settingsForm.dirty">Save</button>
</div>
</form>
</div>

0
UI/Web/src/app/admin/manage-email-settings/manage-email-settings.component.scss Normal file
View file

78
UI/Web/src/app/admin/manage-email-settings/manage-email-settings.component.ts Normal file
View file

@ -0,0 +1,78 @@
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { take } from 'rxjs';
import { SettingsService, EmailTestResult } from '../settings.service';
import { ServerSettings } from '../_models/server-settings';
@Component({
selector: 'app-manage-email-settings',
templateUrl: './manage-email-settings.component.html',
styleUrls: ['./manage-email-settings.component.scss']
})
export class ManageEmailSettingsComponent implements OnInit {
serverSettings!: ServerSettings;
settingsForm: FormGroup = new FormGroup({});
constructor(private settingsService: SettingsService, private toastr: ToastrService) { }
ngOnInit(): void {
this.settingsService.getServerSettings().pipe(take(1)).subscribe((settings: ServerSettings) => {
this.serverSettings = settings;
this.settingsForm.addControl('emailServiceUrl', new FormControl(this.serverSettings.emailServiceUrl, [Validators.required]));
});
}
resetForm() {
this.settingsForm.get('emailServiceUrl')?.setValue(this.serverSettings.emailServiceUrl);
}
async saveSettings() {
const modelSettings = Object.assign({}, this.serverSettings);
modelSettings.emailServiceUrl = this.settingsForm.get('emailServiceUrl')?.value;
this.settingsService.updateServerSettings(modelSettings).pipe(take(1)).subscribe(async (settings: ServerSettings) => {
this.serverSettings = settings;
this.resetForm();
this.toastr.success('Server settings updated');
}, (err: any) => {
console.error('error: ', err);
});
}
resetToDefaults() {
this.settingsService.resetServerSettings().pipe(take(1)).subscribe(async (settings: ServerSettings) => {
this.serverSettings = settings;
this.resetForm();
this.toastr.success('Server settings updated');
}, (err: any) => {
console.error('error: ', err);
});
}
resetEmailServiceUrl() {
this.settingsService.resetEmailServerSettings().pipe(take(1)).subscribe(async (settings: ServerSettings) => {
this.serverSettings.emailServiceUrl = settings.emailServiceUrl;
this.resetForm();
this.toastr.success('Email Service Reset');
}, (err: any) => {
console.error('error: ', err);
});
}
testEmailServiceUrl() {
this.settingsService.testEmailServerSettings(this.settingsForm.get('emailServiceUrl')?.value || '').pipe(take(1)).subscribe(async (result: EmailTestResult) => {
if (result.successful) {
this.toastr.success('Email Service Url validated');
} else {
this.toastr.error('Email Service Url did not respond. ' + result.errorMessage);
}
}, (err: any) => {
console.error('error: ', err);
});
}
}

21
UI/Web/src/app/admin/manage-media-settings/manage-media-settings.component.html Normal file
View file

@ -0,0 +1,21 @@
<div class="container-fluid">
<form [formGroup]="settingsForm" *ngIf="serverSettings !== undefined">
<div class="row g-0">
<div class="col-md-6 col-sm-12 mb-3">
<label for="bookmark-webp" class="form-label" aria-describedby="collection-info">Save Bookmarks as WebP</label>&nbsp;<i class="fa fa-info-circle" placement="right" [ngbTooltip]="convertBookmarkToWebPTooltip" role="button" tabindex="0"></i>
<ng-template #convertBookmarkToWebPTooltip>When saving bookmarks, covert them to WebP. WebP is not supported on Safari devices and will not render at all. WebP can drastically reduce space requirements for files.</ng-template>
<span class="visually-hidden" id="settings-convertBookmarkToWebP-help"><ng-container [ngTemplateOutlet]="convertBookmarkToWebPTooltip"></ng-container></span>
<div class="form-check form-switch">
<input id="bookmark-webp" type="checkbox" class="form-check-input" formControlName="convertBookmarkToWebP" role="switch">
<label for="bookmark-webp" class="form-check-label" aria-describedby="settings-convertBookmarkToWebP-help">{{settingsForm.get('convertBookmarkToWebP')?.value ? 'WebP' : 'Original' }}</label>
</div>
</div>
</div>
<div class="col-auto d-flex d-md-block justify-content-sm-center text-md-end">
<button type="button" class="flex-fill btn btn-secondary me-2" (click)="resetToDefaults()">Reset to Default</button>
<button type="button" class="flex-fill btn btn-secondary me-2" (click)="resetForm()">Reset</button>
<button type="submit" class="flex-fill btn btn-primary" (click)="saveSettings()" [disabled]="!settingsForm.touched && !settingsForm.dirty">Save</button>
</div>
</form>
</div>

0
UI/Web/src/app/admin/manage-media-settings/manage-media-settings.component.scss Normal file
View file

53
UI/Web/src/app/admin/manage-media-settings/manage-media-settings.component.ts Normal file
View file

@ -0,0 +1,53 @@
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { take } from 'rxjs';
import { SettingsService } from '../settings.service';
import { ServerSettings } from '../_models/server-settings';
@Component({
selector: 'app-manage-media-settings',
templateUrl: './manage-media-settings.component.html',
styleUrls: ['./manage-media-settings.component.scss']
})
export class ManageMediaSettingsComponent implements OnInit {
serverSettings!: ServerSettings;
settingsForm: FormGroup = new FormGroup({});
constructor(private settingsService: SettingsService, private toastr: ToastrService) { }
ngOnInit(): void {
this.settingsService.getServerSettings().pipe(take(1)).subscribe((settings: ServerSettings) => {
this.serverSettings = settings;
this.settingsForm.addControl('convertBookmarkToWebP', new FormControl(this.serverSettings.convertBookmarkToWebP, [Validators.required]));
});
}
resetForm() {
this.settingsForm.get('convertBookmarkToWebP')?.setValue(this.serverSettings.convertBookmarkToWebP);
}
async saveSettings() {
const modelSettings = Object.assign({}, this.serverSettings);
modelSettings.convertBookmarkToWebP = this.settingsForm.get('convertBookmarkToWebP')?.value;
this.settingsService.updateServerSettings(modelSettings).pipe(take(1)).subscribe(async (settings: ServerSettings) => {
this.serverSettings = settings;
this.resetForm();
this.toastr.success('Server settings updated');
}, (err: any) => {
console.error('error: ', err);
});
}
resetToDefaults() {
this.settingsService.resetServerSettings().pipe(take(1)).subscribe(async (settings: ServerSettings) => {
this.serverSettings = settings;
this.resetForm();
this.toastr.success('Server settings updated');
}, (err: any) => {
console.error('error: ', err);
});
}
}

45
UI/Web/src/app/admin/manage-settings/manage-settings.component.html
View file

@ -10,7 +10,7 @@
<div class="mb-3">
<label for="settings-bookmarksdir" class="form-label">Bookmarks Directory</label>&nbsp;<i class="fa fa-info-circle" placement="right" [ngbTooltip]="bookmarksDirectoryTooltip" role="button" tabindex="0"></i>
<ng-template #bookmarksDirectoryTooltip>Location where bookmarks will be stored. Bookmarks are source files and can be large. Choose a location with adequate storage. Directory is managed, other files within directory will be deleted.</ng-template>
<ng-template #bookmarksDirectoryTooltip>Location where bookmarks will be stored. Bookmarks are source files and can be large. Choose a location with adequate storage. Directory is managed, other files within directory will be deleted. If docker, mount an additional volume and use that.</ng-template>
<span class="visually-hidden" id="settings-bookmarksdir-help"><ng-container [ngTemplateOutlet]="bookmarksDirectoryTooltip"></ng-container></span>
<div class="input-group">
<input readonly id="settings-bookmarksdir" aria-describedby="settings-bookmarksdir-help" class="form-control" formControlName="bookmarksDirectory" type="text" aria-describedby="change-bookmarks-dir">
@ -40,13 +40,14 @@
<div class="mb-3">
<label for="stat-collection" class="form-label" aria-describedby="collection-info">Allow Anonymous Usage Collection</label>
<p class="accent" id="collection-info">Send anonymous usage and error information to Kavita's servers. This includes information on your browser, error reporting as well as OS and runtime version. We will use this information to prioritize features, bug fixes, and preformance tuning. Requires restart to take effect. See <a href="https://wiki.kavitareader.com/en/faq" target="_blank" referrerpolicy="no-refer">wiki</a> for what is collected.</p>
<p class="accent" id="collection-info">Send anonymous usage data to Kavita's servers. This includes information on certain features used, number of files, OS version, kavita install version, cpu and memory. We will use this information to prioritize features, bug fixes, and preformance tuning. Requires restart to take effect. See <a href="https://wiki.kavitareader.com/en/faq" target="_blank" referrerpolicy="no-refer">wiki</a> for what is collected.</p>
<div class="form-check form-switch">
<input id="stat-collection" type="checkbox" aria-label="Stat Collection" class="form-check-input" formControlName="allowStatCollection" role="switch">
<label for="stat-collection" class="form-check-label">Send Data</label>
</div>
</div>
<!-- TODO: Move this to Plugins tab once we build out some basic tables -->
<div class="mb-3">
<label for="opds" aria-describedby="opds-info" class="form-label">OPDS</label>
<p class="accent" id="opds-info">OPDS support will allow all users to use OPDS to read and download content from the server. If OPDS is enabled, a user will not need download permissions to download media while using it.</p>
@ -55,46 +56,6 @@
<label for="opds" class="form-check-label">Enable OPDS</label>
</div>
</div>
<h4>Email Services (SMTP)</h4>
<p class="accent">Kavita comes out of the box with an email service to power flows like invite user, forgot password, etc. Emails sent via our service are deleted immediately. You can use your own
email service. Set the url of the email service and use the Test button to ensure it works. At any time you can reset to ours. There is no way to disable emails although confirmation links will always
be saved to logs.
</p>
<div class="mb-3">
<label for="settings-emailservice" class="form-label">Email Service Url</label>&nbsp;<i class="fa fa-info-circle" placement="right" [ngbTooltip]="emailServiceTooltip" role="button" tabindex="0"></i>
<ng-template #emailServiceTooltip>Use fully qualified url of the email service. Do not include ending slash.</ng-template>
<span class="visually-hidden" id="settings-emailservice-help"><ng-container [ngTemplateOutlet]="emailServiceTooltip"></ng-container></span>
<div class="input-group">
<input id="settings-emailservice" aria-describedby="settings-emailservice-help" class="form-control" formControlName="emailServiceUrl" type="text" aria-describedby="change-bookmarks-dir">
<button class="btn btn-outline-secondary" (click)="resetEmailServiceUrl()">
Reset
</button>
<button class="btn btn-outline-secondary" (click)="testEmailServiceUrl()">
Test
</button>
</div>
</div>
<h4>Reoccuring Tasks</h4>
<div class="mb-3">
<label for="settings-tasks-scan" class="form-label">Library Scan</label>&nbsp;<i class="fa fa-info-circle" placement="right" [ngbTooltip]="taskScanTooltip" role="button" tabindex="0"></i>
<ng-template #taskScanTooltip>How often Kavita will scan and refresh metadata around manga files.</ng-template>
<span class="visually-hidden" id="settings-tasks-scan-help">How often Kavita will scan and refresh metatdata around manga files.</span>
<select class="form-select" aria-describedby="settings-tasks-scan-help" formControlName="taskScan" id="settings-tasks-scan">
<option *ngFor="let freq of taskFrequencies" [value]="freq">{{freq | titlecase}}</option>
</select>
</div>
<div class="mb-3">
<label for="settings-tasks-backup" class="form-label">Library Database Backup</label>&nbsp;<i class="fa fa-info-circle" placement="right" [ngbTooltip]="taskBackupTooltip" role="button" tabindex="0"></i>
<ng-template #taskBackupTooltip>How often Kavita will backup the database.</ng-template>
<span class="visually-hidden" id="settings-tasks-backup-help">How often Kavita will backup the database.</span>
<select class="form-select" aria-describedby="settings-tasks-backup-help" formControlName="taskBackup" id="settings-tasks-backup">
<option *ngFor="let freq of taskFrequencies" [value]="freq">{{freq | titlecase}}</option>
</select>
</div>
<div class="col-auto d-flex d-md-block justify-content-sm-center text-md-end">
<button type="button" class="flex-fill btn btn-secondary me-2" (click)="resetToDefaults()">Reset to Default</button>

40
UI/Web/src/app/admin/manage-settings/manage-settings.component.ts
View file

@ -93,28 +93,28 @@ export class ManageSettingsComponent implements OnInit {
});
}
resetEmailServiceUrl() {
this.settingsService.resetEmailServerSettings().pipe(take(1)).subscribe(async (settings: ServerSettings) => {
this.serverSettings.emailServiceUrl = settings.emailServiceUrl;
this.resetForm();
this.toastr.success('Email Service Reset');
}, (err: any) => {
console.error('error: ', err);
});
}
// resetEmailServiceUrl() {
// this.settingsService.resetEmailServerSettings().pipe(take(1)).subscribe(async (settings: ServerSettings) => {
// this.serverSettings.emailServiceUrl = settings.emailServiceUrl;
// this.resetForm();
// this.toastr.success('Email Service Reset');
// }, (err: any) => {
// console.error('error: ', err);
// });
// }
testEmailServiceUrl() {
this.settingsService.testEmailServerSettings(this.settingsForm.get('emailServiceUrl')?.value || '').pipe(take(1)).subscribe(async (result: EmailTestResult) => {
if (result.successful) {
this.toastr.success('Email Service Url validated');
} else {
this.toastr.error('Email Service Url did not respond. ' + result.errorMessage);
}
// testEmailServiceUrl() {
// this.settingsService.testEmailServerSettings(this.settingsForm.get('emailServiceUrl')?.value || '').pipe(take(1)).subscribe(async (result: EmailTestResult) => {
// if (result.successful) {
// this.toastr.success('Email Service Url validated');
// } else {
// this.toastr.error('Email Service Url did not respond. ' + result.errorMessage);
// }
}, (err: any) => {
console.error('error: ', err);
});
// }, (err: any) => {
// console.error('error: ', err);
// });
}
// }
}

27
UI/Web/src/app/admin/manage-system/manage-system.component.html
View file

@ -1,31 +1,4 @@
<div class="container-fluid">
<div class="float-end">
<div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
<button class="btn btn-outline-primary me-2" id="dropdownManual" ngbDropdownToggle>
<ng-container *ngIf="backupDBInProgress || clearCacheInProgress || isCheckingForUpdate || downloadLogsInProgress">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</ng-container>
Actions
</button>
<div ngbDropdownMenu aria-labelledby="dropdownManual">
<button ngbDropdownItem (click)="backupDB()" [disabled]="backupDBInProgress">
Backup Database
</button>
<button ngbDropdownItem (click)="clearCache()" [disabled]="clearCacheInProgress">
Clear Cache
</button>
<button ngbDropdownItem (click)="downloadLogs()" [disabled]="downloadLogsInProgress">
Download Logs
</button>
<button ngbDropdownItem (click)="checkForUpdates()">
Check for Updates
</button>
</div>
</div>
</div>
<h3>About System</h3>
<hr/>
<div class="mb-3" *ngIf="serverInfo">

53
UI/Web/src/app/admin/manage-system/manage-system.component.ts
View file

@ -1,10 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
import { finalize, take, takeWhile } from 'rxjs/operators';
import { UpdateNotificationModalComponent } from 'src/app/shared/update-notification/update-notification-modal.component';
import { DownloadService } from 'src/app/shared/_services/download.service';
import { take } from 'rxjs/operators';
import { ServerService } from 'src/app/_services/server.service';
import { SettingsService } from '../settings.service';
import { ServerInfo } from '../_models/server-info';
@ -21,14 +18,9 @@ export class ManageSystemComponent implements OnInit {
serverSettings!: ServerSettings;
serverInfo!: ServerInfo;
clearCacheInProgress: boolean = false;
backupDBInProgress: boolean = false;
isCheckingForUpdate: boolean = false;
downloadLogsInProgress: boolean = false;
constructor(private settingsService: SettingsService, private toastr: ToastrService,
private serverService: ServerService, public downloadService: DownloadService,
private modalService: NgbModal) { }
private serverService: ServerService) { }
ngOnInit(): void {
@ -67,45 +59,4 @@ export class ManageSystemComponent implements OnInit {
console.error('error: ', err);
});
}
clearCache() {
this.clearCacheInProgress = true;
this.serverService.clearCache().subscribe(res => {
this.clearCacheInProgress = false;
this.toastr.success('Cache has been cleared');
});
}
backupDB() {
this.backupDBInProgress = true;
this.serverService.backupDatabase().subscribe(res => {
this.backupDBInProgress = false;
this.toastr.success('Database has been backed up');
});
}
checkForUpdates() {
this.isCheckingForUpdate = true;
this.serverService.checkForUpdate().subscribe((update) => {
this.isCheckingForUpdate = false;
if (update === null) {
this.toastr.info('No updates available');
return;
}
const modalRef = this.modalService.open(UpdateNotificationModalComponent, { scrollable: true, size: 'lg' });
modalRef.componentInstance.updateData = update;
});
}
downloadLogs() {
this.downloadLogsInProgress = true;
this.downloadService.downloadLogs().pipe(
takeWhile(val => {
return val.state != 'DONE';
}),
finalize(() => {
this.downloadLogsInProgress = false;
})).subscribe(() => {/* No Operation */});
}
}

73
UI/Web/src/app/admin/manage-tasks-settings/manage-tasks-settings.component.html Normal file
View file

@ -0,0 +1,73 @@
<div class="container-fluid">
<form [formGroup]="settingsForm" *ngIf="serverSettings !== undefined">
<h4>Reoccuring Tasks</h4>
<div class="mb-3">
<label for="settings-tasks-scan" class="form-label">Library Scan</label>&nbsp;<i class="fa fa-info-circle" placement="right" [ngbTooltip]="taskScanTooltip" role="button" tabindex="0"></i>
<ng-template #taskScanTooltip>How often Kavita will scan and refresh metadata around manga files.</ng-template>
<span class="visually-hidden" id="settings-tasks-scan-help">How often Kavita will scan and refresh metatdata around manga files.</span>
<select class="form-select" aria-describedby="settings-tasks-scan-help" formControlName="taskScan" id="settings-tasks-scan">
<option *ngFor="let freq of taskFrequencies" [value]="freq">{{freq | titlecase}}</option>
</select>
</div>
<div class="mb-3">
<label for="settings-tasks-backup" class="form-label">Library Database Backup</label>&nbsp;<i class="fa fa-info-circle" placement="right" [ngbTooltip]="taskBackupTooltip" role="button" tabindex="0"></i>
<ng-template #taskBackupTooltip>How often Kavita will backup the database.</ng-template>
<span class="visually-hidden" id="settings-tasks-backup-help">How often Kavita will backup the database.</span>
<select class="form-select" aria-describedby="settings-tasks-backup-help" formControlName="taskBackup" id="settings-tasks-backup">
<option *ngFor="let freq of taskFrequencies" [value]="freq">{{freq | titlecase}}</option>
</select>
</div>
<h4>Ad-hoc Tasks</h4>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Job Title</th>
<th scope="col">Description</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let task of adhocTasks; let idx = index;">
<td id="adhoctask--{{idx}}">
{{task.name}}
</td>
<td>
{{task.description}}
</td>
<td>
<button class="btn btn-primary" (click)="runAdhoc(task)" attr.aria-labelledby="adhoctask--{{idx}}">Run</button>
</td>
</tr>
</tbody>
</table>
<h4>Reoccuring Tasks</h4>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Job Title</th>
<th scope="col">Last Executed</th>
<th scope="col">Cron</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let task of reoccuringTasks$ | async; index as i">
<td>
{{task.title | titlecase}}
</td>
<td>{{task.lastExecution | date:'short' | defaultValue }}</td>
<td>{{task.cron}}</td>
</tr>
</tbody>
</table>
<div class="col-auto d-flex d-md-block justify-content-sm-center text-md-end">
<button type="button" class="flex-fill btn btn-secondary me-2" (click)="resetToDefaults()">Reset to Default</button>
<button type="button" class="flex-fill btn btn-secondary me-2" (click)="resetForm()">Reset</button>
<button type="submit" class="flex-fill btn btn-primary" (click)="saveSettings()" [disabled]="!settingsForm.touched && !settingsForm.dirty">Save</button>
</div>
</form>
</div>

3
UI/Web/src/app/admin/manage-tasks-settings/manage-tasks-settings.component.scss Normal file
View file

@ -0,0 +1,3 @@
.table {
background-color: lightgrey;
}

151
UI/Web/src/app/admin/manage-tasks-settings/manage-tasks-settings.component.ts Normal file
View file

@ -0,0 +1,151 @@
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { ConfirmService } from 'src/app/shared/confirm.service';
import { SettingsService } from '../settings.service';
import { ServerSettings } from '../_models/server-settings';
import { catchError, finalize, shareReplay, take, takeWhile } from 'rxjs/operators';
import { forkJoin, Observable, of } from 'rxjs';
import { ServerService } from 'src/app/_services/server.service';
import { Job } from 'src/app/_models/job/job';
import { UpdateNotificationModalComponent } from 'src/app/shared/update-notification/update-notification-modal.component';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { DownloadService } from 'src/app/shared/_services/download.service';
interface AdhocTask {
name: string;
description: string;
api: Observable<any>;
successMessage: string;
successFunction?: (data: any) => void;
}
@Component({
selector: 'app-manage-tasks-settings',
templateUrl: './manage-tasks-settings.component.html',
styleUrls: ['./manage-tasks-settings.component.scss']
})
export class ManageTasksSettingsComponent implements OnInit {
serverSettings!: ServerSettings;
settingsForm: FormGroup = new FormGroup({});
taskFrequencies: Array<string> = [];
logLevels: Array<string> = [];
reoccuringTasks$: Observable<Array<Job>> = of([]);
adhocTasks: Array<AdhocTask> = [
{
name: 'Convert Bookmarks to WebP',
description: 'Runs a long-running task which will convert all bookmarks to WebP. This is slow (especially on ARM devices).',
api: this.serverService.convertBookmarks(),
successMessage: 'Conversion of Bookmarks has been queued'
},
{
name: 'Clear Cache',
description: 'Clears cached files for reading. Usefull when you\'ve just updated a file that you were previously reading within last 24 hours.',
api: this.serverService.clearCache(),
successMessage: 'Cache has been cleared'
},
{
name: 'Backup Database',
description: 'Takes a backup of the database, bookmarks, themes, manually uploaded covers, and config files',
api: this.serverService.backupDatabase(),
successMessage: 'A job to backup the database has been queued'
},
{
name: 'Download Logs',
description: 'Compiles all log files into a zip and downloads it',
api: this.downloadService.downloadLogs().pipe(
takeWhile(val => {
return val.state != 'DONE';
})),
successMessage: ''
},
{
name: 'Check for Updates',
description: 'See if there are any Stable releases ahead of your version',
api: this.serverService.checkForUpdate(),
successMessage: '',
successFunction: (update) => {
if (update === null) {
this.toastr.info('No updates available');
return;
}
const modalRef = this.modalService.open(UpdateNotificationModalComponent, { scrollable: true, size: 'lg' });
modalRef.componentInstance.updateData = update;
}
},
];
constructor(private settingsService: SettingsService, private toastr: ToastrService,
private serverService: ServerService, private modalService: NgbModal,
private downloadService: DownloadService) { }
ngOnInit(): void {
forkJoin({
frequencies: this.settingsService.getTaskFrequencies(),
levels: this.settingsService.getLoggingLevels(),
settings: this.settingsService.getServerSettings()
}
).subscribe(result => {
this.taskFrequencies = result.frequencies;
this.logLevels = result.levels;
this.serverSettings = result.settings;
this.settingsForm.addControl('taskScan', new FormControl(this.serverSettings.taskScan, [Validators.required]));
this.settingsForm.addControl('taskBackup', new FormControl(this.serverSettings.taskBackup, [Validators.required]));
});
this.reoccuringTasks$ = this.serverService.getReoccuringJobs().pipe(shareReplay());
}
resetForm() {
this.settingsForm.get('taskScan')?.setValue(this.serverSettings.taskScan);
this.settingsForm.get('taskBackup')?.setValue(this.serverSettings.taskBackup);
}
async saveSettings() {
const modelSettings = Object.assign({}, this.serverSettings);
modelSettings.taskBackup = this.settingsForm.get('taskBackup')?.value;
modelSettings.taskScan = this.settingsForm.get('taskScan')?.value;
this.settingsService.updateServerSettings(modelSettings).pipe(take(1)).subscribe(async (settings: ServerSettings) => {
this.serverSettings = settings;
this.resetForm();
this.reoccuringTasks$ = this.serverService.getReoccuringJobs().pipe(shareReplay());
this.toastr.success('Server settings updated');
}, (err: any) => {
console.error('error: ', err);
});
}
resetToDefaults() {
this.settingsService.resetServerSettings().pipe(take(1)).subscribe(async (settings: ServerSettings) => {
this.serverSettings = settings;
this.resetForm();
this.toastr.success('Server settings updated');
}, (err: any) => {
console.error('error: ', err);
});
}
runAdhocConvert() {
this.serverService.convertBookmarks().subscribe(() => {
this.toastr.success('Conversion of Bookmarks has been queued.');
});
}
runAdhoc(task: AdhocTask) {
task.api.subscribe((data: any) => {
if (task.successMessage.length > 0) {
this.toastr.success(task.successMessage);
}
if (task.successFunction) {
task.successFunction(data);
}
});
}
}

7
UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html
View file

@ -39,11 +39,10 @@
<div class="card col-auto mt-2 mb-2" *ngFor="let item of items; trackBy:trackByIdentity; index as i">
<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item, idx: i }"></ng-container>
</div>
<p *ngIf="items.length === 0 && !isLoading">
<ng-container [ngTemplateOutlet]="noDataTemplate"></ng-container>
</p>
</div>
<p *ngIf="items.length === 0 && !isLoading">
<ng-container [ngTemplateOutlet]="noDataTemplate"></ng-container>
</p>
</ng-template>
<ng-template #paginationTemplate let-id="id">

13
UI/Web/src/app/pipe/default-value.pipe.ts Normal file
View file

@ -0,0 +1,13 @@
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'defaultValue'
})
export class DefaultValuePipe implements PipeTransform {
transform(value: any): string {
if (value === null || value === undefined || value === '' || value === Infinity || value === NaN || value === {}) return '—';
return value;
}
}

7
UI/Web/src/app/pipe/pipe.module.ts
View file

@ -6,6 +6,7 @@ import { SentenceCasePipe } from './sentence-case.pipe';
import { PersonRolePipe } from './person-role.pipe';
import { SafeHtmlPipe } from './safe-html.pipe';
import { RelationshipPipe } from './relationship.pipe';
import { DefaultValuePipe } from './default-value.pipe';
@ -16,7 +17,8 @@ import { RelationshipPipe } from './relationship.pipe';
PublicationStatusPipe,
SentenceCasePipe,
SafeHtmlPipe,
RelationshipPipe
RelationshipPipe,
DefaultValuePipe
],
imports: [
CommonModule,
@ -27,7 +29,8 @@ import { RelationshipPipe } from './relationship.pipe';
PublicationStatusPipe,
SentenceCasePipe,
SafeHtmlPipe,
RelationshipPipe
RelationshipPipe,
DefaultValuePipe
]
})
export class PipeModule { }

3
UI/Web/src/app/user-settings/user-preferences/user-preferences.component.html
View file

@ -227,7 +227,8 @@
</form>
</ng-container>
<ng-container *ngIf="tab.fragment === 'password'">
<ng-container *ngIf="(isAdmin || hasChangePasswordRole); else noPermission">
<ng-container *ngIf="(hasChangePasswordAbility | async); else noPermission">
<p>Change your Password</p>
<div class="alert alert-danger" role="alert" *ngIf="resetPasswordErrors.length > 0">
<div *ngFor="let error of resetPasswordErrors">{{error}}</div>

13
UI/Web/src/app/user-settings/user-preferences/user-preferences.component.ts
View file

@ -1,7 +1,7 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { take, takeUntil } from 'rxjs/operators';
import { map, shareReplay, take, takeUntil } from 'rxjs/operators';
import { Title } from '@angular/platform-browser';
import { BookService } from 'src/app/book-reader/book.service';
import { readingDirections, scalingOptions, pageSplitOptions, readingModes, Preferences, bookLayoutModes, layoutModes } from 'src/app/_models/preferences/preferences';
@ -11,7 +11,7 @@ import { ActivatedRoute, Router } from '@angular/router';
import { SettingsService } from 'src/app/admin/settings.service';
import { bookColorThemes } from 'src/app/book-reader/reader-settings/reader-settings.component';
import { BookPageLayoutMode } from 'src/app/_models/book-page-layout-mode';
import { forkJoin, Subject } from 'rxjs';
import { forkJoin, Observable, of, Subject } from 'rxjs';
enum AccordionPanelID {
ImageReader = 'image-reader',
@ -36,8 +36,7 @@ export class UserPreferencesComponent implements OnInit, OnDestroy {
settingsForm: FormGroup = new FormGroup({});
passwordChangeForm: FormGroup = new FormGroup({});
user: User | undefined = undefined;
isAdmin: boolean = false;
hasChangePasswordRole: boolean = false;
hasChangePasswordAbility: Observable<boolean> = of(false);
passwordsMatch = false;
resetPasswordErrors: string[] = [];
@ -83,6 +82,10 @@ export class UserPreferencesComponent implements OnInit, OnDestroy {
ngOnInit(): void {
this.titleService.setTitle('Kavita - User Preferences');
this.hasChangePasswordAbility = this.accountService.currentUser$.pipe(takeUntil(this.onDestroy), shareReplay(), map(user => {
return user !== undefined && (this.accountService.hasAdminRole(user) || this.accountService.hasChangePasswordRole(user));
}));
forkJoin({
user: this.accountService.currentUser$.pipe(take(1)),
pref: this.accountService.getPreferences()
@ -94,8 +97,6 @@ export class UserPreferencesComponent implements OnInit, OnDestroy {
this.user = results.user;
this.user.preferences = results.pref;
this.isAdmin = this.accountService.hasAdminRole(results.user);
this.hasChangePasswordRole = this.accountService.hasChangePasswordRole(results.user);
if (this.fontFamilies.indexOf(this.user.preferences.bookReaderFontFamily) < 0) {
this.user.preferences.bookReaderFontFamily = 'default';