Diff to HTML by rtfpessoa

Files changed (67) hide show

.firebaserc +22 -0
CHANGELOG.md +1 -0
DIFF.md +51 -0
FIREBASE.md +53 -1
angular.json +2 -27
capacitor.config.ts +4 -5
firebase.json +85 -40
package.json +28 -25
resources/README.md +1 -8
resources/psd/default/background.psd +0 -0
resources/psd/default/icon.psd +0 -0
resources/psd/default/splash.psd +0 -0
resources/psd/pwa/icon.psd +0 -0
resources/psd/pwa/splash.psd +0 -0
resources/web/HOW-TO.md +13 -13
resources/web/icon/favicon.ico +0 -0
src/app/app.component.ts +3 -2
src/app/components/countdown-timer/countdown-timer.component.ts +6 -5
src/app/deals/details/deals-details.module.ts +4 -1
src/app/deals/details/deals-details.page.html +4 -4
src/app/deals/details/deals-details.page.ts +14 -5
src/app/deals/details/styles/deals-details.page.scss +3 -3
src/app/deals/listing/deals-listing.page.ts +6 -3
src/app/fashion/details/fashion-details.module.ts +5 -1
src/app/fashion/details/fashion-details.page.html +4 -4
src/app/fashion/details/fashion-details.page.ts +36 -26
src/app/fashion/details/styles/fashion-details.page.scss +2 -2
src/app/fashion/listing/fashion-listing.page.ts +6 -3
src/app/firebase/auth/firebase-auth-definitions.ts +6 -0
src/app/firebase/auth/firebase-auth.module.ts +21 -5
src/app/firebase/auth/firebase-auth.service.ts +443 -108
src/app/firebase/auth/profile/firebase-profile.module.ts +7 -5
src/app/firebase/auth/profile/firebase-profile.page.ts +32 -19
src/app/firebase/auth/sign-in/firebase-sign-in.module.ts +10 -8
src/app/firebase/auth/sign-in/firebase-sign-in.page.ts +102 -127
src/app/firebase/auth/sign-up/firebase-sign-up.module.ts +17 -1
src/app/firebase/auth/sign-up/firebase-sign-up.page.html +1 -1
src/app/firebase/auth/sign-up/firebase-sign-up.page.ts +103 -114
src/app/firebase/crud/firebase-crud.module.ts +6 -4
src/app/firebase/crud/firebase-crud.service.ts +159 -92
src/app/firebase/crud/listing/firebase-listing.page.ts +11 -9
src/app/firebase/crud/user/select-image/select-user-image.modal.ts +5 -4
src/app/firebase/crud/user/update/firebase-update-user.modal.ts +1 -1
src/app/food/details/food-details.page.ts +6 -3
src/app/food/listing/food-listing.page.ts +6 -3
src/app/getting-started/getting-started.module.ts +4 -1
src/app/getting-started/getting-started.page.html +8 -8
src/app/getting-started/getting-started.page.ts +22 -23
src/app/getting-started/styles/getting-started.page.scss +6 -6
src/app/notifications/notifications.page.ts +6 -3
src/app/pipes/time-ago.pipe.ts +2 -2
src/app/real-estate/details/real-estate-details.page.ts +6 -3
src/app/real-estate/listing/real-estate-listing.page.ts +6 -3
src/app/showcase/app-shell/data-store-combined/data-store-combined.page.ts +2 -1
src/app/showcase/route-resolvers-ux/progressive-shell-resolvers/progressive-shell-resolvers.page.ts +6 -3
src/app/travel/details/travel-details.page.ts +6 -3
src/app/travel/listing/travel-listing.page.ts +6 -3
src/app/user/friends/user-friends.page.ts +9 -6
src/app/user/profile/user-profile.page.ts +9 -6
src/app/video-playlist/video-playlist.page.ts +10 -7
src/app/walkthrough/styles/walkthrough.page.scss +5 -5
src/app/walkthrough/walkthrough.module.ts +4 -1
src/app/walkthrough/walkthrough.page.html +14 -14
src/app/walkthrough/walkthrough.page.ts +46 -28
src/assets/icon/favicon.ico +0 -0
src/global.scss +5 -0
src/manifest.webmanifest +2 -2

.firebaserc CHANGED Viewed

@@ -3,5 +3,27 @@
     "dev": "dev-ion4fullpwa",
     "prod": "ion4fullpwa",
     "pro": "pro-ion4fullpwa"
   }
 }

     "dev": "dev-ion4fullpwa",
     "prod": "ion4fullpwa",
     "pro": "pro-ion4fullpwa"
+  },
+  "targets": {
+    "dev-ion4fullpwa": {
+      "hosting": {
+        "ionic-5": [
+          "dev-ion4fullpwa"
+        ],
+        "ionic-6": [
+          "dev-ionic-6-full-app"
+        ]
+      }
+    },
+    "pro-ion4fullpwa": {
+      "hosting": {
+        "12-2021-release": [
+          "pro-ion4fullpwa"
+        ],
+        "06-2022-release": [
+          "pro-ionic-6-full-app"
+        ]
+      }
+    }
   }
 }

CHANGELOG.md ADDED Viewed

	@@ -0,0 +1 @@


1	+ Access the changelog in https://ionic-5-full-starter-app-docs.ionicthemes.com/changelog

DIFF.md ADDED Viewed

	@@ -0,0 +1,51 @@

+## Generate diff file
+*PRO vs ELITE (**no /android or /ios configs**)*
+```bash
+git diff pro-version..elite-version --diff-filter=ADCMRT ':!package-lock.json' ':!dist' ':!.gradle/*' ':!android' ':!ios' ':!*.diff' ':!*.png' ':!*.svg' > diff/pro-vs-elite_changelog.diff
+```
+*PRO vs ELITE (**android config**)*
+```bash
+git diff pro-version..elite-version --diff-filter=ADCMRT -- android/ > diff/pro-vs-elite_android-changelog.diff
+```
+*PRO vs ELITE (**ios config**)*
+```bash
+git diff pro-version..elite-version --diff-filter=ADCMRT -- ios/ > diff/pro-vs-elite_ios-changelog.diff
+```
+*Last PRO update (**12-2021**) vs Current PRO update (**06-2022**)*
+```bash
+git diff 12-2021_pro-update..pro-version --diff-filter=ADCMRT ':!package-lock.json' ':!dist' ':!.gradle/*' ':!android' ':!ios' ':!*.diff' ':!*.png' ':!*.svg' > diff/last-pro-update-vs-current-pro_changelog.diff
+```
+*Last PRO update (**12-2021**) vs Current PRO update (**06-2022**) (**android config**)*
+```bash
+git diff 12-2021_pro-update..pro-version --diff-filter=ADCMRT -- android/ > diff/last-pro-update-vs-current-pro_android-changelog.diff
+```
+*Last PRO update (**12-2021**) vs Current PRO update (**06-2022**) (**ios config**)*
+```bash
+git diff 12-2021_pro-update..pro-version --diff-filter=ADCMRT -- ios/ > diff/last-pro-update-vs-current-pro_ios-changelog.diff
+```
+## Generate visual diff HTML file
+*To generate a static HTML file with the diff*
+```bash
+diff2html --style side --file visual_diff.html --input file -- changelog.diff
+```
+*To open the visual diff on the browser*
+```bash
+diff2html --style side --input file -- diff/pro-vs-elite_changelog.diff
+diff2html --style side --input file -- diff/pro-vs-elite_android-changelog.diff
+diff2html --style side --input file -- diff/pro-vs-elite_ios-changelog.diff
+diff2html --style side --input file -- diff/last-pro-update-vs-current-pro_changelog.diff
+diff2html --style side --input file -- diff/last-pro-update-vs-current-pro_android-changelog.diff
+diff2html --style side --input file -- diff/last-pro-update-vs-current-pro_ios-changelog.diff
+```

FIREBASE.md CHANGED Viewed

@@ -29,10 +29,62 @@ If you don't see these alias (dev, prod), you should create them
 `firebase use dev`
 You can also use the `-P` flag to specify an alias like this:
-`firebase deploy -P dev`
 This will deploy to the `dev` alias/environment
 ## Serve and test your Firebase project locally
 For more info see: https://firebase.google.com/docs/hosting/deploying
 `firebase serve --only hosting`

 `firebase use dev`
 You can also use the `-P` flag to specify an alias like this:
+``` bash
+firebase deploy --only hosting -P dev
+```
 This will deploy to the `dev` alias/environment
 ## Serve and test your Firebase project locally
 For more info see: https://firebase.google.com/docs/hosting/deploying
 `firebase serve --only hosting`
+---
+# [Advanced uses](https://firebase.google.com/docs/cli/targets#deploy-target-commands)
+## [Create target](https://firebase.google.com/docs/cli/targets#set-up-deploy-target-hosting)
+- TARGET_NAME = ionic-5
+- RESOURCE_IDENTIFIER (the SITE_ID) = dev-ion4fullpwa
+``` bash
+firebase target:apply hosting ionic-5 dev-ion4fullpwa -P dev
+```
+- TARGET_NAME = ionic-6
+- RESOURCE_IDENTIFIER (the SITE_ID) = dev-ionic-6-full-app
+``` bash
+firebase target:apply hosting ionic-6 dev-ionic-6-full-app -P dev
+```
+- TARGET_NAME = 12-2021-release
+- RESOURCE_IDENTIFIER (the SITE_ID) = pro-ion4fullpwa
+``` bash
+firebase target:apply hosting 12-2021-release pro-ion4fullpwa -P pro
+```
+- TARGET_NAME = 06-2022-release
+- RESOURCE_IDENTIFIER (the SITE_ID) = pro-ionic-6-full-app
+``` bash
+firebase target:apply hosting 06-2022-release pro-ionic-6-full-app -P pro
+```
+## [Configure your `firebase.json` file to use deploy targets](https://firebase.google.com/docs/cli/targets#configure_your_firebasejson_file_to_use_deploy_targets)
+Don't forget to configure this before deploying to the new target
+## Deploy to specific target (i.e.: different site)
+``` bash
+firebase deploy --only hosting:ionic-6 -P dev
+```
+``` bash
+firebase deploy --only hosting:06-2022-release -P pro
+```
+## Create channel
+- CHANNEL_ID = dev
+``` bash
+firebase hosting:channel:deploy dev --only ionic-6 -P dev
+```

angular.json CHANGED Viewed

@@ -111,8 +111,7 @@
             "production": {
               "browserTarget": "app:build:production"
             },
-            "ci": {
-            }
           }
         },
         "extract-i18n": {
@@ -130,30 +129,6 @@
             ]
           }
         },
-        "ionic-cordova-build": {
-          "builder": "@ionic/angular-toolkit:cordova-build",
-          "options": {
-            "browserTarget": "app:build"
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "app:build:production"
-            }
-          }
-        },
-        "ionic-cordova-serve": {
-          "builder": "@ionic/angular-toolkit:cordova-serve",
-          "options": {
-            "cordovaBuildTarget": "app:ionic-cordova-build",
-            "devServerTarget": "app:serve"
-          },
-          "configurations": {
-            "production": {
-              "cordovaBuildTarget": "app:ionic-cordova-build:production",
-              "devServerTarget": "app:serve:production"
-            }
-          }
-        },
         "server": {
           "builder": "@angular-devkit/build-angular:server",
           "options": {
@@ -221,4 +196,4 @@
       "styleext": "scss"
     }
   }
-}

             "production": {
               "browserTarget": "app:build:production"
             },
+            "ci": {}
           }
         },
         "extract-i18n": {
             ]
           }
         },
         "server": {
           "builder": "@angular-devkit/build-angular:server",
           "options": {
       "styleext": "scss"
     }
   }
+}

capacitor.config.ts CHANGED Viewed

@@ -2,22 +2,21 @@ import { CapacitorConfig } from '@capacitor/cli';
 const config: CapacitorConfig = {
   appId: 'com.ionicthemes.ionic5fullapp',
-  appName: 'Ionic5FullApp',
   webDir: 'dist/app/browser',
   bundledWebRuntime: false,
   plugins: {
     SplashScreen: {
       launchAutoHide: false,
     },
-    CapacitorFirebaseAuth: {
       providers: [
         "google.com",
         "twitter.com",
         "facebook.com",
         "apple.com"
-      ],
-      languageCode: "en",
-      nativeAuth: false
     }
   }
 };

 const config: CapacitorConfig = {
   appId: 'com.ionicthemes.ionic5fullapp',
+  appName: 'Ionic6FullAppPro',
   webDir: 'dist/app/browser',
   bundledWebRuntime: false,
   plugins: {
     SplashScreen: {
       launchAutoHide: false,
     },
+    FirebaseAuthentication: {
+      skipNativeAuth: false,
       providers: [
         "google.com",
         "twitter.com",
         "facebook.com",
         "apple.com"
+      ]
     }
   }
 };

firebase.json CHANGED Viewed

