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

Release Testing Day 2 (#1493)

Browse source 
* Added a no data section to collection detail.

* Remove an optimization for skipping the whole library scan as it wasn't reliable

* When resetting password, ensure the input is colored correctly

* Fixed setting new password after resetting, throwing an error despite it actually being successful.

Fixed incorrect messaging for Password Reset page.

* Fixed a bug where reset password would show the side nav button and skew the page.

Updated a lot of references to use Typed version for formcontrols.

* Removed a migration from 0.5.0, 6 releases ago.

* Added a null check so we don't throw an exception when connecting with signalR on unauthenticated users.
This commit is contained in:
Joseph Milazzo 2022-08-31 09:50:24 -05:00 • committed by GitHub
parent 8e21a7091f
commit 2cd94e7db4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
32 changed files with 155 additions and 254 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -165,7 +165,7 @@ export class AccountService implements OnDestroy {
}
confirmResetPasswordEmail(model: {email: string, token: string, password: string}) {
return this.httpClient.post(this.baseUrl + 'account/confirm-password-reset', model);
return this.httpClient.post(this.baseUrl + 'account/confirm-password-reset', model, {responseType: 'json' as 'text'});
}
resetPassword(username: string, password: string, oldPassword: string) {

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 { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
import { FormControl, FormGroup, 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: UntypedFormGroup = new UntypedFormGroup({
name: new UntypedFormControl('', [Validators.required]),
type: new UntypedFormControl(0, [Validators.required])
libraryForm: FormGroup = new FormGroup({
name: new FormControl('', [Validators.required]),
type: new FormControl(0, [Validators.required])
});
selectedFolders: string[] = [];

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 { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
import { FormGroup, FormControl, 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: UntypedFormGroup = new UntypedFormGroup({});
userForm: FormGroup = new FormGroup({});
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 UntypedFormControl(this.member.email, [Validators.required, Validators.email]));
this.userForm.addControl('username', new UntypedFormControl(this.member.username, [Validators.required]));
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.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 { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
import { FormControl, FormGroup, 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: UntypedFormGroup = new UntypedFormGroup({});
inviteForm: FormGroup = new FormGroup({});
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 UntypedFormControl('', [Validators.required]));
this.inviteForm.addControl('email', new FormControl('', [Validators.required]));
}
close() {

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 { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
import { FormControl, FormGroup, 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: UntypedFormGroup = new UntypedFormGroup({});
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 UntypedFormControl(this.serverSettings.emailServiceUrl, [Validators.required]));
this.settingsForm.addControl('emailServiceUrl', new FormControl(this.serverSettings.emailServiceUrl, [Validators.required]));
});
}

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 { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
import { FormGroup, FormControl, 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: UntypedFormGroup = new UntypedFormGroup({});
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 UntypedFormControl(this.serverSettings.convertBookmarkToWebP, [Validators.required]));
this.settingsForm.addControl('convertBookmarkToWebP', new FormControl(this.serverSettings.convertBookmarkToWebP, [Validators.required]));
});
}

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 { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
import { FormControl, FormGroup, 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: UntypedFormGroup = new UntypedFormGroup({});
settingsForm: FormGroup = new FormGroup({});
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 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]));
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]));
});
}

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 { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
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';
@ -28,7 +28,7 @@ interface AdhocTask {
export class ManageTasksSettingsComponent implements OnInit {
serverSettings!: ServerSettings;
settingsForm: UntypedFormGroup = new UntypedFormGroup({});
settingsForm: FormGroup = new FormGroup({});
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 UntypedFormControl(this.serverSettings.taskScan, [Validators.required]));
this.settingsForm.addControl('taskBackup', new UntypedFormControl(this.serverSettings.taskBackup, [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.reoccuringTasks$ = this.serverService.getReoccuringJobs().pipe(shareReplay());

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 { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { FormControl, FormGroup } 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: UntypedFormGroup = new UntypedFormGroup({});
settingsForm: FormGroup = new FormGroup({});
/**
* System provided themes
@ -163,7 +163,7 @@ export class ReaderSettingsComponent implements OnInit, OnDestroy {
this.readingDirectionModel = this.user.preferences.bookReaderReadingDirection;
this.settingsForm.addControl('bookReaderFontFamily', new UntypedFormControl(this.user.preferences.bookReaderFontFamily, []));
this.settingsForm.addControl('bookReaderFontFamily', new FormControl(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 UntypedFormControl(this.user.preferences.bookReaderFontSize, []));
this.settingsForm.addControl('bookReaderFontSize', new FormControl(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 UntypedFormControl(this.user.preferences.bookReaderTapToPaginate, []));
this.settingsForm.addControl('bookReaderTapToPaginate', new FormControl(this.user.preferences.bookReaderTapToPaginate, []));
this.settingsForm.get('bookReaderTapToPaginate')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe(value => {
this.clickToPaginateChanged.emit(value);
});
this.settingsForm.addControl('bookReaderLineSpacing', new UntypedFormControl(this.user.preferences.bookReaderLineSpacing, []));
this.settingsForm.addControl('bookReaderLineSpacing', new FormControl(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 UntypedFormControl(this.user.preferences.bookReaderMargin, []));
this.settingsForm.addControl('bookReaderMargin', new FormControl(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 UntypedFormControl(this.user.preferences.bookReaderLayoutMode || BookPageLayoutMode.Default, []));
this.settingsForm.addControl('layoutMode', new FormControl(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 UntypedFormControl(this.user.preferences.bookReaderImmersiveMode, []));
this.settingsForm.addControl('bookReaderImmersiveMode', new FormControl(this.user.preferences.bookReaderImmersiveMode, []));
this.settingsForm.get('bookReaderImmersiveMode')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe((immersiveMode: boolean) => {
if (immersiveMode) {
this.settingsForm.get('bookReaderTapToPaginate')?.setValue(true);

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 { UntypedFormGroup, UntypedFormControl } from '@angular/forms';
import { FormGroup, FormControl } 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: UntypedFormGroup = new UntypedFormGroup({});
listForm: FormGroup = new FormGroup({});
collectionTitleTrackby = (index: number, item: CollectionTag) => `${item.title}`;
@ -38,8 +38,8 @@ export class BulkAddToCollectionComponent implements OnInit {
ngOnInit(): void {
this.listForm.addControl('title', new UntypedFormControl(this.title, []));
this.listForm.addControl('filterQuery', new UntypedFormControl('', []));
this.listForm.addControl('title', new FormControl(this.title, []));
this.listForm.addControl('filterQuery', new FormControl('', []));
this.loading = true;
this.cdRef.markForCheck();

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 { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { FormControl, FormGroup } 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!: UntypedFormGroup;
collectionTagForm!: FormGroup;
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 UntypedFormGroup({
summary: new UntypedFormControl(this.tag.summary, []),
coverImageLocked: new UntypedFormControl(this.tag.coverImageLocked, []),
coverImageIndex: new UntypedFormControl(0, []),
this.collectionTagForm = new FormGroup({
summary: new FormControl(this.tag.summary, []),
coverImageLocked: new FormControl(this.tag.coverImageLocked, []),
coverImageIndex: new FormControl(0, []),
});
this.imageUrls.push(this.imageService.randomize(this.imageService.getCollectionCoverImage(this.tag.id)));

12
UI/Web/src/app/collections/collection-detail/collection-detail.component.html
View file

@ -37,5 +37,17 @@
(selection)="bulkSelectionService.handleCardSelection('series', position, series.length, $event)" [selected]="bulkSelectionService.isCardSelected('series', position)" [allowSelection]="true"
></app-series-card>
</ng-template>
<div *ngIf="!filterActive && series.length === 0">
<ng-template #noData>
There are no items. Try adding a series.
</ng-template>
</div>
<div *ngIf="filterActive && series.length === 0">
<ng-template #noData>
No items match your current filter.
</ng-template>
</div>
</app-card-detail-layout>
</div>

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 { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { FormControl, FormGroup } 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!: UntypedFormGroup;
sortGroup!: UntypedFormGroup;
seriesNameGroup!: UntypedFormGroup;
readProgressGroup!: FormGroup;
sortGroup!: FormGroup;
seriesNameGroup!: FormGroup;
isAscendingSort: boolean = true;
updateApplied: number = 0;
@ -106,18 +106,18 @@ export class MetadataFilterComponent implements OnInit, OnDestroy {
}
this.filter = this.seriesService.createSeriesFilter();
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.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.sortGroup = new UntypedFormGroup({
sortField: new UntypedFormControl({value: this.filter.sortOptions?.sortField || SortField.SortName, disabled: this.filterSettings.sortDisabled}, []),
this.sortGroup = new FormGroup({
sortField: new FormControl({value: this.filter.sortOptions?.sortField || SortField.SortName, disabled: this.filterSettings.sortDisabled}, []),
});
this.seriesNameGroup = new UntypedFormGroup({
seriesNameQuery: new UntypedFormControl({value: this.filter.seriesNameQuery || '', disabled: this.filterSettings.searchNameDisabled}, [])
this.seriesNameGroup = new FormGroup({
seriesNameQuery: new FormControl({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 { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { FormControl, FormGroup } 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: UntypedFormGroup = new UntypedFormGroup({});
typeaheadForm: FormGroup = new FormGroup({});
prevSearchTerm: string = '';
@ -106,7 +106,7 @@ export class GroupedTypeaheadComponent implements OnInit, OnDestroy {
}
ngOnInit(): void {
this.typeaheadForm.addControl('typeahead', new UntypedFormControl(this.initialValue, []));
this.typeaheadForm.addControl('typeahead', new FormControl(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 { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { FormControl, FormGroup } 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: UntypedFormGroup = new UntypedFormGroup({});
listForm: FormGroup = new FormGroup({});
@ViewChild('title') inputElem!: ElementRef<HTMLInputElement>;
@ -65,8 +65,8 @@ export class AddToListModalComponent implements OnInit, AfterViewInit {
ngOnInit(): void {
this.listForm.addControl('title', new UntypedFormControl(this.title, []));
this.listForm.addControl('filterQuery', new UntypedFormControl('', []));
this.listForm.addControl('title', new FormControl(this.title, []));
this.listForm.addControl('filterQuery', new FormControl('', []));
this.loading = true;
this.readingListService.getReadingLists(false).subscribe(lists => {

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 { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
import { FormGroup, FormControl, 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!: UntypedFormGroup;
reviewGroup!: FormGroup;
coverImageIndex: number = 0;
/**
@ -41,9 +41,9 @@ export class EditReadingListModalComponent implements OnInit {
private imageService: ImageService) { }
ngOnInit(): void {
this.reviewGroup = new UntypedFormGroup({
title: new UntypedFormControl(this.readingList.title, [Validators.required]),
summary: new UntypedFormControl(this.readingList.summary, [])
this.reviewGroup = new FormGroup({
title: new FormControl(this.readingList.title, [Validators.required]),
summary: new FormControl(this.readingList.summary, [])
});
this.imageUrls.push(this.imageService.randomize(this.imageService.getReadingListCoverImage(this.readingList.id)));

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 { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
import { FormControl, FormGroup, 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: UntypedFormGroup = new UntypedFormGroup({});
registerForm: FormGroup = new FormGroup({});
emailLink: string = '';
emailLinkUrl: SafeUrl | undefined;
error: string = '';
@ -27,9 +27,9 @@ export class AddEmailToAccountMigrationModalComponent implements OnInit {
}
ngOnInit(): void {
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.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.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 { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
import { FormControl, FormGroup, 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: 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)]),
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)]),
});
/**

2
UI/Web/src/app/registration/confirm-reset-password/confirm-reset-password.component.html
View file

@ -1,7 +1,7 @@
<app-splash-container>
<ng-container title><h2>Password Reset</h2></ng-container>
<ng-container body>
<p>Enter the email of your account. We will send you an email </p>
<p>Enter the new password</p>
<form [formGroup]="registerForm" (ngSubmit)="submit()">
<div class="mb-3">
<label for="password" class="form-label">Password</label>&nbsp;<i class="fa fa-info-circle" placement="right" [ngbTooltip]="passwordTooltip" role="button" tabindex="0"></i>

4
UI/Web/src/app/registration/confirm-reset-password/confirm-reset-password.component.scss
View file

@ -0,0 +1,4 @@
input {
background-color: #fff !important;
color: black !important;
}

15
UI/Web/src/app/registration/confirm-reset-password/confirm-reset-password.component.ts
View file

@ -1,8 +1,9 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
import { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { ToastrService } from 'ngx-toastr';
import { AccountService } from 'src/app/_services/account.service';
import { NavService } from 'src/app/_services/nav.service';
@Component({
selector: 'app-confirm-reset-password',
@ -13,14 +14,18 @@ import { AccountService } from 'src/app/_services/account.service';
export class ConfirmResetPasswordComponent {
token: string = '';
registerForm: UntypedFormGroup = new UntypedFormGroup({
email: new UntypedFormControl('', [Validators.required, Validators.email]),
password: new UntypedFormControl('', [Validators.required, Validators.maxLength(32), Validators.minLength(6)]),
registerForm: FormGroup = new FormGroup({
email: new FormControl('', [Validators.required, Validators.email]),
password: new FormControl('', [Validators.required, Validators.maxLength(32), Validators.minLength(6)]),
});
constructor(private route: ActivatedRoute, private router: Router,
private accountService: AccountService, private toastr: ToastrService,
private readonly cdRef: ChangeDetectorRef) {
private readonly cdRef: ChangeDetectorRef, private navService: NavService) {
this.navService.showNavBar();
this.navService.hideSideNav();
const token = this.route.snapshot.queryParamMap.get('token');
const email = this.route.snapshot.queryParamMap.get('email');

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

@ -1,5 +1,5 @@
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
import { FormGroup, FormControl, 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: 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)]),
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)]),
});
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 { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
import { FormGroup, FormControl, 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: UntypedFormGroup = new UntypedFormGroup({
username: new UntypedFormControl('', [Validators.required]),
password: new UntypedFormControl('', [Validators.required])
loginForm: FormGroup = new FormGroup({
username: new FormControl('', [Validators.required]),
password: new FormControl('', [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 { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { FormControl, FormGroup } 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!: UntypedFormGroup;
reviewGroup!: FormGroup;
constructor(public modal: NgbActiveModal, private seriesService: SeriesService, private readonly cdRef: ChangeDetectorRef) {}
ngOnInit(): void {
this.reviewGroup = new UntypedFormGroup({
review: new UntypedFormControl(this.series.userReview, []),
rating: new UntypedFormControl(this.series.userRating, [])
this.reviewGroup = new FormGroup({
review: new FormControl(this.series.userReview, []),
rating: new FormControl(this.series.userRating, [])
});
this.cdRef.markForCheck();
}

9
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 { FormGroup, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { FormGroup, FormControl } from '@angular/forms';
import { PageLayoutMode } from '../_models/page-layout-mode';
import { DOCUMENT } from '@angular/common';
import { User } from '../_models/user';
@ -151,8 +151,8 @@ export class SeriesDetailComponent implements OnInit, OnDestroy, AfterContentChe
renderMode: PageLayoutMode = PageLayoutMode.Cards;
pageExtrasGroup = new FormGroup({
'sortingOption': new UntypedFormControl(this.sortingOptions[0].value, []),
'renderMode': new UntypedFormControl(this.renderMode, []),
'sortingOption': new FormControl(this.sortingOptions[0].value, []),
'renderMode': new FormControl(this.renderMode, []),
});
isAscendingSort: boolean = false; // TODO: Get this from User preferences
@ -299,7 +299,8 @@ export class SeriesDetailComponent implements OnInit, OnDestroy, AfterContentChe
this.changeDetectionRef.markForCheck();
this.loadSeries(this.seriesId);
this.pageExtrasGroup.get('renderMode')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe((val: PageLayoutMode) => {
this.pageExtrasGroup.get('renderMode')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe((val: PageLayoutMode | null) => {
if (val == null) return;
this.renderMode = val;
this.changeDetectionRef.markForCheck();
});

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

@ -1,5 +1,5 @@
import { Observable } from 'rxjs';
import { UntypedFormControl } from '@angular/forms';
import { FormControl } 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?: UntypedFormControl;
formControl?: FormControl;
/**
* 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 { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { FormControl, FormGroup } 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';
@ -189,8 +189,8 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
showAddItem: boolean = false;
filteredOptions!: Observable<string[]>;
isLoadingOptions: boolean = false;
typeaheadControl!: UntypedFormControl;
typeaheadForm!: UntypedFormGroup;
typeaheadControl!: FormControl;
typeaheadForm!: FormGroup;
private readonly onDestroy = new Subject<void>();
@ -230,9 +230,9 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
if (this.settings.hasOwnProperty('formControl') && this.settings.formControl) {
this.typeaheadControl = this.settings.formControl;
} else {
this.typeaheadControl = new UntypedFormControl('');
this.typeaheadControl = new FormControl('');
}
this.typeaheadForm = new UntypedFormGroup({
this.typeaheadForm = new FormGroup({
'typeahead': this.typeaheadControl
});