diff --git a/login/frontend/v1/login-ui/src/app/app-routing.module.ts b/login/frontend/v1/login-ui/src/app/app-routing.module.ts new file mode 100644 index 00000000..3665f687 --- /dev/null +++ b/login/frontend/v1/login-ui/src/app/app-routing.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { LoginComponent } from "./login/login.component"; +// import { PageNotFoundComponent } from "./page-not-found/page-not-found.component"; + +const routes: Routes = [ + { path: 'login', component: LoginComponent }, + // { path: '', redirectTo: '/login', pathMatch: 'full' }, + // { path: '**', component: PageNotFoundComponent } +]; + +@NgModule({ + imports: [ RouterModule.forRoot(routes) ], + exports: [ RouterModule ] +}) +export class AppRoutingModule { +} diff --git a/login/frontend/v1/login-ui/src/app/app.component.html b/login/frontend/v1/login-ui/src/app/app.component.html index 642d4ed7..e5ec8c2c 100644 --- a/login/frontend/v1/login-ui/src/app/app.component.html +++ b/login/frontend/v1/login-ui/src/app/app.component.html @@ -8,24 +8,5 @@ This condition is temporary it should be removed when the social login logic is refactored and moved into Selene. -->
-
-
-
-
- -
- -
+
diff --git a/login/frontend/v1/login-ui/src/app/app.component.spec.ts b/login/frontend/v1/login-ui/src/app/app.component.spec.ts deleted file mode 100644 index decc5585..00000000 --- a/login/frontend/v1/login-ui/src/app/app.component.spec.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { TestBed, async } from '@angular/core/testing'; -import { AppComponent } from './app.component'; -describe('AppComponent', () => { - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ - AppComponent - ], - }).compileComponents(); - })); - it('should create the app', async(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app).toBeTruthy(); - })); - it(`should have as title 'app'`, async(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app.title).toEqual('app'); - })); - it('should render title in a h1 tag', async(() => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.debugElement.nativeElement; - expect(compiled.querySelector('h1').textContent).toContain('Welcome to frontend!'); - })); -}); diff --git a/login/frontend/v1/login-ui/src/app/app.component.ts b/login/frontend/v1/login-ui/src/app/app.component.ts index 63cf067d..1aeee9af 100644 --- a/login/frontend/v1/login-ui/src/app/app.component.ts +++ b/login/frontend/v1/login-ui/src/app/app.component.ts @@ -16,7 +16,7 @@ export class AppComponent implements OnInit { ngOnInit () { let uriParams = decodeURIComponent(window.location.search); - if (uriParams) { + if (!window.location.pathname && uriParams) { this.socialLoginDataFound = true; window.opener.postMessage(uriParams, window.location.origin); window.close(); diff --git a/login/frontend/v1/login-ui/src/app/app.module.ts b/login/frontend/v1/login-ui/src/app/app.module.ts index f9ba7c1a..e18bfb3c 100644 --- a/login/frontend/v1/login-ui/src/app/app.module.ts +++ b/login/frontend/v1/login-ui/src/app/app.module.ts @@ -4,15 +4,17 @@ import { FlexLayoutModule } from "@angular/flex-layout"; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; -import { AuthModule } from "./auth/auth.module"; +import { AppRoutingModule } from "./app-routing.module"; +import { LoginModule } from "./login/login.module"; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, - AuthModule, + LoginModule, BrowserAnimationsModule, - FlexLayoutModule + FlexLayoutModule, + AppRoutingModule ], providers: [ ], bootstrap: [ AppComponent ] 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 deleted file mode 100644 index 8cb3e4a7..00000000 --- a/login/frontend/v1/login-ui/src/app/auth/auth.component.scss +++ /dev/null @@ -1,75 +0,0 @@ -@import '../../stylesheets/global'; - -button { - @include login-button; -} - -.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 { - color: $mycroft-dark-grey; - margin-bottom: -15px; - margin-top: -15px; - text-align: center; -} diff --git a/login/frontend/v1/login-ui/src/app/auth/auth.component.spec.ts b/login/frontend/v1/login-ui/src/app/auth/auth.component.spec.ts deleted file mode 100644 index 884576c8..00000000 --- a/login/frontend/v1/login-ui/src/app/auth/auth.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { AuthComponent } from './auth.component'; - -describe('AuthComponent', () => { - let component: AuthComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ AuthComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(AuthComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); 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 deleted file mode 100644 index 3912a95b..00000000 --- a/login/frontend/v1/login-ui/src/app/auth/auth.component.ts +++ /dev/null @@ -1,55 +0,0 @@ -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(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.spec.ts b/login/frontend/v1/login-ui/src/app/auth/auth.module.spec.ts deleted file mode 100644 index 561ea04a..00000000 --- a/login/frontend/v1/login-ui/src/app/auth/auth.module.spec.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { AuthModule } from './auth.module'; - -describe('AuthModule', () => { - let authenticateModule: AuthModule; - - beforeEach(() => { - authenticateModule = new AuthModule(); - }); - - it('should create an instance', () => { - expect(authenticateModule).toBeTruthy(); - }); -}); diff --git a/login/frontend/v1/login-ui/src/app/auth/auth.service.spec.ts b/login/frontend/v1/login-ui/src/app/auth/auth.service.spec.ts deleted file mode 100644 index f4cc85af..00000000 --- a/login/frontend/v1/login-ui/src/app/auth/auth.service.spec.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { TestBed, inject } from '@angular/core/testing'; - -import { AuthService } from './auth.service'; - -describe('AuthenticateService', () => { - beforeEach(() => { - TestBed.configureTestingModule({ - providers: [AuthService] - }); - }); - - it('should be created', inject([AuthService], (service: AuthService) => { - expect(service).toBeTruthy(); - })); -}); diff --git a/login/frontend/v1/login-ui/src/app/background/background.component.html b/login/frontend/v1/login-ui/src/app/background/background.component.html new file mode 100644 index 00000000..304e0ba9 --- /dev/null +++ b/login/frontend/v1/login-ui/src/app/background/background.component.html @@ -0,0 +1,7 @@ +
+
+
+
+ +
+
diff --git a/login/frontend/v1/login-ui/src/app/background/background.component.scss b/login/frontend/v1/login-ui/src/app/background/background.component.scss new file mode 100644 index 00000000..572dc6fc --- /dev/null +++ b/login/frontend/v1/login-ui/src/app/background/background.component.scss @@ -0,0 +1,30 @@ +@import "../../stylesheets/global"; + +/* Split the screen in half */ +.split { + height: 50%; + left: 0; + overflow-x: hidden; + padding-top: 20px; + position: fixed; + width: 100%; + z-index: -1; +} + +/* Top Half */ +.top { + top: 0; + background-color: $mycroft-primary; +} + +/* Bottom Half */ +.bottom { + bottom: 0; + background-color: #e5e5e5; +} + +img { + margin-bottom: 50px; + margin-top: 50px; + width: 600px; +} diff --git a/login/frontend/v1/login-ui/src/app/background/background.component.ts b/login/frontend/v1/login-ui/src/app/background/background.component.ts new file mode 100644 index 00000000..04942f32 --- /dev/null +++ b/login/frontend/v1/login-ui/src/app/background/background.component.ts @@ -0,0 +1,14 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'login-background', + templateUrl: './background.component.html', + styleUrls: ['./background.component.scss'] +}) +export class BackgroundComponent implements OnInit { + + constructor() { } + + ngOnInit() { } + +} diff --git a/login/frontend/v1/login-ui/src/app/auth/auth.component.html b/login/frontend/v1/login-ui/src/app/login/antisocial/antisocial.component.html similarity index 63% rename from login/frontend/v1/login-ui/src/app/auth/auth.component.html rename to login/frontend/v1/login-ui/src/app/login/antisocial/antisocial.component.html index 13a4199b..57cdd6e6 100644 --- a/login/frontend/v1/login-ui/src/app/auth/auth.component.html +++ b/login/frontend/v1/login-ui/src/app/login/antisocial/antisocial.component.html @@ -1,18 +1,3 @@ -
- - - -
-
OR
{this.onAuthSuccess(response)}, + (response) => {this.onAuthFailure(response)} + ); + } + + onAuthSuccess(authResponse: AuthResponse): void { + this.authFailed = false; + this.authService.generateTokenCookies(authResponse); + window.location.assign(this.redirectUri); + } + + onAuthFailure(authorizeUserResponse): void { + if (authorizeUserResponse.status === 401) { + this.authFailed = true; + } + } + +} diff --git a/login/frontend/v1/login-ui/src/app/login/login.component.html b/login/frontend/v1/login-ui/src/app/login/login.component.html new file mode 100644 index 00000000..087ad169 --- /dev/null +++ b/login/frontend/v1/login-ui/src/app/login/login.component.html @@ -0,0 +1,8 @@ + +
+ +
\ No newline at end of file diff --git a/login/frontend/v1/login-ui/src/app/login/login.component.scss b/login/frontend/v1/login-ui/src/app/login/login.component.scss new file mode 100644 index 00000000..a0e0bd98 --- /dev/null +++ b/login/frontend/v1/login-ui/src/app/login/login.component.scss @@ -0,0 +1,15 @@ +@import '../../stylesheets/global'; + +.login-options { + background-color: $mycroft-white; + border-radius: 10px; + box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.12); + width: 320px; +} + +.mat-subheading-2 { + color: $mycroft-dark-grey; + margin-bottom: -15px; + margin-top: -15px; + text-align: center; +} diff --git a/login/frontend/v1/login-ui/src/app/login/login.component.ts b/login/frontend/v1/login-ui/src/app/login/login.component.ts new file mode 100644 index 00000000..c4375a73 --- /dev/null +++ b/login/frontend/v1/login-ui/src/app/login/login.component.ts @@ -0,0 +1,16 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'login-authenticate', + templateUrl: './login.component.html', + styleUrls: ['./login.component.scss'] +}) +export class LoginComponent implements OnInit { + private redirectUri: string; + + constructor() { } + + ngOnInit() { + this.redirectUri = decodeURIComponent(window.location.search).slice(10); + } +} diff --git a/login/frontend/v1/login-ui/src/app/auth/auth.module.ts b/login/frontend/v1/login-ui/src/app/login/login.module.ts similarity index 58% rename from login/frontend/v1/login-ui/src/app/auth/auth.module.ts rename to login/frontend/v1/login-ui/src/app/login/login.module.ts index cce309e6..c7e583e7 100644 --- a/login/frontend/v1/login-ui/src/app/auth/auth.module.ts +++ b/login/frontend/v1/login-ui/src/app/login/login.module.ts @@ -14,12 +14,21 @@ import { import { FontAwesomeModule } from "@fortawesome/angular-fontawesome"; -import { AuthComponent } from './auth.component'; -import { AuthService } from "./auth.service"; +import { AntisocialComponent } from './antisocial/antisocial.component'; +import { LoginComponent } from './login.component'; +import { LoginService } from "./login.service"; +import { BackgroundComponent } from '../background/background.component'; +import { SocialComponent } from './social/social.component'; @NgModule({ - declarations: [ AuthComponent ], - exports: [ AuthComponent ], + declarations: [ + AntisocialComponent, + LoginComponent, + BackgroundComponent, + SocialComponent + ], + entryComponents: [ LoginComponent ], + exports: [ LoginComponent ], imports: [ CommonModule, FlexLayoutModule, @@ -33,6 +42,6 @@ import { AuthService } from "./auth.service"; MatInputModule, MatSnackBarModule ], - providers: [ AuthService ] + providers: [ LoginService ] }) -export class AuthModule { } +export class LoginModule { } diff --git a/login/frontend/v1/login-ui/src/app/auth/auth.service.ts b/login/frontend/v1/login-ui/src/app/login/login.service.ts similarity index 99% rename from login/frontend/v1/login-ui/src/app/auth/auth.service.ts rename to login/frontend/v1/login-ui/src/app/login/login.service.ts index 3176c70d..25d5b59f 100644 --- a/login/frontend/v1/login-ui/src/app/auth/auth.service.ts +++ b/login/frontend/v1/login-ui/src/app/login/login.service.ts @@ -20,7 +20,7 @@ export interface SocialLoginData { } @Injectable() -export class AuthService { +export class LoginService { private antisocialAuthUrl = '/api/antisocial'; private facebookAuthUrl = '/api/social/facebook'; private githubAuthUrl = '/api/social/github'; diff --git a/login/frontend/v1/login-ui/src/app/login/social/social.component.html b/login/frontend/v1/login-ui/src/app/login/social/social.component.html new file mode 100644 index 00000000..2f9182b2 --- /dev/null +++ b/login/frontend/v1/login-ui/src/app/login/social/social.component.html @@ -0,0 +1,14 @@ + diff --git a/login/frontend/v1/login-ui/src/app/login/social/social.component.scss b/login/frontend/v1/login-ui/src/app/login/social/social.component.scss new file mode 100644 index 00000000..488fcdfa --- /dev/null +++ b/login/frontend/v1/login-ui/src/app/login/social/social.component.scss @@ -0,0 +1,33 @@ +@import '../../../stylesheets/global'; + +button { + @include login-button; +} + +.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; + padding-left: 5px; + } + .google-button { + background-color: #4285F4; + padding-left: 1px; + img { + margin-right: 10px; + width: 14%; + } + } +} + diff --git a/login/frontend/v1/login-ui/src/app/login/social/social.component.ts b/login/frontend/v1/login-ui/src/app/login/social/social.component.ts new file mode 100644 index 00000000..d51c559f --- /dev/null +++ b/login/frontend/v1/login-ui/src/app/login/social/social.component.ts @@ -0,0 +1,33 @@ +import { Component, OnInit } from '@angular/core'; + +import { faFacebook, faGithub } from "@fortawesome/free-brands-svg-icons"; + +import { LoginService } from "../login.service"; + +@Component({ + selector: 'login-social', + templateUrl: './social.component.html', + styleUrls: ['./social.component.scss'] +}) +export class SocialComponent implements OnInit { + public facebookIcon = faFacebook; + public githubIcon = faGithub; + + constructor(private authService: LoginService) { } + + ngOnInit() { + } + authenticateFacebook(): void { + this.authService.authenticateWithFacebook() + } + + authenticateGithub(): void { + this.authService.authenticateWithGithub(); + } + + authenticateGoogle(): void { + this.authService.authenticateWithGoogle(); + } + + +}