Cutlery/Kavita
1
0
Fork 0
mirror of https://github.com/Kareadita/Kavita.git synced 2025-05-24 00:52:23 -04:00
Code Issues Packages Projects Releases Wiki Activity

Angular 14 (#1420)

Browse Source 
* Updated to Angular 14

* Fixed all new tslint issues

* Fixed a routing bug for Angular 14

* Updated ngBootstrap and bootstrap. Fixed side nav item not highlighting on route change

* Refactored how default dark styles are done

* Migrated everything to a typed form

* Bump versions by dotnet-bump-version.

* Fixed a regression where click areas need an explicit z-index

* Cleanup some css

* Bumped docnet back to the alpha which has our downstream fixes

* Updated dependencies to later versions. Mainly just NetVips with some archive fixes.

* Fixed broken unit tests (due to some fixes in SharpCompress that changed byte arrays, but not visible quality)
This commit is contained in:
Joseph Milazzo 2022-08-09 08:02:41 -05:00 committed by GitHub
parent 01e874150e
commit b38a26f92b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
71 changed files with 4638 additions and 835 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
API.Tests/API.Tests.csproj
View File

@ -10,8 +10,8 @@
<PackageReference Include="Microsoft.EntityFrameworkCore.InMemory" Version="6.0.7" />
<PackageReference Include="Microsoft.NET.Test.Sdk" Version="17.2.0" />
<PackageReference Include="NSubstitute" Version="4.4.0" />
<PackageReference Include="System.IO.Abstractions.TestingHelpers" Version="17.0.21" />
<PackageReference Include="xunit" Version="2.4.1" />
<PackageReference Include="System.IO.Abstractions.TestingHelpers" Version="17.0.24" />
<PackageReference Include="xunit" Version="2.4.2" />
<PackageReference Include="xunit.runner.visualstudio" Version="2.4.5">
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
<PrivateAssets>all</PrivateAssets>

BIN
API.Tests/Services/Test Data/ArchiveService/CoverImages/macos_native.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 41 KiB

BIN
API.Tests/Services/Test Data/ArchiveService/CoverImages/sorting.expected.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 90 KiB

After

Width:  |  Height:  |  Size: 142 KiB

BIN
API.Tests/Services/Test Data/ArchiveService/CoverImages/v10 - duplicate covers.expected.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 123 KiB

After

Width:  |  Height:  |  Size: 151 KiB

BIN
API.Tests/Services/Test Data/ArchiveService/CoverImages/v10 - nested folder.expected.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 123 KiB

After

Width:  |  Height:  |  Size: 151 KiB

BIN
API.Tests/Services/Test Data/ArchiveService/CoverImages/v10 - with folder.expected.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 99 KiB

After

Width:  |  Height:  |  Size: 119 KiB

BIN
API.Tests/Services/Test Data/ArchiveService/CoverImages/v10.expected.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 123 KiB

After

Width:  |  Height:  |  Size: 151 KiB

18
API/API.csproj
View File

@ -40,7 +40,7 @@
<ItemGroup>
<PackageReference Include="AutoMapper.Extensions.Microsoft.DependencyInjection" Version="11.0.0" />
<PackageReference Include="Docnet.Core" Version="2.4.0-alpha.2" />
<PackageReference Include="Docnet.Core" Version="2.4.0-alpha.4" />
<PackageReference Include="ExCSS" Version="4.1.0" />
<PackageReference Include="Flurl" Version="3.0.6" />
<PackageReference Include="Flurl.Http" Version="3.2.4" />
@ -58,22 +58,22 @@
<PrivateAssets>all</PrivateAssets>
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>
<PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="6.0.6" />
<PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="6.0.7" />
<PackageReference Include="Microsoft.Extensions.DependencyInjection" Version="6.0.0" />
<PackageReference Include="Microsoft.IO.RecyclableMemoryStream" Version="2.2.0" />
<PackageReference Include="NetVips" Version="2.1.0" />
<PackageReference Include="NetVips.Native" Version="8.12.2" />
<PackageReference Include="NetVips" Version="2.2.0" />
<PackageReference Include="NetVips.Native" Version="8.13.0" />
<PackageReference Include="NReco.Logging.File" Version="1.1.5" />
<PackageReference Include="SharpCompress" Version="0.32.1" />
<PackageReference Include="SharpCompress" Version="0.32.2" />
<PackageReference Include="SixLabors.ImageSharp" Version="2.1.3" />
<PackageReference Include="SonarAnalyzer.CSharp" Version="8.41.0.50478">
<PackageReference Include="SonarAnalyzer.CSharp" Version="8.43.0.51858">
<PrivateAssets>all</PrivateAssets>
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>
<PackageReference Include="Swashbuckle.AspNetCore" Version="6.3.1" />
<PackageReference Include="Swashbuckle.AspNetCore" Version="6.4.0" />
<PackageReference Include="System.Drawing.Common" Version="6.0.0" />
<PackageReference Include="System.IdentityModel.Tokens.Jwt" Version="6.21.0" />
<PackageReference Include="System.IO.Abstractions" Version="17.0.18" />
<PackageReference Include="System.IdentityModel.Tokens.Jwt" Version="6.22.0" />
<PackageReference Include="System.IO.Abstractions" Version="17.0.24" />
<PackageReference Include="VersOne.Epub" Version="3.1.2" />
</ItemGroup>

2
Kavita.Common/Kavita.Common.csproj
View File

@ -12,7 +12,7 @@
<PackageReference Include="Flurl.Http" Version="3.2.4" />
<PackageReference Include="Microsoft.Extensions.Configuration.Abstractions" Version="6.0.0" />
<PackageReference Include="Microsoft.Extensions.Hosting" Version="6.0.1" />
<PackageReference Include="SonarAnalyzer.CSharp" Version="8.41.0.50478">
<PackageReference Include="SonarAnalyzer.CSharp" Version="8.43.0.51858">
<PrivateAssets>all</PrivateAssets>
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>

3
UI/Web/angular.json
View File

@ -150,6 +150,5 @@
}
}
}
},
"defaultProject": "kavita-webui"
}
}

4697
UI/Web/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

32
UI/Web/package.json
View File

