diff --git a/projects/sso/src/app/login/internal-login/internal-login.component.html b/projects/sso/src/app/login/internal-login/internal-login.component.html index fdf61b4..5a60de9 100644 --- a/projects/sso/src/app/login/internal-login/internal-login.component.html +++ b/projects/sso/src/app/login/internal-login/internal-login.component.html @@ -1,33 +1,37 @@
- + Email Address + Mycroft Account Email + + Must be a valid email address + + + Email is required + - + Password - Forgot password? + Mycroft Account Password + + Password is required + + Forgot password?
-
Invalid username/password combination; try again
diff --git a/projects/sso/src/app/login/internal-login/internal-login.component.scss b/projects/sso/src/app/login/internal-login/internal-login.component.scss index 13e3306..d3b52e8 100644 --- a/projects/sso/src/app/login/internal-login/internal-login.component.scss +++ b/projects/sso/src/app/login/internal-login/internal-login.component.scss @@ -6,27 +6,24 @@ form { border-radius: 10px; padding: 16px; - fa-icon { - color: mat-color($mycroft-accent, A700); - margin-right: 16px; + mat-form-field { + margin-bottom: 8px; } - mat-checkbox { - color: mat-color($mycroft-accent, A700); - } #forgot-password { margin-left: 32px; } button { @include action-button-primary; - margin-top: 32px; + margin-bottom: 8px; + margin-top: 8px; text-align: center; } -} + a { + margin-left: auto; + margin-right: auto; + } -.mat-body-2 { - color: red; - padding: 16px; } diff --git a/projects/sso/src/app/login/internal-login/internal-login.component.ts b/projects/sso/src/app/login/internal-login/internal-login.component.ts index bf3861b..38dfccb 100644 --- a/projects/sso/src/app/login/internal-login/internal-login.component.ts +++ b/projects/sso/src/app/login/internal-login/internal-login.component.ts @@ -1,43 +1,41 @@ import { Component, OnInit } from '@angular/core'; - -import { faLock, faUser } from '@fortawesome/free-solid-svg-icons'; +import { FormControl, Validators } from '@angular/forms'; +import { MatSnackBar } from '@angular/material'; import { AuthResponse, AppService } from '../../app.service'; const noDelay = 0; +const tenSeconds = 10000; + @Component({ selector: 'sso-internal-login', templateUrl: './internal-login.component.html', styleUrls: ['./internal-login.component.scss'] }) export class InternalLoginComponent implements OnInit { - public authFailed: boolean; public password: string; - public passwordIcon = faLock; - public username: string; - public usernameIcon = faUser; + public emailAddress: string; + public emailFormControl = new FormControl(null, [Validators.email, Validators.required]); + public passwordFormControl = new FormControl(null, [Validators.required]); - constructor(private authService: AppService) { } + constructor(private authService: AppService, private errorSnackbar: MatSnackBar) { } - ngOnInit() { } + ngOnInit() { } - authorizeUser(): void { - this.authService.authorizeInternal(this.username, this.password).subscribe( - (response) => { this.onAuthSuccess(response); }, - (response) => { this.onAuthFailure(response); } - ); - } - - onAuthSuccess(authResponse: AuthResponse): void { - this.authFailed = false; - this.authService.generateTokenCookies(authResponse); - this.authService.navigateToRedirectURI(noDelay); - } - - onAuthFailure(authorizeUserResponse): void { - if (authorizeUserResponse.status === 401) { - this.authFailed = true; - } - } + authorizeUser(): void { + this.authService.authorizeInternal(this.emailAddress, this.password).subscribe( + (response) => { this.authService.navigateToRedirectURI(noDelay); }, + (response) => { this.onAuthFailure(response); } + ); + } + onAuthFailure(authorizeUserResponse): void { + if (authorizeUserResponse.status === 401) { + this.errorSnackbar.open( + 'Authentication error, please try again', + null, + {panelClass: 'mycroft-no-action-snackbar', duration: tenSeconds} + ); + } + } }