Upgrade google signin (#71)

* replaced deprecated react-google-login module for @react-oauth/google

* Angular update google-signin method

* Load google when window is loaded

* Move google singin logic to onInit function

* Updated test-file and handling rendering google button after logout

* Handling rendering google button after logout

* refactoring

* Using react env variable instead of explicit google id

angular/package.json

@@ -29,8 +29,8 @@
     "@ngrx/router-store": "1.2.6",
     "@ngrx/store": "2.2.3",
     "@ngrx/store-devtools": "3.2.4",
+    "@types/google-one-tap": "^1.2.2",
     "angular-2-dropdown-multiselect": "^1.6.3",
-    "angularx-social-login": "1.1.2",
     "apollo-angular": "^1.0.0",
     "apollo-angular-link-http": "^1.0.1",
     "apollo-cache-inmemory": "^1.1.2",
@@ -45,12 +45,16 @@
     "lodash": "^4.17.4",
     "moment": "^2.19.4",
     "ng-fullcalendar": "^1.1.0",
+    "node-sass": "^8.0.0",
     "primeng": "4",
     "rxjs": "^5.5.2",
     "zone.js": "^0.8.14"
   },
   "lint-staged": {
-    "*.{ts,scss,js,json,css,md}": ["prettier --write", "git add"]
+    "*.{ts,scss,js,json,css,md}": [
+      "prettier --write",
+      "git add"
+    ]
   },
   "devDependencies": {
     "@angular/cli": "^1.5.5",

angular/src/app/app.module.ts

@@ -44,24 +44,6 @@ import { UsersService } from './services/users.service';
 import { JwtInterceptor } from './services/JwtInterceptor';
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
 import { SummaryComponent } from './leaves/summary/summary.component';
-import {
-  AuthServiceConfig,
-  GoogleLoginProvider,
-  SocialLoginModule,
-} from 'angularx-social-login';
-
-const config = new AuthServiceConfig([
-  {
-    id: GoogleLoginProvider.PROVIDER_ID,
-    provider: new GoogleLoginProvider(
-      '914978031481-bk8e8bj1ur0vhq4qlh7n7875drin9r0e.apps.googleusercontent.com'
-    ),
-  },
-]);
-
-export function provideConfig() {
-  return config;
-}
 
 @NgModule({
   declarations: [
@@ -97,7 +79,6 @@ export function provideConfig() {
     MultiselectDropdownModule,
     FullCalendarModule,
     BrowserAnimationsModule,
-    SocialLoginModule,
   ],
   providers: [
     AuthService,
@@ -110,10 +91,6 @@ export function provideConfig() {
       useClass: JwtInterceptor,
       multi: true,
     },
-    {
-      provide: AuthServiceConfig,
-      useFactory: provideConfig,
-    },
   ],
   bootstrap: [AppComponent],
 })

angular/src/app/login-page/login-page.component.html

@@ -5,8 +5,5 @@
     <div *ngIf="(errorMessage | async)?.isError === false" class="alert alert-warning" role="alert">
       {{ (errorMessage | async)?.message }}
     </div>
-    <button (click)="signIn()" class="btn btn-primary">
-      <i class="fa fa-google"></i>
-      Login with Google
-    </button>
+    <div id="google-button"></div>
 </div>

angular/src/app/login-page/login-page.component.spec.ts

@@ -1,10 +1,8 @@
 import { ReactiveFormsModule } from '@angular/forms';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { mockStoreModule } from '../mocks/store.mock';
-import { AuthServiceMock } from '../mocks/google.auth.mock';
 
 import { LoginPageComponent } from './login-page.component';
-import { AuthService } from 'angularx-social-login';
 
 describe('LoginPageComponent', () => {
   let component: LoginPageComponent;
@@ -15,7 +13,6 @@ describe('LoginPageComponent', () => {
       TestBed.configureTestingModule({
         declarations: [LoginPageComponent],
         imports: [ReactiveFormsModule, mockStoreModule()],
-        providers: [{ provide: AuthService, useClass: AuthServiceMock }],
       }).compileComponents();
     })
   );

angular/src/app/login-page/login-page.component.ts

@@ -4,9 +4,8 @@ import { Store } from '@ngrx/store';
 import { AppState } from '../state/root';
 import { LoginAttemptAction } from '../state/auth';
 import { Observable } from 'rxjs/Observable';
-import { AuthService } from 'angularx-social-login';
-import { GoogleLoginProvider } from 'angularx-social-login';
 import { LoginResults } from '../state/login.result';
+import { NgZone } from '@angular/core';
 
 @Component({
   selector: 'app-login-page',
@@ -18,7 +17,7 @@ export class LoginPageComponent implements OnInit {
 
   constructor(
     private store: Store<AppState>,
-    private authService: AuthService
+    private ngZone: NgZone
   ) {
     this.errorMessage = getLoginResult(store).map(value => {
       switch (value) {
@@ -38,11 +37,25 @@ export class LoginPageComponent implements OnInit {
     });
   }
 
-  ngOnInit() {}
+  initGoogle() {
+    window["google"].accounts.id.initialize({
+      client_id: '914978031481-bk8e8bj1ur0vhq4qlh7n7875drin9r0e.apps.googleusercontent.com', // Google id from console
+      callback: this.handleCredentialResponse.bind(this)
+    })
+    window["google"].accounts.id.renderButton(document.getElementById("google-button"), {theme: 'outline', size: 'large'})
+  }
 
-  signIn(): void {
-    this.authService.signIn(GoogleLoginProvider.PROVIDER_ID).then(res => {
-      this.store.dispatch(new LoginAttemptAction(res.idToken));
-    });
+  ngOnInit() {
+    if (document.readyState === 'complete' ) {
+      this.initGoogle()
+    } else {
+      window.onload = () => this.initGoogle()
+    }
+  }
+
+  handleCredentialResponse(response: any) {
+    this.ngZone.run(() => {
+      this.store.dispatch(new LoginAttemptAction(response.credential));
+    })
   }
 }

angular/src/index.html

@@ -9,6 +9,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <script async defer src="https://accounts.google.com/gsi/client"></script>
 </head>
 
 <body>