Frontent login

Frontend/src/app/app-routing.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard } from './auth/auth.guard';
 import { LoginPageComponent } from './components/login-page/login-page.component';
 import { MainViewComponent } from './main-view/main-view.component';
 
@@ -10,7 +11,8 @@ const routes: Routes = [
   },
   {
     path: 'app',
-    component: MainViewComponent
+    component: MainViewComponent,
+    canActivate: [AuthGuard]
   }
 ];
 

Frontend/src/app/app.module.ts

@@ -7,7 +7,6 @@ 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({
@@ -21,27 +20,8 @@ import { GoogleLoginProvider, SocialAuthServiceConfig, SocialLoginModule } from
     AppRoutingModule,
     BrowserAnimationsModule,
     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

@@ -1,16 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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.guard.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { Observable } from 'rxjs';
+import { DataService } from '../services/data.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuard implements CanActivate {
+  constructor(
+    private data$: DataService,
+    private router$: Router
+  ) {}
+  canActivate(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot,
+    ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    if (this.data$.currentUser) {
+      return true;
+    } else {
+      this.router$.navigate(['']);
+      return false;
+    }
+  }  
+}

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

@@ -1,14 +1,19 @@
-import { GoogleLoginProvider, SocialAuthService } from '@abacritt/angularx-social-login';
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import jwt_decode from "jwt-decode";
+import { User } from 'src/app/models/user';
+import { DataService } from 'src/app/services/data.service';
 
 @Component({
   selector: 'app-login-page',
   templateUrl: './login-page.component.html',
   styleUrls: ['./login-page.component.scss']
 })
+
 export class LoginPageComponent implements OnInit {
   constructor(
-    private authService: SocialAuthService
+    private data$: DataService,
+    private router$: Router
   ) {}
 
   ngOnInit(): void {
@@ -16,9 +21,8 @@ export class LoginPageComponent implements OnInit {
     google.accounts.id.initialize({
       client_id: "107631825312-bkfe438ehr9k9ecb2h76g802tj6advma.apps.googleusercontent.com",
       callback: this.handleCredentialResponse.bind(this),
-      auto_select: false,
+      auto_select: true,
       cancel_on_tap_outside: true,
-
     });
     // @ts-ignore
     google.accounts.id.renderButton(
@@ -27,17 +31,23 @@ export class LoginPageComponent implements OnInit {
       { theme: "outline", size: "large", width: "100%" }
     );
     // @ts-ignore
-    google.accounts.id.prompt((notification: PromptMomentNotification) => { });
+    google.accounts.id.prompt();
   }
 
-  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);
+  async handleCredentialResponse(response: any) { 
+    try {
+      const responsePayload: any = jwt_decode(response.credential);
+      this.data$.currentUser = new User({
+        id: 1,
+        googledId: responsePayload.aud,
+        userName: `${responsePayload.given_name} ${responsePayload.family_name}`,
+        email: responsePayload.email,
+        avatar: responsePayload.picture
+      });
+      this.router$.navigate(['/app']);
+    } catch (e) {
+      console.error('Get user error', e);
+    }
   }
 }
 

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

@@ -1,7 +1,7 @@
 <div class="loading-container" *ngIf="loading">
     <img class="loading-img" src="../../assets/loader.gif" />
 </div>
-<div class="flip-container" *ngIf="_device.flipPhone">
+<div class="flip-container" *ngIf="device$.flipPhone">
     <div class="flip-msg">
         Obróć telefon.<br>
         <mat-icon>screen_rotation</mat-icon>
@@ -14,9 +14,9 @@
         </button>
         <h1>Diuna</h1>
         <span class="fill-to-right"></span>
-        <span class="topbar-user-name" *ngIf="_data.currentUser">
-            <img *ngIf="_data.currentUser.avatar" src="{{_data.currentUser.avatar}}" class="avatar">
-            {{_data.currentUser.userName}}
+        <span class="topbar-user-name" *ngIf="data$.currentUser">
+            <img *ngIf="data$.currentUser.avatar" src="{{data$.currentUser.avatar}}" class="avatar">
+            {{data$.currentUser.userName}}
         </span>
         <button mat-icon-button (click)="logout()">
             <mat-icon>exit_to_app</mat-icon>

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

@@ -1,6 +1,6 @@
-import { OnInit } from '@angular/core';
 import { Component, ViewChild } from '@angular/core';
 import { MatSidenav } from '@angular/material/sidenav';
+import { Router } from '@angular/router';
 import * as moment from 'moment';
 import packageInfo from 'package.json';
 import { DataService } from '../services/data.service';
@@ -23,14 +23,18 @@ export class MainViewComponent {
   loading: boolean = false;
 
   constructor(
-    public _data: DataService,
-    public _device: DeviceService
+    public data$: DataService,
+    public device$: DeviceService,
+    private router$: Router
   ) { }
 
   reloadApp() {
     document.location.reload();
   }
   logout() {
-
+    // @ts-ignore
+    google.accounts.id.disableAutoSelect();
+    this.router$.navigate(['']);
+    this.data$.currentUser = null;
   }
 }

Frontend/src/app/services/data.service.ts

@@ -6,7 +6,7 @@ import { User } from '../models/user';
   providedIn: 'root'
 })
 export class DataService {
-  currentUser?: User;
+  currentUser?: User | null;
   public showLoader: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
   
   constructor() { }