From 7330fb90f2d480d5b498c3dcd9129dc6d7c2f397 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Zieli=C5=84ski?= Date: Mon, 5 Dec 2022 17:42:52 +0100 Subject: [PATCH] Frontent login --- Frontend/src/app/app-routing.module.ts | 4 ++- Frontend/src/app/app.module.ts | 22 +----------- .../src/app/auth/auth-guard.guard.spec.ts | 16 --------- Frontend/src/app/auth/auth-guard.guard.ts | 20 ----------- .../src/app/auth/auth-service.service.spec.ts | 16 --------- Frontend/src/app/auth/auth.guard.ts | 25 +++++++++++++ ...uth-service.service.ts => auth.service.ts} | 0 .../login-page/login-page.component.ts | 36 ++++++++++++------- .../app/main-view/main-view.component.html | 8 ++--- .../src/app/main-view/main-view.component.ts | 12 ++++--- Frontend/src/app/services/data.service.ts | 2 +- 11 files changed, 65 insertions(+), 96 deletions(-) delete mode 100644 Frontend/src/app/auth/auth-guard.guard.spec.ts delete mode 100644 Frontend/src/app/auth/auth-guard.guard.ts delete mode 100644 Frontend/src/app/auth/auth-service.service.spec.ts create mode 100644 Frontend/src/app/auth/auth.guard.ts rename Frontend/src/app/auth/{auth-service.service.ts => auth.service.ts} (100%) diff --git a/Frontend/src/app/app-routing.module.ts b/Frontend/src/app/app-routing.module.ts index cfce7b0..92fd3d1 100644 --- a/Frontend/src/app/app-routing.module.ts +++ b/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] } ]; diff --git a/Frontend/src/app/app.module.ts b/Frontend/src/app/app.module.ts index d961bdf..85d6acc 100644 --- a/Frontend/src/app/app.module.ts +++ b/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 { } diff --git a/Frontend/src/app/auth/auth-guard.guard.spec.ts b/Frontend/src/app/auth/auth-guard.guard.spec.ts deleted file mode 100644 index 92d81ec..0000000 --- a/Frontend/src/app/auth/auth-guard.guard.spec.ts +++ /dev/null @@ -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(); - }); -}); diff --git a/Frontend/src/app/auth/auth-guard.guard.ts b/Frontend/src/app/auth/auth-guard.guard.ts deleted file mode 100644 index ba39e44..0000000 --- a/Frontend/src/app/auth/auth-guard.guard.ts +++ /dev/null @@ -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 | Promise | boolean | UrlTree { - return true; - } - canActivateChild( - childRoute: ActivatedRouteSnapshot, - state: RouterStateSnapshot): Observable | Promise | boolean | UrlTree { - return true; - } - -} diff --git a/Frontend/src/app/auth/auth-service.service.spec.ts b/Frontend/src/app/auth/auth-service.service.spec.ts deleted file mode 100644 index 196c2d5..0000000 --- a/Frontend/src/app/auth/auth-service.service.spec.ts +++ /dev/null @@ -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(); - }); -}); diff --git a/Frontend/src/app/auth/auth.guard.ts b/Frontend/src/app/auth/auth.guard.ts new file mode 100644 index 0000000..460e2f1 --- /dev/null +++ b/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 | Promise | boolean | UrlTree { + if (this.data$.currentUser) { + return true; + } else { + this.router$.navigate(['']); + return false; + } + } +} diff --git a/Frontend/src/app/auth/auth-service.service.ts b/Frontend/src/app/auth/auth.service.ts similarity index 100% rename from Frontend/src/app/auth/auth-service.service.ts rename to Frontend/src/app/auth/auth.service.ts diff --git a/Frontend/src/app/components/login-page/login-page.component.ts b/Frontend/src/app/components/login-page/login-page.component.ts index 7922627..bd1b341 100644 --- a/Frontend/src/app/components/login-page/login-page.component.ts +++ b/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); + } } } diff --git a/Frontend/src/app/main-view/main-view.component.html b/Frontend/src/app/main-view/main-view.component.html index 34c8de1..324de71 100644 --- a/Frontend/src/app/main-view/main-view.component.html +++ b/Frontend/src/app/main-view/main-view.component.html @@ -1,7 +1,7 @@
-
+
Obróć telefon.
screen_rotation @@ -14,9 +14,9 @@

Diuna

- - - {{_data.currentUser.userName}} + + + {{data$.currentUser.userName}}