feat(dashboard): added profile and settings pages

also added app.state

Author: xmlking

apps/webapp/src/environments/base.ts

@@ -10,7 +10,7 @@ export default {
     sessionId: 'sumodemo',
   },
   webPush: {
-    publicVapidKey: 'BAJq-yHlSNjUqKW9iMY0hG96X9WdVwetUFDa5rQIGRPqOHKAL_fkKUe_gUTAKnn9IPAltqmlNO2OkJrjdQ_MXNg'
+    publicVapidKey: 'BAJq-yHlSNjUqKW9iMY0hG96X9WdVwetUFDa5rQIGRPqOHKAL_fkKUe_gUTAKnn9IPAltqmlNO2OkJrjdQ_MXNg',
   },
   versions: {
     app: packageJson.version,
@@ -20,7 +20,6 @@ export default {
     flexLayout: packageJson.dependencies['@angular/flex-layout'],
     rxjs: packageJson.dependencies.rxjs,
     angularCli: packageJson.devDependencies['@angular/cli'],
-    // typescript: packageJson.devDependencies['typescript'],
-    typescript: packageJson.dependencies['typescript'],
+    typescript: packageJson.devDependencies['typescript'],
   },
 };

libs/auth/src/lib/oauth.init.ts

@@ -21,8 +21,7 @@ export function initializeAuth(oauthService: OAuthService, store: Store) {
     if (oauthService.hasValidAccessToken()) {
       // This is called when using ImplicitFlow or page reload, no effect for ROPC Flow
       console.log('hasValidAccessToken');
-      // const profile: any = oauthService.getIdentityClaims();
-      const profile: any = await oauthService.loadUserProfile();
+      const profile: any = oauthService.getIdentityClaims();
       store.dispatch(new LoginSuccess(profile));
     }
     return true; // need to return.

libs/core/src/lib/services/push-notification.service.ts

@@ -1,11 +1,11 @@
-import {Injectable} from '@angular/core';
-import {SwPush} from '@angular/service-worker';
-import {from as fromPromise, Observable, of} from 'rxjs';
+import { Injectable } from '@angular/core';
+import { SwPush } from '@angular/service-worker';
+import { from as fromPromise, Observable, of } from 'rxjs';
 import { environment } from '@env/environment';
 // import {ApiService} from './api.service';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class PushNotificationService {
   private pushSubscription: PushSubscription;
@@ -14,8 +14,7 @@ export class PushNotificationService {
     return this.swPush.isEnabled;
   }
 
-  constructor(private readonly swPush: SwPush, /*private readonly apiService: ApiService*/) {
-  }
+  constructor(private readonly swPush: SwPush /*private readonly apiService: ApiService*/) {}
 
   async register() {
     if (!this.swPush.isEnabled) {
@@ -24,7 +23,7 @@ export class PushNotificationService {
 
     // Key generation: https://web-push-codelab.glitch.me
     const subscription = await this.swPush.requestSubscription({ serverPublicKey: environment.webPush.publicVapidKey });
-    console.log('Push subscription endpoint: ', subscription.endpoint);
+    console.log('Push subscription', subscription);
     this.pushSubscription = subscription;
     // return this.apiService.post('push/register', subscription).subscribe();
   }

libs/core/src/lib/state/eventbus.ts

@@ -43,19 +43,20 @@ export class EventBus {
       this.renderer.listen(this.window, 'beforeinstallprompt', event => {
         event.preventDefault(); // Prevent default for older Chrome versions to prevent double install prompt
         this.analytics.emitEvent(EventCategory.Install, 'available');
+        // this.snackBar.open('You can add this PWA to your homescreen', '', {duration: 3000});
         this.store.dispatch(new SetInstallPrompt(event));
       });
       this.renderer.listen(this.window, 'appinstalled', event => {
         event.preventDefault(); // Prevent default for older Chrome versions to prevent double install prompt
-        ga('send', 'event', 'install', 'installed');
         this.analytics.emitEvent(EventCategory.Install, 'installed');
         this.store.dispatch(new ChangeInstallStatus(true));
       });
 
       this.actions$.pipe(ofActionSuccessful(SetInstallPrompt)).subscribe(async (action: SetInstallPrompt) => {
         try {
           console.log('platforms', action.payload.platforms);
-          // TODO: prompt user with MatSnackBar and call below if clicked.
+          // TODO: const sb = this.snackBar.open('Do you want to install this app?', 'Install', {duration: 5000})
+          // sb.onAction().subscribe(() => { //prompt here }
           action.payload.prompt();
           const choiceResult = await action.payload.userChoice;
           console.log('choiceResult', choiceResult);

libs/dashboard/src/lib/containers/settings/settings.component.ts

@@ -6,9 +6,12 @@ import {
   ChangeLanguage,
   ChangeTheme,
   DisableNotifications,
-  EnableNotifications, Language,
+  EnableNotifications,
+  Language,
   PreferenceState,
-  PreferenceStateModel, PushNotificationService, ThemeName,
+  PreferenceStateModel,
+  PushNotificationService,
+  ThemeName,
 } from '@ngx-starter-kit/core';
 import { untilDestroy } from '@ngx-starter-kit/ngx-utils';
 
@@ -22,7 +25,12 @@ export class SettingsComponent implements OnInit, OnDestroy {
   preferences: PreferenceStateModel;
   settingsForm: FormGroup;
   languages: Language[] = ['en', 'es', 'de', 'fr', 'cn'];
-  themes: ThemeName[] = [ThemeName.DEEPPURPLE_AMBER, ThemeName.INDIGO_PINK, ThemeName.PINK_BLUEGREY, ThemeName.PURPLE_GREEN];
+  themes: ThemeName[] = [
+    ThemeName.DEEPPURPLE_AMBER,
+    ThemeName.INDIGO_PINK,
+    ThemeName.PINK_BLUEGREY,
+    ThemeName.PURPLE_GREEN,
+  ];
 
   constructor(private fb: FormBuilder, private store: Store, private pnServ: PushNotificationService) {}
 
@@ -44,7 +52,6 @@ export class SettingsComponent implements OnInit, OnDestroy {
       .get('enableNotifications')
       .valueChanges.pipe(untilDestroy(this))
       .subscribe(enableNotifications => {
-        console.log('pnServ.available', this.pnServ.available);
         if (enableNotifications) {
           this.pnServ.register();
           this.store.dispatch(new EnableNotifications());