Refactor authentication dialog error UI/UX

ngageoint · Sep 16, 2024 · 928e6ce · 928e6ce
1 parent 2ad03ae
commit 928e6ce
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 67 deletions.
diff --git a/web-app/src/app/ingress/authentication/authentication-dialog.component.html b/web-app/src/app/ingress/authentication/authentication-dialog.component.html
@@ -1,6 +1,7 @@
 <div>
   <h3 class="mat-dialog-title">Please signin to continue to Mage</h3>
-  <div class="mat-dialog-content">
+
+  <div mat-dialog-content>
     <div class="ingress" >
       <ingress [landing]="false" [api]="api" (complete)="onIngress()"></ingress>
     </div>

diff --git a/web-app/src/app/ingress/authentication/local/local-authentication.component.html b/web-app/src/app/ingress/authentication/local/local-authentication.component.html
@@ -19,11 +19,11 @@
     <button class="auth-button" mat-flat-button color="primary">Sign In</button>
   </div>
 
-  <div *ngIf="error" class="error-container" [@slide]>
+  <div #errorElement *ngIf="error" class="error-container" [@slide] (@slide.done)="scrollToError()">
     <div class="error" >
       <span class="material-symbols-outlined error__icon">sentiment_dissatisfied</span>
       <div class="error__message">
-        <div>{{error?.message}} <span *ngIf="contact" class="contact" [innerHTML]="contact"></span></div>
+        <div [innerHTML]="error.message"></div>
       </div>
     </div>
   </div>

diff --git a/web-app/src/app/ingress/authentication/local/local-authentication.component.scss b/web-app/src/app/ingress/authentication/local/local-authentication.component.scss
@@ -41,7 +41,7 @@ mat-form-field {
   flex-direction: column;
   align-items: center;
   gap: 8px;
-  margin-top: 24px;
+  margin: 24px 0;
   color: mat.get-color-from-palette($app-warn);
   border-radius: 4px;
   padding: 0 16px;

diff --git a/web-app/src/app/ingress/authentication/local/local-authentication.component.ts b/web-app/src/app/ingress/authentication/local/local-authentication.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SecurityContext, ViewChild } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { ApiService } from '../../../api/api.service';
 import { LinkGenerator } from '../../../contact/utilities/link-generator'
@@ -31,28 +31,23 @@ export class LocalAuthenticationComponent implements OnInit {
   @Output() signup = new EventEmitter<void>()
   @Output() authenticated = new EventEmitter<any>()
 
+  @ViewChild('errorElement') private errorElement: ElementRef;
+
   authenticationForm = new FormGroup({
     username: new FormControl('', [Validators.required]),
     password: new FormControl('', [Validators.required])
   })
 
   error: {
     title: string,
-    message: string
+    message: SafeHtml
   }
 
-  contact: SafeHtml
-
-  test: SafeHtml
-
   constructor(
     private apiService: ApiService,
     private userService: UserService,
     private sanitizer: DomSanitizer
-  ) {
-    this.test = this.sanitizer.bypassSecurityTrustHtml('<a href="www.google.com">I am a link</a>')
-    // this.test = this.sanitizer.bypassSecurityTrustHtml('<h1 style="color:red">Hello World</h1>')
-  }
+  ) { }
 
   ngOnInit(): void {
     this.apiService.getApi().subscribe((api: any) => {
@@ -71,19 +66,30 @@ export class LocalAuthenticationComponent implements OnInit {
         this.authenticated.emit(response)
       },
       error: (response: any) => {
+        let message = response.error || 'Please check your username and password and try again.'
+        if (this.api.contactInfo.email || this.api.contactInfo.phone) {
+          const email = LinkGenerator.emailLink(this.api.contactInfo, response.error, username, this.strategy)
+          const phone = LinkGenerator.phoneLink(this.api.contactInfo)
+          message = `${message} Should you need futher assistance you may contact your Mage administrator via ${[`<a href=${email}>email</a>`, `<a href=${phone}>phone</a>`].join(' or ')}.`
+        }
+
         this.error = {
           title: 'Error Signing In',
-          message: response.error || 'Please check your username and password and try again.'
+          message: this.sanitizer.sanitize(SecurityContext.HTML, message)
         }
 
-        const email = LinkGenerator.emailLink(this.api.contactInfo, response.error, username, this.strategy)
-        const phone = LinkGenerator.phoneLink(this.api.contactInfo)
-        this.contact = `Should you need futher assistance you may contact your Mage administrator via ${[`<a href=${email}>email</a>`, `<a href=${phone}>phone</a>`].join(' or ')}.`
+        this.scrollToError()
       }
     })
   }
 
   onSignup(): void {
     this.signup.emit()
   }