@ -16,23 +16,23 @@
"private": true,
"dependencies": {
"@angular-slider/ngx-slider": "^2.0.3",
"@angular/animations": "~13.2.2",
"@angular/animations": "^14.1.1",
"@angular/cdk": "^13.2.2",
"@angular/common": "~13.2.2",
"@angular/compiler": "~13.2.2",
"@angular/core": "~13.2.2",
"@angular/forms": "~13.2.2",
"@angular/localize": "~13.2.2",
"@angular/platform-browser": "~13.2.2",
"@angular/platform-browser-dynamic": "~13.2.2",
"@angular/router": "~13.2.2",
"@angular/common": "^14.1.1",
"@angular/compiler": "^14.1.1",
"@angular/core": "^14.1.1",
"@angular/forms": "^14.1.1",
"@angular/localize": "^14.1.1",
"@angular/platform-browser": "^14.1.1",
"@angular/platform-browser-dynamic": "^14.1.1",
"@angular/router": "^14.1.1",
"@fortawesome/fontawesome-free": "^6.0.0",
"@iharbeck/ngx-virtual-scroller": "^13.0.4",
"@microsoft/signalr": "^6.0.2",
"@ng-bootstrap/ng-bootstrap": "^12.1.2",
"@ng-bootstrap/ng-bootstrap": "^13.0.0",
"@popperjs/core": "^2.11.2",
"@types/file-saver": "^2.0.5",
"bootstrap": "^5.1.2",
"bootstrap": "^5.2.0",
"bowser": "^2.11.0",
"eventsource": "^2.0.2",
"file-saver": "^2.0.5",
@ -40,7 +40,7 @@
"ng-circle-progress": "^1.6.0",
"ngx-color-picker": "^12.0.0",
"ngx-extended-pdf-viewer": "^14.5.2",
"ngx-file-drop": "^13.0.0",
"ngx-file-drop": "^14.0.1",
"ngx-infinite-scroll": "^13.0.2",
"ngx-toastr": "^14.2.1",
"requires": "^1.0.2",
@ -51,9 +51,9 @@
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.2.3",
"@angular/cli": "^13.2.3",
"@angular/compiler-cli": "~13.2.2",
"@angular-devkit/build-angular": "^14.1.1",
"@angular/cli": "^14.1.1",
"@angular/compiler-cli": "^14.1.1",
"@playwright/test": "^1.23.2",
"@types/jest": "^27.4.0",
"@types/node": "^17.0.17",
@ -65,7 +65,7 @@
"protractor": "~7.0.0",
"ts-node": "~10.5.0",
"tslint": "^6.1.3",
"typescript": "~4.5.5"
"typescript": "~4.7.4"
},
"jest": {
"preset": "jest-preset-angular",

8
UI/Web/src/app/admin/_modals/library-editor-modal/library-editor-modal.component.ts
View File

@ -1,5 +1,5 @@
import { Component, Input, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
import { ConfirmService } from 'src/app/shared/confirm.service';
@ -17,9 +17,9 @@ export class LibraryEditorModalComponent implements OnInit {
@Input() library: Library | undefined = undefined;
libraryForm: FormGroup = new FormGroup({
name: new FormControl('', [Validators.required]),
type: new FormControl(0, [Validators.required])
libraryForm: UntypedFormGroup = new UntypedFormGroup({
name: new UntypedFormControl('', [Validators.required]),
type: new UntypedFormControl(0, [Validators.required])
});
selectedFolders: string[] = [];

6
UI/Web/src/app/admin/_modals/reset-password-modal/reset-password-modal.component.ts
View File

@ -1,5 +1,5 @@
import { Component, Input, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { Member } from 'src/app/_models/member';
import { AccountService } from 'src/app/_services/account.service';
@ -14,8 +14,8 @@ export class ResetPasswordModalComponent implements OnInit {
@Input() member!: Member;
errorMessage = '';
resetPasswordForm: FormGroup = new FormGroup({
password: new FormControl('', [Validators.required]),
resetPasswordForm: UntypedFormGroup = new UntypedFormGroup({
password: new UntypedFormControl('', [Validators.required]),
});
constructor(public modal: NgbActiveModal, private accountService: AccountService) { }

3
UI/Web/src/app/admin/admin-routing.module.ts
View File

@ -6,10 +6,11 @@ import { DashboardComponent } from './dashboard/dashboard.component';
const routes: Routes = [
{path: '**', component: DashboardComponent, pathMatch: 'full', canActivate: [AdminGuard]},
{
path: '',
runGuardsAndResolvers: 'always',
canActivate: [AdminGuard],
children: [
{path: '/dashboard', component: DashboardComponent},
{path: 'dashboard', component: DashboardComponent},
]
}
];

8
UI/Web/src/app/admin/edit-user/edit-user.component.ts
View File

@ -1,5 +1,5 @@
import { Component, Input, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { Library } from 'src/app/_models/library';
import { Member } from 'src/app/_models/member';
@ -19,7 +19,7 @@ export class EditUserComponent implements OnInit {
selectedLibraries: Array<number> = [];
isSaving: boolean = false;
userForm: FormGroup = new FormGroup({});
userForm: UntypedFormGroup = new UntypedFormGroup({});
public get email() { return this.userForm.get('email'); }
public get username() { return this.userForm.get('username'); }
@ -28,8 +28,8 @@ export class EditUserComponent implements OnInit {
constructor(public modal: NgbActiveModal, private accountService: AccountService) { }
ngOnInit(): void {
this.userForm.addControl('email', new FormControl(this.member.email, [Validators.required, Validators.email]));
this.userForm.addControl('username', new FormControl(this.member.username, [Validators.required]));
this.userForm.addControl('email', new UntypedFormControl(this.member.email, [Validators.required, Validators.email]));
this.userForm.addControl('username', new UntypedFormControl(this.member.username, [Validators.required]));
this.userForm.get('email')?.disable();
}

6
UI/Web/src/app/admin/invite-user/invite-user.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
import { ConfirmService } from 'src/app/shared/confirm.service';
@ -19,7 +19,7 @@ export class InviteUserComponent implements OnInit {
* Maintains if the backend is sending an email
*/
isSending: boolean = false;
inviteForm: FormGroup = new FormGroup({});
inviteForm: UntypedFormGroup = new UntypedFormGroup({});
selectedRoles: Array<string> = [];
selectedLibraries: Array<number> = [];
emailLink: string = '';
@ -32,7 +32,7 @@ export class InviteUserComponent implements OnInit {
private confirmService: ConfirmService, private toastr: ToastrService) { }
ngOnInit(): void {
this.inviteForm.addControl('email', new FormControl('', [Validators.required]));
this.inviteForm.addControl('email', new UntypedFormControl('', [Validators.required]));
}
close() {

1
UI/Web/src/app/admin/library-selector/library-selector.component.ts
View File

@ -1,6 +1,5 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { SelectionModel } from 'src/app/typeahead/typeahead.component';
import { Library } from 'src/app/_models/library';
import { Member } from 'src/app/_models/member';

6
UI/Web/src/app/admin/manage-email-settings/manage-email-settings.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { take } from 'rxjs';
import { SettingsService, EmailTestResult } from '../settings.service';
@ -13,14 +13,14 @@ import { ServerSettings } from '../_models/server-settings';
export class ManageEmailSettingsComponent implements OnInit {
serverSettings!: ServerSettings;
settingsForm: FormGroup = new FormGroup({});
settingsForm: UntypedFormGroup = new UntypedFormGroup({});
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]));
this.settingsForm.addControl('emailServiceUrl', new UntypedFormControl(this.serverSettings.emailServiceUrl, [Validators.required]));
});
}

2
UI/Web/src/app/admin/manage-library/manage-library.component.html
View File

@ -9,7 +9,7 @@
<h4>
<span id="library-name--{{idx}}"><a [routerLink]="'/library/' + library.id">{{library.name}}</a></span>&nbsp;
<div class="float-end">
<button class="btn btn-secondary me-2 btn-sm" (click)="scanLibrary(library)" placement="top" ngbTooltip="Scan Library" attr.aria-label="Scan Library"><i class="fa fa-sync-alt" title="Scan"></i></button>
<button class="btn btn-secondary me-2 btn-sm" (click)="scanLibrary(library)" placement="top" ngbTooltip="Scan Library" aria-label="Scan Library"><i class="fa fa-sync-alt" title="Scan"></i></button>
<button class="btn btn-danger me-2 btn-sm" [disabled]="deletionInProgress" (click)="deleteLibrary(library)"><i class="fa fa-trash" placement="top" ngbTooltip="Delete Library" attr.aria-label="Delete {{library.name | sentenceCase}}"></i></button>
<button class="btn btn-primary btn-sm" (click)="editLibrary(library)"><i class="fa fa-pen" placement="top" ngbTooltip="Edit" attr.aria-label="Edit {{library.name | sentenceCase}}"></i></button>
</div>

6
UI/Web/src/app/admin/manage-media-settings/manage-media-settings.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { take } from 'rxjs';
import { SettingsService } from '../settings.service';
@ -13,14 +13,14 @@ import { ServerSettings } from '../_models/server-settings';
export class ManageMediaSettingsComponent implements OnInit {
serverSettings!: ServerSettings;
settingsForm: FormGroup = new FormGroup({});
settingsForm: UntypedFormGroup = new UntypedFormGroup({});
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]));
this.settingsForm.addControl('convertBookmarkToWebP', new UntypedFormControl(this.serverSettings.convertBookmarkToWebP, [Validators.required]));
});
}

28
UI/Web/src/app/admin/manage-settings/manage-settings.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
import { take } from 'rxjs/operators';
@ -16,7 +16,7 @@ import { ServerSettings } from '../_models/server-settings';
export class ManageSettingsComponent implements OnInit {
serverSettings!: ServerSettings;
settingsForm: FormGroup = new FormGroup({});
settingsForm: UntypedFormGroup = new UntypedFormGroup({});
taskFrequencies: Array<string> = [];
logLevels: Array<string> = [];
@ -32,18 +32,18 @@ export class ManageSettingsComponent implements OnInit {
});
this.settingsService.getServerSettings().pipe(take(1)).subscribe((settings: ServerSettings) => {
this.serverSettings = settings;
this.settingsForm.addControl('cacheDirectory', new FormControl(this.serverSettings.cacheDirectory, [Validators.required]));
this.settingsForm.addControl('bookmarksDirectory', new FormControl(this.serverSettings.bookmarksDirectory, [Validators.required]));
this.settingsForm.addControl('taskScan', new FormControl(this.serverSettings.taskScan, [Validators.required]));
this.settingsForm.addControl('taskBackup', new FormControl(this.serverSettings.taskBackup, [Validators.required]));
this.settingsForm.addControl('port', new FormControl(this.serverSettings.port, [Validators.required]));
this.settingsForm.addControl('loggingLevel', new FormControl(this.serverSettings.loggingLevel, [Validators.required]));
this.settingsForm.addControl('allowStatCollection', new FormControl(this.serverSettings.allowStatCollection, [Validators.required]));
this.settingsForm.addControl('enableOpds', new FormControl(this.serverSettings.enableOpds, [Validators.required]));
this.settingsForm.addControl('baseUrl', new FormControl(this.serverSettings.baseUrl, [Validators.required]));
this.settingsForm.addControl('emailServiceUrl', new FormControl(this.serverSettings.emailServiceUrl, [Validators.required]));
this.settingsForm.addControl('enableSwaggerUi', new FormControl(this.serverSettings.enableSwaggerUi, [Validators.required]));
this.settingsForm.addControl('totalBackups', new FormControl(this.serverSettings.totalBackups, [Validators.required, Validators.min(1), Validators.max(30)]));
this.settingsForm.addControl('cacheDirectory', new UntypedFormControl(this.serverSettings.cacheDirectory, [Validators.required]));
this.settingsForm.addControl('bookmarksDirectory', new UntypedFormControl(this.serverSettings.bookmarksDirectory, [Validators.required]));
this.settingsForm.addControl('taskScan', new UntypedFormControl(this.serverSettings.taskScan, [Validators.required]));
this.settingsForm.addControl('taskBackup', new UntypedFormControl(this.serverSettings.taskBackup, [Validators.required]));
this.settingsForm.addControl('port', new UntypedFormControl(this.serverSettings.port, [Validators.required]));
this.settingsForm.addControl('loggingLevel', new UntypedFormControl(this.serverSettings.loggingLevel, [Validators.required]));
this.settingsForm.addControl('allowStatCollection', new UntypedFormControl(this.serverSettings.allowStatCollection, [Validators.required]));
this.settingsForm.addControl('enableOpds', new UntypedFormControl(this.serverSettings.enableOpds, [Validators.required]));
this.settingsForm.addControl('baseUrl', new UntypedFormControl(this.serverSettings.baseUrl, [Validators.required]));
this.settingsForm.addControl('emailServiceUrl', new UntypedFormControl(this.serverSettings.emailServiceUrl, [Validators.required]));
this.settingsForm.addControl('enableSwaggerUi', new UntypedFormControl(this.serverSettings.enableSwaggerUi, [Validators.required]));
this.settingsForm.addControl('totalBackups', new UntypedFormControl(this.serverSettings.totalBackups, [Validators.required, Validators.min(1), Validators.max(30)]));
});
}

16
UI/Web/src/app/admin/manage-system/manage-system.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { take } from 'rxjs/operators';
import { ServerService } from 'src/app/_services/server.service';
@ -14,7 +14,7 @@ import { ServerSettings } from '../_models/server-settings';
})
export class ManageSystemComponent implements OnInit {
settingsForm: FormGroup = new FormGroup({});
settingsForm: UntypedFormGroup = new UntypedFormGroup({});
serverSettings!: ServerSettings;
serverInfo!: ServerInfo;
@ -30,12 +30,12 @@ export class ManageSystemComponent implements OnInit {
this.settingsService.getServerSettings().pipe(take(1)).subscribe((settings: ServerSettings) => {
this.serverSettings = settings;
this.settingsForm.addControl('cacheDirectory', new FormControl(this.serverSettings.cacheDirectory, [Validators.required]));
this.settingsForm.addControl('taskScan', new FormControl(this.serverSettings.taskScan, [Validators.required]));
this.settingsForm.addControl('taskBackup', new FormControl(this.serverSettings.taskBackup, [Validators.required]));
this.settingsForm.addControl('port', new FormControl(this.serverSettings.port, [Validators.required]));
this.settingsForm.addControl('loggingLevel', new FormControl(this.serverSettings.loggingLevel, [Validators.required]));
this.settingsForm.addControl('allowStatCollection', new FormControl(this.serverSettings.allowStatCollection, [Validators.required]));
this.settingsForm.addControl('cacheDirectory', new UntypedFormControl(this.serverSettings.cacheDirectory, [Validators.required]));
this.settingsForm.addControl('taskScan', new UntypedFormControl(this.serverSettings.taskScan, [Validators.required]));
this.settingsForm.addControl('taskBackup', new UntypedFormControl(this.serverSettings.taskBackup, [Validators.required]));
this.settingsForm.addControl('port', new UntypedFormControl(this.serverSettings.port, [Validators.required]));
this.settingsForm.addControl('loggingLevel', new UntypedFormControl(this.serverSettings.loggingLevel, [Validators.required]));
this.settingsForm.addControl('allowStatCollection', new UntypedFormControl(this.serverSettings.allowStatCollection, [Validators.required]));
});
}

8
UI/Web/src/app/admin/manage-tasks-settings/manage-tasks-settings.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { ConfirmService } from 'src/app/shared/confirm.service';
import { SettingsService } from '../settings.service';
@ -28,7 +28,7 @@ interface AdhocTask {
export class ManageTasksSettingsComponent implements OnInit {
serverSettings!: ServerSettings;
settingsForm: FormGroup = new FormGroup({});
settingsForm: UntypedFormGroup = new UntypedFormGroup({});
taskFrequencies: Array<string> = [];
logLevels: Array<string> = [];
@ -89,8 +89,8 @@ export class ManageTasksSettingsComponent implements OnInit {
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.settingsForm.addControl('taskScan', new UntypedFormControl(this.serverSettings.taskScan, [Validators.required]));
this.settingsForm.addControl('taskBackup', new UntypedFormControl(this.serverSettings.taskBackup, [Validators.required]));
});
this.reoccuringTasks$ = this.serverService.getReoccuringJobs().pipe(shareReplay());

2
UI/Web/src/app/all-series/all-series.component.html
View File

@ -2,7 +2,7 @@
<h2 title>
All Series
</h2>
<h6 subtitle>{{pagination?.totalItems}} Series</h6>
<h6 subtitle *ngIf="pagination">{{pagination.totalItems}} Series</h6>
</app-side-nav-companion-bar>
<app-bulk-operations [actionCallback]="bulkActionCallback"></app-bulk-operations>
<app-card-detail-layout

3
UI/Web/src/app/announcements/announcements-routing.module.ts
View File

@ -7,10 +7,11 @@ import { AnnouncementsComponent } from "./announcements.component";
const routes: Routes = [
{path: '**', component: AnnouncementsComponent, pathMatch: 'full', canActivate: [AuthGuard, AdminGuard]},
{
path: '',
runGuardsAndResolvers: 'always',
canActivate: [AuthGuard, AdminGuard],
children: [
{path: '/announcments', component: AnnouncementsComponent},
{path: 'announcments', component: AnnouncementsComponent},
]
}
];

1
UI/Web/src/app/app-routing.module.ts
View File

@ -79,7 +79,6 @@ const routes: Routes = [
]
},
{path: 'login', loadChildren: () => import('../app/registration/registration.module').then(m => m.RegistrationModule)},
//{path: '', pathMatch: 'full', redirectTo: 'login'}, // This shouldn't be needed
{path: '**', pathMatch: 'full', redirectTo: 'libraries'},
{path: '**', pathMatch: 'prefix', redirectTo: 'libraries'},
];

4
UI/Web/src/app/app.component.html
View File

@ -1,10 +1,10 @@
<app-nav-header></app-nav-header>
<div [ngClass]="{'closed' : (navService?.sideNavCollapsed$ | async), 'content-wrapper': navService.sideNavVisibility$ | async}">
<div [ngClass]="{'closed' : (navService.sideNavCollapsed$ | async), 'content-wrapper': navService.sideNavVisibility$ | async}">
<a id="content"></a>
<app-side-nav *ngIf="navService.sideNavVisibility$ | async as sideNavVisibile"></app-side-nav>
<div class="container-fluid" [ngClass]="{'g-0': !(navService.sideNavVisibility$ | async)}">
<div style="padding: 20px 0 0;" *ngIf="navService.sideNavVisibility$ | async else noSideNav">
<div class="companion-bar" [ngClass]="{'companion-bar-content': !(navService?.sideNavCollapsed$ | async)}">
<div class="companion-bar" [ngClass]="{'companion-bar-content': !(navService.sideNavCollapsed$ | async)}">
<router-outlet></router-outlet>
</div>
</div>

53
UI/Web/src/app/app.module.ts
View File

@ -17,33 +17,30 @@ import { NavModule } from './nav/nav.module';
@NgModule({
declarations: [
AppComponent,
],
imports: [
HttpClientModule,
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
SidenavModule,
NavModule,
ToastrModule.forRoot({
positionClass: 'toast-bottom-right',
preventDuplicates: true,
timeOut: 6000,
countDuplicates: true,
autoDismiss: true
}),
],
providers: [
{provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true},
{provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true},
Title,
{provide: SAVER, useFactory: getSaver},
],
entryComponents: [],
bootstrap: [AppComponent]
declarations: [
AppComponent,
],
imports: [
HttpClientModule,
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
SidenavModule,
NavModule,
ToastrModule.forRoot({
positionClass: 'toast-bottom-right',
preventDuplicates: true,
timeOut: 6000,
countDuplicates: true,
autoDismiss: true
}),
],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
Title,
{ provide: SAVER, useFactory: getSaver },
],
bootstrap: [AppComponent]
})
export class AppModule { }

