Diff to HTML by rtfpessoa

Files changed (54) show

.firebaserc CHANGED Viewed

@@ -1,37 +1,23 @@
 {
   "projects": {
     "dev": "dev-ion4fullpwa",
-    "prod": "ion4fullpwa",
-    "pro": "pro-ion4fullpwa",
     "elite": "elite-ionic-6-full-app"
   },
   "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"
         ]
       }
     },
-    "elite-ionic-6-full-app": {
       "hosting": {
-        "11-2022-release": [
-          "elite-ionic-6-full-app"
         ]
       }
     }
-  }
 }

 {
   "projects": {
     "dev": "dev-ion4fullpwa",
     "elite": "elite-ionic-6-full-app"
   },
   "targets": {
+    "elite-ionic-6-full-app": {
       "hosting": {
+        "02-2023-release": [
+          "elite-ionic-6-full-app"
         ]
       }
     },
+    "dev-ion4fullpwa": {
       "hosting": {
+        "02-2023-release": [
+          "dev-ionic-6-full-app"
         ]
       }
     }
+  },
+  "etags": {}
 }

DIFF.md CHANGED Viewed

@@ -1,32 +1,34 @@
 ## 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
@@ -38,11 +40,11 @@ diff2html --style side --file diff/previews/pro-vs-elite_android-changelog.html
 diff2html --style side --file diff/previews/pro-vs-elite_ios-changelog.html --input file -- diff/pro-vs-elite_ios-changelog.diff
-diff2html --style side --file diff/previews/last-pro-update-vs-current-pro_changelog.html --input file -- diff/last-pro-update-vs-current-pro_changelog.diff
-diff2html --style side --file diff/previews/last-pro-update-vs-current-pro_android-changelog.html --input file -- diff/last-pro-update-vs-current-pro_android-changelog.diff
-diff2html --style side --file diff/previews/last-pro-update-vs-current-pro_ios-changelog.html --input file -- diff/last-pro-update-vs-current-pro_ios-changelog.diff
 ```
 *To open the visual diff on the browser*
@@ -53,9 +55,9 @@ 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
 ```

 ## Generate diff file
 *PRO vs ELITE (**no /android or /ios configs**)*
 ```bash
+git diff pro-version..elite-update-1 --diff-filter=ADCMRT ':!package-lock.json' ':!dist' ':!diff' ':!.gradle/*' ':!android' ':!ios' ':!*.diff' ':!*.png' ':!*.svg' > diff/pro-vs-elite_changelog.diff
 ```
 *PRO vs ELITE (**android config**)*
 ```bash
+git diff pro-version..elite-update-1 --diff-filter=ADCMRT -- android/ ':!*.svg' > diff/pro-vs-elite_android-changelog.diff
 ```
 *PRO vs ELITE (**ios config**)*
 ```bash
+git diff pro-version..elite-update-1 --diff-filter=ADCMRT -- ios/ > diff/pro-vs-elite_ios-changelog.diff
 ```
+---
+*Last ELITE update (**11-2022**) vs Current ELITE update (**02-2023**)*
 ```bash
+git diff 11-2022_elite-release..elite-update-1 --diff-filter=ADCMRT ':!package-lock.json' ':!dist' ':!diff' ':!.gradle/*' ':!android' ':!ios' ':!*.diff' ':!*.png' ':!*.svg' > diff/last-elite-update-vs-current-elite_changelog.diff
 ```
+*Last ELITE update (**11-2022**) vs Current ELITE update (**02-2023**) (**android config**)*
 ```bash
+git diff 11-2022_elite-release..elite-update-1 --diff-filter=ADCMRT -- android/ ':!*.svg' > diff/last-elite-update-vs-current-elite_android-changelog.diff
 ```
+*Last ELITE update (**11-2022**) vs Current ELITE update (**02-2023**) (**ios config**)*
 ```bash
+git diff 11-2022_elite-release..elite-update-1 --diff-filter=ADCMRT -- ios/ > diff/last-elite-update-vs-current-elite_ios-changelog.diff
 ```
 ## Generate visual diff HTML file
 diff2html --style side --file diff/previews/pro-vs-elite_ios-changelog.html --input file -- diff/pro-vs-elite_ios-changelog.diff
+diff2html --style side --file diff/previews/last-elite-update-vs-current-elite_changelog.html --input file -- diff/last-elite-update-vs-current-elite_changelog.diff
+diff2html --style side --file diff/previews/last-elite-update-vs-current-elite_android-changelog.html --input file -- diff/last-elite-update-vs-current-elite_android-changelog.diff
+diff2html --style side --file diff/previews/last-elite-update-vs-current-elite_ios-changelog.html --input file -- diff/last-elite-update-vs-current-elite_ios-changelog.diff
 ```
 *To open the visual diff on the browser*
 diff2html --style side --input file -- diff/pro-vs-elite_ios-changelog.diff
+diff2html --style side --input file -- diff/last-elite-update-vs-current-elite_changelog.diff
+diff2html --style side --input file -- diff/last-elite-update-vs-current-elite_android-changelog.diff
+diff2html --style side --input file -- diff/last-elite-update-vs-current-elite_ios-changelog.diff
 ```

FIREBASE.md CHANGED Viewed

@@ -1,23 +1,24 @@
-# Prepare assets to deploy
 Before deploying the app to Firebase Hosting, run `ionic build --prod`
-# Multiple Environments with Firebase
 For managing one site across different environments, we recommend multiple projects for promoting best practices of each environment having its own set of Firebase resources.
-For example for this repo we will have two firebase projects:
 - dev-ion4fullpwa
-- ion4fullpwa
-## Check available alias
 Before deploying to Firebase Hosting make sure you are using the correct alias (dev, prod)
 `firebase use` will list all the alias available
 ```
 * dev (dev-ion4fullpwa)
-  prod (ion4fullpwa)
-  pro (pro-ion4fullpwa)
 ```
-## Create alias
 If you don't see these alias (dev, prod), you should create them
 `firebase use --add`
 ```
@@ -25,7 +26,7 @@ If you don't see these alias (dev, prod), you should create them
 ? What alias do you want to use for this project? (e.g. staging) prod
 ```
-## Select alias (switching environments)
 `firebase use dev`
 You can also use the `-P` flag to specify an alias like this:
@@ -35,15 +36,15 @@ 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
@@ -63,11 +64,11 @@ firebase target:apply hosting 11-2022-release elite-ionic-6-full-app -P elite
 ```
-## [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
 ```
@@ -76,9 +77,90 @@ firebase deploy --only hosting:ionic-6 -P dev
 firebase deploy --only hosting:11-2022-release -P elite
 ```
-## Create channel
-- CHANNEL_ID = dev
 ``` bash
-firebase hosting:channel:deploy dev --only ionic-6 -P dev
 ```

+# Firebase instructions
+### Prepare assets to deploy
 Before deploying the app to Firebase Hosting, run `ionic build --prod`
+### Multiple Environments with Firebase
 For managing one site across different environments, we recommend multiple projects for promoting best practices of each environment having its own set of Firebase resources.
+For example for this repo we will have two Firebase projects:
 - dev-ion4fullpwa
+- elite-ionic-6-full-app
+### Check available alias
 Before deploying to Firebase Hosting make sure you are using the correct alias (dev, prod)
 `firebase use` will list all the alias available
 ```
 * dev (dev-ion4fullpwa)
+  elite (elite-ionic-6-full-app)
 ```
+### Create alias
 If you don't see these alias (dev, prod), you should create them
 `firebase use --add`
 ```
 ? What alias do you want to use for this project? (e.g. staging) prod
 ```
+### Select alias (switching environments)
 `firebase use dev`
 You can also use the `-P` flag to specify an alias like this:
 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
 ```
+### [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
 ```
 firebase deploy --only hosting:11-2022-release -P elite
 ```
+``` bash
+firebase deploy --only hosting:02-2023-release -P elite
+```
+### Create preview channel
+> Preview channels don't have Firebase auth configured automatically `Unable to add channel domain to Firebase Auth`
+- CHANNEL_ID = 0-2-0
+- TARGET_NAME = 02-2023-release
+- PROJECT_ALIAS = dev
+``` bash
+firebase hosting:channel:deploy 0-2-0 --only 02-2023-release -P dev
+```
+---
+# Update release process
+## DEV
+First test the changes on the dev site (dev-ionic-6-full-app)
+### 1 - Create new target
+> This updates the `.firebaserc` file
+- TARGET_NAME = 02-2023-release
+- RESOURCE_IDENTIFIER (the SITE_ID) = dev-ionic-6-full-app
+- PROJECT_ALIAS = dev
+``` bash
+firebase target:apply hosting 02-2023-release dev-ionic-6-full-app -P dev
+```
+### 2 - Update firebase.json
+> Manually update the file and add the new target (`02-2023-release`) config (just copy and paste from the previous one)
+### [OPTIONAL] - Create preview channel for the latest update you want to test live
+> Preview channels don't have Firebase auth configured automatically `Unable to add channel domain to Firebase Auth`
+- CHANNEL_ID = 0-2-0
+- TARGET_NAME = 02-2023-release
+- PROJECT_ALIAS = dev
 ``` bash
+firebase hosting:channel:deploy 0-2-0 --only 02-2023-release -P dev
 ```
