old-portfolio/frontend-hideyoshi.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[0.0.2] Adds Google and Github OAuth2 Login

Browse Source 
Implements integration with the Backend API feature of OAuth2 Login with Google and Github.
This commit is contained in:
Vitor Hideyoshi
2022-11-10 00:49:03 -03:00
parent 835c4d0cc4
commit 64ec23f2c1
19 changed files with 1596 additions and 1136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/app/header/header-popup/callback/callback.component.css Normal file
View File

1
src/app/header/header-popup/callback/callback.component.html Normal file
View File

@@ -0,0 +1 @@
<p>callback works!</p>

23
src/app/header/header-popup/callback/callback.component.spec.ts Normal file
View File

@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CallbackComponent } from './callback.component';
describe('CallbackComponent', () => {
let component: CallbackComponent;
let fixture: ComponentFixture<CallbackComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ CallbackComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(CallbackComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

41
src/app/header/header-popup/callback/callback.component.ts Normal file
View File

@@ -0,0 +1,41 @@
import { ActivatedRoute, Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { AuthService } from 'src/app/shared/auth/auth.service';
@Component({
selector: 'app-callback',
templateUrl: './callback.component.html',
styleUrls: ['./callback.component.css']
})
export class CallbackComponent implements OnInit {
constructor(private route: ActivatedRoute,
private router: Router,
private authService: AuthService) { }
ngOnInit(): void {
this.route.queryParams.subscribe(p => {
let auth: 'google' | 'github' = p['auth'];
if (auth === 'google') {
this.loginGoogle(p);
} else if (auth === 'github') {
this.loginGithub(p);
}
this.router.navigate(['/home'])
})
}
private loginGoogle(p: any) {
this.authService.loginGoogleUser(p)
}
private loginGithub(p: any) {
this.authService.loginGithubUser(p)
}
}

7
src/app/header/header-popup/login/login.component.css
View File

@@ -38,6 +38,13 @@
display: flex;
}
.oauth-button {
height: 50px;
width: 250px;
border: #ffffff;
background-color: #ffffff;
}
.separator-line {
justify-content: center;
align-content: center;

17
src/app/header/header-popup/login/login.component.html
View File

@@ -36,9 +36,20 @@
<div class="line"></div>
</div>
<div class="col-lg-6 authentication-body">
<p>Google</p>
<p>Linkedin</p>
<p>Github</p>
<button mat-button
class="oauth-button d-flex justify-content-center align-items-center"
(click)="onGoogleLogin()">
<mat-icon style="width: 50px; height:30px"
svgIcon="google-logo"></mat-icon>
Login With Google
</button>
<button mat-button
class="oauth-button d-flex justify-content-center align-items-center"
(click)="onGithubLogin()">
<mat-icon style="width: 50px; height:30px"
svgIcon="github-logo"></mat-icon>
Login With Github
</button>
</div>
</div>
</div>

46
src/app/header/header-popup/login/login.component.ts
View File

@@ -1,5 +1,7 @@
import { AfterContentInit, AfterViewChecked, AfterViewInit, ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { AfterViewInit, ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
import { faLock, faUser } from '@fortawesome/free-solid-svg-icons';
import { Subscription } from 'rxjs';
import { AuthService } from 'src/app/shared/auth/auth.service';
@@ -8,6 +10,10 @@ import HttpErrorChecker from 'src/app/shared/model/httpError/httpErrorChecker';
import UserChecker from 'src/app/shared/model/user/user.checker';
import { User } from 'src/app/shared/model/user/user.model';
const GOOGLE_LOGO_SVG = "assets/img/providers/google.svg";
const GITHUB_LOGO_SVG = "assets/img/providers/github.svg";
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
@@ -16,13 +22,13 @@ import { User } from 'src/app/shared/model/user/user.model';
export class LoginComponent implements OnInit, AfterViewInit, OnDestroy {
@Input()
state: boolean = false;
state: boolean = false;
@Input()
ignoreClickOutside!: HTMLDivElement[];
ignoreClickOutside!: HTMLDivElement[];
@Output()
stateChange = new EventEmitter<boolean>();
stateChange = new EventEmitter<boolean>();
popupState = false;
@@ -30,7 +36,7 @@ export class LoginComponent implements OnInit, AfterViewInit, OnDestroy {
authSubject!: Subscription;
errorMessage!: string|null;
errorMessage!: string | null;
_userIcon = faUser;
@@ -38,13 +44,23 @@ export class LoginComponent implements OnInit, AfterViewInit, OnDestroy {
constructor(
private authService: AuthService,
private changeDetectorRef: ChangeDetectorRef
) { }
private changeDetectorRef: ChangeDetectorRef,
private matIconRegistry: MatIconRegistry,
private domSanitizer: DomSanitizer) {
this.matIconRegistry.addSvgIcon(
"google-logo",
this.domSanitizer.bypassSecurityTrustResourceUrl(GOOGLE_LOGO_SVG)
);
this.matIconRegistry.addSvgIcon(
"github-logo",
this.domSanitizer.bypassSecurityTrustResourceUrl(GITHUB_LOGO_SVG)
);
}
ngOnInit(): void {
this.loginForm = new FormGroup({
'username' : new FormControl(null, [Validators.required]),
'password' : new FormControl(null, [Validators.required])
'username': new FormControl(null, [Validators.required]),
'password': new FormControl(null, [Validators.required])
});
this.errorMessage = null;
this.authSubject = this.authService.authSubject.subscribe(
@@ -73,10 +89,18 @@ export class LoginComponent implements OnInit, AfterViewInit, OnDestroy {
password: this.loginForm.controls['password'].value
}
this.authService.login(user);
}
private validateLogin(res: User|HttpError|null) {
onGoogleLogin() {
this.authService.googleLogin();
}
onGithubLogin() {
this.authService.githubLogin();
}
private validateLogin(res: User | HttpError | null) {
if (res && UserChecker.test(res)) {
this.closePopup()
} if (HttpErrorChecker.test(res)) {

8
src/app/header/header-popup/signup/signup.component.css
View File

@@ -42,6 +42,14 @@
display: flex;
}
.oauth-button {
height: 50px;
width: 250px;
border: #ffffff;
background-color: #ffffff;
}
.separator-line {
justify-content: center;
align-content: center;

17
src/app/header/header-popup/signup/signup.component.html
View File

@@ -52,9 +52,20 @@
<div class="line"></div>
</div>
<div class="col-lg-6 auth-body auth-body-links">
<p>Google</p>
<p>Linkedin</p>
<p>Github</p>
<button mat-button
class="oauth-button d-flex justify-content-center align-items-center"
(click)="onGoogleLogin()">
<mat-icon style="width: 50px; height:30px"
svgIcon="google-logo"></mat-icon>
Login With Google
</button>
<button mat-button
class="oauth-button d-flex justify-content-center align-items-center"
(click)="onGithubLogin()">
<mat-icon style="width: 50px; height:30px"
svgIcon="github-logo"></mat-icon>
Login With Github
</button>
</div>
</div>
</div>

39
src/app/header/header-popup/signup/signup.component.ts
View File

@@ -1,5 +1,7 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
import { faEnvelope, faFingerprint, faLock, faUser } from '@fortawesome/free-solid-svg-icons';
import { Subscription } from 'rxjs';
import { AuthService } from 'src/app/shared/auth/auth.service';
@@ -8,6 +10,10 @@ import HttpErrorChecker from 'src/app/shared/model/httpError/httpErrorChecker';
import UserChecker from 'src/app/shared/model/user/user.checker';
import { User } from 'src/app/shared/model/user/user.model';
const GOOGLE_LOGO_SVG = "assets/img/providers/google.svg";
const GITHUB_LOGO_SVG = "assets/img/providers/github.svg";
@Component({
selector: 'app-signup',
templateUrl: './signup.component.html',
@@ -16,19 +22,19 @@ import { User } from 'src/app/shared/model/user/user.model';
export class SignupComponent implements OnInit {
@Input()
state: boolean = false;
state: boolean = false;
@Input()
ignoreClickOutside!: HTMLDivElement[];
ignoreClickOutside!: HTMLDivElement[];
@Output()
stateChange = new EventEmitter<boolean>();
stateChange = new EventEmitter<boolean>();
signupForm!: FormGroup;
authSubject!: Subscription;
errorMessage!: string|null;
errorMessage!: string | null;
_fullnameIcon = faFingerprint;
@@ -38,7 +44,18 @@ export class SignupComponent implements OnInit {
_passwordIcon = faLock;
constructor(private authService: AuthService) { }
constructor(private authService: AuthService,
private matIconRegistry: MatIconRegistry,
private domSanitizer: DomSanitizer) {
this.matIconRegistry.addSvgIcon(
"google-logo",
this.domSanitizer.bypassSecurityTrustResourceUrl(GOOGLE_LOGO_SVG)
);
this.matIconRegistry.addSvgIcon(
"github-logo",
this.domSanitizer.bypassSecurityTrustResourceUrl(GITHUB_LOGO_SVG)
);
}
ngOnInit(): void {
this.signupForm = new FormGroup({
@@ -63,7 +80,7 @@ export class SignupComponent implements OnInit {
onSignUp() {
let user: User = {
fullname: this.signupForm.controls['fullname'].value,
name: this.signupForm.controls['fullname'].value,
email: this.signupForm.controls['email'].value,
username: this.signupForm.controls['username'].value,
password: this.signupForm.controls['password'].value
@@ -71,7 +88,15 @@ export class SignupComponent implements OnInit {
this.authService.signup(user);
}
private validateSignup(res: User|HttpError|null) {
onGoogleLogin() {
this.authService.googleLogin();
}
onGithubLogin() {
this.authService.githubLogin();
}
private validateSignup(res: User | HttpError | null) {
if (res && UserChecker.test(res)) {
this.closePopup()
} if (HttpErrorChecker.test(res)) {