[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/signup/signup.component.css

@@ -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;

src/app/header/header-popup/signup/signup.component.html

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

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

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