WIP: Google login

Frontend/package-lock.json

@@ -8,6 +8,7 @@
       "name": "diuna",
       "version": "0.0.0",
       "dependencies": {
+        "@abacritt/angularx-social-login": "^1.2.5",
         "@angular/animations": "^15.0.1",
         "@angular/cdk": "^15.0.0",
         "@angular/common": "^15.0.1",
@@ -19,6 +20,7 @@
         "@angular/platform-browser-dynamic": "^15.0.1",
         "@angular/pwa": "^15.0.1",
         "@angular/router": "^15.0.1",
+        "jwt-decode": "^3.1.2",
         "moment": "^2.29.4",
         "rxjs": "~7.5.0",
         "zone.js": "^0.12.0"
@@ -38,6 +40,18 @@
         "typescript": "^4.8.1"
       }
     },
+    "node_modules/@abacritt/angularx-social-login": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@abacritt/angularx-social-login/-/angularx-social-login-1.2.5.tgz",
+      "integrity": "sha512-IYkQnNLmEQ/2Uxwiend/t7F8/ySHCcWPOyOWb64AVDt3iOX4xUDHTZxH/3bf+T/6J5bpKEawD/oTzMzvl6aEVw==",
+      "dependencies": {
+        "tslib": ">=2.3.1"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=13.0.0",
+        "@angular/core": ">=13.0.0"
+      }
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
@@ -7491,6 +7505,11 @@
         "node >= 0.2.0"
       ]
     },
+    "node_modules/jwt-decode": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+      "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+    },
     "node_modules/karma": {
       "version": "6.4.1",
       "resolved": "https://registry.npmjs.org/karma/-/karma-6.4.1.tgz",
@@ -11842,6 +11861,14 @@
     }
   },
   "dependencies": {
+    "@abacritt/angularx-social-login": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@abacritt/angularx-social-login/-/angularx-social-login-1.2.5.tgz",
+      "integrity": "sha512-IYkQnNLmEQ/2Uxwiend/t7F8/ySHCcWPOyOWb64AVDt3iOX4xUDHTZxH/3bf+T/6J5bpKEawD/oTzMzvl6aEVw==",
+      "requires": {
+        "tslib": ">=2.3.1"
+      }
+    },
     "@ampproject/remapping": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
@@ -17491,6 +17518,11 @@
       "integrity": "sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==",
       "devOptional": true
     },
+    "jwt-decode": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+      "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+    },
     "karma": {
       "version": "6.4.1",
       "resolved": "https://registry.npmjs.org/karma/-/karma-6.4.1.tgz",

Frontend/package.json

@@ -10,6 +10,7 @@
   },
   "private": true,
   "dependencies": {
+    "@abacritt/angularx-social-login": "^1.2.5",
     "@angular/animations": "^15.0.1",
     "@angular/cdk": "^15.0.0",
     "@angular/common": "^15.0.1",
@@ -21,6 +22,7 @@
     "@angular/platform-browser-dynamic": "^15.0.1",
     "@angular/pwa": "^15.0.1",
     "@angular/router": "^15.0.1",
+    "jwt-decode": "^3.1.2",
     "moment": "^2.29.4",
     "rxjs": "~7.5.0",
     "zone.js": "^0.12.0"

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();
   }