@chat21/chat21-ionic 3.0.102 → 3.0.103-rc.2

package/src/app/app.component.ts

@@ -1,75 +1,48 @@
+import { Component, HostListener, NgZone, OnInit, ViewChild } from '@angular/core';
 
-import { TYPE_DIRECT, TYPE_SUPPORT_GROUP, URL_SOUND_CONVERSATION_UNASSIGNED } from 'src/chat21-core/utils/constants';
-import { tranlatedLanguage, URL_SOUND_CONVERSATION_ADDED, URL_SOUND_LIST_CONVERSATION } from 'src/chat21-core/utils/constants';
-import { ArchivedConversationsHandlerService } from 'src/chat21-core/providers/abstract/archivedconversations-handler.service';
-import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
-
-import { Component, ViewChild, NgZone, OnInit, HostListener, ElementRef, Renderer2, AfterViewInit, isDevMode} from '@angular/core';
-import { Config, Platform, IonRouterOutlet, IonSplitPane, NavController, MenuController, AlertController, IonNav, ToastController } from '@ionic/angular';
-import { ActivatedRoute, NavigationStart, Router } from '@angular/router';
-import { Subscription, VirtualTimeScheduler } from 'rxjs';
-import { ModalController } from '@ionic/angular';
-
-// import * as firebase from 'firebase/app';
-import firebase from "firebase/app";
-import 'firebase/auth'; // nk in watch connection status
-
-import { StatusBar } from '@ionic-native/status-bar/ngx';
+import { AlertController, Config, IonNav, IonRouterOutlet, ModalController, NavController, Platform, ToastController } from '@ionic/angular';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
-import { TranslateService } from '@ngx-translate/core';
+import { StatusBar } from '@ionic-native/status-bar/ngx';
 
-// services
-import { AppConfigProvider } from './services/app-config';
-// import { UserService } from './services/user.service';
-// import { CurrentUserService } from './services/current-user/current-user.service';
+import { Subscription } from 'rxjs';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { WebSocketJs } from './services/websocket/websocket-js';
+import { checkPlatformIsMobile, getParameterByName, isOnMobileDevice } from 'src/chat21-core/utils/utils';
 import { EventsService } from './services/events-service';
-import { MessagingAuthService } from '../chat21-core/providers/abstract/messagingAuth.service';
-import { PresenceService } from '../chat21-core/providers/abstract/presence.service';
-import { TypingService } from '../chat21-core/providers/abstract/typing.service';
-import { UploadService } from '../chat21-core/providers/abstract/upload.service';
-// import { ChatPresenceHandler} from './services/chat-presence-handler';
 import { NavProxyService } from './services/nav-proxy.service';
+import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
+import { MessagingAuthService } from 'src/chat21-core/providers/abstract/messagingAuth.service';
+import { AppConfigProvider } from './services/app-config';
+import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
+import { environment } from 'src/environments/environment';
 import { ChatManager } from 'src/chat21-core/providers/chat-manager';
-// import { ChatConversationsHandler } from './services/chat-conversations-handler';
+import { TranslateService } from '@ngx-translate/core';
+import { PresenceService } from 'src/chat21-core/providers/abstract/presence.service';
+import { TypingService } from 'src/chat21-core/providers/abstract/typing.service';
+import { UploadService } from 'src/chat21-core/providers/abstract/upload.service';
 import { ConversationsHandlerService } from 'src/chat21-core/providers/abstract/conversations-handler.service';
+import { ArchivedConversationsHandlerService } from 'src/chat21-core/providers/abstract/archivedconversations-handler.service';
 import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
-
-// pages
-import { LoginPage } from './pages/authentication/login/login.page';
-import { ConversationListPage } from './pages/conversations-list/conversations-list.page';
-
-// utils
-import { checkPlatformIsMobile, isGroup, getParameterByName, searchIndexInArrayForUid, compareValues, stripTags, isOnMobileDevice } from 'src/chat21-core/utils/utils';
-import { STORAGE_PREFIX, PLATFORM_MOBILE, PLATFORM_DESKTOP, CHAT_ENGINE_FIREBASE, AUTH_STATE_OFFLINE, AUTH_STATE_ONLINE } from 'src/chat21-core/utils/constants';
-import { environment } from '../environments/environment';
-import { UserModel } from '../chat21-core/models/user';
-import { ConversationModel } from 'src/chat21-core/models/conversation';
-import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
-import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
-import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
-// FCM
 import { NotificationsService } from 'src/chat21-core/providers/abstract/notifications.service';
