Readme Change (#2190)

* Implemented the ability to login to the app by passing apiKey to the login. This is for an upcoming feature (but currently blocked by another story)

* Added a comment

* Ensure locales are sorted

* Added a new status badge that shows how many active installs we have via users that use stats.

* Bump all GA to latest versions

* Bumped dependencies

* Bumped backend notifications

* Updated ngx-pdf-reader to upcoming beta which fixes some PDFs taking time to load. PDF reader will use browser locale to load localization rather than Kavita locale for now.

* Downgraded pdf viewer as beta has lots of bugs.

UI/Web/src/app/app.component.ts

@@ -50,14 +50,6 @@ export class AppComponent implements OnInit {
       if (!user) return false;
       return user.preferences.noTransitions;
     }), takeUntilDestroyed(this.destroyRef));
-
-    this.translocoService.events$.subscribe(event => {
-      if (event.type === 'translationLoadSuccess') {
-        console.log('Language has fully loaded!', translate('login.title'));
-      }
-      console.log('language event: ', event.type, translate('login.title'));
-    });
-
   }
 
   @HostListener('window:resize', ['$event'])

UI/Web/src/app/pdf-reader/_components/pdf-reader/pdf-reader.component.html

@@ -19,7 +19,7 @@
       height="100vh"
       [(page)]="currentPage"
       [textLayer]="true"
-      [useBrowserLocale]="false"
+      [useBrowserLocale]="true"
       [showHandToolButton]="true"
       [showOpenFileButton]="false"
       [showPrintButton]="false"
@@ -30,7 +30,6 @@
       [showSecondaryToolbarButton]="true"
       [showBorders]="true"
       [theme]="theme"
-      [formTheme]="theme"
       [backgroundColor]="backgroundColor"
       [customToolbar]="multiToolbar"
       [language]="user.preferences.locale"

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

@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit} from '@angular/core';
 import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
-import { Router, RouterLink } from '@angular/router';
+import {ActivatedRoute, Router, RouterLink} from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { ToastrService } from 'ngx-toastr';
 import { take } from 'rxjs/operators';
@@ -18,17 +18,10 @@ import {TRANSLOCO_SCOPE, TranslocoDirective} from "@ngneat/transloco";
     styleUrls: ['./user-login.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-  imports: [SplashContainerComponent, NgIf, ReactiveFormsModule, RouterLink, TranslocoDirective],
-  providers: [
-    {
-      provide: TRANSLOCO_SCOPE,
-      useValue: 'login'
-    }
-  ]
+  imports: [SplashContainerComponent, NgIf, ReactiveFormsModule, RouterLink, TranslocoDirective]
 })
 export class UserLoginComponent implements OnInit {
 
-  //model: any = {username: '', password: ''};
   loginForm: FormGroup = new FormGroup({
       username: new FormControl('', [Validators.required]),
       password: new FormControl('', [Validators.required, Validators.maxLength(32), Validators.minLength(6), Validators.pattern("^.{6,32}$")])
@@ -45,8 +38,8 @@ export class UserLoginComponent implements OnInit {
   isSubmitting = false;
 
   constructor(private accountService: AccountService, private router: Router, private memberService: MemberService,
-    private toastr: ToastrService, private navService: NavService, private modalService: NgbModal,
-    private readonly cdRef: ChangeDetectorRef) {
+    private toastr: ToastrService, private navService: NavService,
+    private readonly cdRef: ChangeDetectorRef, private route: ActivatedRoute) {
       this.navService.showNavBar();
       this.navService.hideSideNav();
     }
@@ -76,11 +69,21 @@ export class UserLoginComponent implements OnInit {
 
       this.cdRef.markForCheck();
     });
+
+    this.route.queryParamMap.subscribe(params => {
+      const val = params.get('apiKey');
+      console.log('key: ', val);
+      if (val != null && val.length > 0) {
+        this.login(val);
+      }
+    });
   }
 
 
-  login() {
+
+  login(apiKey: string = '') {
     const model = this.loginForm.getRawValue();
+    model.apiKey = apiKey;
     this.isSubmitting = true;
     this.cdRef.markForCheck();
     this.accountService.login(model).subscribe(() => {

UI/Web/src/httpLoader.ts

@@ -1,7 +1,6 @@
 import {Injectable} from "@angular/core";
 import {HttpClient} from "@angular/common/http";
 import {Translation, TranslocoLoader} from "@ngneat/transloco";
-import {tap} from "rxjs/operators";
 
 
 @Injectable({ providedIn: 'root' })
@@ -10,7 +9,6 @@ export class HttpLoader implements TranslocoLoader {
 
   getTranslation(langPath: string) {
     const tokens = langPath.split('/');
-    return this.http.get<Translation>(`assets/langs/${tokens[tokens.length - 1]}.json`)
-      .pipe(tap(d => console.log('translations: ', d)));
+    return this.http.get<Translation>(`assets/langs/${tokens[tokens.length - 1]}.json`);
   }
 }

UI/Web/src/main.ts

@@ -34,14 +34,12 @@ export function preloadUser(userService: AccountService, transloco: TranslocoSer
   return function() {
     return userService.currentUser$.pipe(switchMap((user) => {
       if (user && user.preferences.locale) {
-        console.log('preloaded locale: ', user.preferences.locale)
         transloco.setActiveLang(user.preferences.locale);
         return transloco.load(user.preferences.locale)
       }
 
       // If no user or locale is available, fallback to the default language ('en')
       const localStorageLocale = localStorage.getItem(AccountService.localeKey) || 'en';
-      console.log('preloaded locale: ', localStorageLocale)
       transloco.setActiveLang(localStorageLocale);
       return transloco.load(localStorageLocale)
     })).subscribe();