3
UI/Web/src/app/book-reader/book-reader/book-reader.component.scss
View File

@ -298,7 +298,6 @@ $action-bar-height: 38px;
border: none !important;
opacity: 0;
outline: none;
//background-color: aqua;
&.immersive {
top: 0px;
@ -318,7 +317,6 @@ $action-bar-height: 38px;
border: none !important;
opacity: 0;
outline: none;
//background-color: aqua;
&.immersive {
top: 0px;
@ -337,7 +335,6 @@ $action-bar-height: 38px;
cursor: pointer;
opacity: 0;
outline: none;
//background-color: aqua;
&.immersive {
top: 0px;

18
UI/Web/src/app/book-reader/reader-settings/reader-settings.component.ts
View File

@ -1,6 +1,6 @@
import { DOCUMENT } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Inject, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { Subject, take, takeUntil } from 'rxjs';
import { BookPageLayoutMode } from 'src/app/_models/book-page-layout-mode';
import { BookTheme } from 'src/app/_models/preferences/book-theme';
@ -110,7 +110,7 @@ export class ReaderSettingsComponent implements OnInit, OnDestroy {
isFullscreen: boolean = false;
settingsForm: FormGroup = new FormGroup({});
settingsForm: UntypedFormGroup = new UntypedFormGroup({});
/**
* System provided themes
@ -163,7 +163,7 @@ export class ReaderSettingsComponent implements OnInit, OnDestroy {
this.readingDirectionModel = this.user.preferences.bookReaderReadingDirection;
this.settingsForm.addControl('bookReaderFontFamily', new FormControl(this.user.preferences.bookReaderFontFamily, []));
this.settingsForm.addControl('bookReaderFontFamily', new UntypedFormControl(this.user.preferences.bookReaderFontFamily, []));
this.settingsForm.get('bookReaderFontFamily')!.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe(fontName => {
const familyName = this.fontFamilies.filter(f => f.title === fontName)[0].family;
if (familyName === 'default') {
@ -175,36 +175,36 @@ export class ReaderSettingsComponent implements OnInit, OnDestroy {
this.styleUpdate.emit(this.pageStyles);
});
this.settingsForm.addControl('bookReaderFontSize', new FormControl(this.user.preferences.bookReaderFontSize, []));
this.settingsForm.addControl('bookReaderFontSize', new UntypedFormControl(this.user.preferences.bookReaderFontSize, []));
this.settingsForm.get('bookReaderFontSize')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe(value => {
this.pageStyles['font-size'] = value + '%';
this.styleUpdate.emit(this.pageStyles);
});
this.settingsForm.addControl('bookReaderTapToPaginate', new FormControl(this.user.preferences.bookReaderTapToPaginate, []));
this.settingsForm.addControl('bookReaderTapToPaginate', new UntypedFormControl(this.user.preferences.bookReaderTapToPaginate, []));
this.settingsForm.get('bookReaderTapToPaginate')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe(value => {
this.clickToPaginateChanged.emit(value);
});
this.settingsForm.addControl('bookReaderLineSpacing', new FormControl(this.user.preferences.bookReaderLineSpacing, []));
this.settingsForm.addControl('bookReaderLineSpacing', new UntypedFormControl(this.user.preferences.bookReaderLineSpacing, []));
this.settingsForm.get('bookReaderLineSpacing')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe(value => {
this.pageStyles['line-height'] = value + '%';
this.styleUpdate.emit(this.pageStyles);
});
this.settingsForm.addControl('bookReaderMargin', new FormControl(this.user.preferences.bookReaderMargin, []));
this.settingsForm.addControl('bookReaderMargin', new UntypedFormControl(this.user.preferences.bookReaderMargin, []));
this.settingsForm.get('bookReaderMargin')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe(value => {
this.pageStyles['margin-left'] = value + '%';
this.pageStyles['margin-right'] = value + '%';
this.styleUpdate.emit(this.pageStyles);
});
this.settingsForm.addControl('layoutMode', new FormControl(this.user.preferences.bookReaderLayoutMode || BookPageLayoutMode.Default, []));
this.settingsForm.addControl('layoutMode', new UntypedFormControl(this.user.preferences.bookReaderLayoutMode || BookPageLayoutMode.Default, []));
this.settingsForm.get('layoutMode')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe((layoutMode: BookPageLayoutMode) => {
this.layoutModeUpdate.emit(layoutMode);
});
this.settingsForm.addControl('bookReaderImmersiveMode', new FormControl(this.user.preferences.bookReaderImmersiveMode, []));
this.settingsForm.addControl('bookReaderImmersiveMode', new UntypedFormControl(this.user.preferences.bookReaderImmersiveMode, []));
this.settingsForm.get('bookReaderImmersiveMode')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe((immersiveMode: boolean) => {
if (immersiveMode) {
this.settingsForm.get('bookReaderTapToPaginate')?.setValue(true);

3
UI/Web/src/app/bookmark/bookmark-routing.module.ts
View File

@ -6,10 +6,11 @@ import { BookmarksComponent } from "./bookmarks/bookmarks.component";
const routes: Routes = [
{path: '**', component: BookmarksComponent, pathMatch: 'full', canActivate: [AuthGuard]},
{
path: '',
runGuardsAndResolvers: 'always',
canActivate: [AuthGuard],
children: [
{path: '/bookmarks', component: BookmarksComponent},
{path: 'bookmarks', component: BookmarksComponent},
]
}
];

8
UI/Web/src/app/cards/_modals/bulk-add-to-collection/bulk-add-to-collection.component.ts
View File

@ -1,5 +1,5 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { UntypedFormGroup, UntypedFormControl } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
import { CollectionTag } from 'src/app/_models/collection-tag';
@ -26,7 +26,7 @@ export class BulkAddToCollectionComponent implements OnInit {
*/
lists: Array<CollectionTag> = [];
loading: boolean = false;
listForm: FormGroup = new FormGroup({});
listForm: UntypedFormGroup = new UntypedFormGroup({});
collectionTitleTrackby = (index: number, item: CollectionTag) => `${item.title}`;
@ -38,8 +38,8 @@ export class BulkAddToCollectionComponent implements OnInit {
ngOnInit(): void {
this.listForm.addControl('title', new FormControl(this.title, []));
this.listForm.addControl('filterQuery', new FormControl('', []));
this.listForm.addControl('title', new UntypedFormControl(this.title, []));
this.listForm.addControl('filterQuery', new UntypedFormControl('', []));
this.loading = true;
this.cdRef.markForCheck();

6
UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component.html
View File

@ -1,6 +1,6 @@
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Edit {{tag?.title}} Collection</h4>
<h4 class="modal-title" id="modal-basic-title">Edit {{tag.title}} Collection</h4>
<button type="button" class="btn-close" aria-label="Close" (click)="close()"></button>
</div>
<div class="modal-body {{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? '' : 'd-flex'}}">
@ -9,7 +9,7 @@
<a ngbNavLink>{{tabs[TabID.General].title}}</a>
<ng-template ngbNavContent>
<p class="alert alert-secondary" role="alert">
This tag is currently {{tag?.promoted ? 'promoted' : 'not promoted'}} (<i class="fa fa-angle-double-up" aria-hidden="true"></i>).
This tag is currently {{tag.promoted ? 'promoted' : 'not promoted'}} (<i class="fa fa-angle-double-up" aria-hidden="true"></i>).
Promotion means that the tag can be seen server-wide, not just for admin users. All series that have this tag will still have user-access restrictions placed on them.
</p>
<form [formGroup]="collectionTagForm">
@ -65,6 +65,6 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="close()">Cancel</button>
<button type="button" class="btn btn-secondary alt" (click)="togglePromotion()">{{tag?.promoted ? 'Demote' : 'Promote'}}</button>
<button type="button" class="btn btn-secondary alt" (click)="togglePromotion()">{{tag.promoted ? 'Demote' : 'Promote'}}</button>
<button type="button" class="btn btn-primary" (click)="save()">Save</button>
</div>

12
UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component.ts
View File

@ -1,5 +1,5 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
import { forkJoin } from 'rxjs';
@ -37,7 +37,7 @@ export class EditCollectionTagsComponent implements OnInit {
pagination!: Pagination;
selectAll: boolean = true;
libraryNames!: any;
collectionTagForm!: FormGroup;
collectionTagForm!: UntypedFormGroup;
tabs = [{title: 'General', id: TabID.General}, {title: 'Cover Image', id: TabID.CoverImage}];
active = TabID.General;
imageUrls: Array<string> = [];
@ -65,10 +65,10 @@ export class EditCollectionTagsComponent implements OnInit {
if (this.pagination == undefined) {
this.pagination = {totalPages: 1, totalItems: 200, itemsPerPage: 200, currentPage: 0};
}
this.collectionTagForm = new FormGroup({
summary: new FormControl(this.tag.summary, []),
coverImageLocked: new FormControl(this.tag.coverImageLocked, []),
coverImageIndex: new FormControl(0, []),
this.collectionTagForm = new UntypedFormGroup({
summary: new UntypedFormControl(this.tag.summary, []),
coverImageLocked: new UntypedFormControl(this.tag.coverImageLocked, []),
coverImageIndex: new UntypedFormControl(0, []),
});
this.imageUrls.push(this.imageService.randomize(this.imageService.getCollectionCoverImage(this.tag.id)));

2
UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.html
View File

@ -46,7 +46,7 @@
<div class="row g-0" *ngIf="metadata">
<div class="mb-3" style="width: 100%">
<label for="summary" class="form-label">Summary</label>
<div class="input-group {{metadata?.summaryLocked ? 'lock-active' : ''}}">
<div class="input-group {{metadata.summaryLocked ? 'lock-active' : ''}}">
<ng-container [ngTemplateOutlet]="lock" [ngTemplateOutletContext]="{ item: metadata, field: 'summaryLocked' }"></ng-container>
<textarea id="summary" class="form-control" formControlName="summary" rows="4"></textarea>
</div>

2
UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.html
View File

@ -61,7 +61,7 @@
</ng-container>
</div>
<div class="image-card col-auto"
*ngIf="showReset" tabindex="0" attr.aria-label="Reset cover image" (click)="reset()"
*ngIf="showReset" tabindex="0" aria-label="Reset cover image" (click)="reset()"
[ngClass]="{'selected': !showApplyButton && selectedIndex === -1}">
<app-image class="card-img-top" title="Reset Cover Image" height="230px" width="158px" [imageUrl]="imageService.resetCoverImage"></app-image>
<ng-container *ngIf="showApplyButton">

8
UI/Web/src/app/cards/edit-series-relation/edit-series-relation.component.ts
View File

@ -1,5 +1,5 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { FormControl } from '@angular/forms';
import { UntypedFormControl } from '@angular/forms';
import { map, Subject, Observable, of, firstValueFrom, takeUntil, ReplaySubject } from 'rxjs';
import { UtilityService } from 'src/app/shared/_services/utility.service';
import { TypeaheadSettings } from 'src/app/typeahead/typeahead-settings';
@ -13,7 +13,7 @@ import { SeriesService } from 'src/app/_services/series.service';
interface RelationControl {
series: {id: number, name: string} | undefined; // Will add type as well
typeaheadSettings: TypeaheadSettings<SearchResult>;
formControl: FormControl;
formControl: UntypedFormControl;
}
@Component({
@ -81,7 +81,7 @@ export class EditSeriesRelationComponent implements OnInit, OnDestroy {
setupRelationRows(relations: Array<Series>, kind: RelationKind) {
relations.map(async item => {
const settings = await firstValueFrom(this.createSeriesTypeahead(item, kind));
const form = new FormControl(kind, []);
const form = new UntypedFormControl(kind, []);
if (kind === RelationKind.Parent) {
form.disable();
}
@ -93,7 +93,7 @@ export class EditSeriesRelationComponent implements OnInit, OnDestroy {
}
async addNewRelation() {
this.relations.push({series: undefined, formControl: new FormControl(RelationKind.Adaptation, []), typeaheadSettings: await firstValueFrom(this.createSeriesTypeahead(undefined, RelationKind.Adaptation))});
this.relations.push({series: undefined, formControl: new UntypedFormControl(RelationKind.Adaptation, []), typeaheadSettings: await firstValueFrom(this.createSeriesTypeahead(undefined, RelationKind.Adaptation))});
this.cdRef.markForCheck();
// Focus on the new typeahead

6
UI/Web/src/app/manga-reader/manga-reader.component.scss
View File

@ -277,7 +277,7 @@ img {
.pagination-area {
cursor: pointer;
z-index: 2;
z-index: 100;
i {
color: white;
@ -290,6 +290,7 @@ img {
top: 0px;
width: $side-width;
background: $pagination-bg;
z-index: 100;
}
.top {
@ -298,6 +299,7 @@ img {
top: 0px;
width: 100%;
background: $pagination-bg;
z-index: 100;
}
.left {
@ -306,6 +308,7 @@ img {
top: 0px;
width: $side-width;
background: $pagination-bg;
z-index: 100;
}
.bottom {
@ -314,6 +317,7 @@ img {
bottom: 0px;
width: 100%;
background: $pagination-bg;
z-index: 100;
}
}

24
UI/Web/src/app/metadata-filter/metadata-filter.component.ts
View File

@ -1,5 +1,5 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { NgbCollapse } from '@ng-bootstrap/ng-bootstrap';
import { distinctUntilChanged, forkJoin, map, Observable, of, ReplaySubject, Subject, takeUntil } from 'rxjs';
import { UtilityService } from '../shared/_services/utility.service';
@ -66,9 +66,9 @@ export class MetadataFilterComponent implements OnInit, OnDestroy {
libraries: Array<FilterItem<Library>> = [];
readProgressGroup!: FormGroup;
sortGroup!: FormGroup;
seriesNameGroup!: FormGroup;
readProgressGroup!: UntypedFormGroup;
sortGroup!: UntypedFormGroup;
seriesNameGroup!: UntypedFormGroup;
isAscendingSort: boolean = true;
updateApplied: number = 0;
@ -106,18 +106,18 @@ export class MetadataFilterComponent implements OnInit, OnDestroy {
}
this.filter = this.seriesService.createSeriesFilter();
this.readProgressGroup = new FormGroup({
read: new FormControl({value: this.filter.readStatus.read, disabled: this.filterSettings.readProgressDisabled}, []),
notRead: new FormControl({value: this.filter.readStatus.notRead, disabled: this.filterSettings.readProgressDisabled}, []),
inProgress: new FormControl({value: this.filter.readStatus.inProgress, disabled: this.filterSettings.readProgressDisabled}, []),
this.readProgressGroup = new UntypedFormGroup({
read: new UntypedFormControl({value: this.filter.readStatus.read, disabled: this.filterSettings.readProgressDisabled}, []),
notRead: new UntypedFormControl({value: this.filter.readStatus.notRead, disabled: this.filterSettings.readProgressDisabled}, []),
inProgress: new UntypedFormControl({value: this.filter.readStatus.inProgress, disabled: this.filterSettings.readProgressDisabled}, []),
});
this.sortGroup = new FormGroup({
sortField: new FormControl({value: this.filter.sortOptions?.sortField || SortField.SortName, disabled: this.filterSettings.sortDisabled}, []),
this.sortGroup = new UntypedFormGroup({
sortField: new UntypedFormControl({value: this.filter.sortOptions?.sortField || SortField.SortName, disabled: this.filterSettings.sortDisabled}, []),
});
this.seriesNameGroup = new FormGroup({
seriesNameQuery: new FormControl({value: this.filter.seriesNameQuery || '', disabled: this.filterSettings.searchNameDisabled}, [])
this.seriesNameGroup = new UntypedFormGroup({
seriesNameQuery: new UntypedFormControl({value: this.filter.seriesNameQuery || '', disabled: this.filterSettings.searchNameDisabled}, [])
});
this.readProgressGroup.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe(changes => {

6
UI/Web/src/app/nav/grouped-typeahead/grouped-typeahead.component.ts
View File

@ -1,5 +1,5 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { Subject } from 'rxjs';
import { debounceTime, takeUntil } from 'rxjs/operators';
import { KEY_CODES } from '../../shared/_services/utility.service';
@ -66,7 +66,7 @@ export class GroupedTypeaheadComponent implements OnInit, OnDestroy {
hasFocus: boolean = false;
isLoading: boolean = false;
typeaheadForm: FormGroup = new FormGroup({});
typeaheadForm: UntypedFormGroup = new UntypedFormGroup({});
prevSearchTerm: string = '';
@ -106,7 +106,7 @@ export class GroupedTypeaheadComponent implements OnInit, OnDestroy {
}
ngOnInit(): void {
this.typeaheadForm.addControl('typeahead', new FormControl(this.initialValue, []));
this.typeaheadForm.addControl('typeahead', new UntypedFormControl(this.initialValue, []));
this.cdRef.markForCheck();
this.typeaheadForm.valueChanges.pipe(debounceTime(this.debounceTime), takeUntil(this.onDestroy)).subscribe(change => {

8
UI/Web/src/app/reading-list/_modals/add-to-list-modal/add-to-list-modal.component.ts
View File

@ -1,5 +1,5 @@
import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
import { ReadingList } from 'src/app/_models/reading-list';
@ -56,7 +56,7 @@ export class AddToListModalComponent implements OnInit, AfterViewInit {
*/
lists: Array<any> = [];
loading: boolean = false;
listForm: FormGroup = new FormGroup({});
listForm: UntypedFormGroup = new UntypedFormGroup({});
@ViewChild('title') inputElem!: ElementRef<HTMLInputElement>;
@ -65,8 +65,8 @@ export class AddToListModalComponent implements OnInit, AfterViewInit {
ngOnInit(): void {
this.listForm.addControl('title', new FormControl(this.title, []));
this.listForm.addControl('filterQuery', new FormControl('', []));
this.listForm.addControl('title', new UntypedFormControl(this.title, []));
this.listForm.addControl('filterQuery', new UntypedFormControl('', []));
this.loading = true;
this.readingListService.getReadingLists(false).subscribe(lists => {

2
UI/Web/src/app/reading-list/_modals/edit-reading-list-modal/edit-reading-list-modal.component.html
View File

@ -9,7 +9,7 @@
<a ngbNavLink>{{tabs[0].title}}</a>
<ng-template ngbNavContent>
<p>
This list is currently {{readingList?.promoted ? 'promoted' : 'not promoted'}} (<i class="fa fa-angle-double-up" aria-hidden="true"></i>).
This list is currently {{readingList.promoted ? 'promoted' : 'not promoted'}} (<i class="fa fa-angle-double-up" aria-hidden="true"></i>).
Promotion means that the list can be seen server-wide, not just for admin users. All series that are within this list will still have user-access restrictions placed on them.
</p>
<form [formGroup]="reviewGroup">

10
UI/Web/src/app/reading-list/_modals/edit-reading-list-modal/edit-reading-list-modal.component.ts
View File

@ -1,5 +1,5 @@
import { Component, Input, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
import { forkJoin } from 'rxjs';
@ -18,7 +18,7 @@ import { UploadService } from 'src/app/_services/upload.service';
export class EditReadingListModalComponent implements OnInit {
@Input() readingList!: ReadingList;
reviewGroup!: FormGroup;
reviewGroup!: UntypedFormGroup;
coverImageIndex: number = 0;
/**
@ -41,9 +41,9 @@ export class EditReadingListModalComponent implements OnInit {
private imageService: ImageService) { }
ngOnInit(): void {
this.reviewGroup = new FormGroup({
title: new FormControl(this.readingList.title, [Validators.required]),
summary: new FormControl(this.readingList.summary, [])
this.reviewGroup = new UntypedFormGroup({
title: new UntypedFormControl(this.readingList.title, [Validators.required]),
summary: new UntypedFormControl(this.readingList.summary, [])
});
this.imageUrls.push(this.imageService.randomize(this.imageService.getReadingListCoverImage(this.readingList.id)));

4
UI/Web/src/app/reading-list/reading-list-detail/reading-list-detail.component.html
View File

@ -1,7 +1,7 @@
<app-side-nav-companion-bar>
<h2 title>
<span *ngIf="actions.length > 0">
<app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="readingList.title"></app-card-actionables>
<app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [attr.labelBy]="readingList?.title"></app-card-actionables>
</span>
{{readingList?.title}}
<span *ngIf="readingList?.promoted" class="ms-1">(<i class="fa fa-angle-double-up" aria-hidden="true"></i>)</span>
@ -26,7 +26,7 @@
</button>
</div>
<div class="col-auto">
<button class="btn btn-secondary" (click)="removeRead()" [disabled]="readingList?.promoted && !this.isAdmin">
<button class="btn btn-secondary" (click)="removeRead()" [disabled]="readingList.promoted && !this.isAdmin">
<span>
<i class="fa fa-check"></i>
</span>

7
UI/Web/src/app/reading-list/reading-list-detail/reading-list-detail.component.ts
View File

@ -26,7 +26,7 @@ import { ReaderService } from 'src/app/_services/reader.service';
export class ReadingListDetailComponent implements OnInit {
items: Array<ReadingListItem> = [];
listId!: number;
readingList!: ReadingList;
readingList: ReadingList | undefined;
actions: Array<ActionItem<any>> = [];
isAdmin: boolean = false;
isLoading: boolean = false;
@ -115,6 +115,7 @@ export class ReadingListDetailComponent implements OnInit {
readChapter(item: ReadingListItem) {
let reader = 'manga';
if (!this.readingList) return;
if (item.seriesFormat === MangaFormat.EPUB) {
reader = 'book;'
}
@ -148,10 +149,12 @@ export class ReadingListDetailComponent implements OnInit {
}
orderUpdated(event: IndexUpdateEvent) {
if (!this.readingList) return;
this.readingListService.updatePosition(this.readingList.id, event.item.id, event.fromPosition, event.toPosition).subscribe(() => { /* No Operation */ });
}
itemRemoved(event: ItemRemoveEvent) {
if (!this.readingList) return;
this.readingListService.deleteItem(this.readingList.id, event.item.id).subscribe(() => {
this.items.splice(event.position, 1);
this.cdRef.markForCheck();
@ -160,6 +163,7 @@ export class ReadingListDetailComponent implements OnInit {
}
removeRead() {
if (!this.readingList) return;
this.isLoading = true;
this.cdRef.markForCheck();
this.readingListService.removeRead(this.readingList.id).subscribe((resp) => {
@ -173,6 +177,7 @@ export class ReadingListDetailComponent implements OnInit {
read() {
// TODO: Can I do this in the backend?
if (!this.readingList) return;
let currentlyReadingChapter = this.items[0];
for (let i = 0; i < this.items.length; i++) {
if (this.items[i].pagesRead >= this.items[i].pagesTotal) {

2
UI/Web/src/app/reading-list/reading-lists/reading-lists.component.html
View File

@ -2,7 +2,7 @@
<h2 title>
Reading Lists
</h2>
<h6 subtitle>{{pagination?.totalItems}} Items</h6>
<h6 subtitle *ngIf="pagination">{{pagination.totalItems}} Items</h6>
</app-side-nav-companion-bar>
<app-card-detail-layout

10
UI/Web/src/app/registration/add-email-to-account-migration-modal/add-email-to-account-migration-modal.component.ts
View File

@ -1,5 +1,5 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
import { SafeUrl } from '@angular/platform-browser';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
@ -17,7 +17,7 @@ export class AddEmailToAccountMigrationModalComponent implements OnInit {
@Input() password!: string;
isSaving: boolean = false;
registerForm: FormGroup = new FormGroup({});
registerForm: UntypedFormGroup = new UntypedFormGroup({});
emailLink: string = '';
emailLinkUrl: SafeUrl | undefined;
error: string = '';
@ -27,9 +27,9 @@ export class AddEmailToAccountMigrationModalComponent implements OnInit {
}
ngOnInit(): void {
this.registerForm.addControl('username', new FormControl(this.username, [Validators.required]));
this.registerForm.addControl('email', new FormControl('', [Validators.required, Validators.email]));
this.registerForm.addControl('password', new FormControl(this.password, [Validators.required]));
this.registerForm.addControl('username', new UntypedFormControl(this.username, [Validators.required]));
this.registerForm.addControl('email', new UntypedFormControl('', [Validators.required, Validators.email]));
this.registerForm.addControl('password', new UntypedFormControl(this.password, [Validators.required]));
this.cdRef.markForCheck();
}

10
UI/Web/src/app/registration/confirm-email/confirm-email.component.ts
View File

@ -1,5 +1,5 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { ToastrService } from 'ngx-toastr';
import { ThemeService } from 'src/app/_services/theme.service';
@ -18,10 +18,10 @@ export class ConfirmEmailComponent {
*/
token: string = '';
registerForm: FormGroup = new FormGroup({
email: new FormControl('', [Validators.required, Validators.email]),
username: new FormControl('', [Validators.required]),
password: new FormControl('', [Validators.required, Validators.maxLength(32), Validators.minLength(6)]),
registerForm: UntypedFormGroup = new UntypedFormGroup({
email: new UntypedFormControl('', [Validators.required, Validators.email]),
username: new UntypedFormControl('', [Validators.required]),
password: new UntypedFormControl('', [Validators.required, Validators.maxLength(32), Validators.minLength(6)]),
});
/**

8
UI/Web/src/app/registration/confirm-reset-password/confirm-reset-password.component.ts
View File

@ -1,5 +1,5 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { ToastrService } from 'ngx-toastr';
import { AccountService } from 'src/app/_services/account.service';
@ -13,9 +13,9 @@ import { AccountService } from 'src/app/_services/account.service';
export class ConfirmResetPasswordComponent {
token: string = '';
registerForm: FormGroup = new FormGroup({
email: new FormControl('', [Validators.required, Validators.email]),
password: new FormControl('', [Validators.required, Validators.maxLength(32), Validators.minLength(6)]),
registerForm: UntypedFormGroup = new UntypedFormGroup({
email: new UntypedFormControl('', [Validators.required, Validators.email]),
password: new UntypedFormControl('', [Validators.required, Validators.maxLength(32), Validators.minLength(6)]),
});
constructor(private route: ActivatedRoute, private router: Router,

10
UI/Web/src/app/registration/register/register.component.ts
View File

@ -1,5 +1,5 @@
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { ToastrService } from 'ngx-toastr';
import { take } from 'rxjs/operators';
@ -17,10 +17,10 @@ import { MemberService } from 'src/app/_services/member.service';
})
export class RegisterComponent implements OnInit {
registerForm: FormGroup = new FormGroup({
email: new FormControl('', [Validators.required, Validators.email]),
username: new FormControl('', [Validators.required]),
password: new FormControl('', [Validators.required, Validators.maxLength(32), Validators.minLength(6)]),
registerForm: UntypedFormGroup = new UntypedFormGroup({
email: new UntypedFormControl('', [Validators.required, Validators.email]),
username: new UntypedFormControl('', [Validators.required]),
password: new UntypedFormControl('', [Validators.required, Validators.maxLength(32), Validators.minLength(6)]),
});
constructor(private router: Router, private accountService: AccountService,

6
UI/Web/src/app/registration/reset-password/reset-password.component.ts
View File

@ -1,5 +1,5 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { ToastrService } from 'ngx-toastr';
import { AccountService } from 'src/app/_services/account.service';
@ -12,8 +12,8 @@ import { AccountService } from 'src/app/_services/account.service';
})
export class ResetPasswordComponent {
registerForm: FormGroup = new FormGroup({
email: new FormControl('', [Validators.required, Validators.email]),
registerForm: UntypedFormGroup = new UntypedFormGroup({
email: new UntypedFormControl('', [Validators.required, Validators.email]),
});
constructor(private router: Router, private accountService: AccountService,

8
UI/Web/src/app/registration/user-login/user-login.component.ts
View File

@ -1,5 +1,5 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
@ -20,9 +20,9 @@ import { NavService } from '../../_services/nav.service';
export class UserLoginComponent implements OnInit {
//model: any = {username: '', password: ''};
loginForm: FormGroup = new FormGroup({
username: new FormControl('', [Validators.required]),
password: new FormControl('', [Validators.required])
loginForm: UntypedFormGroup = new UntypedFormGroup({
username: new UntypedFormControl('', [Validators.required]),
password: new UntypedFormControl('', [Validators.required])
});
/**

10
UI/Web/src/app/series-detail/review-series-modal/review-series-modal.component.ts
View File

@ -1,5 +1,5 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { Series } from 'src/app/_models/series';
import { SeriesService } from 'src/app/_services/series.service';
@ -13,14 +13,14 @@ import { SeriesService } from 'src/app/_services/series.service';
export class ReviewSeriesModalComponent implements OnInit {
@Input() series!: Series;
reviewGroup!: FormGroup;
reviewGroup!: UntypedFormGroup;
constructor(public modal: NgbActiveModal, private seriesService: SeriesService, private readonly cdRef: ChangeDetectorRef) {}
ngOnInit(): void {
this.reviewGroup = new FormGroup({
review: new FormControl(this.series.userReview, []),
rating: new FormControl(this.series.userRating, [])
this.reviewGroup = new UntypedFormGroup({
review: new UntypedFormControl(this.series.userReview, []),
rating: new UntypedFormControl(this.series.userRating, [])
});
this.cdRef.markForCheck();
}

12
UI/Web/src/app/series-detail/series-detail.component.html
View File

@ -3,11 +3,11 @@
<ng-container title>
<h2 class="title">
<app-card-actionables [disabled]="actionInProgress" (actionHandler)="performAction($event)" [actions]="seriesActions" [labelBy]="series.name" iconClass="fa-ellipsis-v"></app-card-actionables>
<span>{{series?.name}}</span>
<span>{{series.name}}</span>
</h2>
</ng-container>
<ng-container subtitle *ngIf="series?.localizedName !== series?.name">
<h6 class="subtitle-with-actionables" title="Localized Name">{{series?.localizedName}}</h6>
<ng-container subtitle *ngIf="series.localizedName !== series.name">
<h6 class="subtitle-with-actionables" title="Localized Name">{{series.localizedName}}</h6>
</ng-container>
<ng-template #extrasDrawer let-offcanvas>
@ -95,13 +95,13 @@
</button>
</div>
<div class="col-auto ms-2">
<ngb-rating class="rating-star" [(rate)]="series!.userRating" (rateChange)="updateRating($event)" (click)="promptToReview()"></ngb-rating>
<button *ngIf="series?.userRating || series.userRating" class="btn btn-sm btn-icon" (click)="openReviewModal(true)" placement="bottom" ngbTooltip="Edit Review" attr.aria-label="Edit Review"><i class="fa fa-pen" aria-hidden="true"></i></button>
<ngb-rating class="rating-star" [(rate)]="series.userRating" (rateChange)="updateRating($event)" (click)="promptToReview()"></ngb-rating>
<button *ngIf="series.userRating || series.userRating" class="btn btn-sm btn-icon" (click)="openReviewModal(true)" placement="bottom" ngbTooltip="Edit Review" aria-label="Edit Review"><i class="fa fa-pen" aria-hidden="true"></i></button>
</div>
</div>
<div class="row g-0">
<!-- TODO: This will be the first of reviews section. Reviews will show your plus other peoples reviews in media cards like Plex does and this will be below metadata -->
<app-read-more class="user-review {{userReview ? 'mt-1' : ''}}" [text]="series?.userReview || ''" [maxLength]="250"></app-read-more>
<app-read-more class="user-review {{userReview ? 'mt-1' : ''}}" [text]="series.userReview || ''" [maxLength]="250"></app-read-more>
</div>
<div *ngIf="seriesMetadata" class="mt-2">
<app-series-metadata-detail [seriesMetadata]="seriesMetadata" [readingLists]="readingLists" [series]="series" [hasReadingProgress]="hasReadingProgress"></app-series-metadata-detail>

6
UI/Web/src/app/series-detail/series-detail.component.ts
View File

@ -35,7 +35,7 @@ import { NavService } from '../_services/nav.service';
import { RelatedSeries } from '../_models/series-detail/related-series';
import { RelationKind } from '../_models/series-detail/relation-kind';
import { CardDetailDrawerComponent } from '../cards/card-detail-drawer/card-detail-drawer.component';
import { FormControl, FormGroup } from '@angular/forms';
import { FormGroup, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { PageLayoutMode } from '../_models/page-layout-mode';
import { DOCUMENT } from '@angular/common';
import { User } from '../_models/user';
@ -152,8 +152,8 @@ export class SeriesDetailComponent implements OnInit, OnDestroy, AfterContentChe
renderMode: PageLayoutMode = PageLayoutMode.Cards;
pageExtrasGroup = new FormGroup({
'sortingOption': new FormControl(this.sortingOptions[0].value, []),
'renderMode': new FormControl(this.renderMode, []),
'sortingOption': new UntypedFormControl(this.sortingOptions[0].value, []),
'renderMode': new UntypedFormControl(this.renderMode, []),
});
isAscendingSort: boolean = false; // TODO: Get this from User preferences

4
UI/Web/src/app/sidenav/side-nav-item/side-nav-item.component.html
View File

@ -1,11 +1,11 @@
<ng-container *ngIf="link === undefined || link.length === 0; else useLink">
<div class="side-nav-item" [ngClass]="{'closed': (navService?.sideNavCollapsed$ | async), 'active': highlighted}">
<div class="side-nav-item" [ngClass]="{'closed': (navService.sideNavCollapsed$ | async), 'active': highlighted}">
<ng-container [ngTemplateOutlet]="inner"></ng-container>
</div>
</ng-container>
<ng-template #useLink>
<a class="side-nav-item" href="javascript:void(0);" [ngClass]="{'closed': (navService?.sideNavCollapsed$ | async), 'active': highlighted}" [routerLink]="link">
<a class="side-nav-item" href="javascript:void(0);" [ngClass]="{'closed': (navService.sideNavCollapsed$ | async), 'active': highlighted}" [routerLink]="link">
<ng-container [ngTemplateOutlet]="inner"></ng-container>
</a>
</ng-template>

11
UI/Web/src/app/sidenav/side-nav-item/side-nav-item.component.ts
View File

@ -1,4 +1,4 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { filter, map, Subject, takeUntil } from 'rxjs';
import { NavService } from '../../_services/nav.service';
@ -6,7 +6,8 @@ import { NavService } from '../../_services/nav.service';
@Component({
selector: 'app-side-nav-item',
templateUrl: './side-nav-item.component.html',
styleUrls: ['./side-nav-item.component.scss']
styleUrls: ['./side-nav-item.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SideNavItemComponent implements OnInit, OnDestroy {
/**
@ -29,7 +30,7 @@ export class SideNavItemComponent implements OnInit, OnDestroy {
highlighted = false;
private onDestroy: Subject<void> = new Subject();
constructor(public navService: NavService, private router: Router) {
constructor(public navService: NavService, private router: Router, private readonly cdRef: ChangeDetectorRef) {
router.events
.pipe(filter(event => event instanceof NavigationEnd),
takeUntil(this.onDestroy),
@ -54,6 +55,7 @@ export class SideNavItemComponent implements OnInit, OnDestroy {
updateHightlight(page: string) {
if (this.link === undefined) {
this.highlighted = false;
this.cdRef.markForCheck();
return;
}
@ -63,14 +65,17 @@ export class SideNavItemComponent implements OnInit, OnDestroy {
if (this.comparisonMethod === 'equals' && page === this.link) {
this.highlighted = true;
this.cdRef.markForCheck();
return;
}
if (this.comparisonMethod === 'startsWith' && page.startsWith(this.link)) {
this.highlighted = true;
this.cdRef.markForCheck();
return;
}
this.highlighted = false;
this.cdRef.markForCheck();
}
}

4
UI/Web/src/app/typeahead/typeahead-settings.ts
View File

@ -1,5 +1,5 @@
import { Observable } from 'rxjs';
import { FormControl } from '@angular/forms';
import { UntypedFormControl } from '@angular/forms';
export type SelectionCompareFn<T> = (a: T, b: T) => boolean;
@ -48,7 +48,7 @@ export class TypeaheadSettings<T> {
/**
* Optional form Control to tie model to.
*/
formControl?: FormControl;
formControl?: UntypedFormControl;
/**
* If true, typeahead will remove already selected items from fetchFn results. Only appies when multiple=true
*/

10
UI/Web/src/app/typeahead/typeahead.component.ts
View File

@ -1,7 +1,7 @@
import { trigger, state, style, transition, animate } from '@angular/animations';
import { DOCUMENT } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, HostListener, Inject, Input, OnDestroy, OnInit, Output, Renderer2, RendererStyleFlags2, TemplateRef, ViewChild } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { Observable, of, ReplaySubject, Subject } from 'rxjs';
import { auditTime, distinctUntilChanged, filter, map, shareReplay, switchMap, take, takeUntil, tap } from 'rxjs/operators';
import { KEY_CODES } from '../shared/_services/utility.service';
@ -186,8 +186,8 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
showAddItem: boolean = false;
filteredOptions!: Observable<string[]>;
isLoadingOptions: boolean = false;
typeaheadControl!: FormControl;
typeaheadForm!: FormGroup;
typeaheadControl!: UntypedFormControl;
typeaheadForm!: UntypedFormGroup;
private readonly onDestroy = new Subject<void>();
@ -220,9 +220,9 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
if (this.settings.hasOwnProperty('formControl') && this.settings.formControl) {
this.typeaheadControl = this.settings.formControl;
} else {
this.typeaheadControl = new FormControl('');
this.typeaheadControl = new UntypedFormControl('');
}
this.typeaheadForm = new FormGroup({
this.typeaheadForm = new UntypedFormGroup({
'typeahead': this.typeaheadControl
});

2
UI/Web/src/app/user-settings/theme-manager/theme-manager.component.html
View File

@ -20,7 +20,7 @@
<h5 class="card-title">{{theme.name | sentenceCase}}</h5>
<h6 class="card-subtitle mb-2 text-muted">{{theme.provider | siteThemeProvider}}</h6>
<button class="btn btn-secondary me-2" [disabled]="theme.isDefault" *ngIf="isAdmin" (click)="updateDefault(theme)">Set Default</button>
<button class="btn btn-primary" (click)="applyTheme(theme)" [disabled]="currentTheme?.id === theme.id">{{currentTheme?.id === theme.id ? 'Applied' : 'Apply'}}</button>
<button class="btn btn-primary" (click)="applyTheme(theme)" [disabled]="currentTheme.id === theme.id">{{currentTheme.id === theme.id ? 'Applied' : 'Apply'}}</button>
</div>
</div>
</ng-container>

50
UI/Web/src/app/user-settings/user-preferences/user-preferences.component.ts
View File

@ -1,5 +1,5 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { map, shareReplay, take, takeUntil } from 'rxjs/operators';
import { Title } from '@angular/platform-browser';
@ -36,8 +36,8 @@ export class UserPreferencesComponent implements OnInit, OnDestroy {
bookColorThemes = bookColorThemes;
pageLayoutModes = pageLayoutModes;
settingsForm: FormGroup = new FormGroup({});
passwordChangeForm: FormGroup = new FormGroup({});
settingsForm: UntypedFormGroup = new UntypedFormGroup({});
passwordChangeForm: UntypedFormGroup = new UntypedFormGroup({});
user: User | undefined = undefined;
hasChangePasswordAbility: Observable<boolean> = of(false);
@ -112,32 +112,32 @@ export class UserPreferencesComponent implements OnInit, OnDestroy {
this.user.preferences.bookReaderFontFamily = 'default';
}
this.settingsForm.addControl('readingDirection', new FormControl(this.user.preferences.readingDirection, []));
this.settingsForm.addControl('scalingOption', new FormControl(this.user.preferences.scalingOption, []));
this.settingsForm.addControl('pageSplitOption', new FormControl(this.user.preferences.pageSplitOption, []));
this.settingsForm.addControl('autoCloseMenu', new FormControl(this.user.preferences.autoCloseMenu, []));
this.settingsForm.addControl('showScreenHints', new FormControl(this.user.preferences.showScreenHints, []));
this.settingsForm.addControl('readerMode', new FormControl(this.user.preferences.readerMode, []));
this.settingsForm.addControl('layoutMode', new FormControl(this.user.preferences.layoutMode, []));
this.settingsForm.addControl('bookReaderFontFamily', new FormControl(this.user.preferences.bookReaderFontFamily, []));
this.settingsForm.addControl('bookReaderFontSize', new FormControl(this.user.preferences.bookReaderFontSize, []));
this.settingsForm.addControl('bookReaderLineSpacing', new FormControl(this.user.preferences.bookReaderLineSpacing, []));
this.settingsForm.addControl('bookReaderMargin', new FormControl(this.user.preferences.bookReaderMargin, []));
this.settingsForm.addControl('bookReaderReadingDirection', new FormControl(this.user.preferences.bookReaderReadingDirection, []));
this.settingsForm.addControl('bookReaderTapToPaginate', new FormControl(!!this.user.preferences.bookReaderTapToPaginate, []));
this.settingsForm.addControl('bookReaderLayoutMode', new FormControl(this.user.preferences.bookReaderLayoutMode || BookPageLayoutMode.Default, []));
this.settingsForm.addControl('bookReaderThemeName', new FormControl(this.user?.preferences.bookReaderThemeName || bookColorThemes[0].name, []));
this.settingsForm.addControl('bookReaderImmersiveMode', new FormControl(this.user?.preferences.bookReaderImmersiveMode, []));
this.settingsForm.addControl('readingDirection', new UntypedFormControl(this.user.preferences.readingDirection, []));
this.settingsForm.addControl('scalingOption', new UntypedFormControl(this.user.preferences.scalingOption, []));
this.settingsForm.addControl('pageSplitOption', new UntypedFormControl(this.user.preferences.pageSplitOption, []));
this.settingsForm.addControl('autoCloseMenu', new UntypedFormControl(this.user.preferences.autoCloseMenu, []));
this.settingsForm.addControl('showScreenHints', new UntypedFormControl(this.user.preferences.showScreenHints, []));
this.settingsForm.addControl('readerMode', new UntypedFormControl(this.user.preferences.readerMode, []));
this.settingsForm.addControl('layoutMode', new UntypedFormControl(this.user.preferences.layoutMode, []));
this.settingsForm.addControl('bookReaderFontFamily', new UntypedFormControl(this.user.preferences.bookReaderFontFamily, []));
this.settingsForm.addControl('bookReaderFontSize', new UntypedFormControl(this.user.preferences.bookReaderFontSize, []));
this.settingsForm.addControl('bookReaderLineSpacing', new UntypedFormControl(this.user.preferences.bookReaderLineSpacing, []));
this.settingsForm.addControl('bookReaderMargin', new UntypedFormControl(this.user.preferences.bookReaderMargin, []));
this.settingsForm.addControl('bookReaderReadingDirection', new UntypedFormControl(this.user.preferences.bookReaderReadingDirection, []));
this.settingsForm.addControl('bookReaderTapToPaginate', new UntypedFormControl(!!this.user.preferences.bookReaderTapToPaginate, []));
this.settingsForm.addControl('bookReaderLayoutMode', new UntypedFormControl(this.user.preferences.bookReaderLayoutMode || BookPageLayoutMode.Default, []));
this.settingsForm.addControl('bookReaderThemeName', new UntypedFormControl(this.user?.preferences.bookReaderThemeName || bookColorThemes[0].name, []));
this.settingsForm.addControl('bookReaderImmersiveMode', new UntypedFormControl(this.user?.preferences.bookReaderImmersiveMode, []));
this.settingsForm.addControl('theme', new FormControl(this.user.preferences.theme, []));
this.settingsForm.addControl('globalPageLayoutMode', new FormControl(this.user.preferences.globalPageLayoutMode, []));
this.settingsForm.addControl('blurUnreadSummaries', new FormControl(this.user.preferences.blurUnreadSummaries, []));
this.settingsForm.addControl('promptForDownloadSize', new FormControl(this.user.preferences.promptForDownloadSize, []));
this.settingsForm.addControl('theme', new UntypedFormControl(this.user.preferences.theme, []));
this.settingsForm.addControl('globalPageLayoutMode', new UntypedFormControl(this.user.preferences.globalPageLayoutMode, []));
this.settingsForm.addControl('blurUnreadSummaries', new UntypedFormControl(this.user.preferences.blurUnreadSummaries, []));
this.settingsForm.addControl('promptForDownloadSize', new UntypedFormControl(this.user.preferences.promptForDownloadSize, []));
this.cdRef.markForCheck();
});
this.passwordChangeForm.addControl('password', new FormControl('', [Validators.required]));
this.passwordChangeForm.addControl('confirmPassword', new FormControl('', [Validators.required]));
this.passwordChangeForm.addControl('password', new UntypedFormControl('', [Validators.required]));
this.passwordChangeForm.addControl('confirmPassword', new UntypedFormControl('', [Validators.required]));
this.observableHandles.push(this.passwordChangeForm.valueChanges.subscribe(() => {
const values = this.passwordChangeForm.value;

1
UI/Web/src/app/user-settings/user-settings-routing.module.ts
View File

@ -6,6 +6,7 @@ import { UserPreferencesComponent } from './user-preferences/user-preferences.co
const routes: Routes = [
{path: '**', component: UserPreferencesComponent, pathMatch: 'full'},
{
path: '',
runGuardsAndResolvers: 'always',
canActivate: [AuthGuard],
children: [

1
UI/Web/src/app/want-to-read/want-to-read-routing.module.ts
View File

@ -6,6 +6,7 @@ import { WantToReadComponent } from './want-to-read/want-to-read.component';
const routes: Routes = [
{path: '**', component: WantToReadComponent, pathMatch: 'full'},
{
path: '',
runGuardsAndResolvers: 'always',
canActivate: [AuthGuard],
children: [

2
UI/Web/src/styles.scss
View File

@ -1,9 +1,7 @@
@use '../node_modules/swiper/swiper.scss' as swiper;
// Import themes which define the css variables we use to customize the app
@import './theme/themes/light';
@import './theme/themes/dark';
@import './theme/themes/e-ink';
// Import colors for overrides of bootstrap theme
@import './theme/toastr';

4
UI/Web/src/theme/_variables.scss
View File

@ -20,3 +20,7 @@ $grid-breakpoints-xl: 1200px;
$grid-breakpoints: (xs: $grid-breakpoints-xs, sm: $grid-breakpoints-sm, md: $grid-breakpoints-md, lg: $grid-breakpoints-lg, xl: $grid-breakpoints-xl);
// Override any bootstrap styles we don't want
:root {
--hr-color: transparent;
}

2
UI/Web/src/theme/components/_buttons.scss
View File

@ -42,9 +42,11 @@ button:disabled, .form-control:disabled, .form-control[readonly], .disabled, :di
.btn-icon {
cursor: pointer;
color: var(--body-text-color);
border: none;
&:hover, &:focus {
color: var(--body-text-color);
border: none;
}
}

4
UI/Web/src/theme/themes/dark.scss
View File

@ -1,4 +1,4 @@
:root .bg-dark {
:root, :root .bg-dark {
--color-scheme: dark;
--primary-color: #4ac694;
--primary-color-dark-shade: #3B9E76;
@ -9,6 +9,7 @@
--body-text-color: #efefef;
--btn-icon-filter: invert(1) grayscale(100%) brightness(200%);
--primary-color-scrollbar: rgba(74,198,148,0.75);
/* Navbar */
--navbar-bg-color: black;
@ -42,6 +43,7 @@
--btn-disabled-bg-color: #343a40;
--btn-disabled-text-color: white;
--btn-disabled-border-color: #6c757d;
--bs-btn-disabled-border-color: transparent;
/* Nav (Tabs) */
--nav-tab-border-color: rgba(44, 118, 88, 0.7);

241
UI/Web/src/theme/themes/light.scss
View File

@ -1,4 +1,243 @@
/* Default styles for Kavita */
:root {
@import './dark.scss'; // Just re-import variables from dark since that's all we support
//@import './dark.scss'; // Just re-import variables from dark since that's all we support
--color-scheme: dark;
--primary-color: #4ac694;
--primary-color-dark-shade: #3B9E76;
--primary-color-darker-shade: #338A67;
--primary-color-darkest-shade: #25624A;
--error-color: #BD362F;
--bs-body-bg: #343a40;
--body-text-color: #efefef;
--btn-icon-filter: invert(1) grayscale(100%) brightness(200%);
--primary-color-scrollbar: rgba(74,198,148,0.75);
/* Navbar */
--navbar-bg-color: black;
--navbar-text-color: white;
--navbar-fa-icon-color: white;
--navbar-btn-hover-outline-color: rgba(255, 255, 255, 1);
/* Inputs */
--input-bg-color: #343a40;
--input-bg-readonly-color: #434648;
--input-focused-border-color: #ccc;
--input-text-color: #fff;
--input-placeholder-color: #aeaeae;
--input-border-color: #ccc;
--input-focus-boxshadow-color: rgb(255 255 255 / 50%);
/* Buttons */
--btn-focus-boxshadow-color: rgb(255 255 255 / 50%);
--btn-primary-text-color: white;
--btn-primary-bg-color: var(--primary-color);
--btn-primary-border-color: var(--primary-color);
--btn-primary-hover-text-color: white;
--btn-primary-hover-bg-color: var(--primary-color-darker-shade);
--btn-primary-hover-border-color: var(--primary-color-darker-shade);
--btn-alt-bg-color: #424c72;
--btn-alt-border-color: #444f75;
--btn-alt-hover-bg-color: #3b4466;
--btn-alt-focus-bg-color: #343c59;
--btn-alt-focus-boxshadow-color: rgb(255 255 255 / 50%);
--btn-fa-icon-color: white;
--btn-disabled-bg-color: #343a40;
--btn-disabled-text-color: white;
--btn-disabled-border-color: #6c757d;
--bs-btn-disabled-border-color: transparent;
/* Nav (Tabs) */
--nav-tab-border-color: rgba(44, 118, 88, 0.7);
--nav-tab-text-color: var(--body-text-color);
--nav-tab-bg-color: var(--primary-color);
--nav-tab-hover-border-color: var(--primary-color);
--nav-tab-active-text-color: white;
--nav-tab-border-hover-color: transparent;
--nav-tab-hover-text-color: var(--body-text-color);
--nav-tab-hover-bg-color: transparent;
--nav-tab-border-top: rgba(44, 118, 88, 0.7);
--nav-tab-border-left: rgba(44, 118, 88, 0.7);
--nav-tab-border-bottom: rgba(44, 118, 88, 0.7);
--nav-tab-border-right: rgba(44, 118, 88, 0.7);
--nav-tab-hover-border-top: rgba(44, 118, 88, 0.7);
--nav-tab-hover-border-left: rgba(44, 118, 88, 0.7);
--nav-tab-hover-border-bottom: var(--bs-body-bg);
--nav-tab-hover-border-right: rgba(44, 118, 88, 0.7);
--nav-tab-active-hover-bg-color: var(--primary-color);
--nav-link-bg-color: var(--primary-color);
--nav-link-active-text-color: white;
--nav-link-text-color: white;
/* Header */
--nav-header-text-color: white;
--nav-header-bg-color: rgb(22, 27, 34);
/* Toasts */
--toast-success-bg-color: rgba(59, 158, 118, 0.9);
--toast-error-bg-color: #BD362F;
--toast-info-bg-color: #2F96B4;
--toast-warning-bg-color: #F89406;
/* Checkboxes/Switch */
--checkbox-checked-bg-color: var(--primary-color);
--checkbox-border-color: var(--input-focused-border-color);
--checkbox-focus-border-color: var(--primary-color);
--checkbox-focus-boxshadow-color: rgb(255 255 255 / 50%);
/* Tag Badge */
--tagbadge-border-color: rgba(239, 239, 239, 0.125);
--tagbadge-text-color: var(--body-text-color);
--tagbadge-bg-color: var(--nav-tab-hover-bg-color);
--tagbadge-filled-border-color: rgba(239, 239, 239, 0.125);
--tagbadge-filled-text-color: var(--body-text-color);
--tagbadge-filled-bg-color: var(--primary-color);
/* Side Nav */
--side-nav-bg-color: rgba(0,0,0,0.2);
--side-nav-mobile-bg-color: rgb(25,26,28);
--side-nav-openclose-transition: 0.15s ease-in-out;
--side-nav-box-shadow: rgba(0,0,0,0.5);
--side-nav-mobile-box-shadow: 3px 0em 5px 10em rgb(0 0 0 / 50%);
--side-nav-hover-text-color: white;
--side-nav-hover-bg-color: black;
--side-nav-color: white;
--side-nav-border-radius: 5px;
--side-nav-border: none;
--side-nav-border-closed: none;
--side-nav-border-transition: 0.5s ease-in-out;
--side-nav-companion-bar-transistion: 0.15s linear;
--side-nav-bg-color-transition: 0.5s ease-in-out;
--side-nav-closed-bg-color: transparent;
--side-nav-item-active-color: var(--primary-color);
--side-nav-item-active-text-color: white;
--side-nav-active-bg-color: rgba(0,0,0,0.5);
--side-nav-overlay-color: rgba(0,0,0,0.5);
/* List items */
--list-group-item-text-color: var(--body-text-color); /*rgba(74, 198, 148, 0.9)*/
--list-group-item-bg-color: #343a40;
--list-group-item-border-color: rgba(239, 239, 239, 0.125);
--list-group-hover-text-color: white;
--list-group-hover-bg-color: rgb(22, 27, 34);
--list-group-active-border-color: none;
/* Popover */
--popover-body-bg-color: var(--navbar-bg-color);
--popover-body-text-color: var(--navbar-text-color);
--popover-outerarrow-color: transparent;
--popover-arrow-color: transparent;
--popover-bg-color: black;
--popover-border-color: black;
/* Pagination */
--pagination-active-link-border-color: var(--primary-color);
--pagination-active-link-bg-color: var(--primary-color);
--pagination-active-link-text-color: white;
--pagination-link-border-color: rgba(239, 239, 239, 0.125);
--pagination-link-text-color: white;
--pagination-link-bg-color: rgba(1, 4, 9, 0.5);
--pagination-focus-border-color: var(--primary-color);
--pagination-link-hover-color: var(--primary-color);
/* Progress Bar */
--progress-striped-animated-color: linear-gradient(45deg, rgba(74,198,148, 0.75) 25%, rgba(51, 138, 103, 0.75) 25%, rgba(51, 138, 103, 0.75) 50%, rgba(74,198,148, 0.75) 50%, rgba(74,198,148, 0.75) 75%, rgba(51, 138, 103, 0.75) 75%, rgba(51, 138, 103, 0.75));
--progress-bg-color: var(--nav-header-bg-color);
--progress-bar-color: var(--primary-color-dark-shade);
/* Dropdown */
--dropdown-item-hover-text-color: white;
--dropdown-item-hover-bg-color: var(--primary-color-dark-shade);
--dropdown-item-text-color: var(--navbar-text-color);
--dropdown-item-bg-color: var(--navbar-bg-color);
--dropdown-overlay-color: rgba(0,0,0,0.5);
/* Accordion */
--accordion-header-text-color: rgba(74, 198, 148, 0.9);
--accordion-header-bg-color: rgba(52, 60, 70, 0.5);
--accordion-body-bg-color: #292929;
--accordion-body-border-color: rgba(239, 239, 239, 0.125);
--accordion-body-text-color: var(--body-text-color);
--accordion-header-collapsed-text-color: rgba(74, 198, 148, 0.9);
--accordion-header-collapsed-bg-color: #292929;
--accordion-button-focus-border-color: unset;
--accordion-button-focus-box-shadow: unset;
--accordion-active-body-bg-color: #292929;
/* Breadcrumb */
--breadcrumb-bg-color: #292d32;
--breadcrumb-item-text-color: var(--body-text-color);
/* Rating star */
--ratingstar-color: white;
--ratingstar-star-empty: #b0c4de;
--ratingstar-star-filled: var(--primary-color);
/* Global */
--hr-color: rgba(239, 239, 239, 0.125);
--accent-bg-color: rgba(1, 4, 9, 0.5);
--accent-text-color: lightgrey;
--grid-breakpoints-xs: $grid-breakpoint-xs;
--grid-breakpoints-sm: $grid-breakpoint-sm;
--grid-breakpoints-md: $grid-breakpoint-md;
--grid-breakpoints-lg: $grid-breakpoint-lg;
--grid-breakpoints-xl: $grid-breakpoint-xl;
--body-font-family: "EBGaramond", "Helvetica Neue", sans-serif;
--brand-font-family: "Spartan", sans-serif;
/* Card */
--card-bg-color: rgba(22,27,34,0.5);
--card-text-color: var(--body-text-color);
--card-border-width: 0 1px 1px 1px;
--card-border-style: solid;
--card-border-color: transparent;
--card-progress-bar-color: var(--primary-color);
--card-overlay-bg-color: rgba(0, 0, 0, 0);
--card-overlay-hover-bg-color: rgba(0, 0, 0, 0.2);
/* Slider */
--slider-text-color: white;
--input-range-color: var(--primary-color);
--input-range-active-color: var(--primary-color-darker-shade);
/* Manga Reader */
--manga-reader-overlay-filter: blur(10px);
--manga-reader-overlay-bg-color: rgba(0,0,0,0.5);
--manga-reader-overlay-text-color: white;
--manga-reader-bg-color: black;
--manga-reader-next-highlight-bg-color: rgba(65, 225, 100, 0.5);
--manga-reader-prev-highlight-bg-color: rgba(65, 105, 225, 0.5);
/* Radios */
--radio-accent-color: var(--primary-color);
--radio-hover-accent-color: var(--primary-color);
--radio-focus-boxshadow-color: rgb(255 255 255 / 50%);
/* Carousel */
--carousel-header-text-color: var(--body-text-color);
--carousel-header-text-decoration: none;
--carousel-hover-header-text-decoration: none;
/** Drawer */
--drawer-background-color: black; // TODO: Remove this for bg
--drawer-bg-color: #292929;
--drawer-text-color: white;
/** Event Widget */
--event-widget-bg-color: rgb(1, 4, 9);
--event-widget-item-bg-color: rgb(1, 4, 9);
--event-widget-text-color: var(--body-text-color);
--event-widget-item-border-color: rgba(53, 53, 53, 0.5);
--event-widget-border-color: rgba(1, 4, 9, 0.5);
/* Search */
--search-result-text-lite-color: initial;
/* Bulk Selection */
--bulk-selection-text-color: var(--navbar-text-color);
--bulk-selection-highlight-text-color: var(--primary-color);
/* List Card Item */
--card-list-item-bg-color: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.15) 1%, rgba(0,0,0,0) 100%);
}

1
UI/Web/src/theme/utilities/_global.scss
View File

@ -13,6 +13,7 @@ body {
hr {
background-color: var(--hr-color);
border-top: 0px;
}
.accent {

8
UI/Web/tsconfig.json
View File

@ -16,7 +16,7 @@
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "ES6",
"target": "es2020",
"module": "es2020",
"lib": [
"es2019",
@ -29,6 +29,10 @@
"strictInputAccessModifiers": true,
"strictTemplates": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
"allowSyntheticDefaultImports": true,
"extendedDiagnostics": {
"nullishCoalescingNotNullable": "warning",
}
}
}