-import { getImageUrlThumbFromFirebasestorage } from 'src/chat21-core/utils/utils-user';
-
-// import { Network } from '@ionic-native/network/ngx';
-// import { Observable, Observer, fromEvent, merge, of } from 'rxjs';
-// import { mapTo } from 'rxjs/operators';
-import { TiledeskService } from './services/tiledesk/tiledesk.service';
 import { NetworkService } from './services/network-service/network.service';
-import { filter } from 'rxjs/operators'
-import { WebSocketJs } from './services/websocket/websocket-js';
-import { Location } from '@angular/common'
 import { ScriptService } from './services/scripts/script.service';
-// import { FCM } from 'cordova-plugin-fcm-with-dependecy-updated/ionic/ngx';
-
-// import { filter } from 'rxjs/operators';
+import { AUTH_STATE_OFFLINE, AUTH_STATE_ONLINE, PLATFORM_DESKTOP, PLATFORM_MOBILE, tranlatedLanguage, TYPE_DIRECT, URL_SOUND_CONVERSATION_ADDED, URL_SOUND_CONVERSATION_UNASSIGNED, URL_SOUND_LIST_CONVERSATION } from 'src/chat21-core/utils/constants';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ConversationModel } from 'src/chat21-core/models/conversation';
+import { LoginPage } from './pages/authentication/login/login.page';
+import { UserModel } from 'src/chat21-core/models/user';
+import { filter } from 'rxjs/operators';
+import { ConversationListPage } from './pages/conversations-list/conversations-list.page';
+import { Location } from '@angular/common'
+import { FCM } from 'cordova-plugin-fcm-with-dependecy-updated/ionic/ngx'
+import { Deeplinks } from '@ionic-native/deeplinks/ngx';
 
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
   styleUrls: ['app.component.scss']
 })
