Merge pull request #16 from webful-ltd/ng-11.2

Lib updates and storage dependency rework

package.json.dist

@@ -16,26 +16,27 @@
   "license": "GPL-3.0-or-later",
   "private": false,
   "dependencies": {
-    "@angular/common": "^11.1.1",
-    "@angular/core": "^11.1.1",
-    "@angular/forms": "^11.1.1",
-    "@angular/platform-browser": "^11.1.1",
-    "@angular/platform-browser-dynamic": "^11.1.1",
-    "@angular/router": "^11.1.1",
+    "@angular/common": "^11.2.7",
+    "@angular/core": "^11.2.7",
+    "@angular/forms": "^11.2.7",
+    "@angular/platform-browser": "^11.2.7",
+    "@angular/platform-browser-dynamic": "^11.2.7",
+    "@angular/router": "^11.2.7",
     "@ionic-native/clipboard": "^5.31.1",
     "@ionic-native/cloud-settings": "^5.31.1",
     "@ionic-native/core": "^5.31.1",
     "@ionic-native/in-app-browser": "^5.31.1",
     "@ionic-native/keyboard": "^5.31.1",
     "@ionic-native/splash-screen": "^5.31.1",
     "@ionic-native/status-bar": "^5.31.1",
-    "@ionic/angular": "^5.5.3",
-    "@ionic/storage": "^2.3.1",
+    "@ionic/angular": "^5.6.3",
+    "@ionic/storage": "^3.0.2",
+    "@ionic/storage-angular": "^3.0.2",
     "@webful/2ldcheck": "~0.0.1",
     "@webful/passwordmaker-lib": "~0.1.2",
     "cordova-android": "^9.0.0",
     "cordova-clipboard": "^1.3.0",
-    "cordova-ios": "^5.1.1",
+    "cordova-ios": "^6.2.0",
     "cordova-plugin-cloud-settings": "^1.0.4",
     "cordova-plugin-device": "^2.0.3",
     "cordova-plugin-file": "^6.0.2",
@@ -46,38 +47,41 @@
     "cordova-plugin-statusbar": "^2.4.3",
     "cordova-plugin-whitelist": "^1.3.4",
     "core-js": "^2.6.12",
+    "localforage": "^1.9.0",
+    "localforage-cordovasqlitedriver": "^1.8.0",
     "rxjs": "^6.6.3",
     "rxjs-compat": "^6.6.3",
     "tslib": "^1.14.1",
     "url-parse": "^1.4.7",
     "zone.js": "^0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "^0.1101.2",
-    "@angular-devkit/build-angular": "^0.1101.2",
-    "@angular-devkit/core": "^11.1.2",
-    "@angular-devkit/schematics": "^11.1.2",
-    "@angular/cli": "^11.1.2",
-    "@angular/compiler": "^11.1.1",
-    "@angular/compiler-cli": "^11.1.1",
-    "@angular/language-service": "^11.1.1",
-    "@ionic/angular-toolkit": "^3.0.0",
-    "@types/jasmine": "^3.6.3",
+    "@angular-devkit/architect": "^0.1102.6",
+    "@angular-devkit/build-angular": "^0.1102.6",
+    "@angular-devkit/core": "^11.2.6",
+    "@angular-devkit/schematics": "^11.2.6",
+    "@angular/cli": "^11.2.6",
+    "@angular/compiler": "^11.2.7",
+    "@angular/compiler-cli": "^11.2.7",
+    "@angular/language-service": "^11.2.7",
+    "@ionic/angular-toolkit": "^3.1.1",
+    "@types/jasmine": "^3.6.7",
     "@types/jasminewd2": "^2.0.8",
-    "@types/node": "^13.13.40",
+    "@types/node": "^14.14.36",
     "codelyzer": "^6.0.1",
+    "cordova-sqlite-storage": "github:litehelpers/Cordova-sqlite-storage",
     "ionic-mocks": "^1.3.0",
-    "jasmine-core": "^3.6.0",
-    "jasmine-spec-reporter": "^4.2.1",
-    "karma": "^6.0.3",
+    "jasmine-core": "^3.7.1",
+    "jasmine-spec-reporter": "^6.0.0",
+    "karma": "^6.3.0",
     "karma-chrome-launcher": "^3.1.0",
     "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-jasmine": "^4.0.1",
     "karma-jasmine-html-reporter": "^1.5.4",
     "protractor": "^7.0.0",
     "ts-node": "^9.1.1",
     "tslint": "~6.1.3",
-    "typescript": "4.0.5"
+    "typescript": "^4.1.5"
   },
   "engines": {
     "node": ">=12",

src/app/app.module.ts

@@ -3,14 +3,17 @@ import { BrowserModule } from '@angular/platform-browser';
 import { RouteReuseStrategy } from '@angular/router';
 
 import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
-import { IonicStorageModule } from '@ionic/storage';
+import { Drivers } from '@ionic/storage';
+import { IonicStorageModule } from '@ionic/storage-angular';
 import { Clipboard } from '@ionic-native/clipboard/ngx';
 import { CloudSettings } from '@ionic-native/cloud-settings/ngx';
 import { Keyboard } from '@ionic-native/keyboard/ngx';
 import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
 
+import * as CordovaSQLiteDriver from 'localforage-cordovasqlitedriver';
+
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
@@ -19,7 +22,9 @@ import { AppComponent } from './app.component';
   imports: [
     BrowserModule,
     IonicModule.forRoot(),
-    IonicStorageModule.forRoot(),
+    IonicStorageModule.forRoot({
+      driverOrder: [CordovaSQLiteDriver._driver, Drivers.IndexedDB],
+    }),
     AppRoutingModule,
   ],
   providers: [

src/app/home/home.page.spec.ts

@@ -6,13 +6,15 @@ import { Platform, ToastController } from '@ionic/angular';
 import { Clipboard } from '@ionic-native/clipboard/ngx';
 import { CloudSettings } from '@ionic-native/cloud-settings/ngx';
 import { Keyboard } from '@ionic-native/keyboard/ngx';
-import { IonicStorageModule } from '@ionic/storage';
+import { Drivers } from '@ionic/storage';
+import { IonicStorageModule } from '@ionic/storage-angular';
+
+import * as CordovaSQLiteDriver from 'localforage-cordovasqlitedriver';
 
 import { HomePage } from './home.page';
 
 declare global {
   interface Window {
-    cordova: Cordova;
     clearTimeout: (handle?: number) => void;
     setTimeout: (callback: () => any, interval: number) => any;
   }
@@ -28,7 +30,9 @@ describe('HomePage', () => {
     TestBed.configureTestingModule({
       declarations: [HomePage],
       imports: [
-        IonicStorageModule.forRoot(),
+        IonicStorageModule.forRoot({
+          driverOrder: [CordovaSQLiteDriver._driver, Drivers.IndexedDB],
+        }),
       ],
       providers: [
         { provide: Clipboard, useValue: clipboardSpy },

src/app/home/home.page.ts

@@ -38,7 +38,7 @@ export class HomePage implements OnInit {
   ) {}
 
   ngOnInit() {
-    if (window.cordova) {
+    if (window.hasOwnProperty('cordova')) {
       // For now, no clipboard in-browser - API support not wide + no plugin support
       if (this.clipboard) {
         this.clipboard_available = true;
@@ -55,6 +55,8 @@ export class HomePage implements OnInit {
       });
     }
 
+    this.settingsService.init();
+
     this.update();
 
     this.settingsService.saveSubject.subscribe(() => { this.update(); });
@@ -115,7 +117,7 @@ export class HomePage implements OnInit {
    * the keyboard to see the password and Copy button.
    */
   hideKeyboard() {
-    if (window.cordova) {
+    if (window.hasOwnProperty('cordova')) {
       this.keyboard.hide();
     }
   }

src/app/profile/profile.page.spec.ts

@@ -2,7 +2,9 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { IonicModule } from '@ionic/angular';
 import { CloudSettings } from '@ionic-native/cloud-settings/ngx';
-import { IonicStorageModule } from '@ionic/storage';
+import { Drivers } from '@ionic/storage';
+import { IonicStorageModule } from '@ionic/storage-angular';
+import * as CordovaSQLiteDriver from 'localforage-cordovasqlitedriver';
 
 import { Profile } from '../../models/Profile';
 import { ProfilePage } from './profile.page';
@@ -16,7 +18,9 @@ describe('ProfilePage', () => {
       declarations: [ ProfilePage ],
       imports: [
         IonicModule.forRoot(),
-        IonicStorageModule.forRoot(),
+        IonicStorageModule.forRoot({
+          driverOrder: [CordovaSQLiteDriver._driver, Drivers.IndexedDB],
+        }),
         ReactiveFormsModule,
       ],
       providers: [

src/app/settings.service.spec.ts

@@ -1,6 +1,6 @@
 import { TestBed, inject } from '@angular/core/testing';
 import { CloudSettings } from '@ionic-native/cloud-settings/ngx';
-import { Storage } from '@ionic/storage';
+import { Storage } from '@ionic/storage-angular';
 
 import { SettingsService } from './settings.service';
 import { SettingsSimple } from '../models/SettingsSimple';

src/app/settings.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { ToastController } from '@ionic/angular';
 import { CloudSettings } from '@ionic-native/cloud-settings/ngx';
-import { Storage } from '@ionic/storage';
+import { Storage } from '@ionic/storage-angular';
 import { Subject } from 'rxjs';
 
 import { Profile } from '../models/Profile';
@@ -15,7 +15,8 @@ import { SettingsSimple } from '../models/SettingsSimple';
 export class SettingsService {
   private static storageKey = 'settings';
 
-  public saveSubject: Subject<void> = new Subject<void>();
+  ready = false;
+  saveSubject: Subject<void> = new Subject<void>();
   private currentSettings: Settings;
   private currentPromise?: Promise<any>;
 
@@ -25,6 +26,11 @@ export class SettingsService {
     public toast: ToastController,
   ) {}
 
+  async init() {
+    await this.storage.create();
+    this.ready = true;
+  }
+
   public save(settings: Settings): Promise<any> {
     if (!settings) {
       return Promise.reject('No settings data');
@@ -40,7 +46,7 @@ export class SettingsService {
     // Tell listening pages (e.g. Home) that the settings changed
     savePromise.then(() => {
       this.saveSubject.next();
-      if (window.cordova) { // No cloud settings without a device
+      if (window.hasOwnProperty('cordova')) { // No cloud settings without a device
         this.cloudSettings.save(settings, true);
       }
     });
@@ -106,6 +112,14 @@ export class SettingsService {
     });
   }
 
+  private checkIfReady(resolve) {
+    if (this.ready) {
+      return resolve(this.getCurrentSettings);
+    }
+
+    setTimeout(() => this.checkIfReady(resolve), 50);
+  }
+
   public getCurrentSettings(): Promise<Settings> {
     if (this.currentPromise instanceof Promise) {
       return this.currentPromise;
@@ -115,12 +129,26 @@ export class SettingsService {
       return Promise.resolve(this.currentSettings);
     }
 
+    if (!this.ready) {
+      const done = new Promise<Settings>((resolve, reject) => {
+        setTimeout(() => {
+          if (!this.ready) {
+            console.log('Storage not ready after 3 seconds');
+            reject();
+          }
+        }, 3000);
+        setTimeout(() => this.checkIfReady(resolve), 50);
+      });
+
+      return done;
+    }
+
     const settingsService = this;
 
     this.currentPromise = this.storage.get(SettingsService.storageKey).then(settings => {
       if (settings === null) {
         return new Promise(resolve => {
-          if (!window.cordova) { // No cloud settings without a device
+          if (!window.hasOwnProperty('cordova')) { // No cloud settings without a device
             return resolve(this.loadDefaults());
           }