+
+  scrollToError(): void {
+    try {
+      this.errorElement.nativeElement.scrollIntoView({ behavior: 'smooth' });
+    } catch (err) { }     
+  }
 }
diff --git a/web-app/src/app/landing/info.component.html b/web-app/src/app/landing/info.component.html
@@ -1,6 +1,6 @@
 <div class="slide" [ngClass]="background"></div>
 
-<div class="mage-info-inner">
+<div>
   <div class="title-container">
     <div class="title">Mage</div>
   </div>

diff --git a/web-app/src/app/landing/info.component.scss b/web-app/src/app/landing/info.component.scss
@@ -1,4 +1,3 @@
-$small-screen-breakpoint: 1025px;
 $background-images: '1', '2', '3', '4';
 
 :host {
@@ -37,7 +36,6 @@ $background-images: '1', '2', '3', '4';
 }
 
 .title-container {
-  margin: 16px 0;
   text-align: center;
 }
 
@@ -51,7 +49,6 @@ $background-images: '1', '2', '3', '4';
 }
 
 .features {
-  margin-top: 44px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -62,7 +59,7 @@ $background-images: '1', '2', '3', '4';
   flex-direction: row;
   padding-bottom: 30px;
   padding-top: 30px;
-  width: 600px;
+  width: 550px;
 }
 
 .feature-icon {

diff --git a/web-app/src/app/landing/landing.component.html b/web-app/src/app/landing/landing.component.html
@@ -1,12 +1,10 @@
-<div class="outer-container">
-  <div class="authentication-container">
-    <div class="mage-info-container">
-      <info></info>
-    </div>
-    <div class="authentication-info-container">
-      <div class="authentication">
-        <ingress landing="true" [api]="api" (complete)="onIngress()"></ingress>
-      </div>
+<div class="landing">
+  <div class="section info">
+    <info></info>
+  </div>
+  <div class="section ingress-container">
+    <div class="ingress">
+      <ingress landing="true" [api]="api" (complete)="onIngress()"></ingress>
     </div>
   </div>
 </div>
diff --git a/web-app/src/app/landing/landing.component.scss b/web-app/src/app/landing/landing.component.scss
@@ -1,56 +1,42 @@
-@import "variables.scss";
-
-.outer-container {
-  display: inline;
-  min-height: 100%;
-  overflow-y: auto;
-}
-
-.authentication-container {
+.landing {
   display: flex;
   flex-direction: row;
-  min-height: 100vh;
 }
 
-.authentication-info-container {
-  height: 100%;
-  background-color: #fff;
+.section {
+  flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  flex: 1;
 }
 
-.authentication {
+.info {
+  height: 100vh;
+  overflow: hidden;
+  color: #fff;
+  background-color: rgba(16, 69, 130, .5);
+}
+
+.ingress-container {
+  overflow-y: scroll;
+  background-color: #fff;
+}
+
+.ingress {
   width: 75%;
   height: 100vh;
-  margin: auto;
   min-width: 285px;
   max-width: 600px;
   position: relative;
-  overflow-x: hidden;
-}
-
-.mage-info-container {
-  min-height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex: 1;
-  color: #fff;
-  background-color: rgba(16, 69, 130, .5);
 }
 
-@media (max-width: 1025px) {
-  .authentication-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
+@media (max-width: 1100px) or (max-height: 460px) {
+  .ingress-container {
+    width: 100%;
   }
 
-  .authentication-info-container {
-    width: 100%;
+  .info {
+    display: none;
   }
 }