-
 export class AppComponent implements OnInit {
   @ViewChild('sidebarNav', { static: false }) sidebarNav: IonNav;
   @ViewChild('detailNav', { static: false }) detailNav: IonRouterOutlet;
@@ -122,6 +95,7 @@ export class AppComponent implements OnInit {
     private platform: Platform,
     private splashScreen: SplashScreen,
     private statusBar: StatusBar,
+    private deeplinks: Deeplinks,
     private appConfigProvider: AppConfigProvider,
     public events: EventsService,
     public config: Config,
@@ -137,7 +111,6 @@ export class AppComponent implements OnInit {
     public presenceService: PresenceService,
     private router: Router,
     private route: ActivatedRoute,
-    private renderer: Renderer2,
     private navService: NavProxyService,
     // public chatPresenceHandler: ChatPresenceHandler,
     public typingService: TypingService,
@@ -156,19 +129,31 @@ export class AppComponent implements OnInit {
     public webSocketJs: WebSocketJs,
     public scriptService: ScriptService,
     public location: Location,
-    // private fcm: FCM
+    private fcm: FCM
   ) {
 
-
     this.saveInStorageNumberOfOpenedChatTab();
     this.listenChatAlreadyOpenWithoutParamsInMobileMode()
     this.IS_ON_MOBILE_DEVICE = isOnMobileDevice()
-    // this.listenToUrlChanges();
-    // this.getPageState();
   }
 
+  saveInStorageNumberOfOpenedChatTab() {
+    // this.logger.log('Calling saveInStorageChatOpenedTab!');
+    // https://jsfiddle.net/jjjs5wd3/3/å
+    if (+localStorage.tabCount > 0) {
+      this.logger.log('Chat IONIC Already open!');
+    } else {
+      localStorage.tabCount = 0;
 
-
+      localStorage.tabCount = +localStorage.tabCount + 1;
+    }
+    const terminationEvent = 'onpagehide' in self ? 'pagehide' : 'unload';
+    window.addEventListener(terminationEvent, (event) => {
+      if (localStorage.tabCount > 0) {
+        localStorage.tabCount = +localStorage.tabCount - 1;
+      }
+    }, { capture: true });
+  }
 
   listenChatAlreadyOpenWithoutParamsInMobileMode() {
     this.events.subscribe('noparams:mobile', (isAlreadyOpenInMobileMode) => {
@@ -273,35 +258,7 @@ export class AppComponent implements OnInit {
   // }
 
 
-  saveInStorageNumberOfOpenedChatTab() {
-    // this.logger.log('Calling saveInStorageChatOpenedTab!');
-    // https://jsfiddle.net/jjjs5wd3/3/å
-    if (+localStorage.tabCount > 0) {
-      this.logger.log('Chat IONIC Already open!');
-    } else {
-      localStorage.tabCount = 0;
-
-      localStorage.tabCount = +localStorage.tabCount + 1;
-    }
-    const terminationEvent = 'onpagehide' in self ? 'pagehide' : 'unload';
-    window.addEventListener(terminationEvent, (event) => {
-      if (localStorage.tabCount > 0) {
-        localStorage.tabCount = +localStorage.tabCount - 1;
-      }
-    }, { capture: true });
-  }
-
-
-
-  // param() {
-  //   // PARAM
-  //   const url: URL = new URL(window.top.location.href);
-  //   const params: URLSearchParams = url.searchParams;
-  //   return params;
-  // }
-  /**
-   */
-  ngOnInit() {
+  ngOnInit(): void {
     const appconfig = this.appConfigProvider.getConfig();
     this.logger.log('[APP-COMP] ngOnInit  appconfig', appconfig)
     if (appconfig && appconfig.supportMode && (appconfig.supportMode === true || appconfig.supportMode === 'true')) {
@@ -435,10 +392,7 @@ export class AppComponent implements OnInit {
     })
   }
 
-  /** */
   initializeApp(calledby: string) {
-    // this.logger.log('[APP-COMP] - X - initializeApp !!! CALLED-BY: ', calledby);
-    // console.log('[APP-COMP] appconfig platform is cordova: ', this.platform.is('cordova'))
 
     if (!this.platform.is('desktop')) {
       this.splashScreen.show();
@@ -460,13 +414,10 @@ export class AppComponent implements OnInit {
     this.notificationsEnabled = true;
     this.zone = new NgZone({}); // a cosa serve?
 
-    // ------------------------------------------
-    // Platform ready
-    // ------------------------------------------
     this.platform.ready().then(() => {
-      // console.log("Check platform");
-      this.getPlatformName();
+      let platform = this.getPlatformName();
 
+      this.initDeeplinks();
       // this.setLanguage();
 
       if (this.splashScreen) {
@@ -474,8 +425,6 @@ export class AppComponent implements OnInit {
       }
       this.statusBar.styleLightContent();
       this.navService.init(this.sidebarNav, this.detailNav);
-      // this.persistence = appconfig.authPersistence;
-      // this.appStorageService.initialize(environment.storage_prefix, this.persistence, '')
       this.tiledeskAuthService.initialize(this.appConfigProvider.getConfig().apiUrl);
       this.messagingAuthService.initialize();
 
@@ -488,7 +437,7 @@ export class AppComponent implements OnInit {
       const vap_id_Key = this.appConfigProvider.getConfig().firebaseConfig.vapidKey
 
       if (pushEngine && pushEngine !== 'none') {
-        this.notificationsService.initialize(this.tenant, vap_id_Key)
+        this.notificationsService.initialize(this.tenant, vap_id_Key, platform)
       }
       this.uploadService.initialize();
 
@@ -507,22 +456,11 @@ export class AppComponent implements OnInit {
       this.watchToConnectionStatus();
 
 
-      // this.fcm.onNotification().subscribe(data => {
-      //   if (data.wasTapped) {
-      //     console.log("Received in background");
-      //   } else {
-      //     console.log("Received in foreground");
-      //   };
-      // });
-
-      // this.fcm.onTokenRefresh().subscribe(token => {
-      //   // Register your new token in your back-end if you want
-      //   // backend.registerToken(token);
-      // });
     });
   }
 
-  getPlatformName() {
+  getPlatformName(): string {
+    let platform: string = ''
     if (this.platform.is('cordova')) {
       this.logger.log("the device running Cordova");
     }
@@ -532,18 +470,23 @@ export class AppComponent implements OnInit {
 
     if (this.platform.is('android')) {
       this.logger.log("running on Android device!");
+      platform = 'android'
     }
     if (this.platform.is('ios')) {
       this.logger.log("running on iOS device!");
+      platform = 'ios'
     }
     if (this.platform.is('mobileweb')) {
       this.logger.log("running in a browser on mobile!");
+      platform = 'mobileweb'
     }
     if (this.platform.is('desktop')) {
       this.logger.log("running on desktop!");
+      platform = 'desktop'
     }
-  }
 
+    return platform
+  }
 
   getRouteParamsAndSetLoggerConfig() {
     const appconfig = this.appConfigProvider.getConfig();
@@ -559,6 +502,18 @@ export class AppComponent implements OnInit {
     });
   }
 
+  initDeeplinks(){
+    this.deeplinks.route({'/conversation-detail': ConversationListPage}).subscribe(match => {
+      this.logger.log('[APP-COMP] deeplinks match route', JSON.stringify(match.$args))
+      if(match.$args && match.$args.jwt){
+        this.appStorageService.setItem('tiledeskToken', decodeURIComponent(match.$args.jwt))
+        this.initAuthentication()
+      }
+    }, (nomatch)=> {
+      this.logger.error("[APP-COMP] deeplinks: Got a deeplink that didn't match", nomatch);
+    })
+  }
+
   /** */
   setLanguage(currentUser) {
     // const currentUser = JSON.parse(this.appStorageService.getItem('currentUser'));
@@ -1115,6 +1070,7 @@ export class AppComponent implements OnInit {
     if (currentUser) {
       if (pushEngine && pushEngine !== 'none') {
         this.notificationsService.getNotificationPermissionAndSaveToken(currentUser.uid);
+        this.handleNotifications()
       }
       this.presenceService.setPresence(currentUser.uid);
 
@@ -1385,6 +1341,37 @@ export class AppComponent implements OnInit {
     }
   }
 
+  private handleNotifications(){
+    if(this.platform.is('cordova')){
+       this.fcm.onNotification().subscribe(data => {
+          let pageUrl = 'conversation-detail/'
+          if (data.wasTapped) {
+            console.log("FCM: Received in background", JSON.stringify(data));
+            let IDConv = data.channel_type === "group" ? data.recipient : data.sender;
+            let FullNameConv = data.sender_fullname
+            let Convtype = 'active'
+            
+            if (IDConv && FullNameConv) {
+              pageUrl += IDConv + '/' + FullNameConv + '/' + Convtype
+            }
+            // replace(/\(/g, '%28').replace(/\)/g, '%29') -> used for the encoder of any round brackets
+            this.router.navigateByUrl(pageUrl.replace(/\(/g, '%28').replace(/\)/g, '%29').replace( /#/g, "%23" ));
+          } else {
+            console.log("FCM: Received in foreground", JSON.stringify(data));
+            // let IDConv = data.recipient
+            // let FullNameConv = data.sender_fullname
+            // let Convtype = 'active'
+            
+            // if (IDConv && FullNameConv) {
+            //   pageUrl += IDConv + '/' + FullNameConv + '/' + Convtype
+            // }
+            // // replace(/\(/g, '%28').replace(/\)/g, '%29') -> used for the encoder of any round brackets
+            // this.router.navigateByUrl(pageUrl.replace(/\(/g, '%28').replace(/\)/g, '%29').replace( /#/g, "%23" ));
+          };
+        });
+    }
+  }
+
   private loadCustomScript(config){
     if(config.hasOwnProperty("globalRemoteJSSrc")){
       this.scriptService.buildScriptArray(config['globalRemoteJSSrc'])
@@ -1599,4 +1586,3 @@ export class AppComponent implements OnInit {
   //   console.log('HostListener onBlur-->', event)
   // }
 }
-

package/src/app/app.module.ts

@@ -7,15 +7,20 @@ import { RouteReuseStrategy } from '@angular/router';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
-import { SplashScreen } from '@ionic-native/splash-screen/ngx';
-import { StatusBar } from '@ionic-native/status-bar/ngx';
 import { ActivatedRoute } from '@angular/router';
 import { TranslateLoader, TranslateModule, TranslatePipe } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
+
+
+//NATIVE
 import { Keyboard } from '@ionic-native/keyboard/ngx';
 import { Chooser } from '@ionic-native/chooser/ngx';
 import { LoggerModule, NGXLogger, NgxLoggerLevel } from "ngx-logger";
+import { SplashScreen } from '@ionic-native/splash-screen/ngx';
+import { StatusBar } from '@ionic-native/status-bar/ngx';
+import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
+import { FCM } from 'cordova-plugin-fcm-with-dependecy-updated/ionic/ngx';
 
 // COMPONENTS
 import { AppComponent } from './app.component';
@@ -108,6 +113,7 @@ import { UnassignedConversationsPageModule } from './pages/unassigned-conversati
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MapsPageModule } from './modals/maps/maps.module';
 import { GoogleMapsModule } from '@angular/google-maps';
+import { Deeplinks } from '@ionic-native/deeplinks/ngx';
 
 // FACTORIES
 export function createTranslateLoader(http: HttpClient) {
@@ -234,12 +240,12 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigProvider, ap
   }
 }
 
-export function notificationsServiceFactory(appConfig: AppConfigProvider, chat21Service: Chat21Service) {
+export function notificationsServiceFactory(appConfig: AppConfigProvider, chat21Service: Chat21Service, fcm: FCM) {
   const config = appConfig.getConfig()
   if (config.pushEngine === PUSH_ENGINE_FIREBASE) {
-    return new FirebaseNotifications();
+    return new FirebaseNotifications(fcm);
   } else if (config.pushEngine === PUSH_ENGINE_MQTT) {
-    return new MQTTNotifications(chat21Service);
+    return new MQTTNotifications(chat21Service, fcm);
   } else {
     return;
   }
@@ -269,7 +275,6 @@ const appInitializerFn = (appConfig: AppConfigProvider, logger: NGXLogger) => {
     IonicModule.forRoot(),
     AppRoutingModule,
     HttpClientModule,
-    LoginPageModule,
     ConversationListPageModule,
     ConversationDetailPageModule,
     UnassignedConversationsPageModule,
@@ -291,16 +296,19 @@ const appInitializerFn = (appConfig: AppConfigProvider, logger: NGXLogger) => {
     }),
     ScrollbarThemeModule,
     SharedModule,
-    ConversationInfoModule,
-    LoaderPreviewPageModule,
-    SendEmailModalModule,
-    SendWhatsappTemplateModalModule,
-    MapsPageModule,
-    CreateTicketPageModule,
-    CreateRequesterPageModule,
-    CreateCannedResponsePageModule,
-    JsonMessagePageModule,
-    GoogleMapsModule
+    
+    //LAXY LOADED
+    // CreateTicketPageModule,
+    // CreateRequesterPageModule,
+    // LoaderPreviewPageModule,
+    // ConversationInfoModule,
+    LoginPageModule,
+    // CreateCannedResponsePageModule,
+    // SendEmailModalModule,
+    // SendWhatsappTemplateModalModule,
+    // MapsPageModule,
+    // JsonMessagePageModule,
+    // GoogleMapsModule
   ],
   bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -366,7 +374,7 @@ const appInitializerFn = (appConfig: AppConfigProvider, logger: NGXLogger) => {
     {
       provide: NotificationsService,
       useFactory: notificationsServiceFactory,
-      deps: [AppConfigProvider, Chat21Service]
+      deps: [AppConfigProvider, Chat21Service, FCM]
     },
     {
       provide: AppStorageService,
@@ -382,7 +390,10 @@ const appInitializerFn = (appConfig: AppConfigProvider, logger: NGXLogger) => {
     Chat21Service,
     WebSocketJs,
     ConvertRequestToConversation,
-    ScriptService
+    ScriptService,
+    FCM,
+    InAppBrowser,
+    Deeplinks
   ]
 })
 export class AppModule { }

package/src/app/chatlib/conversation-detail/conversation-content/conversation-content.component.html

@@ -26,19 +26,19 @@
                           <div role="messaggio" *ngIf="message.sender == senderId;" class="msg_container base_sent">
                           
                             <!--backgroundColor non viene ancora usato -->
-                            <tiledeskwidget-bubble-message class="messages msg_sent slide-in-right"
+                            <!-- <tiledeskwidget-bubble-message class="messages msg_sent slide-in-right"
                               [ngClass]="{'button-in-msg' : message?.metadata && message?.metadata?.button}"
                               [class.chat-text-emoticon]="isEmojii(message?.text)"
                               [message]="message"
                               [textColor]="'col-msg-sent'"
                               (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
                               (onAfterMessageRender)="onAfterMessageRenderFN($event)">
-                            </tiledeskwidget-bubble-message>
+                            </tiledeskwidget-bubble-message> -->
 
                               <!-- icon status message -->
-                            <tiledeskwidget-return-receipt class="slide-in-right"
+                            <!-- <tiledeskwidget-return-receipt class="slide-in-right"
                               [status]="message?.status">
-                            </tiledeskwidget-return-receipt>
+                            </tiledeskwidget-return-receipt> -->
 
                           </div>
     
@@ -54,13 +54,13 @@
                             </tiledeskwidget-avatar-image> -->
 
                             <!--backgroundColor non viene ancora usato -->
-                            <tiledeskwidget-bubble-message class="messages msg_receive slide-in-left"
+                            <!-- <tiledeskwidget-bubble-message class="messages msg_receive slide-in-left"
                               [class.chat-text-emoticon]="isEmojii(message?.text)"
                               [message]="message"
                               [textColor]="'black'"
                               (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
                               (onAfterMessageRender)="onAfterMessageRenderFN($event)">
-                            </tiledeskwidget-bubble-message>
+                            </tiledeskwidget-bubble-message> -->
 
                           </div>
                           
@@ -122,13 +122,13 @@
     
                           <!-- message type:: button &&  -->
                           <div *ngIf="message?.attributes && message?.attributes?.attachment " class="slide-in-left" > 
-                              <tiledeskwidget-message-attachment 
+                              <!-- <tiledeskwidget-message-attachment 
                                   style="height: 100%; display: block;"
                                   [message]="message"
                                   [isLastMessage] = "isLastMessage(message?.uid)"
                                   [stylesMap]="stylesMap"
                                   (onAttachmentButtonClicked)="onAttachmentButtonClickedFN($event)">
-                              </tiledeskwidget-message-attachment>
+                              </tiledeskwidget-message-attachment> -->
                           </div>
     
                       </div>

package/src/app/components/authentication/login/login.component.html

@@ -6,12 +6,41 @@
   </div>
   <div class="centered">
 
-    <div class="signin-title" style="text-align:center">
-      <h2 style="font-family: 'Montserrat', sans-serif; font-weight: 400;">
+    <div class="signin-title">
+      <h2>
         {{ translationMap?.get('LABEL_SIGNIN_TO') }}
         {{companyName}}
       </h2>
     </div>
+
+    <div class="login-container">
+      <button type="button" class="google-button" (click)="signInWithGoogle()">
+        <div style="margin-right: 10px; background: rgb(255, 255, 255); padding: 10px; border-radius: 2px;">
+   
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 186.69 190.5"
+            xmlns:v="https://vecta.io/nano" style="position: relative;top: 2px;">
+            <g transform="translate(1184.583 765.171)">
+              <path clip-path="none" mask="none"
+                d="M-1089.333-687.239v36.888h51.262c-2.251 11.863-9.006 21.908-19.137 28.662l30.913 23.986c18.011-16.625 28.402-41.044 28.402-70.052 0-6.754-.606-13.249-1.732-19.483z"
+                fill="#4285f4" />
+              <path clip-path="none" mask="none"
+                d="M-1142.714-651.791l-6.972 5.337-24.679 19.223h0c15.673 31.086 47.796 52.561 85.03 52.561 25.717 0 47.278-8.486 63.038-23.033l-30.913-23.986c-8.486 5.715-19.31 9.179-32.125 9.179-24.765 0-45.806-16.712-53.34-39.226z"
+                fill="#34a853" />
+              <path clip-path="none" mask="none"
+                d="M-1174.365-712.61c-6.494 12.815-10.217 27.276-10.217 42.689s3.723 29.874 10.217 42.689c0 .086 31.693-24.592 31.693-24.592-1.905-5.715-3.031-11.776-3.031-18.098s1.126-12.383 3.031-18.098z"
+                fill="#fbbc05" />
+              <path
+                d="M-1089.333-727.244c14.028 0 26.497 4.849 36.455 14.201l27.276-27.276c-16.539-15.413-38.013-24.852-63.731-24.852-37.234 0-69.359 21.388-85.032 52.561l31.692 24.592c7.533-22.514 28.575-39.226 53.34-39.226z"
+                fill="#ea4335" clip-path="none" mask="none" />
+            </g>
+          </svg>
+        </div>
+        <div style="padding: 10px 10px 10px 0px; font-weight: 500; width: calc(100% - 91px);">Sign in with Google</div>
+      </button>
+    </div>
+
+    <div class="login-container auth---divider"><span>&nbsp;&nbsp;or&nbsp;&nbsp;</span></div>
+
     <div class="login-container">
       <form [formGroup]="userForm" (ngSubmit)="signInWithEmailAndPassword()" novalidate>
 

package/src/app/components/authentication/login/login.component.scss

@@ -2,6 +2,18 @@
   --overflow: hidden;
 }
 
+.signin-title > h2 {
+  font-size: 36px;
+  // line-height: 55px;
+  font-family: "Poppins", "Roboto", "Arial", sans-serif;
+  font-weight: 500;
+  text-align: left;
+
+  margin: 5px auto;
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
 .login-container {
   margin: 0 auto;
   padding-left: 30px;
@@ -83,4 +95,55 @@
     color: #da491c;
     margin-top: -6px;
   }
+
+
+  /* AUTH with Google
+  /* ***************************** */
+  &.auth---divider {
+    font-size: 16px;
+    text-align: center;
+    border-bottom: 1px solid #d9d9d9;
+    line-height: 0em;
+    display: block !important;
+    font-weight: 400;
+    font-family: "Poppins", "Roboto", "Arial", sans-serif;
+    margin: 30px 0px
+  }
+
+  &.auth---divider span {
+    background: #ffffff;
+  }
+
+  //****** GOOGLE - LOGIN ******//
+  .google-button {
+    // background-color: rgb(66, 133, 244);
+    display: inline-flex;
+    align-items: center;
+    // color: rgb(255, 255, 255);
+    // box-shadow: rgba(0, 0, 0, 0.24) 0px 2px 2px 0px, rgba(0, 0, 0, 0.24) 0px 0px 1px 0px;
+    padding: 0px;
+    border-radius: 3px;
+    border: 1px solid #4285f4;
+    font-size: 16px;
+    font-weight: 500;
+    font-family: "Poppins", "Roboto", "Arial", sans-serif;
+    width: 100%;
+    // border-color: #c7e1ff !important;
+    // box-shadow: none !important;
+    background: #ffff !important;
+    color: #4285f4 !important;
+    // margin-bottom: 30px;
+    height: 56px;
+  }
+  
+  .google-button:hover {
+    border-color: #94c8ff !important;
+    background-color: #f4f9ff !important;
+    opacity: 1 !important;
+  }
+  .google-button:hover > div {
+    border-color: #94c8ff !important;
+    background-color: #f4f9ff !important;
+    opacity: 1 !important;
+  }
 }