WIP: Google login

Frontend/src/app/app.module.ts

@@ -7,6 +7,8 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MainViewComponent } from './main-view/main-view.component';
 import { MaterialModule } from './material.module';
 import { LoginPageComponent } from './components/login-page/login-page.component';
+import { GoogleLoginProvider, SocialAuthServiceConfig, SocialLoginModule } from '@abacritt/angularx-social-login';
+
 
 @NgModule({
   declarations: [
@@ -18,9 +20,28 @@ import { LoginPageComponent } from './components/login-page/login-page.component
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
-    MaterialModule
+    MaterialModule,
+    SocialLoginModule
+  ],
+  providers: [
+    {
+      provide: 'SocialAuthServiceConfig',
+      useValue: {
+        autoLogin: false,
+        providers: [
+          {
+            id: GoogleLoginProvider.PROVIDER_ID,
+            provider: new GoogleLoginProvider(
+              '107631825312-bkfe438ehr9k9ecb2h76g802tj6advma.apps.googleusercontent.com'
+            )
+          },
+        ],
+        onError: (err: Error) => {
+          console.error(err);
+        }
+      } as SocialAuthServiceConfig,
+    }
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

Frontend/src/app/auth/auth-guard.guard.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthGuardGuard } from './auth-guard.guard';
+
+describe('AuthGuardGuard', () => {
+  let guard: AuthGuardGuard;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    guard = TestBed.inject(AuthGuardGuard);
+  });
+
+  it('should be created', () => {
+    expect(guard).toBeTruthy();
+  });
+});

Frontend/src/app/auth/auth-guard.guard.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuardGuard implements CanActivate, CanActivateChild {
+  canActivate(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    return true;
+  }
+  canActivateChild(
+    childRoute: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    return true;
+  }
+  
+}

Frontend/src/app/auth/auth-service.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthServiceService } from './auth-service.service';
+
+describe('AuthServiceService', () => {
+  let service: AuthServiceService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AuthServiceService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

Frontend/src/app/auth/auth-service.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthServiceService {
+
+  constructor() { }
+}

Frontend/src/app/components/login-page/login-page.component.html

@@ -3,7 +3,7 @@
     <div class="container">
         <mat-card appearance="outlined" class="form">
             <mat-card-content>
-                Zaloguj z Google
+                <div class="" id="google-button"></div>
             </mat-card-content>
         </mat-card>
     </div>

Frontend/src/app/components/login-page/login-page.component.scss

@@ -5,7 +5,7 @@
     padding-top: 30vh;
 }
 .container {
-    width: 30%;
+    width: fit-content;
     display: block;
     margin: auto;
 }

Frontend/src/app/components/login-page/login-page.component.ts

@@ -1,10 +1,43 @@
-import { Component } from '@angular/core';
+import { GoogleLoginProvider, SocialAuthService } from '@abacritt/angularx-social-login';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-login-page',
   templateUrl: './login-page.component.html',
   styleUrls: ['./login-page.component.scss']
 })
-export class LoginPageComponent {
+export class LoginPageComponent implements OnInit {
+  constructor(
+    private authService: SocialAuthService
+  ) {}
 
+  ngOnInit(): void {
+    // @ts-ignore
+    google.accounts.id.initialize({
+      client_id: "107631825312-bkfe438ehr9k9ecb2h76g802tj6advma.apps.googleusercontent.com",
+      callback: this.handleCredentialResponse.bind(this),
+      auto_select: false,
+      cancel_on_tap_outside: true,
+
+    });
+    // @ts-ignore
+    google.accounts.id.renderButton(
+      // @ts-ignore
+      document.getElementById("google-button"),
+      { theme: "outline", size: "large", width: "100%" }
+    );
+    // @ts-ignore
+    google.accounts.id.prompt((notification: PromptMomentNotification) => { });
+  }
+
+  async handleCredentialResponse(response: any) {
+    // Here will be your response from Google.
+    console.log(response);
+    const responsePayload = decodeJwtResponse(response.credential);
+  }
+
+  login() {
+    this.authService.signIn(GoogleLoginProvider.PROVIDER_ID);
+  }
 }
+

Frontend/src/app/main-view/main-view.component.html

@@ -42,7 +42,6 @@
         </mat-sidenav>
 
         <mat-sidenav-content>
-            <div class="" id="google-button"></div>
             <router-outlet></router-outlet>
             <div class="footer">
                 <span>&copy;&nbsp;Bim-IT Michał Zieliński {{currentDate | date: 'yyyy'}}</span>

Frontend/src/app/main-view/main-view.component.ts

@@ -11,7 +11,7 @@ import { DeviceService } from '../services/device.service';
   templateUrl: './main-view.component.html',
   styleUrls: ['./main-view.component.scss']
 })
-export class MainViewComponent implements OnInit {
+export class MainViewComponent {
   @ViewChild('snav') snav?: MatSidenav;
   appVersion = packageInfo.version;
 
@@ -27,30 +27,6 @@ export class MainViewComponent implements OnInit {
     public _device: DeviceService
   ) { }
 
-  ngOnInit(): void {
-    // @ts-ignore
-    google.accounts.id.initialize({
-      client_id: "107631825312-bkfe438ehr9k9ecb2h76g802tj6advma.apps.googleusercontent.com",
-      callback: this.handleCredentialResponse.bind(this),
-      auto_select: false,
-      cancel_on_tap_outside: true,
-
-    });
-    // @ts-ignore
-    google.accounts.id.renderButton(
-      // @ts-ignore
-      document.getElementById("google-button"),
-      { theme: "outline", size: "large", width: "100%" }
-    );
-    // @ts-ignore
-    google.accounts.id.prompt((notification: PromptMomentNotification) => { });
-  }
-
-  async handleCredentialResponse(response: any) {
-    // Here will be your response from Google.
-    console.log(response);
-  }
-
   reloadApp() {
     document.location.reload();
   }