@@ -1,43 +1,88 @@
 {
-  "hosting": {
-    "public": "dist/app/browser",
-    "ignore": [
-      "firebase.json",
-      "**/.*",
-      "**/node_modules/**"
-    ],
-    "rewrites": [ {
-      "source": "**",
-      "destination": "/index.html"
-    } ],
-    "headers": [
-      {
         "source": "**",
-        "headers": [
-          {
-            "key": "Cache-Control",
-            "value": "no-cache, no-store, must-revalidate"
-          }
-        ]
-      },
-      {
-        "source": "**/*.@(jpg|jpeg|gif|png|svg|webp|js|css|eot|otf|ttf|ttc|woff|font.css)",
-        "headers": [
-          {
-            "key": "Cache-Control",
-            "value": "no-cache"
-          }
-        ]
-      },
-      {
-        "source": "ngsw-worker.js",
-        "headers": [
-          {
-            "key": "Cache-Control",
-            "value": "no-cache"
-          }
-        ]
-      }
-    ]
-  }
 }

 {
+  "hosting": [
+    {
+      "target": "06-2022-release",
+      "public": "dist/app/browser",
+      "ignore": [
+        "firebase.json",
+        "**/.*",
+        "**/node_modules/**"
+      ],
+      "rewrites": [ {
         "source": "**",
+        "destination": "/index.html"
+      } ],
+      "headers": [
+        {
+          "source": "**",
+          "headers": [
+            {
+              "key": "Cache-Control",
+              "value": "no-cache, no-store, must-revalidate"
+            }
+          ]
+        },
+        {
+          "source": "**/*.@(jpg|jpeg|gif|png|svg|webp|js|css|eot|otf|ttf|ttc|woff|font.css)",
+          "headers": [
+            {
+              "key": "Cache-Control",
+              "value": "no-cache"
+            }
+          ]
+        },
+        {
+          "source": "ngsw-worker.js",
+          "headers": [
+            {
+              "key": "Cache-Control",
+              "value": "no-cache"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "target": "12-2021-release",
+      "public": "dist/app/browser",
+      "ignore": [
+        "firebase.json",
+        "**/.*",
+        "**/node_modules/**"
+      ],
+      "rewrites": [ {
+        "source": "**",
+        "destination": "/index.html"
+      } ],
+      "headers": [
+        {
+          "source": "**",
+          "headers": [
+            {
+              "key": "Cache-Control",
+              "value": "no-cache, no-store, must-revalidate"
+            }
+          ]
+        },
+        {
+          "source": "**/*.@(jpg|jpeg|gif|png|svg|webp|js|css|eot|otf|ttf|ttc|woff|font.css)",
+          "headers": [
+            {
+              "key": "Cache-Control",
+              "value": "no-cache"
+            }
+          ]
+        },
+        {
+          "source": "ngsw-worker.js",
+          "headers": [
+            {
+              "key": "Cache-Control",
+              "value": "no-cache"
+            }
+          ]
+        }
+      ]
+    }
+  ]
 }

package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "IonicFullApp-PRO",
   "description": "The most advanced and complete Mobile & PWA Ionic starter app template",
-  "version": "4.0.0",
   "author": "IonicThemes",
   "contributors": [
     "Dayana <dayana@ionicthemes.com>",
@@ -24,41 +24,41 @@
     "@angular/animations": "^13.1.1",
     "@angular/common": "^13.1.1",
     "@angular/core": "^13.1.1",
-    "@angular/fire": "^6.1.5",
     "@angular/forms": "^13.1.1",
     "@angular/platform-browser": "^13.1.1",
     "@angular/platform-browser-dynamic": "^13.1.1",
     "@angular/platform-server": "^13.1.1",
     "@angular/router": "^13.1.1",
     "@angular/service-worker": "^13.1.1",
-    "@capacitor/android": "^3.3.3",
-    "@capacitor/app": "^1.0.7",
-    "@capacitor/cli": "^3.3.3",
-    "@capacitor/core": "^3.3.3",
-    "@capacitor/geolocation": "^1.3.0",
-    "@capacitor/haptics": "^1.1.3",
-    "@capacitor/ios": "^3.3.3",
-    "@capacitor/keyboard": "^1.2.0",
-    "@capacitor/share": "^1.0.7",
-    "@capacitor/splash-screen": "^1.2.0",
-    "@capacitor/status-bar": "^1.0.6",
-    "@ionic/angular": "^6.0.1",
-    "@ionic/angular-server": "^6.0.1",
     "@nguniversal/express-engine": "^13.0.1",
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^7.0.0",
     "@videogular/ngx-videogular": "^5.0.1",
     "angular-pipes": "^10.0.0",
-    "capacitor-firebase-auth": "^3.0.0",
     "core-js": "^3.20.0",
     "date-fns": "^2.27.0",
-    "dayjs": "^1.10.7",
     "express": "^4.17.2",
-    "firebase": "^8.6.8",
-    "google-libphonenumber": "^3.2.25",
     "jetifier": "^2.0.0",
     "mobile-detect": "^1.4.5",
     "rxjs": "^7.4.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.11.4"
   },
@@ -76,18 +76,21 @@
     "@angular/compiler": "^13.1.1",
     "@angular/compiler-cli": "^13.1.1",
     "@angular/language-service": "~13.1.1",
-    "@commitlint/cli": "^15.0.0",
-    "@commitlint/config-angular": "^15.0.0",
-    "@ionic/angular-toolkit": "^5.0.3",
     "@nguniversal/builders": "^13.0.1",
     "@types/core-js": "^2.5.5",
     "@types/express": "^4.17.13",
     "@types/googlemaps": "^3.39.2",
     "@types/node": "^17.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.7.0",
-    "@typescript-eslint/parser": "^5.7.0",
     "@webcomponents/webcomponentsjs": "^2.6.0",
-    "eslint": "^8.5.0",
     "husky": "^4.3.8",
     "ts-node": "^10.4.0",
     "typescript": "~4.5.4"

 {
   "name": "IonicFullApp-PRO",
   "description": "The most advanced and complete Mobile & PWA Ionic starter app template",
+  "version": "5.0.0",
   "author": "IonicThemes",
   "contributors": [
     "Dayana <dayana@ionicthemes.com>",
     "@angular/animations": "^13.1.1",
     "@angular/common": "^13.1.1",
     "@angular/core": "^13.1.1",
+    "@angular/fire": "^7.3.0",
     "@angular/forms": "^13.1.1",
     "@angular/platform-browser": "^13.1.1",
     "@angular/platform-browser-dynamic": "^13.1.1",
     "@angular/platform-server": "^13.1.1",
     "@angular/router": "^13.1.1",
     "@angular/service-worker": "^13.1.1",
+    "@capacitor-firebase/authentication": "^0.3.1",
+    "@capacitor/android": "^3.5.1",
+    "@capacitor/app": "^1.1.1",
+    "@capacitor/core": "^3.5.1",
+    "@capacitor/geolocation": "^1.3.1",
+    "@capacitor/haptics": "^1.1.4",
+    "@capacitor/ios": "^3.5.1",
+    "@capacitor/keyboard": "^1.2.2",
+    "@capacitor/share": "^1.1.2",
+    "@capacitor/splash-screen": "^1.2.2",
+    "@capacitor/status-bar": "^1.0.8",
+    "@ionic/angular": "^6.1.8",
+    "@ionic/angular-server": "^6.1.8",
     "@nguniversal/express-engine": "^13.0.1",
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^7.0.0",
     "@videogular/ngx-videogular": "^5.0.1",
     "angular-pipes": "^10.0.0",
     "core-js": "^3.20.0",
     "date-fns": "^2.27.0",
+    "dayjs": "^1.11.2",
     "express": "^4.17.2",
+    "firebase": "^9.8.2",
+    "google-libphonenumber": "^3.2.27",
     "jetifier": "^2.0.0",
     "mobile-detect": "^1.4.5",
     "rxjs": "^7.4.0",
+    "swiper": "^8.2.2",
     "tslib": "^2.0.0",
     "zone.js": "~0.11.4"
   },
     "@angular/compiler": "^13.1.1",
     "@angular/compiler-cli": "^13.1.1",
     "@angular/language-service": "~13.1.1",
+    "@capacitor/cli": "^3.5.1",
+    "@commitlint/cli": "^17.0.2",
+    "@commitlint/config-angular": "^17.0.0",
+    "@ionic/angular-toolkit": "^6.1.0",
+    "@ionic/cli": "6.19.1",
     "@nguniversal/builders": "^13.0.1",
     "@types/core-js": "^2.5.5",
     "@types/express": "^4.17.13",
     "@types/googlemaps": "^3.39.2",
     "@types/node": "^17.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.27.0",
+    "@typescript-eslint/parser": "^5.27.0",
     "@webcomponents/webcomponentsjs": "^2.6.0",
+    "cordova-res": "0.15.4",
+    "eslint": "^8.16.0",
     "husky": "^4.3.8",
     "ts-node": "^10.4.0",
     "typescript": "~4.5.4"

resources/README.md CHANGED Viewed

@@ -1,8 +1 @@
-These are Cordova resources. You can replace icon.png and splash.png and run
-`ionic cordova resources` to generate custom icons and splash screens for your
-app. See `ionic cordova resources --help` for details.
-Cordova reference documentation:
-- Icons: https://cordova.apache.org/docs/en/latest/config_ref/images.html
-- Splash Screens: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/


1	+ We use [Ionic VSCode plugin](https://marketplace.visualstudio.com/items?itemName=ionic.ionic) to generate assets

resources/psd/default/background.psd CHANGED Viewed

Binary file

resources/psd/default/icon.psd CHANGED Viewed

Binary file

resources/psd/default/splash.psd CHANGED Viewed

Binary file

resources/psd/pwa/icon.psd CHANGED Viewed

Binary file

resources/psd/pwa/splash.psd CHANGED Viewed

Binary file

resources/web/HOW-TO.md CHANGED Viewed

@@ -7,18 +7,7 @@ First install ImageMagick
 brew install imagemagick
 ```
-### Then run this command
-```
-convert icon.png -thumbnail 128x128 -alpha on -background none -flatten favicon-128.png
-convert favicon-128.png -define icon:auto-resize:128,64,48,32,24,16 favicon-128.ico
-convert icon.png -thumbnail 64x64 -alpha on -background none -flatten favicon-64.png
-convert favicon-64.png -define icon:auto-resize:64,48,32,24,16 favicon-64.ico
-```
-Between favicon-128.ico, and favicon-64.ico choose the onw that fit your image size budget for the favicon and renameit to favicon.ico
-# Generate the other icons
 ```
 convert icon.png -thumbnail 16x16 -alpha on -background none -flatten icon/favicon-16x16.png
 convert icon.png -thumbnail 24x24 -alpha on -background none -flatten icon/favicon-24x24.png
@@ -40,6 +29,17 @@ convert icon.png -thumbnail 512x512 -alpha on -background none -flatten icon/ico
 convert icon.png -thumbnail 1024x1024 -alpha on -background none -flatten icon/icon-1024x1024.png
 ```
 # Generate splash screens
 Useful tips on how to crop properly from (here)[https://askubuntu.com/a/762841/338320] and (here)[http://www.fmwconcepts.com/imagemagick/aspectcrop/index.php]
 ```
@@ -63,4 +63,4 @@ convert splash/splash-1536x2048.png -resize 1536x2048 -alpha on -background none
 ./aspectcrop -a 2048:2732 splash.png splash/splash-2048x2732.png
 convert splash/splash-2048x2732.png -resize 2048x2732 -alpha on -background none -flatten -gravity center -extent 2048x2732 splash/splash-2048x2732.png
-```

 brew install imagemagick
 ```
+# Generate icons
 ```
 convert icon.png -thumbnail 16x16 -alpha on -background none -flatten icon/favicon-16x16.png
 convert icon.png -thumbnail 24x24 -alpha on -background none -flatten icon/favicon-24x24.png
 convert icon.png -thumbnail 1024x1024 -alpha on -background none -flatten icon/icon-1024x1024.png
 ```
+### Then run this command
+```
+convert icon/favicon-128x128.png -define icon:auto-resize:128,64,48,32,24,16 icon/favicon.ico
+convert icon/favicon-64x64.png -define icon:auto-resize:64,48,32,24,16 icon/favicon-64.ico
+```
+> Between favicon-128.ico, and favicon-64.ico choose the one that fit your image size budget for the favicon and rename it to favicon.ico
+> Finally, copy all the icons to the `src/assets/icon/` folder
 # Generate splash screens
 Useful tips on how to crop properly from (here)[https://askubuntu.com/a/762841/338320] and (here)[http://www.fmwconcepts.com/imagemagick/aspectcrop/index.php]
 ```
 ./aspectcrop -a 2048:2732 splash.png splash/splash-2048x2732.png
 convert splash/splash-2048x2732.png -resize 2048x2732 -alpha on -background none -flatten -gravity center -extent 2048x2732 splash/splash-2048x2732.png
+```

resources/web/icon/favicon.ico CHANGED Viewed

Binary file

src/app/app.component.ts CHANGED Viewed

@@ -36,6 +36,7 @@ export class AppComponent {
       ionicIcon: 'notifications-outline'
     }
   ];
   accountPages = [
     {
       title: 'Log In',
@@ -78,9 +79,9 @@ export class AppComponent {
   async initializeApp() {
     try {
-     await SplashScreen.hide();
     } catch (err) {
-     console.log('This is normal in a browser', err);
     }
   }

       ionicIcon: 'notifications-outline'
     }
   ];
   accountPages = [
     {
       title: 'Log In',
   async initializeApp() {
     try {
+      await SplashScreen.hide();
     } catch (err) {
+      console.log('This is normal in a browser', err);
     }
   }

src/app/components/countdown-timer/countdown-timer.component.ts CHANGED Viewed

@@ -93,13 +93,14 @@ export class CountdownTimerComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     // I believe if we run this on SSR, it won't ever trigger the change detection and thus the server will be stuck loading
     if (isPlatformBrowser(this.platformId)) {
-      this._updateInterval.pipe(takeUntil(this._unsubscribeSubject)).subscribe(
-        (val) => {
           this.updateValues();
         },
-        (error) => console.error(error),
-        () => console.log('[takeUntil] complete')
-      );
     } else {
       this.updateValues();
     }

   ngOnInit(): void {
     // I believe if we run this on SSR, it won't ever trigger the change detection and thus the server will be stuck loading
     if (isPlatformBrowser(this.platformId)) {
+      this._updateInterval.pipe(takeUntil(this._unsubscribeSubject))
+      .subscribe({
+        next: (val) => {
           this.updateValues();
         },
+        error: (error) => console.error(error),
+        complete: () => console.log('[takeUntil] complete')
+      });
     } else {
       this.updateValues();
     }

src/app/deals/details/deals-details.module.ts CHANGED Viewed

@@ -4,6 +4,8 @@ import { Routes, RouterModule } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
 import { ComponentsModule } from '../../components/components.module';
 import { PipesModule } from '../../pipes/pipes.module';
@@ -27,7 +29,8 @@ const routes: Routes = [
     IonicModule,
     RouterModule.forChild(routes),
     ComponentsModule,
-    PipesModule
   ],
   declarations: [
     DealsDetailsPage

 import { IonicModule } from '@ionic/angular';
+import { SwiperModule } from 'swiper/angular';
 import { ComponentsModule } from '../../components/components.module';
 import { PipesModule } from '../../pipes/pipes.module';
     IonicModule,
     RouterModule.forChild(routes),
     ComponentsModule,
+    PipesModule,
+    SwiperModule
   ],
   declarations: [
     DealsDetailsPage

src/app/deals/details/deals-details.page.html CHANGED Viewed

@@ -15,15 +15,15 @@
   <div class="details-wrapper">
     <ion-row class="slider-row">
-      <ion-slides class="details-slides" pager="true" [options]="slidesOptions">
-        <ion-slide class="" *ngFor="let image of details?.showcaseImages">
           <ion-row class="slide-inner-row">
             <app-aspect-ratio [ratio]="{w: 56, h: 40}">
               <app-image-shell [src]="image" [alt]="'deals details'" class="showcase-image" animation="spinner"></app-image-shell>
             </app-aspect-ratio>
           </ion-row>
-        </ion-slide>
-      </ion-slides>
     </ion-row>
     <ion-row class="description-row">
       <ion-col class="logo-col" size="6">

   <div class="details-wrapper">
     <ion-row class="slider-row">
+      <swiper [pagination]="true" [config]="slidesOptions" class="details-slides">
+        <ng-template swiperSlide *ngFor="let image of details?.showcaseImages">
           <ion-row class="slide-inner-row">
             <app-aspect-ratio [ratio]="{w: 56, h: 40}">
               <app-image-shell [src]="image" [alt]="'deals details'" class="showcase-image" animation="spinner"></app-image-shell>
             </app-aspect-ratio>
           </ion-row>
+        </ng-template>
+      </swiper>
     </ion-row>
     <ion-row class="description-row">
       <ion-col class="logo-col" size="6">

src/app/deals/details/deals-details.page.ts CHANGED Viewed

@@ -1,10 +1,16 @@
 import { Component, OnInit, HostBinding } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { IResolvedRouteData, ResolverHelper } from '../../utils/resolver-helper';
 import { DealsDetailsModel } from './deals-details.model';
-import { switchMap } from 'rxjs/operators';
 @Component({
   selector: 'app-deals-details',
@@ -21,7 +27,7 @@ export class DealsDetailsPage implements OnInit {
   details: DealsDetailsModel;
   slidesOptions: any = {
     zoom: {
-      toggle: false // Disable zooming to prevent weird double tap zomming on slide images
     }
   };
@@ -39,9 +45,12 @@ export class DealsDetailsPage implements OnInit {
         return ResolverHelper.extractData<DealsDetailsModel>(resolvedRouteData.data, DealsDetailsModel);
       })
     )
-    .subscribe((state) => {
-      this.details = state;
-    }, (error) => console.log(error));
   }
   // NOTE: Ionic only calls ngOnDestroy if the page was popped (ex: when navigating back)

 import { Component, OnInit, HostBinding } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { IonicSwiper } from "@ionic/angular";
+import SwiperCore, { Pagination } from "swiper";
 import { Subscription } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
 import { IResolvedRouteData, ResolverHelper } from '../../utils/resolver-helper';
 import { DealsDetailsModel } from './deals-details.model';
+SwiperCore.use([Pagination, IonicSwiper]);
 @Component({
   selector: 'app-deals-details',
   details: DealsDetailsModel;
   slidesOptions: any = {
     zoom: {
+      toggle: false // Disable zooming to prevent weird double tap zooming on slide images
     }
   };
         return ResolverHelper.extractData<DealsDetailsModel>(resolvedRouteData.data, DealsDetailsModel);
       })
     )
+    .subscribe({
+      next: (state) => {
+        this.details = state;
+      },
+      error: (error) => console.log(error)
+    });
   }
   // NOTE: Ionic only calls ngOnDestroy if the page was popped (ex: when navigating back)

src/app/deals/details/styles/deals-details.page.scss CHANGED Viewed

@@ -108,7 +108,7 @@
           padding: 0px;
           // .swiper-pagination space
           padding-bottom: var(--page-swiper-pagination-space);
-          // As we set ViewEncapsulation.ShadowDom, box-sizing get's resetted to content-box if I don't add this
           box-sizing: border-box;
         }
       }
@@ -268,8 +268,8 @@
 }
-// ISSUE: .swiper-paggination gets rendered dynamically. That prevents styling the elements when using the default Angular ViewEncapsulation.None
-//        (Angular doesn't add an '_ngcontent' attribute to the .swiper-paggination because it's dynamically rendered)
 // FIX:   See: https://stackoverflow.com/a/36265072/1116959
 :host ::ng-deep {
   .details-slides {

           padding: 0px;
           // .swiper-pagination space
           padding-bottom: var(--page-swiper-pagination-space);
+          // As we set ViewEncapsulation.ShadowDom, box-sizing gets resetted to content-box if I don't add this
           box-sizing: border-box;
         }
       }
 }
+// ISSUE: .swiper-pagination gets rendered dynamically. That prevents styling the elements when using the default Angular ViewEncapsulation.None
+//        (Angular doesn't add an '_ngcontent' attribute to the .swiper-pagination because it's dynamically rendered)
 // FIX:   See: https://stackoverflow.com/a/36265072/1116959
 :host ::ng-deep {
   .details-slides {

src/app/deals/listing/deals-listing.page.ts CHANGED Viewed

@@ -35,9 +35,12 @@ export class DealsListingPage implements OnInit {
         return ResolverHelper.extractData<DealsListingModel>(resolvedRouteData.data, DealsListingModel);
       })
     )
-    .subscribe((state) => {
-      this.listing = state;
-    }, (error) => console.log(error));
   }
   // NOTE: Ionic only calls ngOnDestroy if the page was popped (ex: when navigating back)

         return ResolverHelper.extractData<DealsListingModel>(resolvedRouteData.data, DealsListingModel);
       })
     )
+    .subscribe({
+      next: (state) => {
+        this.listing = state;
+      },
+      error: (error) => console.log(error)
+    });
   }
   // NOTE: Ionic only calls ngOnDestroy if the page was popped (ex: when navigating back)

src/app/fashion/details/fashion-details.module.ts CHANGED Viewed

@@ -3,6 +3,9 @@ import { CommonModule } from '@angular/common';
 import { Routes, RouterModule } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
 import { ComponentsModule } from '../../components/components.module';
 import { FashionService } from '../fashion.service';
@@ -24,7 +27,8 @@ const routes: Routes = [
     CommonModule,
     IonicModule,
     RouterModule.forChild(routes),
-    ComponentsModule
   ],
   declarations: [
     FashionDetailsPage

 import { Routes, RouterModule } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
+import { SwiperModule } from 'swiper/angular';
 import { ComponentsModule } from '../../components/components.module';
 import { FashionService } from '../fashion.service';
     CommonModule,
     IonicModule,
     RouterModule.forChild(routes),
+    ComponentsModule,
+    SwiperModule
   ],
   declarations: [
     FashionDetailsPage

src/app/fashion/details/fashion-details.page.html CHANGED Viewed

@@ -9,16 +9,16 @@
 <ion-content class="fashion-details-content">
   <ion-row class="slider-row">
-    <ion-slides class="details-slides" pager="true" [options]="slidesOptions">
-      <ion-slide *ngFor="let image of details?.showcaseImages">
         <ion-row class="slide-inner-row">
           <app-image-shell [display]="'cover'" animation="spinner" class="showcase-image" [ngClass]="{'centered-image': (image.type === 'square'), 'fill-image': (image.type === 'fill')}" [src]="image.source">
             <app-aspect-ratio [ratio]="{w:64, h:50}">
             </app-aspect-ratio>
           </app-image-shell>
         </ion-row>
-      </ion-slide>
-    </ion-slides>
   </ion-row>
   <div class="description-wrapper">
     <h3 class="details-name">

 <ion-content class="fashion-details-content">
   <ion-row class="slider-row">
+    <swiper [pagination]="true" [config]="slidesOptions" class="details-slides">
+      <ng-template swiperSlide *ngFor="let image of details?.showcaseImages">
         <ion-row class="slide-inner-row">
           <app-image-shell [display]="'cover'" animation="spinner" class="showcase-image" [ngClass]="{'centered-image': (image.type === 'square'), 'fill-image': (image.type === 'fill')}" [src]="image.source">
             <app-aspect-ratio [ratio]="{w:64, h:50}">
             </app-aspect-ratio>
           </app-image-shell>
         </ion-row>
+      </ng-template>
+    </swiper>
   </ion-row>
   <div class="description-wrapper">
     <h3 class="details-name">

src/app/fashion/details/fashion-details.page.ts CHANGED Viewed

@@ -1,11 +1,17 @@
 import { Component, OnInit, HostBinding } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { AlertController } from '@ionic/angular';
 import { Subscription } from 'rxjs';
 import { IResolvedRouteData, ResolverHelper } from '../../utils/resolver-helper';
 import { FashionDetailsModel } from './fashion-details.model';
-import { switchMap } from 'rxjs/operators';
 @Component({
   selector: 'app-fashion-details',
@@ -24,6 +30,7 @@ export class FashionDetailsPage implements OnInit {
   details: FashionDetailsModel;
   colorVariants = [];
   sizeVariants = [];
   slidesOptions: any = {
     zoom: {
       toggle: false // Disable zooming to prevent weird double tap zomming on slide images
@@ -48,31 +55,34 @@ export class FashionDetailsPage implements OnInit {
         return ResolverHelper.extractData<FashionDetailsModel>(resolvedRouteData.data, FashionDetailsModel);
       })
     )
-    .subscribe((state) => {
-      this.details = state;
-      this.colorVariants = this.details.colorVariants
-      .map(item =>
-        ({
-          name: item.name,
-          type: 'radio',
-          label: item.name,
-          value: item.value,
-          checked: item.default
-        })
-      );
-      this.sizeVariants = this.details.sizeVariants
-      .map(item =>
-        ({
-          name: item.name,
-          type: 'radio',
-          label: item.name,
-          value: item.value,
-          checked: item.default
-        })
-      );
-    }, (error) => console.log(error));
   }
   async openColorChooser() {

 import { Component, OnInit, HostBinding } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { AlertController } from '@ionic/angular';
+import { IonicSwiper } from "@ionic/angular";
+import SwiperCore, { Pagination } from "swiper";
 import { Subscription } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
 import { IResolvedRouteData, ResolverHelper } from '../../utils/resolver-helper';
 import { FashionDetailsModel } from './fashion-details.model';
+SwiperCore.use([Pagination, IonicSwiper]);
 @Component({
   selector: 'app-fashion-details',
   details: FashionDetailsModel;
   colorVariants = [];
   sizeVariants = [];
   slidesOptions: any = {
     zoom: {
       toggle: false // Disable zooming to prevent weird double tap zomming on slide images
         return ResolverHelper.extractData<FashionDetailsModel>(resolvedRouteData.data, FashionDetailsModel);
       })
     )
+    .subscribe({
+      next: (state) => {
+        this.details = state;
+        this.colorVariants = this.details.colorVariants
+        .map(item =>
+          ({
+            name: item.name,
+            type: 'radio',
+            label: item.name,
+            value: item.value,
+            checked: item.default
+          })
+        );
+        this.sizeVariants = this.details.sizeVariants
+        .map(item =>
+          ({
+            name: item.name,
+            type: 'radio',
+            label: item.name,
+            value: item.value,
+            checked: item.default
+          })
+        );
+      },
+      error: (error) => console.log(error)
+    });
   }
   async openColorChooser() {

src/app/fashion/details/styles/fashion-details.page.scss CHANGED Viewed

@@ -216,8 +216,8 @@
 }
-// ISSUE: .swiper-paggination gets rendered dynamically. That prevents styling the elements when using the default Angular ViewEncapsulation.None
-//        (Angular doesn't add an '_ngcontent' attribute to the .swiper-paggination because it's dynamically rendered)
 // FIX:   See: https://stackoverflow.com/a/36265072/1116959
 :host ::ng-deep .details-slides {
   .swiper-pagination {

 }
+// ISSUE: .swiper-pagination gets rendered dynamically. That prevents styling the elements when using the default Angular ViewEncapsulation.None
+//        (Angular doesn't add an '_ngcontent' attribute to the .swiper-pagination because it's dynamically rendered)
 // FIX:   See: https://stackoverflow.com/a/36265072/1116959
 :host ::ng-deep .details-slides {
   .swiper-pagination {

src/app/fashion/listing/fashion-listing.page.ts CHANGED Viewed

@@ -34,9 +34,12 @@ export class FashionListingPage implements OnInit {
         return ResolverHelper.extractData<FashionListingModel>(resolvedRouteData.data, FashionListingModel);
       })
     )
-    .subscribe((state) => {
-      this.listing = state;
-    }, (error) => console.log(error));
   }
   // NOTE: Ionic only calls ngOnDestroy if the page was popped (ex: when navigating back)

         return ResolverHelper.extractData<FashionListingModel>(resolvedRouteData.data, FashionListingModel);
       })
     )
+    .subscribe({
+      next: (state) => {
+        this.listing = state;
+      },
+      error: (error) => console.log(error)
+    });
   }
   // NOTE: Ionic only calls ngOnDestroy if the page was popped (ex: when navigating back)

