[0.0.2] Adds Google and Github OAuth2 Login

Implements integration with the Backend API feature of OAuth2 Login with Google and Github.

src/app/header/header-popup/login/login.component.ts

@@ -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)) {