+### 3 - Deploy and test new version of the site
+> Deploy the new version of the site
+- TARGET_NAME = 02-2023-release
+- PROJECT_ALIAS = dev
+``` bash
+firebase deploy --only hosting:02-2023-release -P dev
+```
+> Go to the preview channel and test it
+[https://dev-ionic-6-full-app.web.app]
+---
+## LIVE (prod)
+After you test the new version of the site, you can deploy to the production site (elite-ionic-6-full-app)
+### 1 - Create new target
+> This updates the `.firebaserc` file
+- TARGET_NAME = 02-2023-release
+- RESOURCE_IDENTIFIER (the SITE_ID) = elite-ionic-6-full-app
+- PROJECT_ALIAS = elite
+``` bash
+firebase target:apply hosting 02-2023-release elite-ionic-6-full-app -P elite
+```
+### 2 - Deploy and test new version of the site
+> Deploy the new version of the site
+- TARGET_NAME = 02-2023-release
+- PROJECT_ALIAS = elite
+``` bash
+firebase deploy --only hosting:02-2023-release -P elite
+```
+> Go to the preview channel and test it
+[https://elite-ionic-6-full-app.web.app]

README.md CHANGED Viewed

@@ -22,7 +22,6 @@ Run `npm run dev:ssr`
 In production, run `npm run build:ssr && npm run serve:ssr`
 ### To test the app as a Native App
 This project uses [Capacitor](https://capacitor.ionicframework.com/docs/) (spiritual successor to Cordova).
 [Read this post](https://ionicthemes.com/tutorials/about/native-cross-platform-web-apps-with-ionic-capacitor) to get an introduction about Capacitor and learn the main differences between Capacitor and Cordova.
@@ -35,8 +34,30 @@ The Capacitor workflow involves a few consistent tasks:
 - [Open your Native IDE](https://capacitor.ionicframework.com/docs/basics/workflow/#3-open-your-native-ide)
 - [Periodic Maintenance](https://capacitor.ionicframework.com/docs/basics/workflow/#4-periodic-maintenance)
 #### iOS Platform
-This app has an ios folder which contains the iOS native app.
 Read how to [build this app for iOS](https://capacitor.ionicframework.com/docs/basics/building-your-app#ios).
 #### Android Platform
@@ -44,7 +65,7 @@ This app has an android folder which contains the Android native app.
 Read how to [build this app for Android](https://capacitor.ionicframework.com/docs/basics/building-your-app#android).
 ### Want to use Cordova?
-The PRO version of the template uses Capacitor instead of Cordova, however, if you are not yet ready to use it, in the following link we show you how to remove Capacitor and add Cordova to this project: https://ionic-4-full-starter-app-docs.ionicthemes.com/capacitor#steps-to-remove-capacitor-and-add-cordova
 ## Support
 Drop us a line to contact@ionicthemes.com

 In production, run `npm run build:ssr && npm run serve:ssr`
 ### To test the app as a Native App
 This project uses [Capacitor](https://capacitor.ionicframework.com/docs/) (spiritual successor to Cordova).
 [Read this post](https://ionicthemes.com/tutorials/about/native-cross-platform-web-apps-with-ionic-capacitor) to get an introduction about Capacitor and learn the main differences between Capacitor and Cordova.
 - [Open your Native IDE](https://capacitor.ionicframework.com/docs/basics/workflow/#3-open-your-native-ide)
 - [Periodic Maintenance](https://capacitor.ionicframework.com/docs/basics/workflow/#4-periodic-maintenance)
+#### Building your web code
+> Once you are ready to test your web app on a mobile device, you'll need to build your web app for distribution.
+Run `ionic build`
+#### Syncing your web code to your Capacitor project
+> Once your web code has been built for distribution, you will need to push your web code to the web native Capacitor application.
+Run `npx cap sync`
+> Running `npx cap sync` will copy over your already built web bundle to both your Android and iOS projects as well as update the native dependencies that Capacitor uses.
+#### Testing your Capacitor app
+> Once you've synced over your web bundle to your native project, it is time to test your application on a mobile device.
+Run `npx cap run ios` and `npx cap run android`
+##### Open your Native IDE
+> If you'd like more control over your native project you can quickly open the native IDEs using the Capacitor CLI.
+Run `npx cap open ios` and `npx cap open android`
 #### iOS Platform
+This app has an iOS folder which contains the iOS native app.
 Read how to [build this app for iOS](https://capacitor.ionicframework.com/docs/basics/building-your-app#ios).
 #### Android Platform
 Read how to [build this app for Android](https://capacitor.ionicframework.com/docs/basics/building-your-app#android).
 ### Want to use Cordova?
+The ELITE version of the template uses Capacitor instead of Cordova, however, if you are not yet ready to use it, in the following link we show you how to remove Capacitor and add Cordova to this project: https://ionic-4-full-starter-app-docs.ionicthemes.com/capacitor#steps-to-remove-capacitor-and-add-cordova
 ## Support
 Drop us a line to contact@ionicthemes.com

SCAFFOLDING.md CHANGED Viewed

@@ -42,6 +42,11 @@ ng generate module visualizations/charts
 ng generate module visualizations/charts/charts-shared --flat
 ```
 #### Visualizations / Charts / Custom Doughnut Chart
 ``` bash
 ng generate component visualizations/charts/custom-doughnut-chart --module visualizations/charts/charts-shared --export true --skip-tests --style scss

 ng generate module visualizations/charts/charts-shared --flat
 ```
+#### Visualizations / Charts / Custom Progress Bar
+``` bash
+ng generate directive visualizations/charts/custom-progress-bar --module visualizations/charts/charts-shared --export true --skip-tests
+```
 #### Visualizations / Charts / Custom Doughnut Chart
 ``` bash
 ng generate component visualizations/charts/custom-doughnut-chart --module visualizations/charts/charts-shared --export true --skip-tests --style scss

UPDATE.md CHANGED Viewed

@@ -1,4 +1,50 @@
-### Update Ionic dependencies
 ``` bash
 ng update @ionic/angular@latest @ionic/angular-server@latest --create-commits
 ```
@@ -7,3 +53,186 @@ ng update @ionic/angular@latest @ionic/angular-server@latest --create-commits
 ``` bash
 ng update @ionic/angular-toolkit @ionic/cli --create-commits
 ```

+# Update process
+## Capacitor 4
+### Update from Capacitor 3 to Capacitor 4
+> Install the latest version of the Capacitor CLI to your project
+``` bash
+npm i -D @capacitor/cli@latest
+```
+>Use the CLI to handle the migration for you
+``` bash
+npx cap migrate
+```
+The migration should be smooth, and all the steps required both for iOS and Android are handled by the CLI. However, you can check both iOS and Android specific migration steps here:
+- [iOS update](https://capacitorjs.com/docs/updating/4-0#ios)
+- [Android update](https://capacitorjs.com/docs/updating/4-0#android)
+---
+### Update Capacitor plugins
+> All Capacitor official plugins were updated when running the migration tool.
+> The Capacitor community plugins need to be updated manually
+``` bash
+npm install --save @capacitor-firebase/authentication@1.3.0
+```
+> CapacitorHttp is now part of the official plugins @capacitor/core
+``` bash
+npm uninstall --save @capacitor-community/http
+```
+> Make sure you run this command after updating the Capacitor plugins
+``` bash
+npx cap sync
+```
+---
+## Ionic 6.5.0
+### Update to Ionic 6.5.0
 ``` bash
 ng update @ionic/angular@latest @ionic/angular-server@latest --create-commits
 ```
 ``` bash
 ng update @ionic/angular-toolkit @ionic/cli --create-commits
 ```
+--
+## Angular 15
+> Make sure the Angular CLI is up-to-date
+``` bash
+npm install -g @angular/cli
+```
+### Update from Angular 13 to Angular 14
+> We should update first to Angular 14 and then to Angular 15
+``` bash
+ng update @nguniversal/express-engine@14 @angular/cdk@14 @nguniversal/builders@14 @angular-eslint/schematics@14 @angular/core@14 @angular/cli@14 --create-commits
+```
+### Update from Angular 14 to Angular 15
+> Then we can update Angular 15
+``` bash
+ng update @angular/fire @nguniversal/express-engine@15 @angular/cdk@15 @nguniversal/builders@15 @angular-eslint/schematics@15 @angular/core@15 @angular/cli@15 --create-commits
+```
+## Other dependencies
+> First check outdated dependencies by running this command
+``` bash
+npm outdated --depth=0 --long
+```
+### Update dependencies
+``` bash
+npm install --save @videogular/ngx-videogular@7
+npm install --save @swimlane/ngx-charts@20.1.2
+npm install --save firebase
+npm install --save core-js
+npm install --save date-fns
+npm install --save dayjs
+npm install --save google-libphonenumber
+npm install --save rxjs@7.8.0
+npm install --save swiper
+npm install --save tslib
+npm install --save zone.js
+npm install --save express
+```
+### Update dev dependencies
+``` bash
+npm install --save-dev @commitlint/cli @commitlint/config-angular
+npm install --save-dev @types/express @types/node
+npm install --save-dev @webcomponents/webcomponentsjs
+npm install --save-dev ts-node
+```
+### Remove Bootstrap
+> We did some changes and is no longer needed as a dependency for the template
+``` bash
+npm uninstall --save @ng-bootstrap/ng-bootstrap bootstrap @popperjs/core
+```
+# 2023-02-01 Updated dependencies list
+> Check by running this command:
+``` bash
+npm list --depth=0
+```
+- @angular-devkit/architect@0.1501.2
+- @angular-devkit/build-angular@15.1.2
+- @angular-devkit/core@15.1.2
+- @angular-devkit/schematics@15.1.2
+- @angular-eslint/builder@15.2.0
+- @angular-eslint/eslint-plugin@15.2.0
+- @angular-eslint/eslint-plugin-template@15.2.0
+- @angular-eslint/schematics@15.2.0
+- @angular-eslint/template-parser@15.2.0
+- @angular/animations@15.1.1
+- @angular/cdk@15.1.1
+- @angular/cli@15.1.2
+- @angular/common@15.1.1
+- @angular/compiler@15.1.1
+- @angular/compiler-cli@15.1.1
+- @angular/core@15.1.1
+- @angular/fire@7.5.0
+- @angular/forms@15.1.1
+- @angular/language-service@15.1.1
+- @angular/localize@15.1.1
+- @angular/platform-browser@15.1.1
+- @angular/platform-browser-dynamic@15.1.1
+- @angular/platform-server@15.1.1
+- @angular/router@15.1.1
+- @angular/service-worker@15.1.1
+- @capacitor-firebase/authentication@1.3.0
+- @capacitor/android@4.6.2
+- @capacitor/app@4.1.1
+- @capacitor/cli@4.6.2
+- @capacitor/core@4.6.2
+- @capacitor/geolocation@4.1.0
+- @capacitor/haptics@4.1.0
+- @capacitor/ios@4.6.2
+- @capacitor/keyboard@4.1.1
+- @capacitor/share@4.1.0
+- @capacitor/splash-screen@4.1.3
+- @capacitor/status-bar@4.1.1
+- @commitlint/cli@17.4.2
+- @commitlint/config-angular@17.4.2
+- @ionic/angular@6.5.0
+- @ionic/angular-server@6.5.0
+- @ionic/angular-toolkit@7.0.0
+- @ionic/cli@6.20.8
+- @nguniversal/builders@15.1.0
+- @nguniversal/express-engine@15.1.0
+- @ngx-translate/core@14.0.0
+- @ngx-translate/http-loader@7.0.0
+- @swimlane/ngx-charts@20.1.2
+- @types/core-js@2.5.5
+- @types/express@4.17.15
+- @types/googlemaps@3.43.3
+- @types/node@17.0.45
+- @typescript-eslint/eslint-plugin@5.48.2
+- @typescript-eslint/parser@5.48.2
+- @videogular/ngx-videogular@7.0.1
+- @webcomponents/webcomponentsjs@2.7.0
+- angular-pipes@10.0.0
+- cordova-res@0.15.4
+- core-js@3.27.2
+- date-fns@2.29.3
+- dayjs@1.11.7
+- eslint@8.32.0
+- express@4.18.2
+- firebase@9.16.0
+- google-libphonenumber@3.2.31
+- husky@4.3.8
+- jetifier@2.0.0
+- mobile-detect@1.4.5
+- rxjs@7.8.0
+- swiper@8.4.6
+- ts-node@10.9.1
+- tslib@2.4.1
+- typescript@4.8.4
+- zone.js@0.11.8
+---
+# Tags
+To create an annotated tag, enter the following:
+``` bash
+git tag -a 02-2023_elite-update -m '02-2023 ELITE update'
+```
+Then run:
+``` bash
+git push origin --tags
+```
+---
+# Miscellaneous
+> When updating an existing project you may want to get a specific file from another branch
+### Cherry-pick files from another git branch
+> Get just one file from another branch
+``` bash
+git checkout elite-release-1 -- src/app/activity/activities-filter-modal/activities-filter.modal.html
+git checkout elite-release-1 -- src/app/activity/activities-filter-modal/activities-filter.modal.scss
+git checkout elite-release-1 -- src/app/app.component.html
+git checkout elite-release-1 -- src/app/app.component.ts
+git checkout elite-release-1 -- src/app/showcase/showcase.module.ts
+git checkout elite-release-1 -- src/app/visualizations/charts/custom-doughnut-chart/custom-doughnut-chart.component.html
+git checkout elite-release-1 -- src/app/visualizations/charts/custom-doughnut-chart/custom-doughnut-chart.component.ts
+git checkout elite-release-1 -- src/app/visualizations/charts/custom-line-chart/custom-line-chart.component.html
+git checkout elite-release-1 -- src/app/visualizations/charts/custom-line-chart/custom-line-chart.component.scss
+git checkout elite-release-1 -- src/app/visualizations/charts/custom-line-chart/custom-line-chart.component.ts
+git checkout elite-release-1 -- src/app/visualizations/visualizations-routing.module.ts
+git checkout elite-release-1 -- src/app/visualizations/visualizations.module.ts
+git checkout elite-release-1 -- firebase.json
+git checkout elite-release-1 -- FIREBASE.md
+git checkout elite-release-1 -- .firebaserc
+```

angular.json CHANGED Viewed

@@ -1,7 +1,6 @@
 {
   "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
   "version": 1,
-  "defaultProject": "app",
   "newProjectRoot": "projects",
   "projects": {
     "app": {
@@ -186,7 +185,10 @@
     }
   },
   "cli": {
-    "defaultCollection": "@angular-eslint/schematics"
   },
   "schematics": {
     "@ionic/angular-toolkit:component": {
@@ -194,6 +196,12 @@
     },
     "@ionic/angular-toolkit:page": {
       "styleext": "scss"
     }
   }
-}

 {
   "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
     "app": {
     }
   },
   "cli": {
+    "schematicCollections": [
+      "@ionic/angular-toolkit",
+      "@angular-eslint/schematics"
+    ]
   },
   "schematics": {
     "@ionic/angular-toolkit:component": {
     },
     "@ionic/angular-toolkit:page": {
       "styleext": "scss"
+    },
+    "@angular-eslint/schematics:application": {
+      "setParserOptionsProject": true
+    },
+    "@angular-eslint/schematics:library": {
+      "setParserOptionsProject": true
     }
   }
+}

firebase.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "hosting": [
     {
-      "target": "11-2022-release",
       "public": "dist/app/browser",
       "ignore": [
         "firebase.json",
@@ -43,49 +43,7 @@
       ]
     },
     {
-      "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",

 {
   "hosting": [
     {
+      "target": "02-2023-release",
       "public": "dist/app/browser",
       "ignore": [
         "firebase.json",
       ]
     },
     {
+      "target": "11-2022-release",
       "public": "dist/app/browser",
       "ignore": [
         "firebase.json",

package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "IonicFullApp-ELITE",
   "description": "The most advanced and complete Mobile & PWA Ionic starter app template",
-  "version": "0.0.1",
   "author": "IonicThemes",
   "contributors": [
     "Dayana <dayana@ionicthemes.com>",
@@ -21,85 +21,82 @@
     "postinstall": "jetifier"
   },
   "dependencies": {
-    "@angular/animations": "^13.1.1",
-    "@angular/cdk": "^13.3.0",
-    "@angular/common": "^13.1.1",
-    "@angular/core": "^13.1.1",
-    "@angular/fire": "^7.3.0",
-    "@angular/forms": "^13.1.1",
-    "@angular/localize": "^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-community/http": "^1.4.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.3.5",
-    "@ionic/angular-server": "^6.3.5",
-    "@ng-bootstrap/ng-bootstrap": "^12.1.2",
-    "@nguniversal/express-engine": "^13.0.1",
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^7.0.0",
-    "@popperjs/core": "^2.10.2",
-    "@swimlane/ngx-charts": "^20.1.0",
-    "@videogular/ngx-videogular": "^5.0.1",
     "angular-pipes": "^10.0.0",
-    "bootstrap": "^5.1.3",
-    "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"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "0.1301.2",
-    "@angular-devkit/build-angular": "~13.1.2",
-    "@angular-devkit/core": "^13.1.2",
-    "@angular-devkit/schematics": "^13.1.2",
-    "@angular-eslint/builder": "13.0.1",
-    "@angular-eslint/eslint-plugin": "13.0.1",
-    "@angular-eslint/eslint-plugin-template": "13.0.1",
-    "@angular-eslint/schematics": "13.0.1",
-    "@angular-eslint/template-parser": "13.0.1",
-    "@angular/cli": "~13.1.2",
-    "@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": "^7.0.0",
-    "@ionic/cli": "6.20.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.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"
   }
 }

 {
   "name": "IonicFullApp-ELITE",
   "description": "The most advanced and complete Mobile & PWA Ionic starter app template",
+  "version": "0.2.0",
   "author": "IonicThemes",
   "contributors": [
     "Dayana <dayana@ionicthemes.com>",
     "postinstall": "jetifier"
   },
   "dependencies": {
+    "@angular/animations": "^15.1.1",
+    "@angular/cdk": "^15.1.1",
+    "@angular/common": "^15.1.1",
+    "@angular/core": "^15.1.1",
+    "@angular/fire": "^7.5.0",
+    "@angular/forms": "^15.1.1",
+    "@angular/localize": "^15.1.1",
+    "@angular/platform-browser": "^15.1.1",
+    "@angular/platform-browser-dynamic": "^15.1.1",
+    "@angular/platform-server": "^15.1.1",
+    "@angular/router": "^15.1.1",
+    "@angular/service-worker": "^15.1.1",
+    "@capacitor-firebase/authentication": "^1.3.0",
+    "@capacitor/android": "^4.6.2",
+    "@capacitor/app": "^4.0.0",
+    "@capacitor/core": "^4.6.2",
+    "@capacitor/geolocation": "^4.0.0",
+    "@capacitor/haptics": "^4.0.0",
+    "@capacitor/ios": "^4.6.2",
+    "@capacitor/keyboard": "^4.1.1",
+    "@capacitor/preferences": "^4.0.2",
+    "@capacitor/share": "^4.0.0",
+    "@capacitor/splash-screen": "^4.1.3",
+    "@capacitor/status-bar": "^4.0.0",
+    "@ionic/angular": "^6.5.0",
+    "@ionic/angular-server": "^6.5.0",
+    "@nguniversal/express-engine": "^15.1.0",
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^7.0.0",
+    "@swimlane/ngx-charts": "^20.1.2",
+    "@videogular/ngx-videogular": "^7.0.1",
     "angular-pipes": "^10.0.0",
+    "core-js": "^3.27.2",
+    "date-fns": "^2.29.3",
+    "dayjs": "^1.11.7",
+    "express": "^4.18.2",
+    "firebase": "^9.16.0",
+    "google-libphonenumber": "^3.2.31",
     "jetifier": "^2.0.0",
     "mobile-detect": "^1.4.5",
+    "rxjs": "^7.8.0",
+    "swiper": "^8.4.6",
+    "tslib": "^2.4.1",
+    "zone.js": "^0.11.8"
   },
   "devDependencies": {
+    "@angular-devkit/architect": "0.1501.2",
+    "@angular-devkit/build-angular": "^15.1.2",
+    "@angular-devkit/core": "^15.1.2",
+    "@angular-devkit/schematics": "^15.1.2",
+    "@angular-eslint/builder": "15.2.0",
+    "@angular-eslint/eslint-plugin": "15.2.0",
+    "@angular-eslint/eslint-plugin-template": "15.2.0",
+    "@angular-eslint/schematics": "15.2.0",
+    "@angular-eslint/template-parser": "15.2.0",
+    "@angular/cli": "^15.1.2",
+    "@angular/compiler": "^15.1.1",
+    "@angular/compiler-cli": "^15.1.1",
+    "@angular/language-service": "^15.1.1",
+    "@capacitor/cli": "^4.6.2",
+    "@commitlint/cli": "^17.4.2",
+    "@commitlint/config-angular": "^17.4.2",
     "@ionic/angular-toolkit": "^7.0.0",
+    "@ionic/cli": "6.20.8",
+    "@nguniversal/builders": "^15.1.0",
     "@types/core-js": "^2.5.5",
+    "@types/express": "^4.17.15",
     "@types/googlemaps": "^3.39.2",
+    "@types/node": "^17.0.45",
+    "@typescript-eslint/eslint-plugin": "^5.43.0",
+    "@typescript-eslint/parser": "^5.43.0",
+    "@webcomponents/webcomponentsjs": "^2.7.0",
     "cordova-res": "0.15.4",
+    "eslint": "^8.28.0",
     "husky": "^4.3.8",
+    "ts-node": "^10.9.1",
+    "typescript": "~4.8.4"
   }
 }

src/app/activity/activities-filter-modal/activities-filter.modal.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
 import { ModalController } from '@ionic/angular';
 import { ActivityCategory } from '../activity.data';
@@ -14,7 +14,7 @@ import { ActivityService } from '../activity.service';
 export class ActivitiesFilterModalComponent implements OnInit {
   @Input() currentSelectedActivities: Array<ActivityCategory>;
-  filterActivitiesForm: FormGroup;
   activityCategories: Array<ActivityCategory>;
@@ -30,12 +30,12 @@ export class ActivitiesFilterModalComponent implements OnInit {
     this.currentSelectedActivities.forEach(
       (c: { name: string; title: string; value: boolean }) => {
-        activitiesControls[c.name] = new FormControl(c.value);
       }
     );
-    this.filterActivitiesForm = new FormGroup({
-      activities: new FormGroup(activitiesControls),
     });
   }
@@ -44,7 +44,7 @@ export class ActivitiesFilterModalComponent implements OnInit {
   }
   selectAllFilters(): void {
-    const activities = this.filterActivitiesForm.get('activities') as FormGroup;
     for (const field in activities.controls) {
       activities.get(field).setValue(true);
@@ -52,7 +52,7 @@ export class ActivitiesFilterModalComponent implements OnInit {
   }
   deselectAllFilters(): void {
-    const activities = this.filterActivitiesForm.get('activities') as FormGroup;
     for (const field in activities.controls) {
       activities.get(field).setValue(false);
@@ -60,7 +60,7 @@ export class ActivitiesFilterModalComponent implements OnInit {
   }
   applyFilters(): void {
-    const activitiesFilterControlGroup = this.filterActivitiesForm.get('activities') as FormGroup;
     for (const activityControl in activitiesFilterControlGroup.controls) {
       this.activityCategories.map(

 import { Component, Input, OnInit } from '@angular/core';
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { ModalController } from '@ionic/angular';
 import { ActivityCategory } from '../activity.data';
 export class ActivitiesFilterModalComponent implements OnInit {
   @Input() currentSelectedActivities: Array<ActivityCategory>;
+  filterActivitiesForm: UntypedFormGroup;
   activityCategories: Array<ActivityCategory>;
     this.currentSelectedActivities.forEach(
       (c: { name: string; title: string; value: boolean }) => {
+        activitiesControls[c.name] = new UntypedFormControl(c.value);
       }
     );
+    this.filterActivitiesForm = new UntypedFormGroup({
+      activities: new UntypedFormGroup(activitiesControls),
     });
   }
   }
   selectAllFilters(): void {
+    const activities = this.filterActivitiesForm.get('activities') as UntypedFormGroup;
     for (const field in activities.controls) {
       activities.get(field).setValue(true);
   }
   deselectAllFilters(): void {
+    const activities = this.filterActivitiesForm.get('activities') as UntypedFormGroup;
     for (const field in activities.controls) {
       activities.get(field).setValue(false);
   }
   applyFilters(): void {
+    const activitiesFilterControlGroup = this.filterActivitiesForm.get('activities') as UntypedFormGroup;
     for (const activityControl in activitiesFilterControlGroup.controls) {
       this.activityCategories.map(

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

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { AbstractControl, FormControl, FormGroup } from '@angular/forms';
 import { IonRouterOutlet, ModalController } from '@ionic/angular';
 import { Subscription, throttleTime } from 'rxjs';
@@ -15,7 +15,7 @@ import { ActivityService } from './activity.service';
   styleUrls: ['./styles/activity.page.scss']
 })
 export class ActivityPage {
-  filterActivitiesForm: FormGroup;
   activitiesChangesSubscription: Subscription;
@@ -42,12 +42,12 @@ export class ActivityPage {
     this.activityCategories.forEach(
       (c: { name: string; title: string; value: boolean }) => {
-        activitiesControls[c.name] = new FormControl(c.value);
       }
     );
-    this.filterActivitiesForm = new FormGroup({
-      activities: new FormGroup(activitiesControls),
     });
     // ? Check what activity we should display
@@ -58,7 +58,7 @@ export class ActivityPage {
   }
   async presentActivitiesFilterModal() {
-    const activitiesFilterControlGroup = this.filterActivitiesForm.get('activities') as FormGroup;
     for (const activityControl in activitiesFilterControlGroup.controls) {
       this.activityCategories.map(

 import { Component } from '@angular/core';
+import { AbstractControl, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { IonRouterOutlet, ModalController } from '@ionic/angular';
 import { Subscription, throttleTime } from 'rxjs';
   styleUrls: ['./styles/activity.page.scss']
 })
 export class ActivityPage {
+  filterActivitiesForm: UntypedFormGroup;
   activitiesChangesSubscription: Subscription;
     this.activityCategories.forEach(
       (c: { name: string; title: string; value: boolean }) => {
+        activitiesControls[c.name] = new UntypedFormControl(c.value);
       }
     );
+    this.filterActivitiesForm = new UntypedFormGroup({
+      activities: new UntypedFormGroup(activitiesControls),
     });
     // ? Check what activity we should display
   }
   async presentActivitiesFilterModal() {
+    const activitiesFilterControlGroup = this.filterActivitiesForm.get('activities') as UntypedFormGroup;
     for (const activityControl in activitiesFilterControlGroup.controls) {
       this.activityCategories.map(

src/app/app-routing.module.ts CHANGED Viewed

@@ -94,7 +94,7 @@ const routes: Routes = [
   imports: [
     RouterModule.forRoot(routes, {
       // This value is required for server-side rendering to work.
-      initialNavigation: 'enabled',
       scrollPositionRestoration: 'enabled',
       anchorScrolling: 'enabled'
     })

   imports: [
     RouterModule.forRoot(routes, {
       // This value is required for server-side rendering to work.
+      initialNavigation: 'enabledBlocking',
       scrollPositionRestoration: 'enabled',
       anchorScrolling: 'enabled'
     })

src/app/app.component.html CHANGED Viewed

@@ -118,6 +118,14 @@
               </ion-label>
             </ion-item>
           </ion-menu-toggle>
         </ion-list>
         <ion-list>
           <ion-list-header>

               </ion-label>
             </ion-item>
           </ion-menu-toggle>
+          <ion-menu-toggle autoHide="false">
+            <ion-item (click)="openTutorial()">
+              <ion-icon slot="start" name="school-outline"></ion-icon>
+              <ion-label>
+                Tutorial
+              </ion-label>
+            </ion-item>
+          </ion-menu-toggle>
         </ion-list>
         <ion-list>
           <ion-list-header>

src/app/app.component.ts CHANGED Viewed

@@ -1,9 +1,14 @@
 import { Component } from '@angular/core';
 import { SplashScreen } from '@capacitor/splash-screen';
-import { SeoService } from './utils/seo/seo.service';
 import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
 import { HistoryHelperService } from './utils/history-helper.service';
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
@@ -73,11 +78,6 @@ export class AppComponent {
       url: '/auth/signup',
       ionicIcon: 'person-add-outline'
     },
-    {
-      title: 'Tutorial',
-      url: '/walkthrough',
-      ionicIcon: 'school-outline'
-    },
     {
       title: 'Getting Started',
       url: '/getting-started',
@@ -96,7 +96,7 @@ export class AppComponent {
   constructor(
     public translate: TranslateService,
     public historyHelper: HistoryHelperService,
-    private seoService: SeoService
   ) {
     this.initializeApp();
     this.setLanguage();
@@ -110,7 +110,7 @@ export class AppComponent {
     }
   }
-  setLanguage() {
     // this language will be used as a fallback when a translation isn't found in the current language
     this.translate.setDefaultLang('en');
@@ -124,4 +124,12 @@ export class AppComponent {
     // });
   }
 }

 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
 import { SplashScreen } from '@capacitor/splash-screen';
+import { Preferences } from '@capacitor/preferences';
 import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
 import { HistoryHelperService } from './utils/history-helper.service';
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
       url: '/auth/signup',
       ionicIcon: 'person-add-outline'
     },
     {
       title: 'Getting Started',
       url: '/getting-started',
   constructor(
     public translate: TranslateService,
     public historyHelper: HistoryHelperService,
+    private router: Router
   ) {
     this.initializeApp();
     this.setLanguage();
     }
   }
+  public setLanguage(): void {
     // this language will be used as a fallback when a translation isn't found in the current language
     this.translate.setDefaultLang('en');
     // });
   }
+  public openTutorial(): void {
+    // save key to mark the walkthrough as NOT visited because the user wants to check it out
+    Preferences.set({
+      key: 'visitedWalkthrough',
+      value: 'false'
+    });
+    this.router.navigateByUrl('walkthrough');
+  }
 }

src/app/app.module.ts CHANGED Viewed

@@ -16,7 +16,6 @@ import { HttpClientModule, HttpClient } from '@angular/common/http';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 export function createTranslateLoader(http: HttpClient) {
@@ -41,8 +40,7 @@ export function createTranslateLoader(http: HttpClient) {
         useFactory: (createTranslateLoader),
         deps: [HttpClient]
       }
-    }),
-    NgbModule
   ],
   providers: [
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },

 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 export function createTranslateLoader(http: HttpClient) {
         useFactory: (createTranslateLoader),
         deps: [HttpClient]
       }
+    })
   ],
   providers: [
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },

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

@@ -87,7 +87,7 @@ export class CountdownTimerComponent implements OnInit, OnDestroy {
   }
   constructor(
-    @Inject(PLATFORM_ID) private platformId: object,
   ) { }
   ngOnInit(): void {

   }
   constructor(
+    @Inject(PLATFORM_ID) private platformId: object
   ) { }
   ngOnInit(): void {

src/app/components/counter-input/counter-input.component.ts CHANGED Viewed

@@ -1,8 +1,8 @@
 import { Component, forwardRef, Input, OnChanges, ViewEncapsulation } from '@angular/core';
-import { FormControl, ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 export function counterRangeValidator(minValue, maxValue) {
-  return (c: FormControl) => {
     const err = {
       rangeError: {
         given: c.value,
@@ -71,7 +71,7 @@ export class CounterInputComponent implements ControlValueAccessor, OnChanges {
     this.counterValue--;
   }
-  validate(c: FormControl) {
     return this.validateFn(c);
   }
 }

 import { Component, forwardRef, Input, OnChanges, ViewEncapsulation } from '@angular/core';
+import { UntypedFormControl, ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 export function counterRangeValidator(minValue, maxValue) {
+  return (c: UntypedFormControl) => {
     const err = {
       rangeError: {
         given: c.value,
     this.counterValue--;
   }
+  validate(c: UntypedFormControl) {
     return this.validateFn(c);
   }
 }

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

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { ContactsService } from './contacts.service';
 import { ContactsGroup } from './contacts.data';
@@ -11,15 +11,15 @@ import { ContactsGroup } from './contacts.data';
   styleUrls: ['./styles/contacts.page.scss']
 })
 export class ContactsPage {
-  contactsFiltersForm: FormGroup;
   currentContactsFilter: string;
   filteredContacts: Array<ContactsGroup>;
   constructor(private contactsService: ContactsService) {
-    this.contactsFiltersForm = new FormGroup({
-      contactsFilter: new FormControl('birthday', Validators.required),
     });
     // ? Check what template we should use to render the contacts

 import { Component } from '@angular/core';
+import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { ContactsService } from './contacts.service';
 import { ContactsGroup } from './contacts.data';
   styleUrls: ['./styles/contacts.page.scss']
 })
 export class ContactsPage {
+  contactsFiltersForm: UntypedFormGroup;
   currentContactsFilter: string;
   filteredContacts: Array<ContactsGroup>;
   constructor(private contactsService: ContactsService) {
+    this.contactsFiltersForm = new UntypedFormGroup({
+      contactsFilter: new UntypedFormControl('birthday', Validators.required),
     });
     // ? Check what template we should use to render the contacts

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

	@@ -0,0 +1,107 @@

+import { Injectable } from '@angular/core';
+import { FacebookAuthProvider, getAdditionalUserInfo, GoogleAuthProvider, OAuthProvider, TwitterAuthProvider } from '@angular/fire/auth';
+import {
+  AuthCredential as FirebaseAuthCredential,
+  AuthProvider as FirebaseAuthProvider,
+  CustomParameters as FirebaseCustomParameters,
+  OAuthCredential,
+  User as FirebaseUser,
+  UserCredential as FirebaseUserCredential
+} from '@angular/fire/auth';
+import { AuthCredential, SignInResult, User, AdditionalUserInfo, SignInOptions } from '@capacitor-firebase/authentication';
+// * Aux methods inspired on the @capacitor-firebase/authentication library
+@Injectable()
+export class FirebaseAuthHelper {
+  public applySignInOptions(options: SignInOptions, provider: OAuthProvider | GoogleAuthProvider | FacebookAuthProvider | TwitterAuthProvider) {
+    if (options.customParameters) {
+      const customParameters: FirebaseCustomParameters = {};
+      options.customParameters.map(parameter => {
+        customParameters[parameter.key] = parameter.value;
+      });
+      provider.setCustomParameters(customParameters);
+    }
+    if (options.scopes) {
+      for (const scope of options.scopes) {
+        provider.addScope(scope);
+      }
+    }
+  }
+  // ? (see: https://github.com/capawesome-team/capacitor-firebase/blob/9024eef856dbd25b2b6459e4b6bcee104ca89755/packages/authentication/src/web.ts#L594)
+  public createSignInResult(userCredential: FirebaseUserCredential | null, authCredential: FirebaseAuthCredential | null): SignInResult {
+    const userResult = this.createUserResult(userCredential?.user || null);
+    const credentialResult = this.createCredentialResult(authCredential);
+    const additionalUserInfoResult = this.createAdditionalUserInfoResult(userCredential);
+    const result: SignInResult = {
+      user: userResult,
+      credential: credentialResult,
+      additionalUserInfo: additionalUserInfoResult
+    };
+    return result;
+  }
+  // ? (see: https://github.com/capawesome-team/capacitor-firebase/blob/9024eef856dbd25b2b6459e4b6bcee104ca89755/packages/authentication/src/web.ts#L627)
+  public 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.providerData[0].photoURL,
+      providerId: user.providerData[0].providerId,
+      tenantId: user.tenantId,
+      uid: user.uid
+    };
+    return result;
+  }
+  // ? (see: https://github.com/capawesome-team/capacitor-firebase/blob/9024eef856dbd25b2b6459e4b6bcee104ca89755/packages/authentication/src/web.ts#L610)
+  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;
+  }
+  // ? (see: https://github.com/capawesome-team/capacitor-firebase/blob/9024eef856dbd25b2b6459e4b6bcee104ca89755/packages/authentication/src/web.ts#L645)
+  private createAdditionalUserInfoResult(credential: FirebaseUserCredential | null): AdditionalUserInfo | null {
+    if (!credential) {
+      return null;
+    }
+    const additionalUserInfo = getAdditionalUserInfo(credential);
+    if (!additionalUserInfo) {
+      return null;
+    }
+    const { isNewUser, profile, providerId, username } = additionalUserInfo;
+    const result: AdditionalUserInfo = {
+      isNewUser
+    };
+    if (providerId !== null) {
+      result.providerId = providerId;
+    }
+    if (profile !== null) {
+      result.profile = profile as { [key: string]: unknown };
+    }
+    if (username !== null && username !== undefined) {
+      result.username = username;
+    }
+    return result;
+  }
+}

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

@@ -11,6 +11,7 @@ import { provideAuth, getAuth, initializeAuth, indexedDBLocalPersistence } from
 import { ComponentsModule } from '../../components/components.module';
 import { environment } from '../../../environments/environment';
 import { FirebaseAuthService } from './firebase-auth.service';
 const routes: Routes = [
@@ -59,6 +60,9 @@ const routes: Routes = [
       }
     })
   ],
-  providers: [FirebaseAuthService]
 })
 export class FirebaseAuthModule {}

 import { ComponentsModule } from '../../components/components.module';
 import { environment } from '../../../environments/environment';
 import { FirebaseAuthService } from './firebase-auth.service';
+import { FirebaseAuthHelper } from './firebase-auth.helper';
 const routes: Routes = [
       }
     })
   ],
+  providers: [
+    FirebaseAuthService,
+    FirebaseAuthHelper
+  ]
 })
 export class FirebaseAuthModule {}

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

@@ -9,15 +9,15 @@ 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({
@@ -35,6 +35,7 @@ export class FirebaseAuthService implements OnDestroy {
     public route: ActivatedRoute,
     public platform: Platform,
     private ngZone: NgZone,
     public loadingController: LoadingController,
     public location: Location,
     @Inject(PLATFORM_ID) private platformId: object
@@ -90,7 +91,7 @@ export class FirebaseAuthService implements OnDestroy {
                   break;
               }
-              const signInResult = this.createSignInResult(result.user, credential);
               this.dismissLoading();
@@ -132,6 +133,36 @@ export class FirebaseAuthService implements OnDestroy {
     this.dismissLoading();
   }
   public async signOut(): Promise<string> {
     const signOutPromise = new Promise<string>((resolve, reject) => {
       // * 1. Sign out on the native layer
@@ -156,15 +187,15 @@ export class FirebaseAuthService implements OnDestroy {
     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();
@@ -176,66 +207,12 @@ export class FirebaseAuthService implements OnDestroy {
     }
   }
-  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 {
@@ -265,33 +242,28 @@ export class FirebaseAuthService implements OnDestroy {
           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;
     }
@@ -314,11 +286,17 @@ export class FirebaseAuthService implements OnDestroy {
           );
           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);
@@ -328,7 +306,7 @@ export class FirebaseAuthService implements OnDestroy {
       // * 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');
     }
@@ -336,34 +314,42 @@ export class FirebaseAuthService implements OnDestroy {
   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> {
@@ -375,7 +361,7 @@ export class FirebaseAuthService implements OnDestroy {
     this.dismissLoading();
-    return this.createSignInResultFromUserCredential(credential);
   }
   public async signUpWithEmail(email: string, password: string): Promise<SignInResult> {
@@ -387,7 +373,7 @@ export class FirebaseAuthService implements OnDestroy {
     this.dismissLoading();
-    return this.createSignInResultFromUserCredential(credential);
   }
   public get redirectResult$(): Observable<any> {
@@ -404,7 +390,7 @@ export class FirebaseAuthService implements OnDestroy {
     .pipe(
       filter((user: FirebaseUser) => user != null),
       map((user: FirebaseUser) => {
-        const userResult = this.createUserResult(user);
         return this.setUserModelForProfile(userResult);
       })
     );
@@ -450,59 +436,4 @@ export class FirebaseAuthService implements OnDestroy {
         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;
-  }
 }

 import { AuthProvider, FacebookAuthProvider, GoogleAuthProvider, TwitterAuthProvider, OAuthProvider, OAuthCredential, UserCredential, createUserWithEmailAndPassword, getAuth, getRedirectResult, signInWithCredential, signInWithEmailAndPassword, signInWithPopup, signInWithRedirect, signOut } from '@angular/fire/auth';
 import type {
+  User as FirebaseUser
 } from '@angular/fire/auth';
+import { AuthStateChange, FirebaseAuthentication, SignInResult, SignInWithOAuthOptions, User } from '@capacitor-firebase/authentication';
 import { DataStore } from '../../shell/data-store';
 import { FirebaseProfileModel } from './profile/firebase-profile.model';
 import { SignInProvider } from './firebase-auth-definitions';
+import { FirebaseAuthHelper } from './firebase-auth.helper';
 @Injectable({
     public route: ActivatedRoute,
     public platform: Platform,
     private ngZone: NgZone,
+    private firebaseAuthHelper: FirebaseAuthHelper,
     public loadingController: LoadingController,
     public location: Location,
     @Inject(PLATFORM_ID) private platformId: object
                   break;
               }
+              const signInResult = firebaseAuthHelper.createSignInResult(result, credential);
               this.dismissLoading();
     this.dismissLoading();
   }
+  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();
+    }
+  }
   public async signOut(): Promise<string> {
     const signOutPromise = new Promise<string>((resolve, reject) => {
       // * 1. Sign out on the native layer
     return signOutPromise;
   }
+  private async socialSignIn(provider: (OAuthProvider | GoogleAuthProvider | FacebookAuthProvider | TwitterAuthProvider), authOptions?: SignInWithOAuthOptions): Promise<SignInResult> {
     this.presentLoading(provider.providerId);
     let authResult: SignInResult = null;
     if (this.platform.is('capacitor')) {
+      authResult = await this.nativeAuth(provider, authOptions);
     } else {
+      authResult = await this.webAuth(provider, authOptions);
     }
     this.dismissLoading();
     }
   }
+  private async webAuth(provider: (OAuthProvider | GoogleAuthProvider | FacebookAuthProvider | TwitterAuthProvider), authOptions?: SignInWithOAuthOptions): Promise<SignInResult> {
     const auth = getAuth();
     let webAuthUserCredential: UserCredential = null;
+    this.firebaseAuthHelper.applySignInOptions(authOptions || {}, provider);
     if (this.platform.is('desktop')) {
       webAuthUserCredential = await signInWithPopup(auth, provider);
     } else {
           break;
       }
+      return this.firebaseAuthHelper.createSignInResult(webAuthUserCredential, webCredential);
     } else {
       return Promise.reject('null webAuthUserCredential');
     }
   }
+  private async nativeAuth(provider: AuthProvider, authOptions?: SignInWithOAuthOptions): Promise<SignInResult> {
     let nativeAuthResult: SignInResult = null;
     // * 1. Sign in on the native layer
     switch (provider.providerId) {
       case SignInProvider.apple:
+        nativeAuthResult = await FirebaseAuthentication.signInWithApple(authOptions);
         break;
       case SignInProvider.facebook:
+        nativeAuthResult = await FirebaseAuthentication.signInWithFacebook(authOptions);
         break;
       case SignInProvider.google:
+        nativeAuthResult = await FirebaseAuthentication.signInWithGoogle(authOptions);
         break;
       case SignInProvider.twitter:
+        nativeAuthResult = await FirebaseAuthentication.signInWithTwitter(authOptions);
         break;
     }
           );
           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.firebaseAuthHelper.createSignInResult(webAuthResult, nativeCredential);
     } else {
       return Promise.reject('null nativeAuthResult');
     }
   public async signInWithFacebook(): Promise<SignInResult> {
     const provider = new FacebookAuthProvider();
+    const authOptions: SignInWithOAuthOptions = {
+      scopes: ['email', 'public_profile']
+    };
     // ? 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, authOptions);
   }
   public async signInWithGoogle(): Promise<SignInResult> {
     const provider = new GoogleAuthProvider();
+    const authOptions: SignInWithOAuthOptions = {
+      scopes: ['email', 'profile']
+    };
     // ? 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, authOptions);
   }
   public async signInWithTwitter(): Promise<SignInResult> {
     const provider = new TwitterAuthProvider();
+    const authOptions: SignInWithOAuthOptions = {
+      scopes: ['email', 'name']
+    };
     // ? 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, authOptions);
   }
   public async signInWithApple(): Promise<SignInResult> {
     const provider = new OAuthProvider('apple.com');
+    const authOptions: SignInWithOAuthOptions = {
+      scopes: ['email', 'name']
+    };
     // ? 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, authOptions);
   }
   public async signInWithEmail(email: string, password: string): Promise<SignInResult> {
     this.dismissLoading();
+    return this.firebaseAuthHelper.createSignInResult(credential, null);
   }
   public async signUpWithEmail(email: string, password: string): Promise<SignInResult> {
     this.dismissLoading();
+    return this.firebaseAuthHelper.createSignInResult(credential, null);
   }
   public get redirectResult$(): Observable<any> {
     .pipe(
       filter((user: FirebaseUser) => user != null),
       map((user: FirebaseUser) => {
+        const userResult = this.firebaseAuthHelper.createUserResult(user);
         return this.setUserModelForProfile(userResult);
       })
     );
         return photoURL;
     }
   }
 }

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

@@ -1,5 +1,5 @@
 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';
@@ -16,7 +16,7 @@ import { FirebaseAuthService } from '../firebase-auth.service';
   ]
 })
 export class FirebaseSignInPage {
-  loginForm: FormGroup;
   submitError: string;
   authRedirectResult: Subscription;
@@ -37,12 +37,12 @@ export class FirebaseSignInPage {
     private ngZone: NgZone,
     public historyHelper: HistoryHelperService
   ) {
-    this.loginForm = new FormGroup({
-      'email': new FormControl('', Validators.compose([
         Validators.required,
         Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
       ])),
-      'password': new FormControl('', Validators.compose([
         Validators.minLength(6),
         Validators.required
       ]))

 import { Component, NgZone } from '@angular/core';
+import { Validators, UntypedFormGroup, UntypedFormControl } from '@angular/forms';
 import { Router } from '@angular/router';
 import { AuthStateChange, SignInResult } from '@capacitor-firebase/authentication';
   ]
 })
 export class FirebaseSignInPage {
+  loginForm: UntypedFormGroup;
   submitError: string;
   authRedirectResult: Subscription;
     private ngZone: NgZone,
     public historyHelper: HistoryHelperService
   ) {
+    this.loginForm = new UntypedFormGroup({
+      'email': new UntypedFormControl('', Validators.compose([
         Validators.required,
         Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
       ])),
+      'password': new UntypedFormControl('', Validators.compose([
         Validators.minLength(6),
         Validators.required
       ]))

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

@@ -1,5 +1,5 @@
 import { Component, OnInit, NgZone } from '@angular/core';
-import { Validators, FormGroup, FormControl } from '@angular/forms';
 import { Router } from '@angular/router';
 import { MenuController } from '@ionic/angular';
@@ -19,8 +19,8 @@ import { FirebaseAuthService } from '../firebase-auth.service';
   ]
 })
 export class FirebaseSignUpPage implements OnInit {
-  signupForm: FormGroup;
-  matching_passwords_group: FormGroup;
   submitError: string;
   authRedirectResult: Subscription;
@@ -48,18 +48,18 @@ export class FirebaseSignUpPage implements OnInit {
     private ngZone: NgZone,
     public historyHelper: HistoryHelperService
   ) {
-    this.matching_passwords_group = new FormGroup({
-      'password': new FormControl('', Validators.compose([
         Validators.minLength(6),
         Validators.required
       ])),
-      'confirm_password': new FormControl('', Validators.required)
-    }, (formGroup: FormGroup) => {
       return PasswordValidator.areNotEqual(formGroup);
     });
-    this.signupForm = new FormGroup({
-      'email': new FormControl('', Validators.compose([
         Validators.required,
         Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
       ])),

 import { Component, OnInit, NgZone } from '@angular/core';
+import { Validators, UntypedFormGroup, UntypedFormControl } from '@angular/forms';
 import { Router } from '@angular/router';
 import { MenuController } from '@ionic/angular';
   ]
 })
 export class FirebaseSignUpPage implements OnInit {
+  signupForm: UntypedFormGroup;
+  matching_passwords_group: UntypedFormGroup;
   submitError: string;
   authRedirectResult: Subscription;
     private ngZone: NgZone,
     public historyHelper: HistoryHelperService
   ) {
+    this.matching_passwords_group = new UntypedFormGroup({
+      'password': new UntypedFormControl('', Validators.compose([
         Validators.minLength(6),
         Validators.required
       ])),
+      'confirm_password': new UntypedFormControl('', Validators.required)
+    }, (formGroup: UntypedFormGroup) => {
       return PasswordValidator.areNotEqual(formGroup);
     });
+    this.signupForm = new UntypedFormGroup({
+      'email': new UntypedFormControl('', Validators.compose([
         Validators.required,
         Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
       ])),

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

@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy, HostBinding } from '@angular/core';
-import { FormGroup, FormControl } from '@angular/forms';
 import { ModalController, IonRouterOutlet } from '@ionic/angular';
 import { ActivatedRoute } from '@angular/router';
@@ -22,7 +22,7 @@ import { FirebaseCrudService } from '../firebase-crud.service';
   ],
 })
 export class FirebaseListingPage implements OnInit, OnDestroy {
-  rangeForm: FormGroup;
   searchQuery: string;
   showAgeFilter = false;
@@ -54,8 +54,8 @@ export class FirebaseListingPage implements OnInit, OnDestroy {
   ngOnInit() {
     this.searchQuery = '';
-    this.rangeForm = new FormGroup({
-      dual: new FormControl({lower: 1, upper: 100})
     });
     this.route.data

 import { Component, OnInit, OnDestroy, HostBinding } from '@angular/core';
+import { UntypedFormGroup, UntypedFormControl } from '@angular/forms';
 import { ModalController, IonRouterOutlet } from '@ionic/angular';
 import { ActivatedRoute } from '@angular/router';
   ],
 })
 export class FirebaseListingPage implements OnInit, OnDestroy {
+  rangeForm: UntypedFormGroup;
   searchQuery: string;
   showAgeFilter = false;
   ngOnInit() {
     this.searchQuery = '';
+    this.rangeForm = new UntypedFormGroup({
+      dual: new UntypedFormControl({lower: 1, upper: 100})
     });
     this.route.data

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

@@ -1,6 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { ModalController } from '@ionic/angular';
-import { Validators, FormGroup, FormControl, FormArray } from '@angular/forms';
 import * as dayjs from 'dayjs';
 import { CheckboxCheckedValidator } from '../../../../validators/checkbox-checked.validator';
@@ -23,7 +23,7 @@ export class FirebaseCreateUserModalComponent implements OnInit {
   // We use it to for the dismiss function
   @Input() modalId: string;
-  createUserForm: FormGroup;
   userData: FirebaseUserModel = new FirebaseUserModel();
   skills = [];
   formattedDate?: string;
@@ -37,26 +37,26 @@ export class FirebaseCreateUserModalComponent implements OnInit {
     // default image
     this.userData.avatar = 'https://s3-us-west-2.amazonaws.com/ionicthemes/otros/avatar-placeholder.png';
-    this.createUserForm = new FormGroup({
-      name: new FormControl('', Validators.required),
-      lastname: new FormControl('', Validators.required),
-      email: new FormControl('', Validators.compose([
         Validators.required,
         Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
       ])),
-      phone: new FormControl('', Validators.required),
-      birthdate: new FormControl(null, Validators.required),
-      skills: new FormArray([], CheckboxCheckedValidator.minSelectedCheckboxes(1)),
-      spanish: new FormControl(),
-      english: new FormControl(),
-      french: new FormControl()
     });
     this.firebaseCrudService.getSkills().subscribe(skills => {
       this.skills = skills;
       // create skill checkboxes
       this.skills.map(() => {
-        (this.createUserForm.controls.skills as FormArray).push(new FormControl());
       });
     });
   }
@@ -65,7 +65,7 @@ export class FirebaseCreateUserModalComponent implements OnInit {
     this.formattedDate = format(parseISO(this.createUserForm.value.birthdate), 'MMM d, yyyy');
   }
-  get skillsFormArray() { return <FormArray>this.createUserForm.get('skills'); }
   changeLangValue(value): string {
     switch (true) {

 import { Component, Input, OnInit } from '@angular/core';
 import { ModalController } from '@ionic/angular';
+import { Validators, UntypedFormGroup, UntypedFormControl, UntypedFormArray } from '@angular/forms';
 import * as dayjs from 'dayjs';
 import { CheckboxCheckedValidator } from '../../../../validators/checkbox-checked.validator';
   // We use it to for the dismiss function
   @Input() modalId: string;
+  createUserForm: UntypedFormGroup;
   userData: FirebaseUserModel = new FirebaseUserModel();
   skills = [];
   formattedDate?: string;
     // default image
     this.userData.avatar = 'https://s3-us-west-2.amazonaws.com/ionicthemes/otros/avatar-placeholder.png';
+    this.createUserForm = new UntypedFormGroup({
+      name: new UntypedFormControl('', Validators.required),
+      lastname: new UntypedFormControl('', Validators.required),
+      email: new UntypedFormControl('', Validators.compose([
         Validators.required,
         Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
       ])),
+      phone: new UntypedFormControl('', Validators.required),
+      birthdate: new UntypedFormControl(null, Validators.required),
+      skills: new UntypedFormArray([], CheckboxCheckedValidator.minSelectedCheckboxes(1)),
+      spanish: new UntypedFormControl(),
+      english: new UntypedFormControl(),
+      french: new UntypedFormControl()
     });
     this.firebaseCrudService.getSkills().subscribe(skills => {
       this.skills = skills;
       // create skill checkboxes
       this.skills.map(() => {
+        (this.createUserForm.controls.skills as UntypedFormArray).push(new UntypedFormControl());
       });
     });
   }
     this.formattedDate = format(parseISO(this.createUserForm.value.birthdate), 'MMM d, yyyy');
   }
+  get skillsFormArray() { return <UntypedFormArray>this.createUserForm.get('skills'); }
   changeLangValue(value): string {
     switch (true) {

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

@@ -1,6 +1,6 @@
 import { Component, OnInit, Input, NgZone } from '@angular/core';
 import { ModalController, AlertController } from '@ionic/angular';
-import { Validators, FormGroup, FormControl, FormArray } from '@angular/forms';
 import { Router } from '@angular/router';
 import * as dayjs from 'dayjs';
@@ -28,7 +28,7 @@ export class FirebaseUpdateUserModalComponent implements OnInit {
   // We use it to for the dismiss function
   @Input() modalId: string;
-  updateUserForm: FormGroup;
   selectedAvatar: string;
   skills = [];
   formattedDate?: string;
@@ -44,19 +44,19 @@ export class FirebaseUpdateUserModalComponent implements OnInit {
   ngOnInit() {
     this.selectedAvatar = this.user.avatar;
-    this.updateUserForm = new FormGroup({
-      name: new FormControl(this.user.name, Validators.required),
-      lastname: new FormControl(this.user.lastname, Validators.required),
-      email: new FormControl(this.user.email, Validators.compose([
         Validators.required,
         Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
       ])),
-      phone: new FormControl(this.user.phone, Validators.required),
-      birthdate: new FormControl(dayjs.unix(this.user.birthdate).format(), Validators.required),
-      skills: new FormArray([], CheckboxCheckedValidator.minSelectedCheckboxes(1)),
-      spanish: new FormControl(this.user.languages.spanish),
-      english: new FormControl(this.user.languages.english),
-      french: new FormControl(this.user.languages.french)
     });
     this.formatDate();
@@ -72,8 +72,8 @@ export class FirebaseUpdateUserModalComponent implements OnInit {
           });
         }
         // set the control value to 'true' if the user already has this skill
-        const control = new FormControl(userSkillsIds.includes(skill.id));
-        (this.updateUserForm.controls.skills as FormArray).push(control);
       });
     });
   }
@@ -82,7 +82,7 @@ export class FirebaseUpdateUserModalComponent implements OnInit {
     this.formattedDate = format(parseISO(this.updateUserForm.value.birthdate), 'MMM d, yyyy');
   }
-  get skillsFormArray() { return <FormArray>this.updateUserForm.get('skills'); }
   changeLangValue(value): string {
     switch (true) {

 import { Component, OnInit, Input, NgZone } from '@angular/core';
 import { ModalController, AlertController } from '@ionic/angular';
+import { Validators, UntypedFormGroup, UntypedFormControl, UntypedFormArray } from '@angular/forms';
 import { Router } from '@angular/router';
 import * as dayjs from 'dayjs';
   // We use it to for the dismiss function
   @Input() modalId: string;
+  updateUserForm: UntypedFormGroup;
   selectedAvatar: string;
   skills = [];
   formattedDate?: string;
   ngOnInit() {
     this.selectedAvatar = this.user.avatar;
+    this.updateUserForm = new UntypedFormGroup({
+      name: new UntypedFormControl(this.user.name, Validators.required),
+      lastname: new UntypedFormControl(this.user.lastname, Validators.required),
+      email: new UntypedFormControl(this.user.email, Validators.compose([
         Validators.required,
         Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
       ])),
+      phone: new UntypedFormControl(this.user.phone, Validators.required),
+      birthdate: new UntypedFormControl(dayjs.unix(this.user.birthdate).format(), Validators.required),
+      skills: new UntypedFormArray([], CheckboxCheckedValidator.minSelectedCheckboxes(1)),
+      spanish: new UntypedFormControl(this.user.languages.spanish),
+      english: new UntypedFormControl(this.user.languages.english),
+      french: new UntypedFormControl(this.user.languages.french)
     });
     this.formatDate();
           });
         }
         // set the control value to 'true' if the user already has this skill
+        const control = new UntypedFormControl(userSkillsIds.includes(skill.id));
+        (this.updateUserForm.controls.skills as UntypedFormArray).push(control);
       });
     });
   }
     this.formattedDate = format(parseISO(this.updateUserForm.value.birthdate), 'MMM d, yyyy');
   }
+  get skillsFormArray() { return <UntypedFormArray>this.updateUserForm.get('skills'); }
   changeLangValue(value): string {
     switch (true) {

src/app/forgot-password/forgot-password.page.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { Validators, FormGroup, FormControl } from '@angular/forms';
 import { Router } from '@angular/router';
 import { MenuController } from '@ionic/angular';
@@ -11,7 +11,7 @@ import { MenuController } from '@ionic/angular';
   ]
 })
 export class ForgotPasswordPage {
-  forgotPasswordForm: FormGroup;
   validation_messages = {
     'email': [
@@ -24,8 +24,8 @@ export class ForgotPasswordPage {
     public router: Router,
     public menu: MenuController
   ) {
-    this.forgotPasswordForm = new FormGroup({
-      'email': new FormControl('test@test.com', Validators.compose([
         Validators.required,
         Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
       ]))

 import { Component } from '@angular/core';
+import { Validators, UntypedFormGroup, UntypedFormControl } from '@angular/forms';
 import { Router } from '@angular/router';
 import { MenuController } from '@ionic/angular';
   ]
 })
 export class ForgotPasswordPage {
+  forgotPasswordForm: UntypedFormGroup;
   validation_messages = {
     'email': [
     public router: Router,
     public menu: MenuController
   ) {
+    this.forgotPasswordForm = new UntypedFormGroup({
+      'email': new UntypedFormControl('test@test.com', Validators.compose([
         Validators.required,
         Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
       ]))

src/app/forms/filters/forms-filters.page.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Component} from '@angular/core';
-import { FormGroup, FormControl } from '@angular/forms';
 import { counterRangeValidator } from '../../components/counter-input/counter-input.component';
@@ -13,65 +13,65 @@ import { counterRangeValidator } from '../../components/counter-input/counter-in
 })
 export class FormsFiltersPage {
   rangeForm: any;
-  checkboxForm: FormGroup;
-  radioForm: FormGroup;
-  checkboxTagsForm: FormGroup;
-  radioTagsForm: FormGroup;
-  switchersForm: FormGroup;
   counterForm: any;
-  ratingForm: FormGroup;
-  radioColorForm: FormGroup;
   constructor() {
-    this.rangeForm = new FormGroup({
-      single: new FormControl(25),
-      dual: new FormControl({lower: 12, upper: 23})
     });
-    this.checkboxForm = new FormGroup({
-      person_1: new FormControl(true),
-      person_2: new FormControl(false),
-      person_3: new FormControl(false),
-      person_4: new FormControl(true),
-      person_5: new FormControl(false)
     });
-    this.radioForm = new FormGroup({
-      selected_option: new FormControl('apple')
     });
-    this.checkboxTagsForm = new FormGroup({
-      tag_1: new FormControl(true),
-      tag_2: new FormControl(false),
-      tag_3: new FormControl(true),
-      tag_4: new FormControl(true),
-      tag_5: new FormControl(false),
-      tag_6: new FormControl(false),
-      tag_7: new FormControl({value: true, disabled: true}),
-      tag_8: new FormControl(false)
     });
-    this.radioTagsForm = new FormGroup({
-      selected_option: new FormControl('any')
     });
-    this.switchersForm = new FormGroup({
-      notifications: new FormControl(true),
-      email_notifications: new FormControl(false)
     });
-    this.counterForm = new FormGroup({
-      counter: new FormControl(5, counterRangeValidator(1, 7)),
-      counter2: new FormControl(2, counterRangeValidator(1, 5))
     });
-    this.ratingForm = new FormGroup({
-      rate: new FormControl(2.5),
-      rate2: new FormControl(1.5)
     });
-    this.radioColorForm = new FormGroup({
-      selected_color: new FormControl('#fc9961')
     });
   }

 import { Component} from '@angular/core';
+import { UntypedFormGroup, UntypedFormControl } from '@angular/forms';
 import { counterRangeValidator } from '../../components/counter-input/counter-input.component';
 })
 export class FormsFiltersPage {
   rangeForm: any;
+  checkboxForm: UntypedFormGroup;
+  radioForm: UntypedFormGroup;
+  checkboxTagsForm: UntypedFormGroup;
+  radioTagsForm: UntypedFormGroup;
+  switchersForm: UntypedFormGroup;
   counterForm: any;
+  ratingForm: UntypedFormGroup;
+  radioColorForm: UntypedFormGroup;
   constructor() {
+    this.rangeForm = new UntypedFormGroup({
+      single: new UntypedFormControl(25),
+      dual: new UntypedFormControl({lower: 12, upper: 23})
     });
+    this.checkboxForm = new UntypedFormGroup({
+      person_1: new UntypedFormControl(true),
+      person_2: new UntypedFormControl(false),
+      person_3: new UntypedFormControl(false),
+      person_4: new UntypedFormControl(true),
+      person_5: new UntypedFormControl(false)
     });
+    this.radioForm = new UntypedFormGroup({
+      selected_option: new UntypedFormControl('apple')
     });
+    this.checkboxTagsForm = new UntypedFormGroup({
+      tag_1: new UntypedFormControl(true),
+      tag_2: new UntypedFormControl(false),
+      tag_3: new UntypedFormControl(true),
+      tag_4: new UntypedFormControl(true),
+      tag_5: new UntypedFormControl(false),
+      tag_6: new UntypedFormControl(false),
+      tag_7: new UntypedFormControl({value: true, disabled: true}),
+      tag_8: new UntypedFormControl(false)
     });
+    this.radioTagsForm = new UntypedFormGroup({
+      selected_option: new UntypedFormControl('any')
     });
+    this.switchersForm = new UntypedFormGroup({
+      notifications: new UntypedFormControl(true),
+      email_notifications: new UntypedFormControl(false)
     });
+    this.counterForm = new UntypedFormGroup({
+      counter: new UntypedFormControl(5, counterRangeValidator(1, 7)),
+      counter2: new UntypedFormControl(2, counterRangeValidator(1, 5))
     });
+    this.ratingForm = new UntypedFormGroup({
+      rate: new UntypedFormControl(2.5),
+      rate2: new UntypedFormControl(1.5)
     });
+    this.radioColorForm = new UntypedFormGroup({
+      selected_color: new UntypedFormControl('#fc9961')
     });
   }

src/app/forms/validations/forms-validations.page.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { Validators, FormGroup, FormControl } from '@angular/forms';
 import { UsernameValidator } from '../../validators/username.validator';
 import { PasswordValidator } from '../../validators/password.validator';
@@ -17,9 +17,9 @@ import { CountryPhone } from './country-phone.model';
 })
 export class FormsValidationsPage implements OnInit {
-  validationsForm: FormGroup;
-  matching_passwords_group: FormGroup;
-  country_phone_group: FormGroup;
   countries: Array<CountryPhone>;
   genders: Array<string>;
@@ -86,48 +86,48 @@ export class FormsValidationsPage implements OnInit {
       'Other'
     ];
-    this.matching_passwords_group = new FormGroup({
-      password: new FormControl('', Validators.compose([
         Validators.minLength(5),
         Validators.required,
         Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9]+$')
       ])),
-      confirm_password: new FormControl('', Validators.required)
-    }, (formGroup: FormGroup) => {
       return PasswordValidator.areNotEqual(formGroup);
     });
-    const country = new FormControl(this.countries[0], Validators.required);
-    const phone = new FormControl('', Validators.compose([
       Validators.required,
       PhoneValidator.invalidCountryPhone(country)
     ]));
-    this.country_phone_group = new FormGroup({
       country: country,
       phone: phone
     });
-    this.validationsForm = new FormGroup({
-      'username': new FormControl('', Validators.compose([
         UsernameValidator.usernameNotAvailable,
         Validators.maxLength(25),
         Validators.minLength(5),
         Validators.pattern('^(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]+$'),
         Validators.required
       ])),
-      'name': new FormControl('', Validators.required),
-      'lastname': new FormControl('', Validators.required),
-      'email': new FormControl('', Validators.compose([
         Validators.required,
         Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
       ])),
-      'gender': new FormControl(this.genders[0], Validators.required),
       'country_phone': this.country_phone_group,
       'matching_passwords': this.matching_passwords_group,
-      'guests': new FormControl(6, counterRangeValidator(1, 12)),
-      'bedrooms': new FormControl(3, counterRangeValidator(1, 5)),
-      'terms': new FormControl(true, Validators.pattern('true'))
     });
   }

 import { Component, OnInit } from '@angular/core';
+import { Validators, UntypedFormGroup, UntypedFormControl } from '@angular/forms';
 import { UsernameValidator } from '../../validators/username.validator';
 import { PasswordValidator } from '../../validators/password.validator';
 })
 export class FormsValidationsPage implements OnInit {
+  validationsForm: UntypedFormGroup;
+  matching_passwords_group: UntypedFormGroup;
+  country_phone_group: UntypedFormGroup;
   countries: Array<CountryPhone>;
   genders: Array<string>;
       'Other'
     ];
+    this.matching_passwords_group = new UntypedFormGroup({
+      password: new UntypedFormControl('', Validators.compose([
         Validators.minLength(5),
         Validators.required,
         Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9]+$')
       ])),
+      confirm_password: new UntypedFormControl('', Validators.required)
+    }, (formGroup: UntypedFormGroup) => {
       return PasswordValidator.areNotEqual(formGroup);
     });
+    const country = new UntypedFormControl(this.countries[0], Validators.required);
+    const phone = new UntypedFormControl('', Validators.compose([
       Validators.required,
       PhoneValidator.invalidCountryPhone(country)
     ]));
+    this.country_phone_group = new UntypedFormGroup({
       country: country,
       phone: phone
     });
+    this.validationsForm = new UntypedFormGroup({
+      'username': new UntypedFormControl('', Validators.compose([
         UsernameValidator.usernameNotAvailable,
         Validators.maxLength(25),
         Validators.minLength(5),
         Validators.pattern('^(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]+$'),
         Validators.required
       ])),
+      'name': new UntypedFormControl('', Validators.required),
+      'lastname': new UntypedFormControl('', Validators.required),
+      'email': new UntypedFormControl('', Validators.compose([
         Validators.required,
         Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
       ])),
+      'gender': new UntypedFormControl(this.genders[0], Validators.required),
       'country_phone': this.country_phone_group,
       'matching_passwords': this.matching_passwords_group,
+      'guests': new UntypedFormControl(6, counterRangeValidator(1, 12)),
+      'bedrooms': new UntypedFormControl(3, counterRangeValidator(1, 5)),
+      'terms': new UntypedFormControl(true, Validators.pattern('true'))
     });
   }

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

@@ -1,5 +1,5 @@
 import { Component, HostBinding, NgZone } from '@angular/core';
-import { FormGroup, FormControl } from '@angular/forms';
 import { MenuController } from '@ionic/angular';
 import { IonicSwiper } from "@ionic/angular";
@@ -21,21 +21,21 @@ 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'),
-      followingInterests: new FormGroup({
-        tops: new FormControl(true),
-        dresses: new FormControl(),
-        jeans: new FormControl(),
-        jackets: new FormControl(true),
-        shoes: new FormControl(),
-        glasses: new FormControl()
       })
     });
   }

 import { Component, HostBinding, NgZone } from '@angular/core';
+import { UntypedFormGroup, UntypedFormControl } from '@angular/forms';
 import { MenuController } from '@ionic/angular';
 import { IonicSwiper } from "@ionic/angular";
   @HostBinding('class.last-slide-active') isLastSlide = false;
   swiperRef: SwiperCore;
+  gettingStartedForm: UntypedFormGroup;
   constructor(
     public menu: MenuController,
     private ngZone: NgZone
   ) {
+    this.gettingStartedForm = new UntypedFormGroup({
+      browsingCategory: new UntypedFormControl('men'),
+      followingInterests: new UntypedFormGroup({
+        tops: new UntypedFormControl(true),
+        dresses: new UntypedFormControl(),
+        jeans: new UntypedFormControl(),
+        jackets: new UntypedFormControl(true),
+        shoes: new UntypedFormControl(),
+        glasses: new UntypedFormControl()
       })
     });
   }

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

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { Validators, FormGroup, FormControl } from '@angular/forms';
 import { Router } from '@angular/router';
 import { MenuController } from '@ionic/angular';
@@ -11,7 +11,7 @@ import { MenuController } from '@ionic/angular';
   ]
 })
 export class LoginPage {
-  loginForm: FormGroup;
   validation_messages = {
     'email': [
@@ -28,12 +28,12 @@ export class LoginPage {
     public router: Router,
     public menu: MenuController
   ) {
-    this.loginForm = new FormGroup({
-      'email': new FormControl('test@test.com', Validators.compose([
         Validators.required,
         Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
       ])),
-      'password': new FormControl('', Validators.compose([
         Validators.minLength(5),
         Validators.required
       ]))

 import { Component } from '@angular/core';
+import { Validators, UntypedFormGroup, UntypedFormControl } from '@angular/forms';
 import { Router } from '@angular/router';
 import { MenuController } from '@ionic/angular';
   ]
 })
 export class LoginPage {
+  loginForm: UntypedFormGroup;
   validation_messages = {
     'email': [
     public router: Router,
     public menu: MenuController
   ) {
+    this.loginForm = new UntypedFormGroup({
+      'email': new UntypedFormControl('test@test.com', Validators.compose([
         Validators.required,
         Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
       ])),
+      'password': new UntypedFormControl('', Validators.compose([
         Validators.minLength(5),
         Validators.required
       ]))

src/app/showcase/custom-components/custom-components.module.ts CHANGED Viewed

@@ -2,7 +2,6 @@ import { IonicModule } from '@ionic/angular';
 import { RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
 import { ComponentsModule } from '../../components/components.module';
 import { CustomComponentsPage } from './custom-components.page';
@@ -13,7 +12,6 @@ import { ShowcaseService } from '../showcase.service';
     IonicModule,
     CommonModule,
     ComponentsModule,
-    FormsModule,
     RouterModule.forChild([
       {
         path: '',

 import { RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ComponentsModule } from '../../components/components.module';
 import { CustomComponentsPage } from './custom-components.page';
     IonicModule,
     CommonModule,
     ComponentsModule,
     RouterModule.forChild([
       {
         path: '',

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

@@ -2,7 +2,6 @@ import { IonicModule } from '@ionic/angular';
 import { RouterModule, Routes } from '@angular/router';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
 import { ComponentsModule } from '../components/components.module';
 const showcaseRoutes: Routes = [
@@ -35,7 +34,6 @@ const showcaseRoutes: Routes = [
   imports: [
     IonicModule,
     CommonModule,
-    FormsModule,
     RouterModule.forChild(showcaseRoutes),
     ComponentsModule
   ],

 import { RouterModule, Routes } from '@angular/router';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ComponentsModule } from '../components/components.module';
 const showcaseRoutes: Routes = [
   imports: [
     IonicModule,
     CommonModule,
     RouterModule.forChild(showcaseRoutes),
     ComponentsModule
   ],

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

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { Validators, FormGroup, FormControl } from '@angular/forms';
 import { Router } from '@angular/router';
 import { ModalController, MenuController, IonRouterOutlet } from '@ionic/angular';
@@ -15,8 +15,8 @@ import { PasswordValidator } from '../validators/password.validator';
   ]
 })
 export class SignupPage {
-  signupForm: FormGroup;
-  matching_passwords_group: FormGroup;
   validation_messages = {
     'email': [
@@ -41,18 +41,18 @@ export class SignupPage {
     public menu: MenuController,
     private routerOutlet: IonRouterOutlet
   ) {
-    this.matching_passwords_group = new FormGroup({
-      'password': new FormControl('', Validators.compose([
         Validators.minLength(5),
         Validators.required
       ])),
-      'confirm_password': new FormControl('', Validators.required)
-    }, (formGroup: FormGroup) => {
       return PasswordValidator.areNotEqual(formGroup);
     });
-    this.signupForm = new FormGroup({
-      'email': new FormControl('test@test.com', Validators.compose([
         Validators.required,
         Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
       ])),

 import { Component } from '@angular/core';
+import { Validators, UntypedFormGroup, UntypedFormControl } from '@angular/forms';
 import { Router } from '@angular/router';
 import { ModalController, MenuController, IonRouterOutlet } from '@ionic/angular';
   ]
 })
 export class SignupPage {
+  signupForm: UntypedFormGroup;
+  matching_passwords_group: UntypedFormGroup;
   validation_messages = {
     'email': [
     public menu: MenuController,
     private routerOutlet: IonRouterOutlet
   ) {
+    this.matching_passwords_group = new UntypedFormGroup({
+      'password': new UntypedFormControl('', Validators.compose([
         Validators.minLength(5),
         Validators.required
       ])),
+      'confirm_password': new UntypedFormControl('', Validators.required)
+    }, (formGroup: UntypedFormGroup) => {
       return PasswordValidator.areNotEqual(formGroup);
     });
+    this.signupForm = new UntypedFormGroup({
+      'email': new UntypedFormControl('test@test.com', Validators.compose([
         Validators.required,
         Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
       ])),

src/app/validators/checkbox-checked.validator.ts CHANGED Viewed

@@ -1,9 +1,9 @@
-import { ValidatorFn, FormArray } from '@angular/forms';
 export class CheckboxCheckedValidator {
   static minSelectedCheckboxes(min) {
-    const validator: ValidatorFn = (formArray: FormArray) => {
       const totalSelected = formArray.controls
         // get a list of checkbox values (boolean)
         .map(control => control.value)

+import { ValidatorFn, UntypedFormArray } from '@angular/forms';
 export class CheckboxCheckedValidator {
   static minSelectedCheckboxes(min) {
+    const validator: ValidatorFn = (formArray: UntypedFormArray) => {
       const totalSelected = formArray.controls
         // get a list of checkbox values (boolean)
         .map(control => control.value)

src/app/validators/password.validator.ts CHANGED Viewed

@@ -1,17 +1,17 @@
-import { FormControl, FormGroup } from '@angular/forms';
 export class PasswordValidator {
   // If our validation fails, we return an object with a key for the error name and a value of true.
   // Otherwise, if the validation passes, we simply return null because there is no error.
-  static areNotEqual(formGroup: FormGroup) {
     let firstControlValue: any;
     let valid = true;
     for (const key in formGroup.controls) {
       if (formGroup.controls.hasOwnProperty(key)) {
-        const control: FormControl = <FormControl>formGroup.controls[key];
         if (firstControlValue === undefined) {
           firstControlValue = control.value;

+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 export class PasswordValidator {
   // If our validation fails, we return an object with a key for the error name and a value of true.
   // Otherwise, if the validation passes, we simply return null because there is no error.
+  static areNotEqual(formGroup: UntypedFormGroup) {
     let firstControlValue: any;
     let valid = true;
     for (const key in formGroup.controls) {
       if (formGroup.controls.hasOwnProperty(key)) {
+        const control: UntypedFormControl = <UntypedFormControl>formGroup.controls[key];
         if (firstControlValue === undefined) {
           firstControlValue = control.value;

src/app/validators/username.validator.ts CHANGED Viewed

@@ -1,8 +1,8 @@
-import { FormControl } from '@angular/forms';
 export class UsernameValidator {
-  static usernameNotAvailable(fc: FormControl) {
     // this is a dummy validator to check if the username is valid or not.
     // In a real app you should check against your DB if the username is already in use.

+import { UntypedFormControl } from '@angular/forms';
 export class UsernameValidator {
+  static usernameNotAvailable(fc: UntypedFormControl) {
     // this is a dummy validator to check if the username is valid or not.
     // In a real app you should check against your DB if the username is already in use.

src/app/visualizations/charts/charts-shared.module.ts CHANGED Viewed

@@ -6,12 +6,14 @@ import { NgxChartsModule } from "@swimlane/ngx-charts";
 import { CustomDoughnutChartComponent } from './custom-doughnut-chart/custom-doughnut-chart.component';
 import { CustomLineChartComponent } from './custom-line-chart/custom-line-chart.component';
 @NgModule({
   declarations: [
     CustomDoughnutChartComponent,
-    CustomLineChartComponent
   ],
   imports: [
     CommonModule,
@@ -19,7 +21,8 @@ import { CustomLineChartComponent } from './custom-line-chart/custom-line-chart.
   ],
   exports: [
     CustomDoughnutChartComponent,
-    CustomLineChartComponent
   ]
 })
 export class ChartsSharedModule { }

 import { CustomDoughnutChartComponent } from './custom-doughnut-chart/custom-doughnut-chart.component';
 import { CustomLineChartComponent } from './custom-line-chart/custom-line-chart.component';
+import { CustomProgressBarDirective } from './custom-progress-bar-chart/custom-progress-bar.directive';
 @NgModule({
   declarations: [
     CustomDoughnutChartComponent,
+    CustomLineChartComponent,
+    CustomProgressBarDirective
   ],
   imports: [
     CommonModule,
   ],
   exports: [
     CustomDoughnutChartComponent,
+    CustomLineChartComponent,
+    CustomProgressBarDirective
   ]
 })
 export class ChartsSharedModule { }

src/app/visualizations/charts/custom-progress-bar-chart/custom-progress-bar.directive.ts ADDED Viewed

	@@ -0,0 +1,48 @@

+import { Directive, Input, OnInit } from '@angular/core';
+import { IonProgressBar } from '@ionic/angular';
+@Directive({
+  selector: '[appCustomProgressBar]'
+})
+export class CustomProgressBarDirective implements OnInit {
+  ionicProgressBar: IonProgressBar;
+  // ? Make Inputs required
+  // (see: https://stackoverflow.com/a/50293330/1116959)
+  @Input()
+  get progress() {
+    throw new Error('Attribute "appCustomProgressBar.progress" is required');
+  }
+  set progress(value: number) {
+    Object.defineProperty(this, 'progress', {
+      value,
+      writable: true,
+      configurable: true
+    });
+  }
+  @Input()
+  get max() {
+    throw new Error('Attribute "appCustomProgressBar.max" is required');
+  }
+  set max(value: number) {
+    Object.defineProperty(this, 'max', {
+      value,
+      writable: true,
+      configurable: true
+    });
+  }
+  constructor(private hostElement: IonProgressBar) {
+    this.ionicProgressBar = hostElement;
+  }
+  ngOnInit(): void {
+    this.ionicProgressBar.buffer = 1;
+    const progressValue = (this.progress * 100) / this.max;
+    this.ionicProgressBar.value = (progressValue / 100);
+  }
+}

src/app/visualizations/crm-dashboard/crm-dashboard.module.ts CHANGED Viewed

@@ -4,8 +4,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule, Routes } from "@angular/router";
 import { IonicModule } from "@ionic/angular";
-// https://ng-bootstrap.github.io/#/components/progressbar/api
-import { NgbProgressbarModule } from "@ng-bootstrap/ng-bootstrap";
 // ngx-charts - lib: https://swimlane.gitbook.io/ngx-charts/
 import { NgxChartsModule } from "@swimlane/ngx-charts";
@@ -29,8 +27,7 @@ const routes: Routes = [
     IonicModule,
     RouterModule.forChild(routes),
     ChartsSharedModule,
-    NgxChartsModule,
-    NgbProgressbarModule
   ],
   declarations: [
     CrmDashboardPage

 import { RouterModule, Routes } from "@angular/router";
 import { IonicModule } from "@ionic/angular";
 // ngx-charts - lib: https://swimlane.gitbook.io/ngx-charts/
 import { NgxChartsModule } from "@swimlane/ngx-charts";
     IonicModule,
     RouterModule.forChild(routes),
     ChartsSharedModule,
+    NgxChartsModule
   ],
   declarations: [
     CrmDashboardPage

src/app/visualizations/crm-dashboard/crm-dashboard.page.html CHANGED Viewed

@@ -46,14 +46,14 @@
         <div class="progress-bar-stat-wrapper">
           <div class="progress-bar-stat">
             <div class="progress-bar-container">
-              <ngb-progressbar [value]="79" [max]="254"></ngb-progressbar>
             </div>
             <span class="stat-value" ngx-charts-count-up [countTo]="79">79</span>
             <span class="stat-reference">new</span>
           </div>
           <div class="progress-bar-stat">
             <div class="progress-bar-container">
-              <ngb-progressbar [value]="18" [max]="100"></ngb-progressbar>
             </div>
             <span class="stat-value" ngx-charts-count-up [countTo]="18" [countSuffix]="'%'">18%</span>
             <span class="stat-reference">Subscribed</span>

         <div class="progress-bar-stat-wrapper">
           <div class="progress-bar-stat">
             <div class="progress-bar-container">
+              <ion-progress-bar appCustomProgressBar [progress]="79" [max]="254"></ion-progress-bar>
             </div>
             <span class="stat-value" ngx-charts-count-up [countTo]="79">79</span>
             <span class="stat-reference">new</span>
           </div>
           <div class="progress-bar-stat">
             <div class="progress-bar-container">
+              <ion-progress-bar appCustomProgressBar [progress]="18" [max]="100"></ion-progress-bar>
             </div>
             <span class="stat-value" ngx-charts-count-up [countTo]="18" [countSuffix]="'%'">18%</span>
             <span class="stat-reference">Subscribed</span>

src/app/visualizations/crm-dashboard/crm-dashboard.page.scss CHANGED Viewed

@@ -71,6 +71,7 @@
   .progress-bar-stat-wrapper {
     --progress-bar-height: 20vw;
     display: flex;
     justify-content: center;
@@ -107,21 +108,25 @@
       justify-content: center;
       align-items: center;
-      ngb-progressbar {
         // ? As it is rotated, height references the actual width of the object
-        --bs-progress-height: 14px;
         // ? Half the height
-        --bs-progress-border-radius: calc(14px/2);
-        --bs-progress-bar-bg: #2c93e8;
-        --bs-progress-bg: #d5e7f8;
-        transform: rotate(-90deg);
         // ? As it is rotated, width references the actual height of the object
         width: var(--progress-bar-height);
         // ? Inner bar
-        .progress-bar {
-          border-radius: calc(14px/2) !important;
         }
       }
     }
@@ -189,7 +194,7 @@
     }
     .tag-label {
-      font-size: 14px;
       text-overflow: unset;
       white-space: unset;
       overflow: initial;
@@ -201,7 +206,7 @@
   padding: 20px 0px;
   border-radius: 35px 35px 0px 0px;
   background: #1e3466;
-  // ! half of button height
   margin-top: 25px;
   .custom-chart-header {
@@ -287,14 +292,3 @@
     max-width: 100%;
   }
 }
-:host ::ng-deep {
-  .progress-bar-stat-wrapper {
-    ngb-progressbar {
-      // ? Inner bar
-      .progress-bar {
-        border-radius: calc(14px/2);
-      }
-    }
-  }
-}

   .progress-bar-stat-wrapper {
     --progress-bar-height: 20vw;
+    --progress-bar-width: 14px;
     display: flex;
     justify-content: center;
       justify-content: center;
       align-items: center;
+      ion-progress-bar {
+        transform: rotate(-90deg);
         // ? As it is rotated, height references the actual width of the object
+        height: var(--progress-bar-width);
         // ? Half the height
+        border-radius: calc(var(--progress-bar-width)/2);
         // ? As it is rotated, width references the actual height of the object
         width: var(--progress-bar-height);
+        &::part(track) {
+          background: #d5e7f8;
+        }
         // ? Inner bar
+        &::part(progress) {
+          // ? Ionic scales the progress bar. When scaling, the border radius gets distorted (see: https://codepen.io/thebabydino/pen/VJQMmJ)
+          // ! A workaround could be found here: https://css-tricks.com/various-methods-for-expanding-a-box-while-preserving-the-border-radius/
+          border-radius: 0px;
+          background: #2c93e8;
         }
       }
     }
     }
     .tag-label {
+      font-size: 16px;
       text-overflow: unset;
       white-space: unset;
       overflow: initial;
   padding: 20px 0px;
   border-radius: 35px 35px 0px 0px;
   background: #1e3466;
+  // ! half button height
   margin-top: 25px;
   .custom-chart-header {
     max-width: 100%;
   }
 }

src/app/visualizations/crm-dashboard/crm-dashboard.page.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from "@angular/core";
-import { FormControl, FormGroup } from "@angular/forms";
 import { LineChartComponent } from "@swimlane/ngx-charts";
 import { curveLinear, curveNatural } from "d3-shape";
@@ -14,7 +14,7 @@ import { CrmDashboardService } from "./crm-dashboard.service";
 export class CrmDashboardPage implements OnInit {
   @ViewChild(LineChartComponent) chartInstance?: LineChartComponent;
-  customChartFiltersForm: FormGroup;
   revenueChartData: any;
@@ -36,8 +36,8 @@ export class CrmDashboardPage implements OnInit {
   constructor(
     private crmDashboardService: CrmDashboardService
   ) {
-    this.customChartFiltersForm = new FormGroup({
-      selected_option: new FormControl('week')
     });
     const isSmooth = true;

 import { Component, OnInit, ViewChild } from "@angular/core";
+import { UntypedFormControl, UntypedFormGroup } from "@angular/forms";
 import { LineChartComponent } from "@swimlane/ngx-charts";
 import { curveLinear, curveNatural } from "d3-shape";
 export class CrmDashboardPage implements OnInit {
   @ViewChild(LineChartComponent) chartInstance?: LineChartComponent;
+  customChartFiltersForm: UntypedFormGroup;
   revenueChartData: any;
   constructor(
     private crmDashboardService: CrmDashboardService
   ) {
+    this.customChartFiltersForm = new UntypedFormGroup({
+      selected_option: new UntypedFormControl('week')
     });
     const isSmooth = true;

src/app/walkthrough/walkthrough.guard.ts ADDED Viewed

	@@ -0,0 +1,21 @@

+import { Injectable } from '@angular/core';
+import { CanActivate, Router } from '@angular/router';
+import { Preferences } from '@capacitor/preferences';
+@Injectable()
+export class WalkthroughGuard implements CanActivate {
+  constructor(private router: Router) {}
+  async canActivate(): Promise<boolean> {
+    const { value } = await Preferences.get({ key: 'visitedWalkthrough' });
+    if (value === 'true') {
+      // this is a returning user, don't show him the walkthrough
+      this.router.navigate(['auth']);
+      return false;
+    } else {
+      return true;
+    }
+  }
+}

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

@@ -10,11 +10,13 @@ import { SwiperModule } from 'swiper/angular';
 import { ComponentsModule } from '../components/components.module';
 import { WalkthroughPage } from './walkthrough.page';
 const routes: Routes = [
   {
     path: '',
-    component: WalkthroughPage
   }
 ];
@@ -27,6 +29,7 @@ const routes: Routes = [
     ComponentsModule,
     SwiperModule
   ],
-  declarations: [WalkthroughPage]
 })
 export class WalkthroughPageModule {}

 import { ComponentsModule } from '../components/components.module';
 import { WalkthroughPage } from './walkthrough.page';
+import { WalkthroughGuard } from './walkthrough.guard';
 const routes: Routes = [
   {
     path: '',
+    component: WalkthroughPage,
+    canActivate: [WalkthroughGuard]
   }
 ];
     ComponentsModule,
     SwiperModule
   ],
+  declarations: [WalkthroughPage],
+  providers: [WalkthroughGuard]
 })
 export class WalkthroughPageModule {}

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

@@ -1,7 +1,9 @@
-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';
@@ -17,7 +19,7 @@ SwiperCore.use([Pagination, IonicSwiper]);
     './styles/walkthrough.responsive.scss'
   ]
 })
-export class WalkthroughPage implements AfterViewInit {
   swiperRef: SwiperCore;
   @ViewChild(SwiperComponent, { static: false }) swiper?: SwiperComponent;
@@ -27,10 +29,19 @@ export class WalkthroughPage implements AfterViewInit {
   @HostBinding('class.last-slide-active') isLastSlide = false;
   constructor(
     public menu: MenuController,
     private ngZone: NgZone
   ) { }
   // Disable side menu for this page
   ionViewDidEnter(): void {
     this.menu.enable(false);
@@ -43,25 +54,25 @@ export class WalkthroughPage implements AfterViewInit {
   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 {

+import { Inject, PLATFORM_ID, Component, AfterViewInit, ViewChild, HostBinding, NgZone, OnInit } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { Preferences } from '@capacitor/preferences';
+import { MenuController, IonicSwiper } from '@ionic/angular';
 import SwiperCore, { Pagination } from 'swiper';
 import { SwiperComponent } from 'swiper/angular';
     './styles/walkthrough.responsive.scss'
   ]
 })
+export class WalkthroughPage implements AfterViewInit, OnInit {
   swiperRef: SwiperCore;
   @ViewChild(SwiperComponent, { static: false }) swiper?: SwiperComponent;
   @HostBinding('class.last-slide-active') isLastSlide = false;
   constructor(
+    @Inject(PLATFORM_ID) private platformId: object,
     public menu: MenuController,
     private ngZone: NgZone
   ) { }
+  ngOnInit(): void {
+    // save key to mark the walkthrough as visited so the next time the user visits the app, he would be redirected to log in
+    Preferences.set({
+      key: 'visitedWalkthrough',
+      value: 'true'
+    });
+  }
   // Disable side menu for this page
   ionViewDidEnter(): void {
     this.menu.enable(false);
   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 {

src/app/wordpress/wordpress.native.service.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { Injectable } from '@angular/core';
 import { forkJoin, from, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { Http, HttpResponse } from '@capacitor-community/http';
 import { environment } from '../../environments/environment';
@@ -13,7 +13,7 @@ export class WordpressNativeService {
   constructor() {}
   public getPost(postId: any): Observable<any> {
-    const postPromise: Promise<HttpResponse> = Http.get({
       url: `${environment.wordpress_api_url}posts/${postId}`
     });
@@ -33,7 +33,7 @@ export class WordpressNativeService {
     // ? If you want to query posts by category
     let category_url = categoryId ? '&categories=' + categoryId : '';
-    const recentPostsPromise: Promise<HttpResponse> = Http.get({
       url: environment.wordpress_api_url +
       'posts?page=' +
       page +
@@ -59,7 +59,7 @@ export class WordpressNativeService {
   }
   public getComments(postId: number, page: number = 1): Observable<any> {
-    const commentsPromise: Promise<HttpResponse> = Http.get({
       url: environment.wordpress_api_url + 'comments?post=' + postId + '&page=' + page
     });
@@ -76,7 +76,7 @@ export class WordpressNativeService {
   }
   public getAuthor(author): Observable<any> {
-    const authorPromise: Promise<HttpResponse> = Http.get({
       url: environment.wordpress_api_url + 'users/' + author
     });
@@ -105,7 +105,7 @@ export class WordpressNativeService {
   }
   public getCategory(category: number): Observable<any> {
-    const categoryPromise: Promise<HttpResponse> = Http.get({
       url: environment.wordpress_api_url + 'categories/' + category
     });

 import { forkJoin, from, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { CapacitorHttp, HttpResponse } from '@capacitor/core';
 import { environment } from '../../environments/environment';
   constructor() {}
   public getPost(postId: any): Observable<any> {
+    const postPromise: Promise<HttpResponse> = CapacitorHttp.get({
       url: `${environment.wordpress_api_url}posts/${postId}`
     });
     // ? If you want to query posts by category
     let category_url = categoryId ? '&categories=' + categoryId : '';
+    const recentPostsPromise: Promise<HttpResponse> = CapacitorHttp.get({
       url: environment.wordpress_api_url +
       'posts?page=' +
       page +
   }
   public getComments(postId: number, page: number = 1): Observable<any> {
+    const commentsPromise: Promise<HttpResponse> = CapacitorHttp.get({
       url: environment.wordpress_api_url + 'comments?post=' + postId + '&page=' + page
     });
   }
   public getAuthor(author): Observable<any> {
+    const authorPromise: Promise<HttpResponse> = CapacitorHttp.get({
       url: environment.wordpress_api_url + 'users/' + author
     });
   }
   public getCategory(category: number): Observable<any> {
+    const categoryPromise: Promise<HttpResponse> = CapacitorHttp.get({
       url: environment.wordpress_api_url + 'categories/' + category
     });

src/global.scss CHANGED Viewed

@@ -12,10 +12,10 @@
 @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 "~@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

src/main.server.ts CHANGED Viewed

@@ -7,4 +7,4 @@ if (environment.production) {
 }
 export { AppServerModule } from './app/app.server.module';
-export { renderModule, renderModuleFactory } from '@angular/platform-server';

 }
 export { AppServerModule } from './app/app.server.module';
+export { renderModuleFactory } from '@angular/platform-server';

src/theme/app-defaults.scss CHANGED Viewed

@@ -1,3 +1,7 @@
 ion-title {
   // Adding !important to force precedence in SSR
   font-weight: 400 !important;

+html {
+  line-height: 1.5;
+}
 ion-title {
   // Adding !important to force precedence in SSR
   font-weight: 400 !important;

src/theme/variables.scss CHANGED Viewed

@@ -115,6 +115,3 @@ html.ios {
 html.md {
   --app-header-height: 56px;
 }
-/* Importing Bootstrap SCSS file. */
-@import '~bootstrap/scss/bootstrap';

 html.md {
   --app-header-height: 56px;
 }

src/tsconfig.app.json CHANGED Viewed

@@ -16,6 +16,5 @@
     "src/**/*.d.ts"
   ],
   "angularCompilerOptions": {
-    "enableIvy": true
   }
 }

     "src/**/*.d.ts"
   ],
   "angularCompilerOptions": {
   }
 }

src/tsconfig.server.json CHANGED Viewed

@@ -3,7 +3,6 @@
   "extends": "./tsconfig.app.json",
   "compilerOptions": {
     "outDir": "../out-tsc/server",
-    "target": "es2016",
     // For SSR we need to include googlemaps typings
     // (see: https://developers.google.com/maps/documentation/javascript/using-typescript#compiler_options_in_tsconfigjson_recommended)
     "types": [

   "extends": "./tsconfig.app.json",
   "compilerOptions": {
     "outDir": "../out-tsc/server",
     // For SSR we need to include googlemaps typings
     // (see: https://developers.google.com/maps/documentation/javascript/using-typescript#compiler_options_in_tsconfigjson_recommended)
     "types": [

tsconfig.json CHANGED Viewed

@@ -12,13 +12,14 @@
     "allowSyntheticDefaultImports": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es2015",
     "typeRoots": [
       "node_modules/@types"
     ],
     "lib": [
       "es2018",
       "dom"
-    ]
   }
 }

     "allowSyntheticDefaultImports": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
+    "target": "ES2022",
     "typeRoots": [
       "node_modules/@types"
     ],
     "lib": [
       "es2018",
       "dom"
+    ],
+    "useDefineForClassFields": false
   }
 }