src/app/firebase/auth/firebase-auth-definitions.ts ADDED Viewed

	@@ -0,0 +1,6 @@

+export enum SignInProvider {
+  apple = 'apple.com',
+  facebook = 'facebook.com',
+  google = 'google.com',
+  twitter = 'twitter.com'
+}

src/app/firebase/auth/firebase-auth.module.ts CHANGED Viewed

@@ -2,17 +2,22 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Routes, RouterModule } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
 import { ComponentsModule } from '../../components/components.module';
-import { AngularFireAuthModule } from '@angular/fire/auth';
-import { AngularFireModule } from '@angular/fire';
 import { environment } from '../../../environments/environment';
 import { FirebaseAuthService } from './firebase-auth.service';
 const routes: Routes = [
   {
     path: '',
     children: [
-      // /firebase/auth redirect
       {
         path: '',
         redirectTo: 'sign-in',
@@ -40,8 +45,19 @@ const routes: Routes = [
     IonicModule,
     ComponentsModule,
     RouterModule.forChild(routes),
-    AngularFireModule.initializeApp(environment.firebase),
-    AngularFireAuthModule
   ],
   providers: [FirebaseAuthService]
 })

 import { CommonModule } from '@angular/common';
 import { Routes, RouterModule } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
+import { Capacitor } from '@capacitor/core';
+import { getApp, initializeApp, provideFirebaseApp } from '@angular/fire/app';
+import { provideAuth, getAuth, initializeAuth, indexedDBLocalPersistence } from '@angular/fire/auth';
 import { ComponentsModule } from '../../components/components.module';
 import { environment } from '../../../environments/environment';
 import { FirebaseAuthService } from './firebase-auth.service';
 const routes: Routes = [
   {
     path: '',
     children: [
+      // ? /firebase/auth redirect
       {
         path: '',
         redirectTo: 'sign-in',
     IonicModule,
     ComponentsModule,
     RouterModule.forChild(routes),
+    // ? Correct way to initialize Firebase using the Capacitor Firebase plugin mixed with the Firebase JS SDK (@angular/fire)
+    provideFirebaseApp(() => initializeApp(environment.firebase)),
+    provideAuth(() => {
+      if (Capacitor.isNativePlatform()) {
+        return initializeAuth(getApp(), {
+          persistence: indexedDBLocalPersistence
+          // persistence: browserLocalPersistence
+          // popupRedirectResolver: browserPopupRedirectResolver
+        });
+      } else {
+        return getAuth();
+      }
+    })
   ],
   providers: [FirebaseAuthService]
 })

src/app/firebase/auth/firebase-auth.service.ts CHANGED Viewed

@@ -1,173 +1,508 @@
-import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
-import { AngularFireAuth } from '@angular/fire/auth';
-import { Observable, Subject, from, of } from 'rxjs';
-import { DataStore } from '../../shell/data-store';
-import { FirebaseProfileModel } from './profile/firebase-profile.model';
-import { Platform } from '@ionic/angular';
 import { filter, map } from 'rxjs/operators';
-import firebase from 'firebase/app';
-import { cfaSignIn, cfaSignOut } from 'capacitor-firebase-auth';
-import { isPlatformBrowser } from '@angular/common';
-@Injectable()
-export class FirebaseAuthService {
-  currentUser: firebase.User;
   profileDataStore: DataStore<FirebaseProfileModel>;
-  redirectResult: Subject<any> = new Subject<any>();
   constructor(
-    public angularFire: AngularFireAuth,
     public platform: Platform,
     @Inject(PLATFORM_ID) private platformId: object
   ) {
     if (isPlatformBrowser(this.platformId)) {
-      this.angularFire.onAuthStateChanged((user) => {
-        if (user) {
-          // User is signed in.
-          this.currentUser = user;
-        } else {
-          // No user is signed in.
-          this.currentUser = null;
-        }
-      });
-      if (!this.platform.is('capacitor')) {
-        // when using signInWithRedirect, this listens for the redirect results
-        this.angularFire.getRedirectResult()
-        .then((result) => {
-          // result.credential.accessToken gives you the Provider Access Token. You can use it to access the Provider API.
-          const user: any = result.user || this.currentUser;
-          if (user) {
-            this.redirectResult.next(user);
           }
-        }, (error) => {
-          this.redirectResult.next({error: error.code});
         });
-      }
     }
   }
-  getRedirectResult(): Observable<any> {
-    return this.redirectResult.asObservable();
   }
-  getPhotoURL(signInProviderId: string, photoURL: string): string {
-    // Default imgs are too small and our app needs a bigger image
-    switch (signInProviderId) {
-      case 'facebook.com':
-        return photoURL + '?height=400';
-      case 'password':
-        return 'https://s3-us-west-2.amazonaws.com/ionicthemes/otros/avatar-placeholder.png';
-      case 'twitter.com':
-        return photoURL.replace('_normal', '_400x400');
-      case 'google.com':
-        return photoURL.split('=')[0];
-      default:
-        return photoURL;
-    }
   }
-  signOut(): Observable<any> {
     if (this.platform.is('capacitor')) {
-      return cfaSignOut();
     } else {
-      return from(this.angularFire.signOut());
     }
   }
-  signInWithEmail(email: string, password: string): Promise<firebase.auth.UserCredential> {
-    return this.angularFire.signInWithEmailAndPassword(email, password);
   }
-  signUpWithEmail(email: string, password: string): Promise<firebase.auth.UserCredential> {
-    return this.angularFire.createUserWithEmailAndPassword(email, password);
   }
-  socialSignIn(providerName: string, scopes?: Array<string>): Observable<any> {
-    if (this.platform.is('capacitor')) {
-      return cfaSignIn(providerName);
     } else {
-      const provider = new firebase.auth.OAuthProvider(providerName);
-      if (scopes) {
-        scopes.forEach(scope => {
-          provider.addScope(scope);
-        });
       }
-      if (this.platform.is('desktop')) {
-        return from(this.angularFire.signInWithPopup(provider));
-      } else {
-        // web but not desktop, for example mobile PWA
-        return from(this.angularFire.signInWithRedirect(provider));
       }
     }
   }
-  signInWithFacebook() {
-    const provider = new firebase.auth.FacebookAuthProvider();
     const scopes = ['email'];
-    return this.socialSignIn(provider.providerId, scopes);
   }
-  signInWithGoogle() {
-    const provider = new firebase.auth.GoogleAuthProvider();
     const scopes = ['profile', 'email'];
-    return this.socialSignIn(provider.providerId, scopes);
   }
-  signInWithTwitter() {
-    const provider = new firebase.auth.TwitterAuthProvider();
     const scopes = ['name', 'email'];
-    return this.socialSignIn(provider.providerId, scopes);
   }
-  signInWithApple() {
-    const provider = new firebase.auth.OAuthProvider('apple.com');
     const scopes = ['name', 'email'];
-    return this.socialSignIn(provider.providerId, scopes);
   }
   public getProfileDataSource(): Observable<FirebaseProfileModel> {
-    // we need to do this differentiation because there is a bug in
-    // platform capacitor ios when executing this.angularFire.user
-    if (this.platform.is('capacitor')) {
-      return of(this.setUserModelForProfile());
-    } else {
-      return this.angularFire.user
-      .pipe(
-        filter((user: firebase.User) => user != null),
-        map((user: firebase.User) => {
-          return this.setUserModelForProfile();
-        })
-      );
-    }
   }
-  private setUserModelForProfile(): FirebaseProfileModel {
     const userModel = new FirebaseProfileModel();
-    const provierData = this.currentUser.providerData[0];
-    const userData: any = provierData;
-    userModel.image = this.getPhotoURL(provierData.providerId, provierData.photoURL);
-    userModel.name = userData.displayName || 'What\'s your name?';
-    userModel.role = 'How would you describe yourself?';
-    userModel.description = userData.description || 'Anything else you would like to share with the world?';
-    userModel.phoneNumber = userData.phoneNumber || 'Is there a number where I can reach you?';
-    userModel.email = userData.email || 'Where can I send you emails?';
-    userModel.provider = (provierData.providerId !== 'password') ? provierData.providerId : 'Credentials';
     return userModel;
   }
   public getProfileStore(dataSource: Observable<FirebaseProfileModel>): DataStore<FirebaseProfileModel> {
-    // Initialize the model specifying that it is a shell model
     const shellModel: FirebaseProfileModel = new FirebaseProfileModel();
     this.profileDataStore = new DataStore(shellModel);
-    // Trigger the loading mechanism (with shell) in the dataStore
     this.profileDataStore.load(dataSource);
     return this.profileDataStore;
   }
 }

+import { Inject, Injectable, NgZone, OnDestroy, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser, Location } from '@angular/common';
+import { ActivatedRoute, Router } from '@angular/router';
+import { LoadingController, Platform } from '@ionic/angular';
+import { Observable, Subject, of } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
+import { AuthProvider, FacebookAuthProvider, GoogleAuthProvider, TwitterAuthProvider, OAuthProvider, OAuthCredential, UserCredential, createUserWithEmailAndPassword, getAuth, getRedirectResult, signInWithCredential, signInWithEmailAndPassword, signInWithPopup, signInWithRedirect, signOut } from '@angular/fire/auth';
+import type {
+  AuthCredential as FirebaseAuthCredential,
+  User as FirebaseUser,
+} from '@angular/fire/auth';
+import { AuthCredential, AuthStateChange, FirebaseAuthentication, SignInResult, User } from '@capacitor-firebase/authentication';
+import { DataStore } from '../../shell/data-store';
+import { FirebaseProfileModel } from './profile/firebase-profile.model';
+import { SignInProvider } from './firebase-auth-definitions';
+@Injectable({
+  providedIn: 'root'
+})
+export class FirebaseAuthService implements OnDestroy {
+  currentUser: User;
+  authLoader: HTMLIonLoadingElement;
   profileDataStore: DataStore<FirebaseProfileModel>;
+  redirectResultSubject: Subject<any> = new Subject<any>();
+  authStateSubject: Subject<AuthStateChange> = new Subject<AuthStateChange>();
   constructor(
+    public router: Router,
+    public route: ActivatedRoute,
     public platform: Platform,
+    private ngZone: NgZone,
+    public loadingController: LoadingController,
+    public location: Location,
     @Inject(PLATFORM_ID) private platformId: object
   ) {
     if (isPlatformBrowser(this.platformId)) {
+      FirebaseAuthentication.removeAllListeners().then(() => {
+        FirebaseAuthentication.addListener('authStateChange', (change: AuthStateChange) => {
+          this.ngZone.run(() => {
+            this.authStateSubject.next(change);
+          });
+          if (change?.user) {
+            // ? User is signed in.
+            this.currentUser = change.user;
+          } else {
+            // ? No user is signed in.
+            this.currentUser = null;
           }
         });
+      });
+      // ? We should only listen for firebase auth redirect results when we have the flag 'auth-redirect' in the query params
+      this.route.queryParams.subscribe(params => {
+        const authProvider = params['auth-redirect'];
+        if (authProvider) {
+          // ? Show a loader while we receive the getRedirectResult notification
+          this.presentLoading(authProvider);
+          // ? When using signInWithRedirect, this listens for the redirect results
+          const auth = getAuth();
+          getRedirectResult(auth)
+          .then((result: UserCredential) => {
+            // ? result.credential.accessToken gives you the Provider Access Token. You can use it to access the Provider API.
+            // const credential = FacebookAuthProvider.credentialFromResult(result);
+            // const token = credential.accessToken;
+            let credential: any;
+            if (result && result !== null) {
+              switch (result.providerId) {
+                case SignInProvider.apple:
+                  credential = OAuthProvider.credentialFromResult(result);
+                  break;
+                case SignInProvider.facebook:
+                  credential = FacebookAuthProvider.credentialFromResult(result);
+                  break;
+                case SignInProvider.google:
+                  credential = GoogleAuthProvider.credentialFromResult(result);
+                  break;
+                case SignInProvider.twitter:
+                  credential = TwitterAuthProvider.credentialFromResult(result);
+                  break;
+              }
+              const signInResult = this.createSignInResult(result.user, credential);
+              this.dismissLoading();
+              this.redirectResultSubject.next(signInResult);
+            } else {
+              throw new Error('Could not get user from redirect result');
+            }
+          }, (reason) => {
+            console.log('Promise rejected', reason);
+            // ? Clear redirection loading
+            this.clearAuthWithProvidersRedirection();
+          }).catch((error) => {
+            // ? Clear redirection loading
+            this.clearAuthWithProvidersRedirection();
+            // ? Handle Errors here
+            // const errorCode = error.code;
+            // const errorMessage = error.message;
+            // ? The email of the user's account used.
+            // const email = error.email;
+            // ?AuthCredential type that was used.
+            // const credential = FacebookAuthProvider.credentialFromError(error);
+            let errorResult = {error: 'undefined'};
+            if (error && (error.code || error.message)) {
+              errorResult = {error: (error.code ? error.code : error.message)};
+            }
+            this.redirectResultSubject.next(errorResult);
+          });
+        }
+      });
     }
   }
+  ngOnDestroy(): void {
+    this.dismissLoading();
   }
+  public async signOut(): Promise<string> {
+    const signOutPromise = new Promise<string>((resolve, reject) => {
+      // * 1. Sign out on the native layer
+      FirebaseAuthentication.signOut()
+      .then((nativeResult) => {
+        // * 2. Sign out on the web layer
+        const auth = getAuth();
+        signOut(auth)
+        .then((webResult) => {
+          // ? Sign-out successful
+          resolve('Successfully sign out from native and web');
+        }).catch((webError) => {
+          // ? An error happened
+          reject(`Web auth sign out error: ${webError}`);
+        });
+      })
+      .catch((nativeError) => {
+        reject(`Native auth sign out error: ${nativeError}`);
+      });
+    });
+    return signOutPromise;
   }
+  private async socialSignIn(provider: AuthProvider, scopes?: Array<string>): Promise<SignInResult> {
+    this.presentLoading(provider.providerId);
+    let authResult: SignInResult = null;
     if (this.platform.is('capacitor')) {
+      authResult = await this.nativeAuth(provider, scopes);
+    } else {
+      authResult = await this.webAuth(provider);
+    }
+    this.dismissLoading();
+    if (authResult !== null) {
+      return authResult;
     } else {
+      return Promise.reject('Could not perform social sign in, authResult is null');
     }
   }
+  private prepareForAuthWithProvidersRedirection(authProviderId: string): void {
+    // ? Before invoking auth provider redirect flow, add a flag to the path.
+    // ? The presence of the flag in the path indicates we should wait for the auth redirect to complete
+    this.location.replaceState(this.location.path(), 'auth-redirect=' + authProviderId, this.location.getState());
   }
+  private clearAuthWithProvidersRedirection(): void {
+    // ? Remove auth-redirect param from url
+    this.location.replaceState(this.router.url.split('?')[0], '');
+    this.dismissLoading();
   }
+  private async presentLoading(authProviderId?: string): Promise<void> {
+    const authProviderCapitalized = authProviderId[0].toUpperCase() + authProviderId.slice(1);
+    this.loadingController.create({
+      message: authProviderId ? 'Signing in with ' + authProviderCapitalized : 'Signing in ...',
+      duration: 4000
+    }).then((loader) => {
+      this.authLoader = loader;
+      this.authLoader.present();
+    });
+  }
+  private async dismissLoading(): Promise<void> {
+    if (this.authLoader) {
+      await this.authLoader.dismiss();
+    }
+  }
+  private async webAuth(provider: AuthProvider, scopes?: Array<string>): Promise<SignInResult> {
+    // ? Scopes for Firebase JS SDK auth
+    if (scopes) {
+      let providerWithScopes: any;
+      switch (provider.providerId) {
+        case SignInProvider.apple:
+          providerWithScopes = (provider as OAuthProvider);
+          break;
+        case SignInProvider.facebook:
+          providerWithScopes = (provider as FacebookAuthProvider);
+          break;
+        case SignInProvider.google:
+          providerWithScopes = (provider as GoogleAuthProvider);
+          break;
+        case SignInProvider.twitter:
+          providerWithScopes = (provider as TwitterAuthProvider);
+          break;
+      }
+      scopes.forEach(scope => {
+        providerWithScopes.addScope(scope);
+      });
+      provider = providerWithScopes;
+    }
+    const auth = getAuth();
+    let webAuthUserCredential: UserCredential = null;
+    if (this.platform.is('desktop')) {
+      webAuthUserCredential = await signInWithPopup(auth, provider);
     } else {
+      // ? Web but not desktop, for example mobile PWA
+      this.prepareForAuthWithProvidersRedirection(provider.providerId);
+      return signInWithRedirect(auth, provider);
+      // ? If you prefer to use signInWithPopup in every scenario, just un-comment this line
+      // webAuthUserCredential = await signInWithPopup(auth, provider);
+    }
+    if (webAuthUserCredential && webAuthUserCredential !== null) {
+      let webCredential: OAuthCredential = null;
+      switch (provider.providerId) {
+        case SignInProvider.apple:
+          webCredential = OAuthProvider.credentialFromResult(webAuthUserCredential);
+          break;
+        case SignInProvider.facebook:
+          webCredential = FacebookAuthProvider.credentialFromResult(webAuthUserCredential);
+          break;
+        case SignInProvider.google:
+          webCredential = GoogleAuthProvider.credentialFromResult(webAuthUserCredential);
+          break;
+        case SignInProvider.twitter:
+          webCredential = TwitterAuthProvider.credentialFromResult(webAuthUserCredential);
+          break;
       }
+      return this.createSignInResult(webAuthUserCredential.user, webCredential);
+    } else {
+      return Promise.reject('null webAuthUserCredential');
+    }
+  }
+  private async nativeAuth(provider: AuthProvider, scopes?: Array<string>): Promise<SignInResult> {
+    let nativeAuthResult: SignInResult = null;
+    // ? Scopes for Firebase native SDK (iOS and Android)
+    // TODO: Scopes for Firebase native SDK auth is a work in progress yet
+    // (see: https://github.com/robingenz/capacitor-firebase/issues/32)
+    // * 1. Sign in on the native layer
+    switch (provider.providerId) {
+      case SignInProvider.apple:
+        nativeAuthResult = await FirebaseAuthentication.signInWithApple();
+        break;
+      case SignInProvider.facebook:
+        nativeAuthResult = await FirebaseAuthentication.signInWithFacebook();
+        break;
+      case SignInProvider.google:
+        nativeAuthResult = await FirebaseAuthentication.signInWithGoogle();
+        break;
+      case SignInProvider.twitter:
+        nativeAuthResult = await FirebaseAuthentication.signInWithTwitter();
+        break;
+    }
+    // ? Once we have the user authenticated on the native layer, authenticate it in the web layer
+    if (nativeAuthResult && nativeAuthResult !== null) {
+      const auth = getAuth();
+      let nativeCredential: OAuthCredential = null;
+      switch (provider.providerId) {
+        case SignInProvider.apple:
+          const provider = new OAuthProvider(SignInProvider.apple);
+          nativeCredential = provider.credential({
+            idToken: nativeAuthResult.credential?.idToken,
+            rawNonce: nativeAuthResult.credential?.nonce
+          });
+          break;
+        case SignInProvider.facebook:
+          nativeCredential = FacebookAuthProvider.credential(
+            nativeAuthResult.credential?.accessToken
+          );
+          break;
+        case SignInProvider.google:
+          nativeCredential = GoogleAuthProvider.credential(nativeAuthResult.credential?.idToken, nativeAuthResult.credential?.accessToken);
+          break;
+        case SignInProvider.twitter:
+          try {
+            nativeCredential = TwitterAuthProvider.credential(nativeAuthResult.credential?.accessToken, nativeAuthResult.credential?.secret);
+            break;
+          } catch (error) {
+            console.error(error);
+          }
       }
+      // * 2. Sign in on the web layer using the access token we got from the native sign in
+      const webAuthResult = await signInWithCredential(auth, nativeCredential);
+      return this.createSignInResult(webAuthResult.user, nativeCredential);
+    } else {
+      return Promise.reject('null nativeAuthResult');
     }
   }
+  public async signInWithFacebook(): Promise<SignInResult> {
+    const provider = new FacebookAuthProvider();
     const scopes = ['email'];
+    // ? When we use the redirect authentication flow, the code below the socialSignIn() invocation does not get executed as we leave the current page
+    return this.socialSignIn(provider, scopes);
   }
+  public async signInWithGoogle(): Promise<SignInResult> {
+    const provider = new GoogleAuthProvider();
     const scopes = ['profile', 'email'];
+    // ? When we use the redirect authentication flow, the code below the socialSignIn() invocation does not get executed as we leave the current page
+    return this.socialSignIn(provider, scopes);
   }
+  public async signInWithTwitter(): Promise<SignInResult> {
+    const provider = new TwitterAuthProvider();
     const scopes = ['name', 'email'];
+    // ? When we use the redirect authentication flow, the code below the socialSignIn() invocation does not get executed as we leave the current page
+    return this.socialSignIn(provider, scopes);
   }
+  public async signInWithApple(): Promise<SignInResult> {
+    const provider = new OAuthProvider('apple.com');
     const scopes = ['name', 'email'];
+    // ? When we use the redirect authentication flow, the code below the socialSignIn() invocation does not get executed as we leave the current page
+    return this.socialSignIn(provider, scopes);
+  }
+  public async signInWithEmail(email: string, password: string): Promise<SignInResult> {
+    // ? Show a loader while we attempt to perform the login
+    this.presentLoading('email');
+    const auth = getAuth();
+    const credential = await signInWithEmailAndPassword(auth, email, password);
+    this.dismissLoading();
+    return this.createSignInResultFromUserCredential(credential);
+  }
+  public async signUpWithEmail(email: string, password: string): Promise<SignInResult> {
+    // ? Show a loader while we attempt to perform the signup
+    this.presentLoading('email');
+    const auth = getAuth();
+    const credential = await createUserWithEmailAndPassword(auth, email, password);
+    this.dismissLoading();
+    return this.createSignInResultFromUserCredential(credential);
+  }
+  public get redirectResult$(): Observable<any> {
+    return this.redirectResultSubject.asObservable();
+  }
+  public get authState$(): Observable<AuthStateChange> {
+    return this.authStateSubject.asObservable();
   }
   public getProfileDataSource(): Observable<FirebaseProfileModel> {
+    const auth = getAuth();
+    return of(auth.currentUser)
+    .pipe(
+      filter((user: FirebaseUser) => user != null),
+      map((user: FirebaseUser) => {
+        const userResult = this.createUserResult(user);
+        return this.setUserModelForProfile(userResult);
+      })
+    );
   }
+  private setUserModelForProfile(userResult?: (User | null)): FirebaseProfileModel {
     const userModel = new FirebaseProfileModel();
+    if (userResult) {
+      userModel.image = this.getPhotoURL(userResult.providerId, userResult.photoUrl);
+      userModel.name = userResult.displayName || 'What\'s your name?';
+      userModel.role = 'How would you describe yourself?';
+      userModel.description = 'Anything else you would like to share with the world?';
+      userModel.phoneNumber = userResult.phoneNumber || 'Is there a number where I can reach you?';
+      userModel.email = userResult.email || 'Where can I send you emails?';
+      userModel.provider = (userResult.providerId !== 'password') ? userResult.providerId : 'Credentials';
+    }
     return userModel;
   }
   public getProfileStore(dataSource: Observable<FirebaseProfileModel>): DataStore<FirebaseProfileModel> {
+    // ? Initialize the model specifying that it is a shell model
     const shellModel: FirebaseProfileModel = new FirebaseProfileModel();
     this.profileDataStore = new DataStore(shellModel);
+    // ? Trigger the loading mechanism (with shell) in the dataStore
     this.profileDataStore.load(dataSource);
     return this.profileDataStore;
   }
+  private getPhotoURL(signInProviderId: string, photoURL: string): string {
+    // ? Default imgs are too small and our app needs a bigger image
+    switch (signInProviderId) {
+      case SignInProvider.facebook:
+        return photoURL + '?height=400';
+      case SignInProvider.twitter:
+        return photoURL.replace('_normal', '_400x400');
+      case SignInProvider.google:
+        return photoURL.split('=')[0];
+      case 'password':
+        return 'https://s3-us-west-2.amazonaws.com/ionicthemes/otros/avatar-placeholder.png';
+      default:
+        return photoURL;
+    }
+  }
+  // * Aux methods inspired on the @capacitor-firebase/authentication library
+  // (see: https://github.com/robingenz/capacitor-firebase/blob/a51927ff3acce94cedcd7bfc218952bb106db904/packages/authentication/src/web.ts#L297)
+  private createSignInResultFromUserCredential(credential: UserCredential): SignInResult {
+    const userResult = this.createUserResult(credential.user);
+    const result: SignInResult = {
+      user: userResult,
+      credential: null,
+    };
+    return result;
+  }
+  private createSignInResult(user: FirebaseUser, credential: FirebaseAuthCredential | null): SignInResult {
+    const userResult = this.createUserResult(user);
+    const credentialResult = this.createCredentialResult(credential);
+    const result: SignInResult = {
+      user: userResult,
+      credential: credentialResult,
+    };
+    return result;
+  }
+  private createUserResult(user: FirebaseUser | null): User | null {
+    if (!user) {
+      return null;
+    }
+    const result: User = {
+      displayName: user.displayName,
+      email: user.email,
+      emailVerified: user.emailVerified,
+      isAnonymous: user.isAnonymous,
+      phoneNumber: user.phoneNumber,
+      photoUrl: user.photoURL,
+      providerId: user.providerId,
+      tenantId: user.tenantId,
+      uid: user.uid,
+    };
+    return result;
+  }
+  private createCredentialResult(credential: FirebaseAuthCredential | null): AuthCredential | null {
+    if (!credential) {
+      return null;
+    }
+    const result: AuthCredential = {
+      providerId: credential.providerId,
+    };
+    if (credential instanceof OAuthCredential) {
+      result.accessToken = credential.accessToken;
+      result.idToken = credential.idToken;
+      result.secret = credential.secret;
+    }
+    return result;
+  }
 }

src/app/firebase/auth/profile/firebase-profile.module.ts CHANGED Viewed

@@ -3,22 +3,24 @@ import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Routes, RouterModule } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
 import { ComponentsModule } from '../../../components/components.module';
 import { FirebaseProfilePage } from './firebase-profile.page';
 import { FirebaseProfileResolver } from './firebase-profile.resolver';
-import { AngularFireAuthGuard, redirectUnauthorizedTo } from '@angular/fire/auth-guard';
-const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['/firebase/auth/sign-in']);
 const routes: Routes = [
   {
     path: '',
     component: FirebaseProfilePage,
-    canActivate: [AngularFireAuthGuard],
-    data: { authGuardPipe: redirectUnauthorizedToLogin },
     resolve: {
       data: FirebaseProfileResolver
-    }
   }
 ];

 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Routes, RouterModule } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
