linked google and github login buttons to view calls

login/frontend/v1/login-ui/src/app/auth/auth-antisocial/auth-antisocial.component.scss

@@ -25,6 +25,11 @@ form {
         margin-top: 30px;
         text-align: center;
     }
+    button:hover {
+        background-color: #fd8e4c;
+        color: #2c3e50;
+    }
+
 }
 
 .mat-body-2 {

login/frontend/v1/login-ui/src/app/auth/auth-social/auth-social.component.html

@@ -1,13 +1,13 @@
 <div class="social">
-    <button mat-button class="google-button">
+    <button mat-button class="google-button"  (click)="authenticateGoogle()">
         <img src="../../../assets/google-logo.svg">
         Log in with Google
     </button>
-    <button mat-button class="facebook-button">
+    <button mat-button class="facebook-button" (click)="authenticateFacebook()">
         <fa-icon [icon]="facebookIcon"></fa-icon>
         Continue with Facebook
     </button>
-    <button mat-button class="github-button" id="githubButton">
+    <button mat-button class="github-button" (click)="authenticateGithub()">
         <fa-icon [icon]="githubIcon"></fa-icon>
         Log in with GitHub
     </button>

login/frontend/v1/login-ui/src/app/auth/auth-social/auth-social.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
 import { faFacebook, faGithub } from '@fortawesome/free-brands-svg-icons';
+import { AuthResponse, AuthService } from "../auth.service";
 
 @Component({
     selector: 'login-auth-social',
@@ -10,8 +11,49 @@ import { faFacebook, faGithub } from '@fortawesome/free-brands-svg-icons';
 export class AuthSocialComponent implements OnInit {
     public facebookIcon = faFacebook;
     public githubIcon = faGithub;
+    public authFailed: boolean;
 
-    constructor() {}
+    constructor(private authService: AuthService) {}
 
     ngOnInit() { }
+
+    authenticateFacebook(): void {
+        this.authService.authenticateWithFacebook().subscribe(
+            (response) => {this.onAuthSuccess(response)},
+            (response) => {this.onAuthFailure(response)}
+        );
+    }
+
+    authenticateGithub(): void {
+        this.authService.authenticateWithGithub().subscribe(
+            (response) => {this.onAuthSuccess(response)},
+            (response) => {this.onAuthFailure(response)}
+        );
+    }
+
+    authenticateGoogle(): void {
+        this.authService.authenticateWithGoogle().subscribe(
+            (response) => {this.onAuthSuccess(response)},
+            (response) => {this.onAuthFailure(response)}
+        );
+    }
+
+    onAuthSuccess(authResponse: AuthResponse) {
+        this.authFailed = false;
+        let expirationDate = new Date(authResponse.expiration * 1000);
+        let domain = document.domain.replace('login.', '');
+        document.cookie = 'seleneToken=' + authResponse.seleneToken +
+            '; expires=' + expirationDate.toUTCString() +
+            '; domain=' + domain;
+        document.cookie = 'tartarusToken=' + authResponse.tartarusToken +
+            '; expires=' + expirationDate.toUTCString() +
+            '; domain=' + domain;
+        window.parent.postMessage('loggedIn', '*')
+    }
+
+    onAuthFailure(authorizeUserResponse) {
+        if (authorizeUserResponse.status === 401) {
+            this.authFailed = true;
+        }
+    }
 }