Part 1 of the Monster Merge

.eslintrc.json

@@ -24,14 +24,23 @@
         "plugin:@typescript-eslint/recommended"
       ],
       "rules": {
+        "@typescript-eslint/semi":"error",
         "@typescript-eslint/no-namespace": "warn",
         "@typescript-eslint/no-empty-function": "warn",
         "@typescript-eslint/no-useless-constructor": "off",
         "@typescript-eslint/no-explicit-any": "warn",
         "@typescript-eslint/quotes": ["error", "single"],
         "@typescript-eslint/no-unused-expressions": "error",
-        "@typescript-eslint/member-ordering": "warn",
+        "@typescript-eslint/member-ordering": "off",
         "@typescript-eslint/no-shadow": "error",
+        "@typescript-eslint/no-unused-vars": [
+          "warn",
+          {
+            "argsIgnorePattern": "^_",
+            "varsIgnorePattern": "^_",
+            "caughtErrorsIgnorePattern": "^_"
+          }
+        ],
         "@angular-eslint/component-selector": [
           "error",
           {

package.json

@@ -61,7 +61,6 @@
     "otpauth": "^9.1.1",
     "rrule": "^2.7.2",
     "rxjs": "^7.8.0",
-    "rxjs-compat": "^6.6.7",
     "tinymce": "^6.8.3",
     "ts-md5": "^1.3.1",
     "zone.js": "^0.13.3"

src/app/account-app/account-receipt.component.ts

@@ -20,7 +20,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { RunboxMe, RunboxWebmailAPI } from '../rmmapi/rbwebmail';
-import { AsyncSubject } from 'rxjs';
+import { AsyncSubject, firstValueFrom } from 'rxjs';
 import { take } from 'rxjs/operators';
 
 @Component({
@@ -29,7 +29,7 @@
     styleUrls: ['./account-receipt.component.scss'],
 })
 export class AccountReceiptComponent implements OnInit {
     receipt: any;
     me: RunboxMe;
     ready = new AsyncSubject<boolean>();
 
@@ -45,12 +45,12 @@
     }
 
     async ngOnInit() {
-        this.me = await this.rmmapi.me.toPromise();
+        this.me = await firstValueFrom(this.rmmapi.me);
 
-        const params = await this.route.params.pipe(take(1)).toPromise();
+        const params = await firstValueFrom(this.route.params.pipe(take(1)));
         const receiptID = params.id;
 
-        this.receipt = await this.rmmapi.getReceipt(receiptID).toPromise();
+        this.receipt = await firstValueFrom(this.rmmapi.getReceipt(receiptID));
 
         this.receipt.time = this.receipt.time.replace('T', ' ');
         if (this.receipt.method === 'giro') {

src/app/account-app/account-renewals.component.ts

@@ -17,7 +17,7 @@
 // along with Runbox 7. If not, see <https://www.gnu.org/licenses/>.
 // ---------- END RUNBOX LICENSE ----------
 
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
@@ -37,7 +37,7 @@
 const columnsMobile = ['renewal_name'];
 
 // TODO define it as an interface
 type ActiveProduct = any;
 
 @Component({
     selector: 'app-account-renewals-component',
@@ -232,7 +232,7 @@
 </ng-template>
     `,
 })
-export class AccountRenewalsRenewNowButtonComponent {
+export class AccountRenewalsRenewNowButtonComponent implements OnInit {
     @Input() p: ActiveProduct;
     @Input() usage: DataUsageInterface;
     @Output() clicked: EventEmitter<void> = new EventEmitter();

src/app/account-app/cart.service.spec.ts

@@ -21,8 +21,8 @@
 import { ProductOrder } from './product-order';
 import { StorageService } from '../storage.service';
 import { RunboxWebmailAPI } from '../rmmapi/rbwebmail';
-import { of } from 'rxjs';
+import { firstValueFrom, of } from 'rxjs';
 import { take } from 'rxjs/operators';
 import { Decimal } from 'decimal.js-light';
 
 Decimal.set({ precision: 2, rounding: Decimal.ROUND_HALF_EVEN });
@@ -49,7 +49,7 @@
 
         const order = new ProductOrder(401,'subscription', new Decimal(3), 402);
         await cart.add(order);
-        console.log(await cart.items.pipe(take(1)).toPromise());
+        console.log(await firstValueFrom(cart.items));
         expect(await cart.contains(401, 402)).toBe(true, 'cart contains the renewal product');
         expect(await cart.contains(401)).toBe(false, 'cart does not contain the new product');
     });

src/app/account-app/cart.service.ts

@@ -18,7 +18,7 @@
 // ---------- END RUNBOX LICENSE ----------
 
 import { Injectable } from '@angular/core';
-import { ReplaySubject } from 'rxjs';
+import { firstValueFrom, ReplaySubject } from 'rxjs';
 import { take } from 'rxjs/operators';
 
 import { ProductOrder } from './product-order';
@@ -46,7 +46,7 @@ export class CartService {
     }
 
     async add(p: ProductOrder): Promise<void> {
-        const items = await this.items.pipe(take(1)).toPromise();
+        const items = await firstValueFrom(this.items.pipe(take(1)));
 
         for (const i of items) {
             // Cannot order multiples of subscription products
@@ -70,7 +70,7 @@ export class CartService {
     }
 
     async contains(pid: number, apid?: number): Promise<boolean> {
-        const items = await this.items.pipe(take(1)).toPromise();
+        const items = await firstValueFrom(this.items.pipe(take(1)));
         for (const p of items) {
             if (p.pid === pid && p.apid === apid) {
                 return true;
@@ -80,7 +80,7 @@ export class CartService {
     }
 
     async remove(order: ProductOrder): Promise<void> {
-        const items = await this.items.pipe(take(1)).toPromise();
+        const items = await firstValueFrom(this.items.pipe(take(1)));
         // check if it's enough to just reduce the quantity on existing product
         for (const i of items) {
             if (i.isSameProduct(order)) {

src/app/account-app/credit-cards/stripe-add-card-dialog.component.ts

@@ -64,8 +64,8 @@ export class StripeAddCardDialogComponent implements AfterViewInit {
     }
 
     async ngAfterViewInit() {
-        await stripeLoader.toPromise();
-        const stripePubkey = await this.paymentsservice.stripePubkey.toPromise();
+        await firstValueFrom(stripeLoader);
+        const stripePubkey = await firstValueFrom(this.paymentsservice.stripePubkey);
         const customerSession = await firstValueFrom(this.paymentsservice.customerSession());
 
         this.stripe = Stripe(stripePubkey);

src/app/account-app/no-products-for-subaccounts.guard.ts

@@ -19,7 +19,7 @@
 
 import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
-import { Observable } from 'rxjs';
+import { firstValueFrom, Observable } from 'rxjs';
 import { RunboxWebmailAPI } from '../rmmapi/rbwebmail';
 import { RMMAuthGuardService } from '../rmmapi/rmmauthguard.service';
 
@@ -54,7 +54,7 @@ export class NoProductsForSubaccountsGuard  {
           (success) => {
               if (typeof(success) === 'boolean' && success) {
                   if (restricted) {
-                      return this.rmmapi.me.toPromise().then(me => {
+                      return firstValueFrom(this.rmmapi.me).then(me => {
                           if (me.owner) {
                               return this.router.parseUrl('/account/not-for-subaccounts');
                           } else {

src/app/account-app/shopping-cart.component.ts

@@ -20,7 +20,7 @@
 import { Component, OnInit } from '@angular/core';
 import { MatDialog as MatDialog, MatDialogRef as MatDialogRef } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Subject } from 'rxjs';
+import { firstValueFrom, Subject } from 'rxjs';
 
 import { CartService } from './cart.service';
 import { BitpayPaymentDialogComponent } from './bitpay-payment-dialog.component';
@@ -177,7 +177,7 @@ export class ShoppingCartComponent implements OnInit {
         // maybe there is a more elegant way to do this, but it's concise and works :)
         const cartItems = JSON.parse(JSON.stringify(items));
 
-        let products = await this.paymentsservice.products.toPromise();
+        let products = await firstValueFrom(this.paymentsservice.products);
 
         // Check if all the products in the cart had their details in the paymentservice.
         // This may not be true if they're coming from the URL for instance,
@@ -192,7 +192,7 @@ export class ShoppingCartComponent implements OnInit {
         }
         const neededPids = Array.from(neededPidsSet.values());
         if (neededPids.length > 0) {
-            const extras = await this.rmmapi.getProducts(neededPids).toPromise();
+            const extras = await firstValueFrom(this.rmmapi.getProducts(neededPids));
             if (extras.length !== neededPids.length) {
                 console.warn(`Failed to load products ${neededPids.join(',')} (got: ${JSON.stringify(extras)})`);
             }
@@ -213,7 +213,7 @@ export class ShoppingCartComponent implements OnInit {
     }
 
     async checkIfLegal(items: CartItem[]) {
-        const me = await this.rmmapi.me.toPromise();
+        const me = await firstValueFrom(this.rmmapi.me);
 
         this.orderError = undefined; // unless we find something else :)
 

src/app/account-app/stripe-payment-dialog.component.ts

@@ -87,7 +87,7 @@ export class StripePaymentDialogComponent implements AfterViewInit {
     }
 
     async ngAfterViewInit() {
-        await stripeLoader.toPromise();
+        await firstValueFrom(stripeLoader);
         const stripePubkey = await firstValueFrom(this.paymentsservice.stripePubkey);
         const customerSession = await firstValueFrom(this.paymentsservice.customerSession());
 
@@ -173,7 +173,7 @@ export class StripePaymentDialogComponent implements AfterViewInit {
             this.state = 'failure';
             return;
         }
-                
+
     }
 
     handleConfirmationToken(cId: string) {

src/app/account-details/account-settings.component.ts

@@ -17,7 +17,7 @@
 // along with Runbox 7. If not, see <https://www.gnu.org/licenses/>.
 // ---------- END RUNBOX LICENSE ----------
 
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { AsyncSubject } from 'rxjs';
 import { share, timeout } from 'rxjs/operators';
 import { RMM } from '../rmm';
@@ -28,7 +28,7 @@ import { AccountSettingsInterface } from '../rmm/account-settings';
     templateUrl: './account-settings.component.html',
     styleUrls: ['account-details.component.scss'],
 })
-export class AccountSettingsComponent {
+export class AccountSettingsComponent implements OnInit {
     displayedColumns: string[] = ['description', 'status'];
     settings = new AsyncSubject<AccountSettingsInterface[]>();
     settingsArray = [];

src/app/account-details/personal-details.component.ts

@@ -18,10 +18,10 @@
 // ---------- END RUNBOX LICENSE ----------
 
 import { HttpClient, HttpResponse } from '@angular/common/http';
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { Subject } from 'rxjs';
+import { firstValueFrom, Subject } from 'rxjs';
 import { RMM } from '../rmm';
 import { map } from 'rxjs/operators';
 import { AccountDetailsInterface } from '../rmm/account-details';
@@ -39,7 +39,7 @@ interface CountryAndTimezone {
     templateUrl: './personal-details.component.html',
     styleUrls: ['account-details.component.scss'],
 })
-export class PersonalDetailsComponent {
+export class PersonalDetailsComponent implements OnInit {
     hide = true;
     myControl = new UntypedFormControl();
     countriesAndTimezones: CountryAndTimezone[] = [];
@@ -109,10 +109,9 @@ export class PersonalDetailsComponent {
     }
 
     loadTimezones() {
-        this.http
+        firstValueFrom(this.http
             .get('/rest/v1/timezones')
-            .pipe(map((res: HttpResponse<any>) => res['result']))
-            .toPromise()
+            .pipe(map((res: HttpResponse<any>) => res['result'])))
             .then((data) => this.timezones = data.timezones);
     }
 
@@ -126,10 +125,9 @@ export class PersonalDetailsComponent {
     }
 
     private loadSelectFields() {
-        this.http
+        firstValueFrom(this.http
             .get('/rest/v1/account/details')
-            .pipe(map((res: HttpResponse<any>) => res['result']))
-            .toPromise()
+            .pipe(map((res: HttpResponse<any>) => res['result'])))
             .then((data) => {
                 this.selectedCountry = data.country;
                 this.selectedTimezone = data.timezone;

src/app/account-details/storage-data.component.ts

@@ -17,7 +17,7 @@
 // along with Runbox 7. If not, see <https://www.gnu.org/licenses/>.
 // ---------- END RUNBOX LICENSE ----------
 
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { AsyncSubject } from 'rxjs';
 import { RMM } from '../rmm';
 
@@ -34,7 +34,7 @@ export interface DataUsage {
     templateUrl: './storage-data.component.html',
     styleUrls: ['account-details.component.scss'],
 })
-export class StorageDataComponent {
+export class StorageDataComponent implements OnInit {
     dataUsage = new AsyncSubject<DataUsage[]>();
     displayedColumns: string[] = ['type', 'quota', 'usage', 'percentage_used'];
 

src/app/account-security/sessions.component.ts

@@ -16,7 +16,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Runbox 7. If not, see <https://www.gnu.org/licenses/>.
 // ---------- END RUNBOX LICENSE ----------
-import { Component, Output, EventEmitter, ViewChild } from '@angular/core';
+import { Component, Output, EventEmitter, ViewChild, OnInit } from '@angular/core';
 import { MatLegacyPaginator as MatPaginator } from '@angular/material/legacy-paginator';
 import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
@@ -28,7 +28,7 @@ import { RMM } from '../rmm';
     styleUrls: ['account.security.component.scss'],
     templateUrl: 'sessions.component.html',
 })
-export class SessionsComponent {
+export class SessionsComponent implements OnInit {
     panelOpenState = false;
     @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
     @Output() Close: EventEmitter<string> = new EventEmitter();

src/app/aliases/aliases.lister.spec.ts

@@ -70,7 +70,7 @@ describe('AliasesListerComponent', () => {
                             return of({
                                 status: 'error',
                                 result: 'unimplemented'
-                            })
+                            });
                         }
                     }
                 } },
@@ -94,11 +94,11 @@ describe('AliasesListerComponent', () => {
         });
         fixture = TestBed.createComponent(AliasesListerComponent);
         component = fixture.componentInstance;
-    })
+    });
 
     it('loads aliases through RMM', () => {
         expect(component.aliases).toEqual(ALIASES);
-    })
+    });
 
     it('sets the default email to current user email', () => {
         expect(component.defaultEmail).toBe(DEFAULT_EMAIL);

src/app/aliases/aliases.lister.ts

@@ -58,7 +58,7 @@ export class AliasesListerComponent {
         if (result !== undefined) {
             this.aliases.push(result);
         }
-    })
+    });
   }
 
   edit (item: object) {