+import { redirectUnauthorizedTo, canActivate, AuthPipe } from '@angular/fire/auth-guard';
 import { ComponentsModule } from '../../../components/components.module';
 import { FirebaseProfilePage } from './firebase-profile.page';
 import { FirebaseProfileResolver } from './firebase-profile.resolver';
+const redirectUnauthorizedToLogin: () => AuthPipe = () => redirectUnauthorizedTo(['/firebase/auth/sign-in']);
 const routes: Routes = [
   {
     path: '',
     component: FirebaseProfilePage,
     resolve: {
       data: FirebaseProfileResolver
+    },
+    ...canActivate(redirectUnauthorizedToLogin)
   }
 ];

src/app/firebase/auth/profile/firebase-profile.page.ts CHANGED Viewed

@@ -1,11 +1,15 @@
 import { Component, OnInit, HostBinding } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { FirebaseProfileModel } from './firebase-profile.model';
-import { FirebaseAuthService } from '../firebase-auth.service';
 import { Subscription } from 'rxjs';
-import { IResolvedRouteData, ResolverHelper } from '../../../utils/resolver-helper';
 import { switchMap } from 'rxjs/operators';
 @Component({
   selector: 'app-firebase-profile',
   templateUrl: './firebase-profile.page.html',
@@ -15,7 +19,7 @@ import { switchMap } from 'rxjs/operators';
   ]
 })
 export class FirebaseProfilePage implements OnInit {
-  // Gather all component subscription in one place. Can be one Subscription or multiple (chained using the Subscription.add() method)
   subscriptions: Subscription;
   user: FirebaseProfileModel;
@@ -30,31 +34,40 @@ export class FirebaseProfilePage implements OnInit {
   ) {}
   ngOnInit() {
     this.subscriptions = this.route.data
     .pipe(
-      // Extract data for this page
       switchMap((resolvedRouteData: IResolvedRouteData<FirebaseProfileModel>) => {
         return ResolverHelper.extractData<FirebaseProfileModel>(resolvedRouteData.data, FirebaseProfileModel);
       })
     )
-    .subscribe((state) => {
-      this.user = state;
-    }, (error) => console.log(error));
   }
-  signOut() {
-    this.authService.signOut().subscribe(() => {
-      // Sign-out successful.
-      // Replace state as we are no longer authorized to access profile page.
-      this.router.navigate(['firebase/auth/sign-in'], { replaceUrl: true });
-    }, (error) => {
-      console.log('signout error', error);
-    });
   }
-  // NOTE: Ionic only calls ngOnDestroy if the page was popped (ex: when navigating back)
-  // Since ngOnDestroy might not fire when you navigate from the current page, use ionViewWillLeave to cleanup Subscriptions
   ionViewWillLeave(): void {
     this.subscriptions.unsubscribe();
   }

 import { Component, OnInit, HostBinding } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
+import { IResolvedRouteData, ResolverHelper } from '../../../utils/resolver-helper';
+import { FirebaseProfileModel } from './firebase-profile.model';
+import { FirebaseAuthService } from '../firebase-auth.service';
 @Component({
   selector: 'app-firebase-profile',
   templateUrl: './firebase-profile.page.html',
   ]
 })
 export class FirebaseProfilePage implements OnInit {
+  // ? Gather all component subscription in one place. Can be one Subscription or multiple (chained using the Subscription.add() method)
   subscriptions: Subscription;
   user: FirebaseProfileModel;
   ) {}
   ngOnInit() {
     this.subscriptions = this.route.data
     .pipe(
+      // ? Extract data for this page
       switchMap((resolvedRouteData: IResolvedRouteData<FirebaseProfileModel>) => {
         return ResolverHelper.extractData<FirebaseProfileModel>(resolvedRouteData.data, FirebaseProfileModel);
       })
     )
+    .subscribe({
+      next: (state) => {
+        this.user = state;
+      },
+      error: (error) => console.log(error)
+    });
   }
+  public async signOut(): Promise<void> {
+    try {
+      // * 1. Sign out on the native layer
+      await this.authService.signOut()
+      .then((result) => {
+        // ? Sign-out successful
+        // ? Replace state as we are no longer authorized to access profile page
+        this.router.navigate(['firebase/auth/sign-in'], { replaceUrl: true });
+      })
+      .catch((error) => {
+        console.log('userProfile - signOut() - error', error);
+      });
+    } finally {
+      console.log('userProfile - signOut() - finally');
+    }
   }
+  // ? NOTE: Ionic only calls ngOnDestroy if the page was popped (ex: when navigating back)
+  // ? Since ngOnDestroy might not fire when you navigate from the current page, use ionViewWillLeave to cleanup Subscriptions
   ionViewWillLeave(): void {
     this.subscriptions.unsubscribe();
   }

src/app/firebase/auth/sign-in/firebase-sign-in.module.ts CHANGED Viewed

@@ -2,17 +2,20 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Routes, RouterModule } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
 import { FirebaseSignInPage } from './firebase-sign-in.page';
 import { ComponentsModule } from '../../../components/components.module';
-import { AngularFireAuthGuard } from '@angular/fire/auth-guard';
-import { map } from 'rxjs/operators';
-// Firebase guard to redirect logged in users to profile
-const redirectLoggedInToProfile = (next) => map(user => {
-  // when queryParams['auth-redirect'] don't redirect because we want
-  // the component to handle the redirection
   if (user !== null && !next.queryParams['auth-redirect']) {
     return ['firebase/auth/profile'];
   } else {
@@ -24,8 +27,7 @@ const routes: Routes = [
   {
     path: '',
     component: FirebaseSignInPage,
-    canActivate: [AngularFireAuthGuard],
-    data: { authGuardPipe: redirectLoggedInToProfile }
   }
 ];

 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Routes, RouterModule } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
+import { map } from 'rxjs/operators';
+import { canActivate, AuthPipeGenerator } from '@angular/fire/auth-guard';
 import { FirebaseSignInPage } from './firebase-sign-in.page';
 import { ComponentsModule } from '../../../components/components.module';
+// ? Firebase guard to redirect logged in users to profile
+const redirectLoggedInToProfile: AuthPipeGenerator = (next) => map(user => {
+  // ? When queryParams['auth-redirect'] don't redirect because we want the component to handle the redirection
   if (user !== null && !next.queryParams['auth-redirect']) {
     return ['firebase/auth/profile'];
   } else {
   {
     path: '',
     component: FirebaseSignInPage,
+    ...canActivate(redirectLoggedInToProfile)
   }
 ];

src/app/firebase/auth/sign-in/firebase-sign-in.page.ts CHANGED Viewed

@@ -1,8 +1,8 @@
-import { Component, NgZone, OnDestroy } from '@angular/core';
-import { Location } from '@angular/common';
 import { Validators, FormGroup, FormControl } from '@angular/forms';
-import { Router, ActivatedRoute } from '@angular/router';
-import { LoadingController } from '@ionic/angular';
 import { Subscription } from 'rxjs';
 import { HistoryHelperService } from '../../../utils/history-helper.service';
@@ -15,10 +15,9 @@ import { FirebaseAuthService } from '../firebase-auth.service';
     './styles/firebase-sign-in.page.scss'
   ]
 })
-export class FirebaseSignInPage implements OnDestroy {
   loginForm: FormGroup;
   submitError: string;
-  redirectLoader: HTMLIonLoadingElement;
   authRedirectResult: Subscription;
   validation_messages = {
@@ -34,11 +33,8 @@ export class FirebaseSignInPage implements OnDestroy {
   constructor(
     public router: Router,
-    public route: ActivatedRoute,
-    public authService: FirebaseAuthService,
     private ngZone: NgZone,
-    public loadingController: LoadingController,
-    public location: Location,
     public historyHelper: HistoryHelperService
   ) {
     this.loginForm = new FormGroup({
@@ -52,155 +48,134 @@ export class FirebaseSignInPage implements OnDestroy {
       ]))
     });
-    // Get firebase authentication redirect result invoken when using signInWithRedirect()
-    // signInWithRedirect() is only used when client is in web but not desktop
-    this.authRedirectResult = this.authService.getRedirectResult()
     .subscribe(result => {
       if (result.error) {
         this.manageAuthWithProvidersErrors(result.error);
       } else {
         this.redirectLoggedUserToProfilePage();
       }
-  });
-    // Check if url contains our custom 'auth-redirect' param, then show a loader while we receive the getRedirectResult notification
-    this.route.queryParams.subscribe(params => {
-      const authProvider = params['auth-redirect'];
-      if (authProvider) {
-        this.presentLoading(authProvider);
       }
     });
   }
-  ngOnDestroy(): void {
-    this.dismissLoading();
-  }
-  // Once the auth provider finished the authentication flow, and the auth redirect completes,
-  // hide the loader and redirect the user to the profile page
-  redirectLoggedUserToProfilePage() {
-    this.dismissLoading();
-    // As we are calling the Angular router navigation inside a subscribe method, the navigation will be triggered outside Angular zone.
-    // That's why we need to wrap the router navigation call inside an ngZone wrapper
-    this.ngZone.run(() => {
-      // Get previous URL from our custom History Helper
-      // If there's no previous page, then redirect to profile
-      // const previousUrl = this.historyHelper.previousUrl || 'firebase/auth/profile';
-      const previousUrl = 'firebase/auth/profile';
-      // No need to store in the navigation history the sign-in page with redirect params (it's justa a mandatory mid-step)
-      // Navigate to profile and replace current url with profile
-      this.router.navigate([previousUrl], { replaceUrl: true });
-    });
   }
-  async presentLoading(authProvider?: string) {
-    const authProviderCapitalized = authProvider[0].toUpperCase() + authProvider.slice(1);
-    this.loadingController.create({
-      message: authProvider ? 'Signing in with ' + authProviderCapitalized : 'Signin in ...',
-      duration: 4000
-    }).then((loader) => {
-      const currentUrl = this.location.path();
-      if (currentUrl.includes('auth-redirect')) {
-        this.redirectLoader = loader;
-        this.redirectLoader.present();
-      }
-    });
-  }
-  async dismissLoading() {
-    if (this.redirectLoader) {
-      await this.redirectLoader.dismiss();
     }
   }
-  // Before invoking auth provider redirect flow, present a loading indicator and add a flag to the path.
-  // The precense of the flag in the path indicates we should wait for the auth redirect to complete.
-  prepareForAuthWithProvidersRedirection(authProvider: string) {
-    this.presentLoading(authProvider);
-    this.location.replaceState(this.location.path(), 'auth-redirect=' + authProvider, this.location.getState());
   }
-  manageAuthWithProvidersErrors(errorMessage: string) {
-    this.submitError = errorMessage;
-    // remove auth-redirect param from url
-    this.location.replaceState(this.router.url.split('?')[0], '');
-    this.dismissLoading();
-  }
-  resetSubmitError() {
-    this.submitError = null;
   }
-  signInWithEmail() {
     this.resetSubmitError();
-    this.authService.signInWithEmail(this.loginForm.value['email'], this.loginForm.value['password'])
-    .then(user => {
-      // navigate to user profile
-      this.redirectLoggedUserToProfilePage();
-    })
-    .catch(error => {
-      this.submitError = error.message;
-      this.dismissLoading();
-    });
-  }
-  doFacebookLogin(): void {
-    this.resetSubmitError();
-    this.prepareForAuthWithProvidersRedirection('facebook');
-    this.authService.signInWithFacebook()
-    .subscribe((result) => {
-      // This gives you a Facebook Access Token. You can use it to access the Facebook API.
-      // const token = result.credential.accessToken;
-      this.redirectLoggedUserToProfilePage();
-    }, (error) => {
-      this.manageAuthWithProvidersErrors(error.message);
-    });
   }
-  doGoogleLogin(): void {
-    this.resetSubmitError();
-    this.prepareForAuthWithProvidersRedirection('google');
-    this.authService.signInWithGoogle()
-    .subscribe((result) => {
-      // This gives you a Google Access Token. You can use it to access the Google API.
-      // var token = result.credential.accessToken;
-      this.redirectLoggedUserToProfilePage();
-    }, (error) => {
-        console.log(error);
-      this.manageAuthWithProvidersErrors(error.message);
     });
   }
-  doTwitterLogin(): void {
-    this.resetSubmitError();
-    this.prepareForAuthWithProvidersRedirection('twitter');
-    this.authService.signInWithTwitter()
-    .subscribe((result) => {
-      // This gives you a Twitter Access Token. You can use it to access the Twitter API.
-      // var token = result.credential.accessToken;
-      this.redirectLoggedUserToProfilePage();
-    }, (error) => {
-      console.log(error);
-      this.manageAuthWithProvidersErrors(error.message);
-    });
   }
-  doAppleLogin(): void {
-    this.resetSubmitError();
-    this.prepareForAuthWithProvidersRedirection('apple');
-    this.authService.signInWithApple()
-    .subscribe((result) => {
-      this.redirectLoggedUserToProfilePage();
-    }, (error) => {
-      console.log(error);
-      this.manageAuthWithProvidersErrors(error.message);
-    });
   }
 }

+import { Component, NgZone } from '@angular/core';
 import { Validators, FormGroup, FormControl } from '@angular/forms';
+import { Router } from '@angular/router';
+import { AuthStateChange, SignInResult } from '@capacitor-firebase/authentication';
 import { Subscription } from 'rxjs';
 import { HistoryHelperService } from '../../../utils/history-helper.service';
     './styles/firebase-sign-in.page.scss'
   ]
 })
