-
-
-
-
-
-
-
- OR
-
-
-
-
- OR
-
-
-
-
+
+
+
+
+
OR
+
+
Invalid username/password combination; try again
diff --git a/login/frontend/v1/login-ui/src/app/auth/auth.component.scss b/login/frontend/v1/login-ui/src/app/auth/auth.component.scss
index d6227fbd..8cb3e4a7 100644
--- a/login/frontend/v1/login-ui/src/app/auth/auth.component.scss
+++ b/login/frontend/v1/login-ui/src/app/auth/auth.component.scss
@@ -1,13 +1,70 @@
@import '../../stylesheets/global';
-mat-tab-group {
- height: 485px;
- width: 320px;
+button {
+ @include login-button;
}
-.login-options {
- border-radius: 10px;
+.social {
+ padding: 20px;
+ button {
+ margin-bottom: 15px;
+ }
+ fa-icon {
+ margin-right: 15px;
+ font-size: 28px;
+ }
+ .facebook-button {
+ background-color: #3b5998;
+ padding-left: 5px;
+ }
+ .github-button {
+ background-color: #333333;
+ margin-right: 12px;
+ padding-left: 5px;
+ }
+ .google-button {
+ background-color: #4285F4;
+ padding-left: 1px;
+ img {
+ margin-right: 10px;
+ width: 14%;
+ }
+ }
+}
+
+button {
+ @include login-button;
+}
+
+form {
background-color: $mycroft-white;
+ border-radius: 10px;
+ padding: 20px;
+ fa-icon {
+ color: $mycroft-dark-grey;
+ margin-right: 15px;
+ }
+ mat-checkbox {
+ color: $mycroft-dark-grey;
+ }
+ .forgot-password {
+ margin-left: 30px;
+ }
+ button {
+ background-color: $mycroft-primary;
+ margin-top: 30px;
+ text-align: center;
+ }
+ button:hover {
+ background-color: $mycroft-tertiary-green;
+ color: $mycroft-secondary;
+ }
+
+}
+
+.mat-body-2 {
+ color: $mycroft-tertiary-red;
+ padding: 15px;
}
.mat-subheading-2 {
@@ -16,9 +73,3 @@ mat-tab-group {
margin-top: -15px;
text-align: center;
}
-
-img {
- margin-bottom: 50px;
- margin-top: 50px;
- width: 600px;
-}
diff --git a/login/frontend/v1/login-ui/src/app/auth/auth.component.ts b/login/frontend/v1/login-ui/src/app/auth/auth.component.ts
index 47f92135..3912a95b 100644
--- a/login/frontend/v1/login-ui/src/app/auth/auth.component.ts
+++ b/login/frontend/v1/login-ui/src/app/auth/auth.component.ts
@@ -1,13 +1,55 @@
import { Component, OnInit } from '@angular/core';
+import { faFacebook, faGithub } from "@fortawesome/free-brands-svg-icons";
+import { faLock, faUser } from "@fortawesome/free-solid-svg-icons";
+
+import { AuthResponse, AuthService } from "./auth.service";
+
@Component({
selector: 'login-authenticate',
templateUrl: './auth.component.html',
styleUrls: ['./auth.component.scss']
})
export class AuthComponent implements OnInit {
+ public facebookIcon = faFacebook;
+ public githubIcon = faGithub;
+ public authFailed: boolean;
+ public password: string;
+ public passwordIcon = faLock;
+ public username: string;
+ public usernameIcon = faUser;
- constructor() { }
+ constructor(private authService: AuthService) { }
ngOnInit() { }
+
+ authenticateFacebook(): void {
+ this.authService.authenticateWithFacebook()
+ }
+
+ authenticateGithub(): void {
+ this.authService.authenticateWithGithub();
+ }
+
+ authenticateGoogle(): void {
+ this.authService.authenticateWithGoogle();
+ }
+ authorizeUser(): void {
+ this.authService.authorizeAntisocial(this.username, this.password).subscribe(
+ (response) => {this.onAuthSuccess(response)},
+ (response) => {this.onAuthFailure(response)}
+ );
+ }
+
+ onAuthSuccess(authResponse: AuthResponse) {
+ this.authFailed = false;
+ this.authService.generateTokenCookies(authResponse);
+ window.history.back();
+ }
+
+ onAuthFailure(authorizeUserResponse) {
+ if (authorizeUserResponse.status === 401) {
+ this.authFailed = true;
+ }
+ }
}
diff --git a/login/frontend/v1/login-ui/src/app/auth/auth.module.ts b/login/frontend/v1/login-ui/src/app/auth/auth.module.ts
index c939fcc1..cce309e6 100644
--- a/login/frontend/v1/login-ui/src/app/auth/auth.module.ts
+++ b/login/frontend/v1/login-ui/src/app/auth/auth.module.ts
@@ -1,7 +1,7 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from "@angular/forms";
-import { FlexModule } from "@angular/flex-layout";
+import { FlexLayoutModule } from "@angular/flex-layout";
import { HttpClientModule } from "@angular/common/http";
import {
MatButtonModule,
@@ -9,22 +9,20 @@ import {
MatDividerModule,
MatFormFieldModule,
MatInputModule,
- MatTabsModule
+ MatSnackBarModule
} from "@angular/material";
import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
import { AuthComponent } from './auth.component';
import { AuthService } from "./auth.service";
-import { AuthSocialComponent } from './auth-social/auth-social.component';
-import { AuthAntisocialComponent } from './auth-antisocial/auth-antisocial.component';
@NgModule({
- declarations: [ AuthComponent, AuthSocialComponent, AuthAntisocialComponent ],
+ declarations: [ AuthComponent ],
exports: [ AuthComponent ],
imports: [
CommonModule,
- FlexModule,
+ FlexLayoutModule,
FontAwesomeModule,
FormsModule,
HttpClientModule,
@@ -33,7 +31,7 @@ import { AuthAntisocialComponent } from './auth-antisocial/auth-antisocial.compo
MatDividerModule,
MatFormFieldModule,
MatInputModule,
- MatTabsModule
+ MatSnackBarModule
],
providers: [ AuthService ]
})
diff --git a/login/frontend/v1/login-ui/src/app/auth/auth.service.ts b/login/frontend/v1/login-ui/src/app/auth/auth.service.ts
index 1ae37382..3176c70d 100644
--- a/login/frontend/v1/login-ui/src/app/auth/auth.service.ts
+++ b/login/frontend/v1/login-ui/src/app/auth/auth.service.ts
@@ -2,19 +2,33 @@ import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders} from "@angular/common/http";
import { Observable } from 'rxjs';
+import { isArray } from "util";
-export class AuthResponse {
+import { MatSnackBar } from "@angular/material";
+
+export interface AuthResponse {
expiration: number;
seleneToken: string;
tartarusToken: string;
}
+export interface SocialLoginData {
+ uuid: string;
+ accessToken: string;
+ refreshToken: string;
+ expiration: string;
+}
+
@Injectable()
export class AuthService {
- private antisocialAuthUrl = '/api/auth/antisocial';
- private facebookAuthUrl = '/api/auth/facebook';
+ private antisocialAuthUrl = '/api/antisocial';
+ private facebookAuthUrl = '/api/social/facebook';
+ private githubAuthUrl = '/api/social/github';
+ private googleAuthUrl = '/api/social/google';
+ private generateTokensUrl = 'api/social/tokens';
- constructor(private http: HttpClient) { }
+ constructor(private http: HttpClient, public loginSnackbar: MatSnackBar) {
+ }
authorizeAntisocial (username, password): Observable
{
let rawCredentials = `${username}:${password}`;
@@ -25,8 +39,71 @@ export class AuthService {
return this.http.get(this.antisocialAuthUrl, {headers: httpHeaders})
}
- authorizeFacebook(userData: any) {
- const httpHeaders = new HttpHeaders({'token': userData.token});
- return this.http.get(this.facebookAuthUrl, {headers: httpHeaders})
+ authenticateWithFacebook() {
+ window.open(this.facebookAuthUrl);
+ window.onmessage = (event) => {this.generateSocialLoginTokens(event)};
+ }
+
+ authenticateWithGithub() {
+ window.open(this.githubAuthUrl);
+ window.onmessage = (event) => {this.generateSocialLoginTokens(event)};
+ }
+
+ authenticateWithGoogle() {
+ window.open(this.googleAuthUrl);
+ window.onmessage = (event) => {this.generateSocialLoginTokens(event)};
+ }
+
+ generateSocialLoginTokens(event: any) {
+ let socialLoginData = this.parseUriParams(event.data);
+ if (socialLoginData) {
+ this.http.post(
+ this.generateTokensUrl,
+ socialLoginData
+ ).subscribe(
+ (response) => {this.generateTokenCookies(response)}
+ );
+ }
+ return this.http.post(
+ this.generateTokensUrl,
+ socialLoginData
+ )
+ }
+
+ parseUriParams (uriParams: string) {
+ let socialLoginData: SocialLoginData = null;
+
+ if (uriParams.startsWith('?data=')) {
+ let parsedUriParams = JSON.parse(uriParams.slice(6));
+ if (isArray(parsedUriParams)) {
+ let socialLoginErrorMsg = 'An account exists for the email ' +
+ 'address associated with the social network log in ' +
+ 'attempt. To enable log in using a social network, log ' +
+ 'in with your username and password and enable the ' +
+ 'social network in your account preferences.';
+ this.loginSnackbar.open(
+ socialLoginErrorMsg,
+ null,
+ {duration: 30000}
+ );
+ } else {
+ socialLoginData = parsedUriParams;
+ }
+ }
+
+ return socialLoginData
}
+
+ generateTokenCookies(authResponse: AuthResponse) {
+ 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;
+ }
+
+
}
diff --git a/login/frontend/v1/login-ui/src/environments/environment.prod.ts b/login/frontend/v1/login-ui/src/environments/environment.prod.ts
index 3612073b..dfe292cc 100644
--- a/login/frontend/v1/login-ui/src/environments/environment.prod.ts
+++ b/login/frontend/v1/login-ui/src/environments/environment.prod.ts
@@ -1,3 +1,15 @@
export const environment = {
- production: true
+ production: true
};
+
+document.write(
+ ''
+);
+document.write(
+ ''
+);
\ No newline at end of file
diff --git a/login/frontend/v1/login-ui/src/index.html b/login/frontend/v1/login-ui/src/index.html
index 7c7ddffa..e60ea142 100644
--- a/login/frontend/v1/login-ui/src/index.html
+++ b/login/frontend/v1/login-ui/src/index.html
@@ -13,28 +13,6 @@
-
-