Angular Upgrade (#1059)

* Upgraded to Angular 12

* Bump ng-bootstrap for upgrade

* Angular 13 upgrade, ng-bootstrap bump

* Angular 13 upgrade (broken)

* Angular 13 upgrade. CSS is broken completely

* Angular 13 upgrade is complete.

UI/Web/src/app/_guards/admin.guard.ts

@@ -3,7 +3,6 @@ import { CanActivate } from '@angular/router';
 import { ToastrService } from 'ngx-toastr';
 import { Observable } from 'rxjs';
 import { map, take } from 'rxjs/operators';
-import { User } from '../_models/user';
 import { AccountService } from '../_services/account.service';
 
 @Injectable({
@@ -15,8 +14,8 @@ export class AdminGuard implements CanActivate {
   canActivate(): Observable<boolean> {
     // this automaticallys subs due to being router guard
     return this.accountService.currentUser$.pipe(take(1),
-      map((user: User) => {
-        if (this.accountService.hasAdminRole(user)) {
+      map((user) => {
+        if (user && this.accountService.hasAdminRole(user)) {
           return true;
         }
         

UI/Web/src/app/_guards/auth.guard.ts

@@ -3,7 +3,6 @@ import { CanActivate, Router } from '@angular/router';
 import { ToastrService } from 'ngx-toastr';
 import { Observable } from 'rxjs';
 import { map, take } from 'rxjs/operators';
-import { User } from '../_models/user';
 import { AccountService } from '../_services/account.service';
 
 @Injectable({
@@ -15,7 +14,7 @@ export class AuthGuard implements CanActivate {
 
   canActivate(): Observable<boolean> {
     return this.accountService.currentUser$.pipe(take(1),
-      map((user: User) => {
+      map((user) => {
         if (user) {
           return true;
         }

UI/Web/src/app/_interceptors/jwt.interceptor.ts

@@ -7,7 +7,6 @@ import {
 } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { AccountService } from '../_services/account.service';
-import { User } from '../_models/user';
 import { take } from 'rxjs/operators';
 
 @Injectable()
@@ -16,16 +15,13 @@ export class JwtInterceptor implements HttpInterceptor {
   constructor(private accountService: AccountService) {}
 
   intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
-    let currentUser: User;
 
     // Take 1 means we don't have to unsubscribe because we take 1 then complete
     this.accountService.currentUser$.pipe(take(1)).subscribe(user => {
-      currentUser = user;
-
-      if (currentUser) {
+      if (user) {
         request = request.clone({
           setHeaders: {
-            Authorization: `Bearer ${currentUser.token}`
+            Authorization: `Bearer ${user.token}`
           }
         });
       }

UI/Web/src/app/_services/account.service.ts

@@ -19,7 +19,10 @@ export class AccountService implements OnDestroy {
   currentUser: User | undefined;
 
   // Stores values, when someone subscribes gives (1) of last values seen.
-  private currentUserSource = new ReplaySubject<User>(1);
+  private currentUserSource = new ReplaySubject<User | undefined>(1);
+  /**
+   * 
+   */
   currentUser$ = this.currentUserSource.asObservable();
 
   /**

UI/Web/src/app/admin/manage-users/manage-users.component.ts

@@ -35,8 +35,10 @@ export class ManageUsersComponent implements OnInit, OnDestroy {
               private confirmService: ConfirmService,
               public messageHub: MessageHubService,
               private serverService: ServerService) {
-    this.accountService.currentUser$.pipe(take(1)).subscribe((user: User) => {
-      this.loggedInUsername = user.username;
+    this.accountService.currentUser$.pipe(take(1)).subscribe((user) => {
+      if (user) {
+        this.loggedInUsername = user.username;
+      }
     });
 
   }

UI/Web/src/app/carousel/carousel-reel/carousel-reel.component.html

@@ -2,14 +2,14 @@
     <div>
         <h2 style="display: inline-block;"><a href="javascript:void(0)" (click)="sectionClicked($event)" class="section-title">{{title}}</a></h2>
         <div class="float-right">
-            <button class="btn btn-icon" [disabled]="swiper?.isBeginning" (click)="prevPage()"><i class="fa fa-angle-left" aria-hidden="true"></i><span class="sr-only">Previous Items</span></button>
-            <button class="btn btn-icon" [disabled]="swiper?.isEnd" (click)="nextPage()"><i class="fa fa-angle-right" aria-hidden="true"></i><span class="sr-only">Next Items</span></button>
+            <button class="btn btn-icon" [disabled]="isBeginning" (click)="prevPage()"><i class="fa fa-angle-left" aria-hidden="true"></i><span class="sr-only">Previous Items</span></button>
+            <button class="btn btn-icon" [disabled]="isEnd" (click)="nextPage()"><i class="fa fa-angle-right" aria-hidden="true"></i><span class="sr-only">Next Items</span></button>
         </div>
     </div>
     <div>
         <swiper
+            #swiper
             [slidesPerView]="'auto'"
-            (swiper)="onSwiper($event)"
             [freeMode]="true">
             <ng-template *ngFor="let item of items; index as i;" swiperSlide>
                 <ng-container [ngTemplateOutlet]="carouselItemTemplate" [ngTemplateOutletContext]="{ $implicit: item, idx: i }"></ng-container>

UI/Web/src/app/carousel/carousel-reel/carousel-reel.component.ts

@@ -1,5 +1,7 @@
-import { Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef } from '@angular/core';
-import Swiper from 'swiper';
+import { Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
+import { SwiperComponent } from 'swiper/angular';
+//import Swiper from 'swiper';
+//import { SwiperEvents, Swiper } from 'swiper/types';
 
 @Component({
   selector: 'app-carousel-reel',
@@ -13,10 +15,20 @@ export class CarouselReelComponent implements OnInit {
   @Input() title = '';
   @Output() sectionClick = new EventEmitter<string>();
 
+  @ViewChild('swiper', { static: false }) swiper?: SwiperComponent;
 
-  swiper!: Swiper;
+
+  //swiper!: Swiper;
   trackByIdentity: (index: number, item: any) => string;
 
+  get isEnd() {
+    return this.swiper?.swiperRef.isEnd;
+  }
+
+  get isBeginning() {
+    return this.swiper?.swiperRef.isBeginning;
+  }
+
   constructor() { 
     this.trackByIdentity = (index: number, item: any) => `${this.title}_${item.id}_${item?.name}_${item?.pagesRead}_${index}`;
   }
@@ -25,13 +37,13 @@ export class CarouselReelComponent implements OnInit {
 
   nextPage() {
     if (this.swiper) {
-      this.swiper.setProgress(this.swiper.progress + 0.25, 600);
+      this.swiper.swiperRef.setProgress(this.swiper.swiperRef.progress + 0.25, 600);
     }
   }
 
   prevPage() {
     if (this.swiper) {
-      this.swiper.setProgress(this.swiper.progress - 0.25, 600);
+      this.swiper.swiperRef.setProgress(this.swiper.swiperRef.progress - 0.25, 600);
     }
   }
 
@@ -39,7 +51,14 @@ export class CarouselReelComponent implements OnInit {
     this.sectionClick.emit(this.title);
   }
 
-  onSwiper(swiper: any) {
-    this.swiper = swiper;
-  }
+  // onSwiper(eventParams: Parameters<SwiperEvents['init']>) {
+  //   console.log('swiper: ', eventParams);
+  //   [this.swiper] = eventParams;
+  // }
+
+  // onSwiper(params: Swiper) {
+  //   // const [swiper] = params;
+  //   // console.log(swiper);
+  //   // return params;
+  // }
 }

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

@@ -73,11 +73,13 @@ export class LibraryComponent implements OnInit, OnDestroy {
     this.isLoading = true;
     this.accountService.currentUser$.pipe(take(1)).subscribe(user => {
       this.user = user;
-      this.isAdmin = this.accountService.hasAdminRole(this.user);
-      this.libraryService.getLibrariesForMember().pipe(take(1)).subscribe(libraries => {
-        this.libraries = libraries;
-        this.isLoading = false;
-      });
+      if (this.user) {
+        this.isAdmin = this.accountService.hasAdminRole(this.user);
+        this.libraryService.getLibrariesForMember().pipe(take(1)).subscribe(libraries => {
+          this.libraries = libraries;
+          this.isLoading = false;
+        });
+      }
     });
 
     this.reloadSeries();

UI/Web/src/app/reading-list/_modals/add-to-list-modal/add-to-list-modal.component.scss

@@ -1,7 +1,9 @@
+
+@use '../../../../theme/colors';
 .clickable {
     cursor: pointer;
 }
 
 .clickable:hover, .clickable:focus {
-    background-color: lightgreen;
+    background-color: colors.$primary-color;
 }

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

@@ -83,7 +83,7 @@ export class UserPreferencesComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.titleService.setTitle('Kavita - User Preferences');
-    this.accountService.currentUser$.pipe(take(1)).subscribe((user: User) => {
+    this.accountService.currentUser$.pipe(take(1)).subscribe((user) => {
       if (user) {
         this.user = user;
         this.isAdmin = this.accountService.hasAdminRole(user);

UI/Web/src/environments/environment.ts

@@ -15,4 +15,4 @@ export const environment = {
  * This import should be commented out in production mode because it will have a negative impact
  * on performance if an error is thrown.
  */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

UI/Web/src/polyfills.ts

@@ -59,7 +59,7 @@ import '@angular/localize/init';
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js';  // Included with Angular CLI.
 
 
 /***************************************************************************************************

UI/Web/src/styles.scss

@@ -1,14 +1,20 @@
+@use '../node_modules/swiper/swiper.scss' as swiper;
+@use '~bootstrap/scss/mixins/_breakpoints.scss' as breakpoints;
+
 // Import colors for overrides of bootstrap theme
 @import './theme/colors';
 @import './theme/toastr';
 
 // Bootstrap must be after _colors since we define the colors there
 @import '~bootstrap/scss/bootstrap';
-@import '~bootstrap/scss/mixins/_breakpoints.scss';
 
-@import '~swiper/swiper.scss';
 
-@import './assets/themes/dark.scss';
+
+@import './theme/dark.scss';
+
+
+
+
 
 // Global Styles
 button:disabled, .form-control:disabled, .form-control[readonly], .disabled, :disabled {
@@ -72,14 +78,16 @@ app-root {
 }
 
 
+
+
 // Utiliities
-@include media-breakpoint-down(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) {
+@include breakpoints.media-breakpoint-down(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) {
   .phone-hidden {
     display: none;
   }
 }
 
-@include media-breakpoint-up(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) {
+@include breakpoints.media-breakpoint-up(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) {
   .not-phone-hidden {
     display: none;
   }

UI/Web/src/theme/_colors.scss

@@ -18,6 +18,26 @@ $dark-item-accent-bg: #292d32;
 
 $white-item-accent-bg: rgba(247, 247, 247, 1);
 
+// Default variables for light mode
+:root {
+  --primary-color: #4ac694;
+  --error-color: #ff4136;
+  --bs-body-bg: #fff; 
+}
+
+// Dark mode theme
+:root .bg-dark {
+  --primary-color: #4ac694;
+  --error-color: #ff4136;
+  --bs-body-bg: red; // This is bootstrap v5 only
+}
+
+// E-ink theme
+:root .bg-eink {
+  --primary-color: black;
+  --bs-body-bg: white;
+}
+
 
 //=========================
 //     Ratings

UI/Web/src/theme/dark.scss

@@ -1,6 +1,10 @@
 // All dark style overrides should live here
 
-@use "../../theme/colors";
+@use "./colors";
+
+// :root {
+//   --bs-body-color: #212529;
+// }
 
 .bg-dark {
   color: $dark-text-color;
@@ -155,7 +159,7 @@
 
     &::before {
       content: "";
-      background-image: url('../../assets/images/login-bg.jpg');
+      background-image: url('../assets/images/login-bg.jpg');
       background-size: cover;
       position: absolute;
       top: 0;