+export class FirebaseSignInPage {
   loginForm: FormGroup;
   submitError: string;
   authRedirectResult: Subscription;
   validation_messages = {
   constructor(
     public router: Router,
+    public firebaseAuthService: FirebaseAuthService,
     private ngZone: NgZone,
     public historyHelper: HistoryHelperService
   ) {
     this.loginForm = new FormGroup({
       ]))
     });
+    // ? Get firebase authentication redirect result invoked when using signInWithRedirect()
+    // ? signInWithRedirect() is only used when client is in web but not desktop. For example a PWA
+    this.authRedirectResult = this.firebaseAuthService.redirectResult$
     .subscribe(result => {
       if (result.error) {
         this.manageAuthWithProvidersErrors(result.error);
       } else {
         this.redirectLoggedUserToProfilePage();
       }
+    });
+    this.firebaseAuthService.authState$
+    .subscribe((stateChange: AuthStateChange) => {
+      if (!stateChange.user) {
+        this.manageAuthWithProvidersErrors('No user logged in');
+      } else {
+        this.redirectLoggedUserToProfilePage();
       }
     });
   }
+  public async doFacebookLogin(): Promise<void> {
+    this.resetSubmitError();
+    try {
+      await this.firebaseAuthService.signInWithFacebook()
+      .then((result: SignInResult) => {
+        // ? This gives you a Facebook Access Token. You can use it to access the Facebook API.
+        // const token = result.credential.accessToken;
+        this.redirectLoggedUserToProfilePage();
+      })
+      .catch((error) => {
+        this.manageAuthWithProvidersErrors(error.message);
+      });
+    } finally {
+      // ? Termination code goes here
+    }
   }
+  public async doGoogleLogin(): Promise<void> {
+    this.resetSubmitError();
+    try {
+      await this.firebaseAuthService.signInWithGoogle()
+      .then((result) => {
+        // ? This gives you a Google Access Token. You can use it to access the Google API.
+        // const token = result.credential.accessToken;
+        this.redirectLoggedUserToProfilePage();
+      })
+      .catch((error) => {
+        this.manageAuthWithProvidersErrors(error.message);
+      });
+    } finally {
+      // ? Termination code goes here
     }
   }
+  public async doTwitterLogin(): Promise<void> {
+    this.resetSubmitError();
+    try {
+      await this.firebaseAuthService.signInWithTwitter()
+      .then((result) => {
+        // ? This gives you a Twitter Access Token. You can use it to access the Twitter API.
+        // const token = result.credential.accessToken;
+        this.redirectLoggedUserToProfilePage();
+      })
+      .catch((error) => {
+        this.manageAuthWithProvidersErrors(error.message);
+      });
+    } finally {
+      // ? Termination code goes here
+    }
   }
+  public async doAppleLogin(): Promise<void> {
+    this.resetSubmitError();
+    try {
+      await this.firebaseAuthService.signInWithApple()
+      .then((result) => {
+        this.redirectLoggedUserToProfilePage();
+      })
+      .catch((error) => {
+        this.manageAuthWithProvidersErrors(error.message);
+      });
+    } finally {
+      // ? Termination code goes here
+    }
   }
+  public async signInWithEmail(): Promise<void> {
     this.resetSubmitError();
+    try {
+      await this.firebaseAuthService.signInWithEmail(this.loginForm.value['email'], this.loginForm.value['password'])
+      .then((result) => {
+        this.redirectLoggedUserToProfilePage();
+      })
+      .catch((error) => {
+        this.submitError = error.message;
+      });
+    } finally {
+      // ? Termination code goes here
+    }
   }
+  // ? Once the auth provider finished the authentication flow, and the auth redirect completes, hide the loader and redirect the user to the profile page
+  private redirectLoggedUserToProfilePage(): void {
+    // As we are calling the Angular router navigation inside a subscribe method, the navigation will be triggered outside Angular zone.
+    // That's why we need to wrap the router navigation call inside an ngZone wrapper
+    this.ngZone.run(() => {
+      // Get previous URL from our custom History Helper
+      // If there's no previous page, then redirect to profile
+      // const previousUrl = this.historyHelper.previousUrl || 'firebase/auth/profile';
+      const previousUrl = 'firebase/auth/profile';
+      // No need to store in the navigation history the sign-in page with redirect params (it's just a a mandatory mid-step)
+      // Navigate to profile and replace current url with profile
+      this.router.navigate([previousUrl], { replaceUrl: true });
     });
   }
+  private manageAuthWithProvidersErrors(errorMessage: string): void {
+    this.submitError = errorMessage;
   }
+  private resetSubmitError(): void {
+    this.submitError = null;
   }
 }

src/app/firebase/auth/sign-up/firebase-sign-up.module.ts CHANGED Viewed

@@ -4,14 +4,30 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Routes, RouterModule } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
 import { FirebaseSignUpPage } from './firebase-sign-up.page';
 import { ComponentsModule } from '../../../components/components.module';
 const routes: Routes = [
   {
     path: '',
-    component: FirebaseSignUpPage
   }
 ];

 import { Routes, RouterModule } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
+import { map } from 'rxjs/operators';
+import { canActivate, AuthPipeGenerator } from '@angular/fire/auth-guard';
 import { FirebaseSignUpPage } from './firebase-sign-up.page';
 import { ComponentsModule } from '../../../components/components.module';
+// ? Firebase guard to redirect logged in users to profile
+const redirectLoggedInToProfile: AuthPipeGenerator = (next) => map(user => {
+  // ? When queryParams['auth-redirect'] don't redirect because we want the component to handle the redirection
+  if (user !== null && !next.queryParams['auth-redirect']) {
+    return ['firebase/auth/profile'];
+  } else {
+    return true;
+  }
+});
 const routes: Routes = [
   {
     path: '',
+    component: FirebaseSignUpPage,
+    ...canActivate(redirectLoggedInToProfile)
   }
 ];

src/app/firebase/auth/sign-up/firebase-sign-up.page.html CHANGED Viewed

@@ -1,7 +1,7 @@
 <ion-header class="ion-no-border">
   <ion-toolbar>
     <ion-buttons slot="start">
-      <ion-back-button></ion-back-button>
     </ion-buttons>
   </ion-toolbar>
 </ion-header>

 <ion-header class="ion-no-border">
   <ion-toolbar>
     <ion-buttons slot="start">
+      <ion-back-button defaultHref="app/categories"></ion-back-button>
     </ion-buttons>
   </ion-toolbar>
 </ion-header>

src/app/firebase/auth/sign-up/firebase-sign-up.page.ts CHANGED Viewed

@@ -1,11 +1,15 @@
 import { Component, OnInit, NgZone } from '@angular/core';
 import { Validators, FormGroup, FormControl } from '@angular/forms';
-import { Location } from '@angular/common';
-import { Router, ActivatedRoute } from '@angular/router';
-import { MenuController, LoadingController } from '@ionic/angular';
 import { PasswordValidator } from '../../../validators/password.validator';
 import { FirebaseAuthService } from '../firebase-auth.service';
-import { Subscription } from 'rxjs';
 @Component({
   selector: 'app-firebase-sign-up',
@@ -18,7 +22,6 @@ export class FirebaseSignUpPage implements OnInit {
   signupForm: FormGroup;
   matching_passwords_group: FormGroup;
   submitError: string;
-  redirectLoader: HTMLIonLoadingElement;
   authRedirectResult: Subscription;
   validation_messages = {
@@ -39,13 +42,11 @@ export class FirebaseSignUpPage implements OnInit {
   };
   constructor(
-    public router: Router,
-    public route: ActivatedRoute,
     public menu: MenuController,
-    public authService: FirebaseAuthService,
     private ngZone: NgZone,
-    public loadingController: LoadingController,
-    public location: Location
   ) {
     this.matching_passwords_group = new FormGroup({
       'password': new FormControl('', Validators.compose([
@@ -65,9 +66,9 @@ export class FirebaseSignUpPage implements OnInit {
       'matching_passwords': this.matching_passwords_group
     });
-    // Get firebase authentication redirect result invoken when using signInWithRedirect()
-    // signInWithRedirect() is only used when client is in web but not desktop
-    this.authRedirectResult = this.authService.getRedirectResult()
     .subscribe(result => {
       if (result.error) {
         this.manageAuthWithProvidersErrors(result.error);
@@ -76,11 +77,12 @@ export class FirebaseSignUpPage implements OnInit {
       }
     });
-    // Check if url contains our custom 'auth-redirect' param, then show a loader while we receive the getRedirectResult notification
-    this.route.queryParams.subscribe(params => {
-      const authProvider = params['auth-redirect'];
-      if (authProvider) {
-        this.presentLoading(authProvider);
       }
     });
   }
@@ -89,126 +91,113 @@ export class FirebaseSignUpPage implements OnInit {
     this.menu.enable(false);
   }
-  // Once the auth provider finished the authentication flow, and the auth redirect completes,
-  // hide the loader and redirect the user to the profile page
-  redirectLoggedUserToProfilePage() {
-    this.dismissLoading();
-    // As we are calling the Angular router navigation inside a subscribe method, the navigation will be triggered outside Angular zone.
-    // That's why we need to wrap the router navigation call inside an ngZone wrapper
-    this.ngZone.run(() => {
-      // Get previous URL from our custom History Helper
-      // If there's no previous page, then redirect to profile
-      // const previousUrl = this.historyHelper.previousUrl || 'firebase/auth/profile';
-      const previousUrl = 'firebase/auth/profile';
-      // No need to store in the navigation history the sign-in page with redirect params (it's justa a mandatory mid-step)
-      // Navigate to profile and replace current url with profile
-      this.router.navigate([previousUrl], { replaceUrl: true });
-    });
   }
-  async presentLoading(authProvider?: string) {
-    const authProviderCapitalized = authProvider[0].toUpperCase() + authProvider.slice(1);
-    this.redirectLoader = await this.loadingController.create({
-      message: authProvider ? 'Signing up with ' + authProviderCapitalized : 'Signin up ...',
-      duration: 4000
-    });
-    await this.redirectLoader.present();
-  }
-  async dismissLoading() {
-    if (this.redirectLoader) {
-      await this.redirectLoader.dismiss();
     }
   }
-  resetSubmitError() {
-    this.submitError = null;
-  }
-  // Before invoking auth provider redirect flow, present a loading indicator and add a flag to the path.
-  // The precense of the flag in the path indicates we should wait for the auth redirect to complete.
-  prepareForAuthWithProvidersRedirection(authProvider: string) {
-    this.presentLoading(authProvider);
-    this.location.go(this.location.path(), 'auth-redirect=' + authProvider, this.location.getState());
   }
-  manageAuthWithProvidersErrors(errorMessage: string) {
-    this.submitError = errorMessage;
-    // remove auth-redirect param from url
-    this.location.replaceState(this.router.url.split('?')[0], '');
-    this.dismissLoading();
   }
-  signUpWithEmail(): void {
     this.resetSubmitError();
-    const values = this.signupForm.value;
-    this.authService.signUpWithEmail(values.email, values.matching_passwords.password)
-      .then(user => {
-        // navigate to user profile
         this.redirectLoggedUserToProfilePage();
       })
-      .catch(error => {
         this.submitError = error.message;
       });
   }
-  doFacebookSignup(): void {
-    this.resetSubmitError();
-    this.prepareForAuthWithProvidersRedirection('facebook');
-    this.authService.signInWithFacebook()
-    .subscribe((result) => {
-      // This gives you a Facebook Access Token. You can use it to access the Facebook API.
-      // const token = result.credential.accessToken;
-      this.redirectLoggedUserToProfilePage();
-    }, (error) => {
-      this.manageAuthWithProvidersErrors(error.message);
-    });
-  }
-  doGoogleSignup(): void {
-    this.resetSubmitError();
-    this.prepareForAuthWithProvidersRedirection('google');
-    this.authService.signInWithGoogle()
-    .subscribe((result) => {
-      // This gives you a Google Access Token. You can use it to access the Google API.
-      // var token = result.credential.accessToken;
-      this.redirectLoggedUserToProfilePage();
-    }, (error) => {
-        console.log(error);
-      this.manageAuthWithProvidersErrors(error.message);
     });
   }
-  doTwitterSignup(): void {
-    this.resetSubmitError();
-    this.prepareForAuthWithProvidersRedirection('twitter');
-    this.authService.signInWithTwitter()
-    .subscribe((result) => {
-      // This gives you a Twitter Access Token. You can use it to access the Twitter API.
-      // var token = result.credential.accessToken;
-      this.redirectLoggedUserToProfilePage();
-    }, (error) => {
-      console.log(error);
-      this.manageAuthWithProvidersErrors(error.message);
-    });
   }
-  doAppleSignup(): void {
-    this.resetSubmitError();
-    this.prepareForAuthWithProvidersRedirection('apple');
-    this.authService.signInWithApple()
-    .subscribe((result) => {
-      this.redirectLoggedUserToProfilePage();
-    }, (error) => {
-      console.log(error);
-      this.manageAuthWithProvidersErrors(error.message);
-    });
   }
 }

 import { Component, OnInit, NgZone } from '@angular/core';
 import { Validators, FormGroup, FormControl } from '@angular/forms';
+import { Router } from '@angular/router';
+import { MenuController } from '@ionic/angular';
+import { AuthStateChange, SignInResult } from '@capacitor-firebase/authentication';
+import { Subscription } from 'rxjs';
+import { HistoryHelperService } from '../../../utils/history-helper.service';
 import { PasswordValidator } from '../../../validators/password.validator';
 import { FirebaseAuthService } from '../firebase-auth.service';
 @Component({
   selector: 'app-firebase-sign-up',
   signupForm: FormGroup;
   matching_passwords_group: FormGroup;
   submitError: string;
   authRedirectResult: Subscription;
   validation_messages = {
   };
   constructor(
     public menu: MenuController,
+    public router: Router,
+    public firebaseAuthService: FirebaseAuthService,
     private ngZone: NgZone,
+    public historyHelper: HistoryHelperService
   ) {
     this.matching_passwords_group = new FormGroup({
       'password': new FormControl('', Validators.compose([
       'matching_passwords': this.matching_passwords_group
     });
+    // ? Get firebase authentication redirect result invoked when using signInWithRedirect()
+    // ? signInWithRedirect() is only used when client is in web but not desktop. For example a PWA
+    this.authRedirectResult = this.firebaseAuthService.redirectResult$
     .subscribe(result => {
       if (result.error) {
         this.manageAuthWithProvidersErrors(result.error);
       }
     });
+    this.firebaseAuthService.authState$
+    .subscribe((stateChange: AuthStateChange) => {
+      if (!stateChange.user) {
+        this.manageAuthWithProvidersErrors('No user logged in');
+      } else {
+        this.redirectLoggedUserToProfilePage();
       }
     });
   }
     this.menu.enable(false);
   }
+  public async doFacebookSignup(): Promise<void> {
+    this.resetSubmitError();
+    try {
+      await this.firebaseAuthService.signInWithFacebook()
+      .then((result: SignInResult) => {
+        // ? This gives you a Facebook Access Token. You can use it to access the Facebook API.
+        // const token = result.credential.accessToken;
+        this.redirectLoggedUserToProfilePage();
+      })
+      .catch((error) => {
+        this.manageAuthWithProvidersErrors(error.message);
+      });
+    } finally {
+      // ? Termination code goes here
+    }
   }
+  public async doGoogleSignup(): Promise<void> {
+    this.resetSubmitError();
+    try {
+      await this.firebaseAuthService.signInWithGoogle()
+      .then((result) => {
+        // ? This gives you a Google Access Token. You can use it to access the Google API.
+        // const token = result.credential.accessToken;
+        this.redirectLoggedUserToProfilePage();
+      })
+      .catch((error) => {
+        this.manageAuthWithProvidersErrors(error.message);
+      });
+    } finally {
+      // ? Termination code goes here
     }
   }
+  public async doTwitterSignup(): Promise<void> {
+    this.resetSubmitError();
+    try {
+      await this.firebaseAuthService.signInWithTwitter()
+      .then((result) => {
+        // ? This gives you a Twitter Access Token. You can use it to access the Twitter API.
+        // const token = result.credential.accessToken;
+        this.redirectLoggedUserToProfilePage();
+      })
+      .catch((error) => {
+        this.manageAuthWithProvidersErrors(error.message);
+      });
+    } finally {
+      // ? Termination code goes here
+    }
   }
+  public async doAppleSignup(): Promise<void> {
+    this.resetSubmitError();
+    try {
+      await this.firebaseAuthService.signInWithApple()
+      .then((result) => {
+        this.redirectLoggedUserToProfilePage();
+      })
+      .catch((error) => {
+        this.manageAuthWithProvidersErrors(error.message);
+      });
+    } finally {
+      // ? Termination code goes here
+    }
   }
+  public async signUpWithEmail(): Promise<void> {
     this.resetSubmitError();
+    try {
+      await this.firebaseAuthService.signUpWithEmail(this.signupForm.value['email'], this.signupForm.value.matching_passwords.password)
+      .then((result) => {
         this.redirectLoggedUserToProfilePage();
       })
+      .catch((error) => {
         this.submitError = error.message;
       });
+    } finally {
+      // ? Termination code goes here
+    }
   }
+  // ? Once the auth provider finished the authentication flow, and the auth redirect completes, hide the loader and redirect the user to the profile page
+  private redirectLoggedUserToProfilePage(): void {
+    // As we are calling the Angular router navigation inside a subscribe method, the navigation will be triggered outside Angular zone.
+    // That's why we need to wrap the router navigation call inside an ngZone wrapper
+    this.ngZone.run(() => {
+      // Get previous URL from our custom History Helper
+      // If there's no previous page, then redirect to profile
+      // const previousUrl = this.historyHelper.previousUrl || 'firebase/auth/profile';
+      const previousUrl = 'firebase/auth/profile';
+      // No need to store in the navigation history the sign-in page with redirect params (it's justa a mandatory mid-step)
+      // Navigate to profile and replace current url with profile
+      this.router.navigate([previousUrl], { replaceUrl: true });
     });
   }
+  private manageAuthWithProvidersErrors(errorMessage: string): void {
+    this.submitError = errorMessage;
   }
+  private resetSubmitError(): void {
+    this.submitError = null;
   }
 }

src/app/firebase/crud/firebase-crud.module.ts CHANGED Viewed

@@ -3,10 +3,12 @@ import { RouterModule, Routes } from '@angular/router';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { AngularFireModule } from '@angular/fire';
-import { AngularFirestoreModule } from '@angular/fire/firestore';
 import { environment } from '../../../environments/environment';
 const firebaseRoutes: Routes = [
   {
     path: '',
@@ -34,8 +36,8 @@ const firebaseRoutes: Routes = [
     IonicModule,
     CommonModule,
     RouterModule.forChild(firebaseRoutes),
-    AngularFireModule.initializeApp(environment.firebase),
-    AngularFirestoreModule
   ],
 })
 export class FirebaseCrudModule {}

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { getFirestore, provideFirestore } from '@angular/fire/firestore';
+import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
 import { environment } from '../../../environments/environment';
 const firebaseRoutes: Routes = [
   {
     path: '',
     IonicModule,
     CommonModule,
     RouterModule.forChild(firebaseRoutes),
+    provideFirebaseApp(() => initializeApp(environment.firebase)),
+    provideFirestore(() => getFirestore())
   ],
 })
 export class FirebaseCrudModule {}

src/app/firebase/crud/firebase-crud.service.ts CHANGED Viewed

@@ -1,46 +1,55 @@
 import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
-import { AngularFirestore, DocumentReference } from '@angular/fire/firestore';
-import { Observable, of, forkJoin, throwError, combineLatest } from 'rxjs';
 import { map, concatMap, first, filter } from 'rxjs/operators';
 import * as dayjs from 'dayjs';
 import { DataStore, ShellModel } from '../../shell/data-store';
 import { FirebaseListingItemModel } from './../crud/listing/firebase-listing.model';
 import { FirebaseCombinedUserModel, FirebaseSkillModel, FirebaseUserModel } from './../crud/user/firebase-user.model';
 import { UserImageModel } from './../crud/user/select-image/user-image.model';
 import { TransferStateHelper } from '../../utils/transfer-state-helper';
-import { isPlatformServer } from '@angular/common';
-@Injectable()
 export class FirebaseCrudService {
-  // Listing Page
   private listingDataStore: DataStore<Array<FirebaseListingItemModel>>;
-  // User Details Page
   private combinedUserDataStore: DataStore<FirebaseCombinedUserModel>;
   private relatedUsersDataStore: DataStore<Array<FirebaseListingItemModel>>;
-  // Select User Image Modal
   private avatarsDataStore: DataStore<Array<UserImageModel>>;
   constructor(
     @Inject(PLATFORM_ID) private platformId: object,
     private transferStateHelper: TransferStateHelper,
-    private afs: AngularFirestore
   ) {}
-  /*
-    Firebase User Listing Page
-  */
   public getListingDataSource(): Observable<Array<FirebaseListingItemModel>> {
-    const rawDataSource = this.afs.collection<FirebaseListingItemModel>('users').valueChanges({ idField: 'id' })
-     .pipe(
-       map(actions => actions.map(user => {
           const age = this.calcUserAge(user.birthdate);
           return { age, ...user } as FirebaseListingItemModel;
-        })
-      )
     );
-    // This method tapps into the raw data source and stores the resolved data in the TransferState, then when
     // transitioning from the server rendered view to the browser, checks if we already loaded the data in the server to prevent
     // duplicate http requests.
     const cachedDataSource = this.transferStateHelper.checkDataSourceState('firebase-listing-state', rawDataSource);
@@ -63,7 +72,7 @@ export class FirebaseCrudService {
       this.listingDataStore = new DataStore(shellModel);
       // If running in the server, then don't add shell to the Data Store
-      // If we already loaded the Data Source in the server, then don't show a shell when transitioning back to the broswer from the server
       if (isPlatformServer(this.platformId) || dataSource['ssr_state']) {
         // Trigger loading mechanism with 0 delay (this will prevent the shell to be shown)
         this.listingDataStore.load(dataSource, 0);
@@ -76,27 +85,35 @@ export class FirebaseCrudService {
     return this.listingDataStore;
   }
-  // Filter users by age
   public searchUsersByAge(lower: number, upper: number): Observable<Array<FirebaseListingItemModel>> {
-    // we save the dateOfBirth in our DB so we need to calc the min and max dates valid for this query
     const minDate = (dayjs(Date.now()).subtract(upper, 'year')).unix();
     const maxDate =  (dayjs(Date.now()).subtract(lower, 'year')).unix();
-    const listingCollection = this.afs.collection<FirebaseListingItemModel>('users', ref =>
-      ref.orderBy('birthdate').startAt(minDate).endAt(maxDate));
-    return listingCollection.valueChanges({ idField: 'id' }).pipe(
-      map(actions => actions.map(user => {
-         const age = this.calcUserAge(user.birthdate);
-         return { age, ...user } as FirebaseListingItemModel;
-       })
-     ));
   }
-  /*
-    Firebase User Details Page
-  */
-  // Concat the userData with the details of the userSkills (from the skills collection)
   public getCombinedUserDataSource(userId: string): Observable<FirebaseCombinedUserModel> {
     const rawDataSource = this.getUser(userId)
     .pipe(
@@ -105,8 +122,9 @@ export class FirebaseCrudService {
       concatMap(user => {
         if (user && user.skills) {
           // Map each skill id and get the skill data as an Observable
-          const userSkillsObservables: Array<Observable<FirebaseSkillModel>> = user.skills.map(skill => {
-            return this.getSkill(skill).pipe(first());
           });
           // Combination operator: Take the most recent value from both input sources (of(user) & forkJoin(userSkillsObservables)),
@@ -114,7 +132,8 @@ export class FirebaseCrudService {
           return combineLatest([
             of(user),
             forkJoin(userSkillsObservables)
-          ]).pipe(
             map(([userDetails, userSkills]: [FirebaseUserModel, Array<FirebaseSkillModel>]) => {
               // Spread operator (see: https://dev.to/napoleon039/how-to-use-the-spread-and-rest-operator-4jbb)
               return {
@@ -125,12 +144,12 @@ export class FirebaseCrudService {
           );
         } else {
           // Throw error
-          return throwError('User does not have any skills.');
         }
       })
     );
-    // This method tapps into the raw data source and stores the resolved data in the TransferState, then when
     // transitioning from the server rendered view to the browser, checks if we already loaded the data in the server to prevent
     // duplicate http requests.
     const cachedDataSource = this.transferStateHelper.checkDataSourceState(`firebase-user-${userId}-state`, rawDataSource);
@@ -144,7 +163,7 @@ export class FirebaseCrudService {
     this.combinedUserDataStore = new DataStore(shellModel);
     // If running in the server, then don't add shell to the Data Store
-    // If we already loaded the Data Source in the server, then don't show a shell when transitioning back to the broswer from the server
     if (isPlatformServer(this.platformId) || dataSource['ssr_state']) {
       // Trigger loading mechanism with 0 delay (this will prevent the shell to be shown)
       this.combinedUserDataStore.load(dataSource, 0);
@@ -166,17 +185,17 @@ export class FirebaseCrudService {
         if (user && user.skills) {
           // Get all users with at least 1 skill in common
           const relatedUsersObservable: Observable<Array<FirebaseListingItemModel>> =
-          this.getUsersWithSameSkill(user.id, user.skills);
           return relatedUsersObservable;
         } else {
           // Throw error
-          return throwError('Could not get related user');
         }
       })
     );
-    // This method tapps into the raw data source and stores the resolved data in the TransferState, then when
     // transitioning from the server rendered view to the browser, checks if we already loaded the data in the server to prevent
     // duplicate http requests.
     const cachedDataSource = this.transferStateHelper.checkDataSourceState(`firebase-user-${userId}-related-users-state`, rawDataSource);
@@ -194,7 +213,7 @@ export class FirebaseCrudService {
     this.relatedUsersDataStore = new DataStore(shellModel);
     // If running in the server, then don't add shell to the Data Store
-    // If we already loaded the Data Source in the server, then don't show a shell when transitioning back to the broswer from the server
     if (isPlatformServer(this.platformId) || dataSource['ssr_state']) {
       // Trigger loading mechanism with 0 delay (this will prevent the shell to be shown)
       this.relatedUsersDataStore.load(dataSource, 0);
@@ -206,33 +225,39 @@ export class FirebaseCrudService {
     return this.relatedUsersDataStore;
   }
-  /*
-    Firebase Create User Modal
-  */
-  public createUser(userData: FirebaseUserModel): Promise<DocumentReference>  {
-    // remove isShell property so it doesn't get stored in Firebase
-    const { isShell, ...userDataToSave } = userData;
-    return this.afs.collection('users').add({...userDataToSave});
   }
-  /*
-    Firebase Update User Modal
-  */
-  public updateUser(userData: FirebaseUserModel): Promise<void> {
-    // remove isShell property so it doesn't get stored in Firebase
-    const { isShell, ...userDataToSave } = userData;
-    return this.afs.collection('users').doc(userData.id).set({...userDataToSave});
   }
-  public deleteUser(userKey: string): Promise<void> {
-    return this.afs.collection('users').doc(userKey).delete();
   }
-  /*
-    Firebase Select User Image Modal
-  */
   public getAvatarsDataSource(): Observable<Array<UserImageModel>> {
-    return this.afs.collection<UserImageModel>('avatars').valueChanges();
   }
   public getAvatarsStore(dataSource: Observable<Array<UserImageModel>>): DataStore<Array<UserImageModel>> {
@@ -251,57 +276,97 @@ export class FirebaseCrudService {
       // Trigger the loading mechanism (with shell) in the dataStore
       this.avatarsDataStore.load(dataSource);
     }
     return this.avatarsDataStore;
   }
-  /*
-    FireStore utility methods
-  */
-  // Get list of all available Skills (used in the create and update modals)
   public getSkills(): Observable<Array<FirebaseSkillModel>> {
-    return this.afs.collection<FirebaseSkillModel>('skills').valueChanges({ idField: 'id' });
   }
-  // Get data of a specific Skill
   private getSkill(skillId: string): Observable<FirebaseSkillModel> {
-    return this.afs.doc<FirebaseSkillModel>('skills/' + skillId)
-    .snapshotChanges()
-    .pipe(
-      map(a => {
-        const data = a.payload.data();
-        const id = a.payload.id;
-        return { id, ...data } as FirebaseSkillModel;
-      })
     );
-  }
-  // Get data of a specific User
   private getUser(userId: string): Observable<FirebaseUserModel> {
-    return this.afs.doc<FirebaseUserModel>('users/' + userId)
-    .snapshotChanges()
     .pipe(
-      map(a => {
-        const userData = a.payload.data();
-        const id = a.payload.id;
-        const age = userData ? this.calcUserAge(userData.birthdate) : 0;
-        return { id, age, ...userData } as FirebaseUserModel;
       })
     );
   }
-  // Get all users who share at least 1 skill of the user's 'skills' list
-  private getUsersWithSameSkill(userId: string, skills: Array<FirebaseSkillModel>): Observable<Array<FirebaseListingItemModel>> {
     // Get the users who have at least 1 skill in common
     // Because firestore doesn't have a logical 'OR' operator we need to create multiple queries, one for each skill from the 'skills' list
-    const queries = skills.map(skill => {
-      return this.afs.collection('users', ref => ref
-      .where('skills', 'array-contains', skill.id))
-      .valueChanges({ idField: 'id' });
     });
     // Combine all these queries
-    return combineLatest(queries).pipe(
       map((relatedUsers: FirebaseListingItemModel[][]) => {
         // Flatten the array of arrays of FirebaseListingItemModel
         const flattenedRelatedUsers = ([] as FirebaseListingItemModel[]).concat(...relatedUsers);
@@ -321,6 +386,8 @@ export class FirebaseCrudService {
         return filteredRelatedUsers;
       })
     );
   }
   private calcUserAge(dateOfBirth: number): number {

 import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
+import { isPlatformServer } from '@angular/common';
+import { Firestore, collection, collectionData, query, CollectionReference, orderBy, startAt, endAt, docData, doc, DocumentReference, where, setDoc, updateDoc, deleteDoc, getDoc, DocumentSnapshot } from '@angular/fire/firestore';
+import { Observable, of, forkJoin, throwError, combineLatest, from } from 'rxjs';
 import { map, concatMap, first, filter } from 'rxjs/operators';
 import * as dayjs from 'dayjs';
 import { DataStore, ShellModel } from '../../shell/data-store';
 import { FirebaseListingItemModel } from './../crud/listing/firebase-listing.model';
 import { FirebaseCombinedUserModel, FirebaseSkillModel, FirebaseUserModel } from './../crud/user/firebase-user.model';
 import { UserImageModel } from './../crud/user/select-image/user-image.model';
 import { TransferStateHelper } from '../../utils/transfer-state-helper';
+@Injectable({
+  providedIn: 'root'
+})
 export class FirebaseCrudService {
+  // ? Listing Page
   private listingDataStore: DataStore<Array<FirebaseListingItemModel>>;
+  // ? User Details Page
   private combinedUserDataStore: DataStore<FirebaseCombinedUserModel>;
   private relatedUsersDataStore: DataStore<Array<FirebaseListingItemModel>>;
+  // ? Select User Image Modal
   private avatarsDataStore: DataStore<Array<UserImageModel>>;
   constructor(
     @Inject(PLATFORM_ID) private platformId: object,
     private transferStateHelper: TransferStateHelper,
+    private firestore: Firestore
   ) {}
+  // * Firebase User Listing Page
   public getListingDataSource(): Observable<Array<FirebaseListingItemModel>> {
+    const rawDataSource: Observable<Array<FirebaseListingItemModel>> = collectionData<FirebaseListingItemModel>(
+      query<FirebaseListingItemModel>(
+        collection(this.firestore, 'users') as CollectionReference<FirebaseListingItemModel>
+      ), { idField: 'id' }
+    )
+    .pipe(
+      map((users: Array<FirebaseListingItemModel>) => {
+        return users.map((user: FirebaseListingItemModel) => {
           const age = this.calcUserAge(user.birthdate);
           return { age, ...user } as FirebaseListingItemModel;
+        });
+      })
     );
+    // This method taps into the raw data source and stores the resolved data in the TransferState, then when
     // transitioning from the server rendered view to the browser, checks if we already loaded the data in the server to prevent
     // duplicate http requests.
     const cachedDataSource = this.transferStateHelper.checkDataSourceState('firebase-listing-state', rawDataSource);
       this.listingDataStore = new DataStore(shellModel);
       // If running in the server, then don't add shell to the Data Store
+      // If we already loaded the Data Source in the server, then don't show a shell when transitioning back to the browser from the server
       if (isPlatformServer(this.platformId) || dataSource['ssr_state']) {
         // Trigger loading mechanism with 0 delay (this will prevent the shell to be shown)
         this.listingDataStore.load(dataSource, 0);
     return this.listingDataStore;
   }
+  // * Filter users by age
   public searchUsersByAge(lower: number, upper: number): Observable<Array<FirebaseListingItemModel>> {
+    // ? We save the dateOfBirth in our DB so we need to calc the min and max dates valid for this query
     const minDate = (dayjs(Date.now()).subtract(upper, 'year')).unix();
     const maxDate =  (dayjs(Date.now()).subtract(lower, 'year')).unix();
+    const filteredDataSource: Observable<Array<FirebaseListingItemModel>> = collectionData<FirebaseListingItemModel>(
+      query<FirebaseListingItemModel>(
+        collection(this.firestore, 'users') as CollectionReference<FirebaseListingItemModel>,
+        orderBy('birthdate'),
+        startAt(minDate),
+        endAt(maxDate)
+      ), { idField: 'id' }
+    )
+    .pipe(
+      map((users: Array<FirebaseListingItemModel>) => {
+        return users.map((user: FirebaseListingItemModel) => {
+          const age = this.calcUserAge(user.birthdate);
+          return { age, ...user } as FirebaseListingItemModel;
+        });
+      })
+    );
+    return filteredDataSource;
   }
+  // * Firebase User Details Page
+  // ? Concat the userData with the details of the userSkills (from the skills collection)
   public getCombinedUserDataSource(userId: string): Observable<FirebaseCombinedUserModel> {
     const rawDataSource = this.getUser(userId)
     .pipe(
       concatMap(user => {
         if (user && user.skills) {
           // Map each skill id and get the skill data as an Observable
+          const userSkillsObservables: Array<Observable<FirebaseSkillModel>> = user.skills.map((skillId: string) => {
+            // ? first() emits the first value of the source Observable, then completes.
+            return this.getSkill(skillId).pipe(first());
           });
           // Combination operator: Take the most recent value from both input sources (of(user) & forkJoin(userSkillsObservables)),
           return combineLatest([
             of(user),
             forkJoin(userSkillsObservables)
+          ])
+          .pipe(
             map(([userDetails, userSkills]: [FirebaseUserModel, Array<FirebaseSkillModel>]) => {
               // Spread operator (see: https://dev.to/napoleon039/how-to-use-the-spread-and-rest-operator-4jbb)
               return {
           );
         } else {
           // Throw error
+          return throwError(() => new Error('User does not have any skills.'));
         }
       })
     );
+    // This method taps into the raw data source and stores the resolved data in the TransferState, then when
     // transitioning from the server rendered view to the browser, checks if we already loaded the data in the server to prevent
     // duplicate http requests.
     const cachedDataSource = this.transferStateHelper.checkDataSourceState(`firebase-user-${userId}-state`, rawDataSource);
     this.combinedUserDataStore = new DataStore(shellModel);
     // If running in the server, then don't add shell to the Data Store
+    // If we already loaded the Data Source in the server, then don't show a shell when transitioning back to the browser from the server
     if (isPlatformServer(this.platformId) || dataSource['ssr_state']) {
       // Trigger loading mechanism with 0 delay (this will prevent the shell to be shown)
       this.combinedUserDataStore.load(dataSource, 0);
         if (user && user.skills) {
           // Get all users with at least 1 skill in common
           const relatedUsersObservable: Observable<Array<FirebaseListingItemModel>> =
+          this.getUsersWithSameSkills(user.id, user.skills);
           return relatedUsersObservable;
         } else {
           // Throw error
+          return throwError(() => new Error('Could not get related user'));
         }
       })
     );
+    // This method taps into the raw data source and stores the resolved data in the TransferState, then when
     // transitioning from the server rendered view to the browser, checks if we already loaded the data in the server to prevent
     // duplicate http requests.
     const cachedDataSource = this.transferStateHelper.checkDataSourceState(`firebase-user-${userId}-related-users-state`, rawDataSource);
     this.relatedUsersDataStore = new DataStore(shellModel);
     // If running in the server, then don't add shell to the Data Store
+    // If we already loaded the Data Source in the server, then don't show a shell when transitioning back to the browser from the server
     if (isPlatformServer(this.platformId) || dataSource['ssr_state']) {
       // Trigger loading mechanism with 0 delay (this will prevent the shell to be shown)
       this.relatedUsersDataStore.load(dataSource, 0);
     return this.relatedUsersDataStore;
   }
+  // * Firebase Create User Modal
+  public createUser(user: FirebaseUserModel): Promise<void> {
+    // Remove isShell property so it doesn't get stored in Firebase
+    const { isShell, ...userDataToSave } = user;
+    const userDocumentRef = doc(collection(this.firestore, 'users'));
+    return setDoc(userDocumentRef, {...userDataToSave});
   }
+  // * Firebase Update User Modal
+  public updateUser(user: FirebaseUserModel): Promise<void> {
+    // Remove isShell property so it doesn't get stored in Firebase
+    const { isShell, ...userDataToSave } = user;
+    const userDocumentRef = doc(this.firestore, 'users', user.id);
+    return updateDoc(userDocumentRef, {...userDataToSave});
   }
+  public deleteUser(userId: string): Promise<void> {
+    const userDocumentRef = doc(this.firestore, 'users', userId);
+    return deleteDoc(userDocumentRef);
   }
+  // * Firebase Select User Image Modal
   public getAvatarsDataSource(): Observable<Array<UserImageModel>> {
+    const avatarsDataSource: Observable<Array<UserImageModel>> = collectionData<UserImageModel>(
+      query<UserImageModel>(
+        collection(this.firestore, 'avatars') as CollectionReference<UserImageModel>
+      )
+    );
+    return avatarsDataSource;
   }
   public getAvatarsStore(dataSource: Observable<Array<UserImageModel>>): DataStore<Array<UserImageModel>> {
       // Trigger the loading mechanism (with shell) in the dataStore
       this.avatarsDataStore.load(dataSource);
     }
     return this.avatarsDataStore;
   }
+  // ! FireStore utility methods
+  // * Get list of all available Skills (used in the create and update modals)
   public getSkills(): Observable<Array<FirebaseSkillModel>> {
+    const skillsDataSource: Observable<Array<FirebaseSkillModel>> = collectionData<FirebaseSkillModel>(
+      query<FirebaseSkillModel>(
+        collection(this.firestore, 'skills') as CollectionReference<FirebaseSkillModel>
+      ),
+      { idField: 'id' }
+    );
+    return skillsDataSource;
   }
+  // * Get data of a specific Skill
   private getSkill(skillId: string): Observable<FirebaseSkillModel> {
+    const skillDataSource: Observable<FirebaseSkillModel> = docData<FirebaseSkillModel>(
+      doc(this.firestore, 'skills', skillId) as DocumentReference<FirebaseSkillModel>,
+      { idField: 'id' }
     );
+    return skillDataSource;
+  }
+  // * Get data of a specific User
   private getUser(userId: string): Observable<FirebaseUserModel> {
+    const userDocumentRef = doc(this.firestore, 'users', userId) as DocumentReference<FirebaseUserModel>;
+    const userDocumentSnapshotPromise = getDoc(userDocumentRef);
+    const userDataSource: Observable<FirebaseUserModel> = from(userDocumentSnapshotPromise)
     .pipe(
+      map((userSnapshot: DocumentSnapshot<FirebaseUserModel>) => {
+        if (userSnapshot.exists()) {
+          const user: FirebaseUserModel = userSnapshot.data();
+          const age = this.calcUserAge(user.birthdate);
+          const id = userSnapshot.id;
+          return { id, age, ...user } as FirebaseUserModel;
+        }
       })
     );
+    // ? If you want to listen to document changes use docData() instead
+    // const userDataSource: Observable<FirebaseUserModel> = docData<FirebaseUserModel>(
+    //   doc(this.firestore, 'users', userId) as DocumentReference<FirebaseUserModel>,
+    //   { idField: 'id' }
+    // )
+    // .pipe(
+    //   map((user: FirebaseUserModel) => {
+    //     const age = this.calcUserAge(user.birthdate);
+    //     return { age, ...user } as FirebaseUserModel;
+    //   })
+    // );
+    return userDataSource;
   }
+  // * Get all users who share at least 1 skill of the user's 'skills' list
+  private getUsersWithSameSkills(userId: string, skills: Array<FirebaseSkillModel>): Observable<Array<FirebaseListingItemModel>> {
     // Get the users who have at least 1 skill in common
     // Because firestore doesn't have a logical 'OR' operator we need to create multiple queries, one for each skill from the 'skills' list
+    const rawAggregatedUsersWithSameSkillsDataSource: Array<Observable<Array<FirebaseListingItemModel>>> = skills.map(skill => {
+      const usersWithSameSkillDataSource: Observable<Array<FirebaseListingItemModel>> = collectionData<FirebaseListingItemModel>(
+        query<FirebaseListingItemModel>(
+          collection(this.firestore, 'users') as CollectionReference<FirebaseListingItemModel>,
+          where('skills', 'array-contains', skill.id)
+        ),
+        { idField: 'id' }
+      )
+      .pipe(
+        map((users: Array<FirebaseListingItemModel>) => {
+          return users.map((user: FirebaseListingItemModel) => {
+            const age = this.calcUserAge(user.birthdate);
+            return { age, ...user } as FirebaseListingItemModel;
+          });
+        })
+      );
+      return usersWithSameSkillDataSource;
     });
     // Combine all these queries
+    const usersWithSameSkillsDataSource: Observable<Array<FirebaseListingItemModel>> = combineLatest(rawAggregatedUsersWithSameSkillsDataSource)
+    .pipe(
       map((relatedUsers: FirebaseListingItemModel[][]) => {
         // Flatten the array of arrays of FirebaseListingItemModel
         const flattenedRelatedUsers = ([] as FirebaseListingItemModel[]).concat(...relatedUsers);
         return filteredRelatedUsers;
       })
     );
+    return usersWithSameSkillsDataSource;
   }
   private calcUserAge(dateOfBirth: number): number {

src/app/firebase/crud/listing/firebase-listing.page.ts CHANGED Viewed

@@ -58,8 +58,9 @@ export class FirebaseListingPage implements OnInit, OnDestroy {
       dual: new FormControl({lower: 1, upper: 100})
     });
-    this.route.data.subscribe(
-      (resolvedRouteData) => {
         this.listingDataStore = resolvedRouteData['data'];
         // We need to avoid having multiple firebase subscriptions open at the same time to avoid memory leaks
@@ -103,16 +104,17 @@ export class FirebaseListingPage implements OnInit, OnDestroy {
         this.stateSubscription = merge(
           this.listingDataStore.state,
           updateSearchObservable
-        ).subscribe(
-          (state) => {
             this.items = state;
           },
-          (error) => console.log(error),
-          () => console.log('stateSubscription completed')
-        );
       },
-      (error) => console.log(error)
-    );
   }
   async openFirebaseCreateModal() {

       dual: new FormControl({lower: 1, upper: 100})
     });
+    this.route.data
+    .subscribe({
+      next: (resolvedRouteData) => {
         this.listingDataStore = resolvedRouteData['data'];
         // We need to avoid having multiple firebase subscriptions open at the same time to avoid memory leaks
         this.stateSubscription = merge(
           this.listingDataStore.state,
           updateSearchObservable
+        )
+        .subscribe({
+          next: (state) => {
             this.items = state;
           },
+          error: (error) => console.log(error),
+          complete: () => console.log('stateSubscription completed')
+        });
       },
+      error: (error) => console.log(error)
+    });
   }
   async openFirebaseCreateModal() {

src/app/firebase/crud/user/select-image/select-user-image.modal.ts CHANGED Viewed

@@ -31,12 +31,13 @@ export class SelectUserImageModalComponent implements OnInit {
     const dataSource = this.firebaseCrudService.getAvatarsDataSource();
     const dataStore = this.firebaseCrudService.getAvatarsStore(dataSource);
-    dataStore.state.subscribe(
-      (state) => {
         this.avatars = state;
       },
-      (error) => {}
-    );
   }
   dismissModal(avatar?: UserImageModel) {

     const dataSource = this.firebaseCrudService.getAvatarsDataSource();
     const dataStore = this.firebaseCrudService.getAvatarsStore(dataSource);
+    dataStore.state
+    .subscribe({
+      next: (state) => {
         this.avatars = state;
       },
+      error: (error) => console.log(error)
+    });
   }
   dismissModal(avatar?: UserImageModel) {

src/app/firebase/crud/user/update/firebase-update-user.modal.ts CHANGED Viewed

@@ -96,7 +96,7 @@ export class FirebaseUpdateUserModalComponent implements OnInit {
   }
   dismissModal() {
-   this.modalController.dismiss(undefined, undefined, this.modalId);
   }
   async deleteUser() {

   }
   dismissModal() {
+    this.modalController.dismiss(undefined, undefined, this.modalId);
   }
   async deleteUser() {

src/app/food/details/food-details.page.ts CHANGED Viewed

@@ -34,9 +34,12 @@ export class FoodDetailsPage implements OnInit {
         return ResolverHelper.extractData<FoodDetailsModel>(resolvedRouteData.data, FoodDetailsModel);
       })
     )
-    .subscribe((state) => {
-      this.details = state;
-    }, (error) => console.log(error));
   }
   // NOTE: Ionic only calls ngOnDestroy if the page was popped (ex: when navigating back)

         return ResolverHelper.extractData<FoodDetailsModel>(resolvedRouteData.data, FoodDetailsModel);
       })
     )
+    .subscribe({
+      next: (state) => {
+        this.details = state;
+      },
+      error: (error) => console.log(error)
+    });
   }
   // NOTE: Ionic only calls ngOnDestroy if the page was popped (ex: when navigating back)

src/app/food/listing/food-listing.page.ts CHANGED Viewed

@@ -34,9 +34,12 @@ export class FoodListingPage implements OnInit {
         return ResolverHelper.extractData<FoodListingModel>(resolvedRouteData.data, FoodListingModel);
       })
     )
-    .subscribe((state) => {
-      this.listing = state;
-    }, (error) => console.log(error));
   }
   // NOTE: Ionic only calls ngOnDestroy if the page was popped (ex: when navigating back)

         return ResolverHelper.extractData<FoodListingModel>(resolvedRouteData.data, FoodListingModel);
       })
     )
+    .subscribe({
+      next: (state) => {
+        this.listing = state;
+      },
+      error: (error) => console.log(error)
+    });
   }
   // NOTE: Ionic only calls ngOnDestroy if the page was popped (ex: when navigating back)

src/app/getting-started/getting-started.module.ts CHANGED Viewed

@@ -5,6 +5,8 @@ import { Routes, RouterModule } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
 import { ComponentsModule } from '../components/components.module';
 import { GettingStartedPage } from './getting-started.page';
@@ -23,7 +25,8 @@ const routes: Routes = [
     ReactiveFormsModule,
     IonicModule,
     RouterModule.forChild(routes),
-    ComponentsModule
   ],
   declarations: [GettingStartedPage]
 })

 import { IonicModule } from '@ionic/angular';
+import { SwiperModule } from "swiper/angular";
 import { ComponentsModule } from '../components/components.module';
 import { GettingStartedPage } from './getting-started.page';
     ReactiveFormsModule,
     IonicModule,
     RouterModule.forChild(routes),
+    ComponentsModule,
+    SwiperModule
   ],
   declarations: [GettingStartedPage]
 })

src/app/getting-started/getting-started.page.html CHANGED Viewed

@@ -9,9 +9,9 @@
 <ion-content>
   <!-- We need the form wrapping the slides so all the inputs in the different slides are part of the same form -->
   <form class="getting-started-form" [formGroup]="gettingStartedForm">
-    <ion-slides class="getting-started-slides" pager="true">
-      <ion-slide class="browsing-categories-slide question-slide">
-        <ion-row class="slide-inner-row">
           <ion-col class="question-options-col" size="12">
             <h2 class="slide-title">What are you browsing for?</h2>
             <ion-list class="question-options-list">
@@ -44,9 +44,9 @@
             </ion-list>
           </ion-col>
         </ion-row>
-      </ion-slide>
-      <ion-slide class="interests-to-follow-slide question-slide">
-        <ion-row class="slide-inner-row">
           <ion-col class="heading-col">
             <h2 class="slide-title">Pick categories to follow</h2>
             <p class="slide-subtitle">
@@ -121,7 +121,7 @@
             <ion-button class="signup-button" color="secondary" expand="block" [routerLink]="['/auth/signup']">Sign Up</ion-button>
           </ion-col>
         </ion-row>
-      </ion-slide>
-    </ion-slides>
   </form>
 </ion-content>

 <ion-content>
   <!-- We need the form wrapping the slides so all the inputs in the different slides are part of the same form -->
   <form class="getting-started-form" [formGroup]="gettingStartedForm">
+    <swiper class="getting-started-slides" [pagination]="true" (swiper)="swiperInit($event)" (slideChangeTransitionStart)="slideWillChange()">
+      <ng-template swiperSlide>
+        <ion-row class="browsing-categories-slide question-slide slide-inner-row">
           <ion-col class="question-options-col" size="12">
             <h2 class="slide-title">What are you browsing for?</h2>
             <ion-list class="question-options-list">
             </ion-list>
           </ion-col>
         </ion-row>
+      </ng-template>
+      <ng-template swiperSlide>
+        <ion-row class="slide-inner-row interests-to-follow-slide question-slide">
           <ion-col class="heading-col">
             <h2 class="slide-title">Pick categories to follow</h2>
             <p class="slide-subtitle">
             <ion-button class="signup-button" color="secondary" expand="block" [routerLink]="['/auth/signup']">Sign Up</ion-button>
           </ion-col>
         </ion-row>
+      </ng-template>
+    </swiper>
   </form>
 </ion-content>

src/app/getting-started/getting-started.page.ts CHANGED Viewed

@@ -1,8 +1,12 @@
-import { isPlatformBrowser } from '@angular/common';
-import { Component, AfterViewInit, ViewChild, HostBinding, Inject, PLATFORM_ID } from '@angular/core';
 import { FormGroup, FormControl } from '@angular/forms';
-import { IonSlides, MenuController } from '@ionic/angular';
 @Component({
   selector: 'app-getting-started',
@@ -13,15 +17,15 @@ import { IonSlides, MenuController } from '@ionic/angular';
     './styles/getting-started.responsive.scss'
   ]
 })
-export class GettingStartedPage implements AfterViewInit {
-  @ViewChild(IonSlides, { static: true }) slides: IonSlides;
   @HostBinding('class.last-slide-active') isLastSlide = false;
   gettingStartedForm: FormGroup;
   constructor(
-    @Inject(PLATFORM_ID) private platformId: object,
-    public menu: MenuController
   ) {
     this.gettingStartedForm = new FormGroup({
       browsingCategory: new FormControl('men'),
@@ -37,29 +41,24 @@ export class GettingStartedPage implements AfterViewInit {
   }
   // Disable side menu for this page
-  ionViewDidEnter(): void {
     this.menu.enable(false);
   }
   // Restore to default when leaving this page
-  ionViewDidLeave(): void {
     this.menu.enable(true);
   }
-  ngAfterViewInit(): void {
-    // Accessing slides in server platform throw errors
-    if (isPlatformBrowser(this.platformId)) {
-      // ViewChild is set
-      this.slides.isEnd().then(isEnd => {
-        this.isLastSlide = isEnd;
-      });
-      // Subscribe to changes
-      this.slides.ionSlideWillChange.subscribe(changes => {
-        this.slides.isEnd().then(isEnd => {
-          this.isLastSlide = isEnd;
-        });
-      });
-    }
   }
 }

+import { Component, HostBinding, NgZone } from '@angular/core';
 import { FormGroup, FormControl } from '@angular/forms';
+import { MenuController } from '@ionic/angular';
+import { IonicSwiper } from "@ionic/angular";
+import SwiperCore, { Pagination } from "swiper";
+SwiperCore.use([Pagination, IonicSwiper]);
 @Component({
   selector: 'app-getting-started',
     './styles/getting-started.responsive.scss'
   ]
 })
+export class GettingStartedPage {
   @HostBinding('class.last-slide-active') isLastSlide = false;
+  swiperRef: SwiperCore;
   gettingStartedForm: FormGroup;
   constructor(
+    public menu: MenuController,
+    private ngZone: NgZone
   ) {
     this.gettingStartedForm = new FormGroup({
       browsingCategory: new FormControl('men'),
   }
   // Disable side menu for this page
+  public ionViewDidEnter(): void {
     this.menu.enable(false);
   }
   // Restore to default when leaving this page
+  public ionViewDidLeave(): void {
     this.menu.enable(true);
   }
+  public swiperInit(swiper: SwiperCore): void {
+    this.swiperRef = swiper;
+  }
+  public slideWillChange(): void {
+    // ? We need to use ngZone because the change happens outside Angular
+    // (see: https://swiperjs.com/angular#swiper-component-events)
+    this.ngZone.run(() => {
+      this.isLastSlide = this.swiperRef.isEnd;
+    });
   }
 }

src/app/getting-started/styles/getting-started.page.scss CHANGED Viewed

@@ -78,7 +78,7 @@ ion-content {
 }
 .browsing-categories-slide {
-  .slide-inner-row {
     flex-flow: column;
     justify-content: space-between;
   }
@@ -129,12 +129,12 @@ ion-content {
 }
 .interests-to-follow-slide {
-  .slide-inner-row {
     flex-flow: column;
     justify-content: space-between;
     // In the last slide .swiper-pagination is hidden
-    border-width: 0px;
   }
   .heading-col {
@@ -214,7 +214,7 @@ ion-content {
       height: 100%;
       width: 100%;
-      // Note: We cannote change the styles of the .checkbox-icon because it's inside the shadow dom.
       // An alternative would be to set --width and --height to 0px and add a custom overlay and icon in the <custom-checkbox> html
     }
@@ -234,8 +234,8 @@ ion-content {
   }
 }
-// ISSUE: .swiper-paggination gets rendered dynamically. That prevents styling the elements when using the default Angular ViewEncapsulation.None
-//        (Angular doesn't add an '_ngcontent' attribute to the .swiper-paggination because it's dynamically rendered)
 // FIX:   See: https://stackoverflow.com/a/36265072/1116959
 :host ::ng-deep .getting-started-slides {
   .swiper-pagination {

 }
 .browsing-categories-slide {
+  &.slide-inner-row {
     flex-flow: column;
     justify-content: space-between;
   }
 }
 .interests-to-follow-slide {
+  &.slide-inner-row {
     flex-flow: column;
     justify-content: space-between;
     // In the last slide .swiper-pagination is hidden
+    border-width: 0px !important;
   }
   .heading-col {
       height: 100%;
       width: 100%;
+      // Note: We cannot change the styles of the .checkbox-icon because it's inside the shadow dom.
       // An alternative would be to set --width and --height to 0px and add a custom overlay and icon in the <custom-checkbox> html
     }
   }
 }
+// ISSUE: .swiper-pagination gets rendered dynamically. That prevents styling the elements when using the default Angular ViewEncapsulation.None
+//        (Angular doesn't add an '_ngcontent' attribute to the .swiper-pagination because it's dynamically rendered)
 // FIX:   See: https://stackoverflow.com/a/36265072/1116959
 :host ::ng-deep .getting-started-slides {
   .swiper-pagination {

src/app/notifications/notifications.page.ts CHANGED Viewed

@@ -27,9 +27,12 @@ export class NotificationsPage implements OnInit {
         return resolvedRouteData['data'].source;
       })
     )
-    .subscribe((pageData) => {
-      this.notifications = pageData;
-    }, (error) => console.log(error));
   }

         return resolvedRouteData['data'].source;
       })
     )
+    .subscribe({
+      next: (pageData) => {
+        this.notifications = pageData;
+      },
+      error: (error) => console.log(error)
+    });
   }

src/app/pipes/time-ago.pipe.ts CHANGED Viewed

@@ -5,12 +5,12 @@ import * as relativeTime from 'dayjs/plugin/relativeTime';
 @Pipe({ name: 'appTimeAgo' })
 export class TimeAgoPipe implements PipeTransform {
-  transform(value: any): string {
     dayjs.extend(relativeTime);
     let timeAgo = '';
     if (value) {
-      const withoutSuffix = (dayjs(value).diff(dayjs(), 'day') < 0) ? false : true;
       timeAgo = dayjs().to(dayjs(value), withoutSuffix);
     }

 @Pipe({ name: 'appTimeAgo' })
 export class TimeAgoPipe implements PipeTransform {
+  transform(value: any, withoutSuffixParam: boolean = false): string {
     dayjs.extend(relativeTime);
     let timeAgo = '';
     if (value) {
+      const withoutSuffix = withoutSuffixParam || ((dayjs(value).diff(dayjs(), 'day') < 0) ? false : true);
       timeAgo = dayjs().to(dayjs(value), withoutSuffix);
     }

src/app/real-estate/details/real-estate-details.page.ts CHANGED Viewed

@@ -30,8 +30,11 @@ export class RealEstateDetailsPage implements OnInit {
         return ResolverHelper.extractData<RealEstateDetailsModel>(resolvedRouteData.data, RealEstateDetailsModel);
       })
     )
-    .subscribe((state) => {
-      this.details = state;
-    }, (error) => console.log(error));
   }
 }

         return ResolverHelper.extractData<RealEstateDetailsModel>(resolvedRouteData.data, RealEstateDetailsModel);
       })
     )
+    .subscribe({
+      next: (state) => {
+        this.details = state;
+      },
+      error: (error) => console.log(error)
+    });
   }
 }

src/app/real-estate/listing/real-estate-listing.page.ts CHANGED Viewed

@@ -30,8 +30,11 @@ export class RealEstateListingPage implements OnInit {
         return ResolverHelper.extractData<RealEstateListingModel>(resolvedRouteData.data, RealEstateListingModel);
       })
     )
-    .subscribe((state) => {
-      this.listing = state;
-    }, (error) => console.log(error));
   }
 }

         return ResolverHelper.extractData<RealEstateListingModel>(resolvedRouteData.data, RealEstateListingModel);
       })
     )
+    .subscribe({
+      next: (state) => {
+        this.listing = state;
+      },
+      error: (error) => console.log(error)
+    });
   }
 }

src/app/showcase/app-shell/data-store-combined/data-store-combined.page.ts CHANGED Viewed

@@ -31,7 +31,8 @@ export class DataStoreCombinedPage implements OnInit {
     this.tasksCombinedDataStore = new DataStore(shellModel);
     this.tasksCombinedDataStore.load(dataSource);
-    this.tasksCombinedDataStore.state.subscribe(data => {
       this.tasks = data;
     });
   }

     this.tasksCombinedDataStore = new DataStore(shellModel);
     this.tasksCombinedDataStore.load(dataSource);
+    this.tasksCombinedDataStore.state
+    .subscribe(data => {
       this.tasks = data;
     });
   }

src/app/showcase/route-resolvers-ux/progressive-shell-resolvers/progressive-shell-resolvers.page.ts CHANGED Viewed

@@ -24,8 +24,11 @@ export class ProgressiveShellResovlersPage implements OnInit {
       // Extract data for this page
       switchMap((resolvedRouteData) => resolvedRouteData['data'].state)
     )
-    .subscribe((state: any) => {
-      this.routeResolveData = state;
-    }, (error) => console.log(error));
   }
 }

       // Extract data for this page
       switchMap((resolvedRouteData) => resolvedRouteData['data'].state)
     )
+    .subscribe({
+      next: (state: any) => {
+        this.routeResolveData = state;
+      },
+      error: (error) => console.log(error)
+    });
   }
 }

src/app/travel/details/travel-details.page.ts CHANGED Viewed

@@ -35,9 +35,12 @@ export class TravelDetailsPage implements OnInit {
         return ResolverHelper.extractData<TravelDetailsModel>(resolvedRouteData.data['dataStore'], TravelDetailsModel);
       })
     )
-    .subscribe((state) => {
-      this.details = state;
-    }, (error) => console.log(error));
   }
   // NOTE: Ionic only calls ngOnDestroy if the page was popped (ex: when navigating back)

         return ResolverHelper.extractData<TravelDetailsModel>(resolvedRouteData.data['dataStore'], TravelDetailsModel);
       })
     )
+    .subscribe({
+      next: (state) => {
+        this.details = state;
+      },
+      error: (error) => console.log(error)
+    });
   }
   // NOTE: Ionic only calls ngOnDestroy if the page was popped (ex: when navigating back)

src/app/travel/listing/travel-listing.page.ts CHANGED Viewed

@@ -38,9 +38,12 @@ export class TravelListingPage implements OnInit {
         return ResolverHelper.extractData<TravelListingModel>(resolvedRouteData.data['dataStore'], TravelListingModel);
       })
     )
-    .subscribe((state) => {
-      this.listing = state;
-    }, (error) => console.log(error));
   }
   // NOTE: Ionic only calls ngOnDestroy if the page was popped (ex: when navigating back)

         return ResolverHelper.extractData<TravelListingModel>(resolvedRouteData.data['dataStore'], TravelListingModel);
       })
     )
+    .subscribe({
+      next: (state) => {
+        this.listing = state;
+      },
+      error: (error) => console.log(error)
+    });
   }
   // NOTE: Ionic only calls ngOnDestroy if the page was popped (ex: when navigating back)

src/app/user/friends/user-friends.page.ts CHANGED Viewed

@@ -43,12 +43,15 @@ export class UserFriendsPage implements OnInit {
         return ResolverHelper.extractData<UserFriendsModel>(resolvedRouteData.data, UserFriendsModel);
       })
     )
-    .subscribe((state) => {
-      this.data = state;
-      this.friendsList = this.data.friends;
-      this.followersList = this.data.followers;
-      this.followingList = this.data.following;
-    }, (error) => console.log(error));
   }
   segmentChanged(ev): void {

         return ResolverHelper.extractData<UserFriendsModel>(resolvedRouteData.data, UserFriendsModel);
       })
     )
+    .subscribe({
+      next: (state) => {
+        this.data = state;
+        this.friendsList = this.data.friends;
+        this.followersList = this.data.followers;
+        this.followingList = this.data.following;
+      },
+      error: (error) => console.log(error)
+    });
   }
   segmentChanged(ev): void {

src/app/user/profile/user-profile.page.ts CHANGED Viewed

@@ -48,12 +48,15 @@ export class UserProfilePage implements OnInit {
         return ResolverHelper.extractData<UserProfileModel>(resolvedRouteData.data, UserProfileModel);
       })
     )
-    .subscribe((state) => {
-      this.profile = state;
-      // get translations for this page to use in the Language Chooser Alert
-      this.getTranslations();
-    }, (error) => console.log(error));
     this.translate.onLangChange.subscribe(() => this.getTranslations());
   }

         return ResolverHelper.extractData<UserProfileModel>(resolvedRouteData.data, UserProfileModel);
       })
     )
+    .subscribe({
+      next: (state) => {
+        this.profile = state;
+        // get translations for this page to use in the Language Chooser Alert
+        this.getTranslations();
+      },
+      error: (error) => console.log(error)
+    });
     this.translate.onLangChange.subscribe(() => this.getTranslations());
   }

src/app/video-playlist/video-playlist.page.ts CHANGED Viewed

@@ -40,13 +40,16 @@ export class VideoPlaylistPage implements OnInit {
       // Extract data for this page
       switchMap((resolvedRouteData) => resolvedRouteData['data'].state)
     )
-    .subscribe((state: any) => {
-      this.video_playlist_model = state;
-      if (!state.isShell) {
-        this.video_playlist_model.video_playlist = state.videos;
-        this.video_playlist_model.selected_video = state.videos[0];
-      }
-    }, (error) => console.log(error));
   }
   playMedia(media) {

       // Extract data for this page
       switchMap((resolvedRouteData) => resolvedRouteData['data'].state)
     )
+    .subscribe({
+      next: (state: any) => {
+        this.video_playlist_model = state;
+        if (!state.isShell) {
+          this.video_playlist_model.video_playlist = state.videos;
+          this.video_playlist_model.selected_video = state.videos[0];
+        }
+      },
+      error: (error) => console.log(error)
+    });
   }
   playMedia(media) {

src/app/walkthrough/styles/walkthrough.page.scss CHANGED Viewed

@@ -54,7 +54,7 @@ ion-content {
 }
 .illustration-and-decoration-slide {
-  .slide-inner-row {
     --ion-grid-column-padding: 0px;
     flex-flow: column;
@@ -141,9 +141,9 @@ ion-content {
 .last-slide {
   --page-vector-decoration-fill: var(--page-last-slide-background);
-  .slide-inner-row {
     // In the last slide .swiper-pagination is hidden
-    border-width: 0px;
   }
   .info-col {
@@ -207,8 +207,8 @@ ion-content {
   }
 }
-// ISSUE: .swiper-paggination gets rendered dynamically. That prevents styling the elements when using the default Angular ViewEncapsulation.None
-//        (Angular doesn't add an '_ngcontent' attribute to the .swiper-paggination because it's dynamically rendered)
 // FIX:   See: https://stackoverflow.com/a/36265072/1116959
 :host ::ng-deep .walkthrough-slides {
   .swiper-pagination {

 }
 .illustration-and-decoration-slide {
+  &.slide-inner-row {
     --ion-grid-column-padding: 0px;
     flex-flow: column;
 .last-slide {
   --page-vector-decoration-fill: var(--page-last-slide-background);
+  &.slide-inner-row {
     // In the last slide .swiper-pagination is hidden
+    border-width: 0px !important;
   }
   .info-col {
   }
 }
+// ISSUE: .swiper-pagination gets rendered dynamically. That prevents styling the elements when using the default Angular ViewEncapsulation.None
+//        (Angular doesn't add an '_ngcontent' attribute to the .swiper-pagination because it's dynamically rendered)
 // FIX:   See: https://stackoverflow.com/a/36265072/1116959
 :host ::ng-deep .walkthrough-slides {
   .swiper-pagination {

src/app/walkthrough/walkthrough.module.ts CHANGED Viewed

@@ -5,6 +5,8 @@ import { Routes, RouterModule } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
 import { ComponentsModule } from '../components/components.module';
 import { WalkthroughPage } from './walkthrough.page';
@@ -22,7 +24,8 @@ const routes: Routes = [
     FormsModule,
     IonicModule,
     RouterModule.forChild(routes),
-    ComponentsModule
   ],
   declarations: [WalkthroughPage]
 })

 import { IonicModule } from '@ionic/angular';
+import { SwiperModule } from 'swiper/angular';
 import { ComponentsModule } from '../components/components.module';
 import { WalkthroughPage } from './walkthrough.page';
     FormsModule,
     IonicModule,
     RouterModule.forChild(routes),
+    ComponentsModule,
+    SwiperModule
   ],
   declarations: [WalkthroughPage]
 })

src/app/walkthrough/walkthrough.page.html CHANGED Viewed

@@ -7,9 +7,9 @@
 </ion-header>
 <ion-content>
-  <ion-slides class="walkthrough-slides" pager="true">
-    <ion-slide class="first-slide illustration-and-decoration-slide">
-      <ion-row class="slide-inner-row">
         <ion-col class="illustration-col">
           <app-aspect-ratio [ratio]="{w:915, h:849}">
             <app-image-shell class="illustration-image" animation="spinner" [src]="'./assets/sample-images/walkthrough/walkthrough-illustration-1.svg'" [alt]="'walkthrough'"></app-image-shell>
@@ -33,9 +33,9 @@
           </div>
         </ion-col>
       </ion-row>
-    </ion-slide>
-    <ion-slide class="second-slide illustration-and-decoration-slide">
-      <ion-row class="slide-inner-row">
         <ion-col class="illustration-col">
           <app-aspect-ratio [ratio]="{w:1096, h:806}">
             <app-image-shell class="illustration-image" animation="spinner" [src]="'./assets/sample-images/walkthrough/walkthrough-illustration-2.svg'" [alt]="'walkthrough'"></app-image-shell>
@@ -59,9 +59,9 @@
           </div>
         </ion-col>
       </ion-row>
-    </ion-slide>
-    <ion-slide class="third-slide illustration-and-decoration-slide">
-      <ion-row class="slide-inner-row">
         <ion-col class="illustration-col">
           <app-aspect-ratio [ratio]="{w:918, h:703}">
             <app-image-shell class="illustration-image" animation="spinner" [src]="'./assets/sample-images/walkthrough/walkthrough-illustration-3.svg'" [alt]="'walkthrough'"></app-image-shell>
@@ -82,9 +82,9 @@
           </div>
         </ion-col>
       </ion-row>
-    </ion-slide>
-    <ion-slide class="last-slide illustration-and-decoration-slide">
-      <ion-row class="slide-inner-row">
         <ion-col class="illustration-col">
           <app-aspect-ratio [ratio]="{w:924, h:819}">
             <app-image-shell class="illustration-image" animation="spinner" [src]="'./assets/sample-images/walkthrough/walkthrough-illustration-4.svg'" [alt]="'walkthrough'"></app-image-shell>
@@ -118,6 +118,6 @@
           </ion-row>
         </ion-col>
       </ion-row>
-    </ion-slide>
-  </ion-slides>
 </ion-content>

 </ion-header>
 <ion-content>
+  <swiper [pagination]="true" class="walkthrough-slides" (swiper)="setSwiperInstance($event)" (init)="swiperInit()" (slideChangeTransitionStart)="slideWillChange()">
+    <ng-template swiperSlide>
+      <ion-row class="slide-inner-row first-slide illustration-and-decoration-slide">
         <ion-col class="illustration-col">
           <app-aspect-ratio [ratio]="{w:915, h:849}">
             <app-image-shell class="illustration-image" animation="spinner" [src]="'./assets/sample-images/walkthrough/walkthrough-illustration-1.svg'" [alt]="'walkthrough'"></app-image-shell>
           </div>
         </ion-col>
       </ion-row>
+    </ng-template>
+    <ng-template swiperSlide>
+      <ion-row class="second-slide illustration-and-decoration-slide slide-inner-row">
         <ion-col class="illustration-col">
           <app-aspect-ratio [ratio]="{w:1096, h:806}">
             <app-image-shell class="illustration-image" animation="spinner" [src]="'./assets/sample-images/walkthrough/walkthrough-illustration-2.svg'" [alt]="'walkthrough'"></app-image-shell>
           </div>
         </ion-col>
       </ion-row>
+    </ng-template>
+    <ng-template swiperSlide>
+      <ion-row class="third-slide illustration-and-decoration-slide slide-inner-row">
         <ion-col class="illustration-col">
           <app-aspect-ratio [ratio]="{w:918, h:703}">
             <app-image-shell class="illustration-image" animation="spinner" [src]="'./assets/sample-images/walkthrough/walkthrough-illustration-3.svg'" [alt]="'walkthrough'"></app-image-shell>
           </div>
         </ion-col>
       </ion-row>
+    </ng-template>
+    <ng-template swiperSlide>
+      <ion-row class="last-slide illustration-and-decoration-slide slide-inner-row">
         <ion-col class="illustration-col">
           <app-aspect-ratio [ratio]="{w:924, h:819}">
             <app-image-shell class="illustration-image" animation="spinner" [src]="'./assets/sample-images/walkthrough/walkthrough-illustration-4.svg'" [alt]="'walkthrough'"></app-image-shell>
           </ion-row>
         </ion-col>
       </ion-row>
+    </ng-template>
+  </swiper>
 </ion-content>

src/app/walkthrough/walkthrough.page.ts CHANGED Viewed

@@ -1,7 +1,12 @@
-import { isPlatformBrowser } from '@angular/common';
-import { Component, AfterViewInit, ViewChild, HostBinding, PLATFORM_ID, Inject } from '@angular/core';
-import { IonSlides, MenuController } from '@ionic/angular';
 @Component({
   selector: 'app-walkthrough',
@@ -13,16 +18,17 @@ import { IonSlides, MenuController } from '@ionic/angular';
   ]
 })
 export class WalkthroughPage implements AfterViewInit {
-  @ViewChild(IonSlides, { static: true }) slides: IonSlides;
   @HostBinding('class.first-slide-active') isFirstSlide = true;
   @HostBinding('class.last-slide-active') isLastSlide = false;
   constructor(
-    @Inject(PLATFORM_ID) private platformId: object,
-    public menu: MenuController
   ) { }
   // Disable side menu for this page
@@ -37,34 +43,46 @@ export class WalkthroughPage implements AfterViewInit {
   ngAfterViewInit(): void {
     // Accessing slides in server platform throw errors
-    if (isPlatformBrowser(this.platformId)) {
-      this.slides.ionSlidesDidLoad.subscribe(() => this.slides.update());
-      // ViewChild is set
-      this.slides.isBeginning().then(isBeginning => {
-        this.isFirstSlide = isBeginning;
-      });
-      this.slides.isEnd().then(isEnd => {
-        this.isLastSlide = isEnd;
       });
-      // Subscribe to changes
-      this.slides.ionSlideWillChange.subscribe(changes => {
-        this.slides.isBeginning().then(isBeginning => {
-          this.isFirstSlide = isBeginning;
-        });
-        this.slides.isEnd().then(isEnd => {
-          this.isLastSlide = isEnd;
-        });
       });
-    }
   }
-  skipWalkthrough(): void {
     // Skip to the last slide
-    this.slides.length().then(length => {
-      this.slides.slideTo(length);
-    });
   }
 }

+import { Component, AfterViewInit, ViewChild, HostBinding, NgZone } from '@angular/core';
+import { MenuController } from '@ionic/angular';
+import { IonicSwiper } from '@ionic/angular';
+import SwiperCore, { Pagination } from 'swiper';
+import { SwiperComponent } from 'swiper/angular';
+SwiperCore.use([Pagination, IonicSwiper]);
 @Component({
   selector: 'app-walkthrough',
   ]
 })
 export class WalkthroughPage implements AfterViewInit {
+  swiperRef: SwiperCore;
+  @ViewChild(SwiperComponent, { static: false }) swiper?: SwiperComponent;
   @HostBinding('class.first-slide-active') isFirstSlide = true;
   @HostBinding('class.last-slide-active') isLastSlide = false;
   constructor(
+    public menu: MenuController,
+    private ngZone: NgZone
   ) { }
   // Disable side menu for this page
   ngAfterViewInit(): void {
     // Accessing slides in server platform throw errors
+    // if (isPlatformBrowser(this.platformId)) {
+    this.swiperRef = this.swiper.swiperRef;
+    this.swiperRef.on('slidesLengthChange', () => {
+      // ? We need to use ngZone because the change happens outside Angular
+      // (see: https://swiperjs.com/angular#swiper-component-events)
+      this.ngZone.run(() => {
+        this.markSlides(this.swiperRef);
       });
+    });
+    this.swiperRef.on('slideChange', () => {
+      // ? We need to use ngZone because the change happens outside Angular
+      // (see: https://swiperjs.com/angular#swiper-component-events)
+      this.ngZone.run(() => {
+        this.markSlides(this.swiperRef);
       });
+    });
+    // }
+  }
+  public setSwiperInstance(swiper: SwiperCore): void {
+    // console.log('setSwiperInstance');
   }
+  public swiperInit(): void {
+    // console.log('swiperInit');
+  }
+  public slideWillChange(): void {
+    // console.log('slideWillChange');
+  }
+  public markSlides(swiper: SwiperCore): void {
+    this.isFirstSlide = (swiper.isBeginning || swiper.activeIndex === 0);
+    this.isLastSlide = swiper.isEnd;
+  }
+  public skipWalkthrough(): void {
     // Skip to the last slide
+    this.swiperRef.slideTo(this.swiperRef.slides.length - 1);
   }
 }

src/assets/icon/favicon.ico CHANGED Viewed

Binary file

src/global.scss CHANGED Viewed

@@ -12,6 +12,11 @@
 @import "~@ionic/angular/css/text-transformation.css";
 @import "~@ionic/angular/css/flex-utils.css";
 // EXTRA GLOBAL STYLES
 // Add custom Ionic Colors
 @import "theme/custom-ion-colors.scss";

 @import "~@ionic/angular/css/text-transformation.css";
 @import "~@ionic/angular/css/flex-utils.css";
+@import "~swiper/scss";
+@import "~swiper/scss/autoplay";
+@import "~swiper/scss/pagination";
+@import "~@ionic/angular/css/ionic-swiper";
 // EXTRA GLOBAL STYLES
 // Add custom Ionic Colors
 @import "theme/custom-ion-colors.scss";

src/manifest.webmanifest CHANGED Viewed

@@ -1,7 +1,7 @@
 {
-  "name": "Ionic5FullApp",
   "description": "The most advanced and complete Mobile & PWA Ionic starter app template",
-  "short_name": "Ionic5FullApp",
   "theme_color": "#1C1C1C",
   "background_color": "#000000",
   "display": "standalone",

 {
+  "name": "Ionic6FullApp-PRO",
   "description": "The most advanced and complete Mobile & PWA Ionic starter app template",
+  "short_name": "Ionic6FullApp-PRO",
   "theme_color": "#1C1C1C",
   "background_color": "#000000",
   "display": "standalone",