Improve form errors for user

Author: Salma Alam-Naylor

apps/fretonator-web/src/app/common/footer/footer.component.ts

@@ -5,7 +5,6 @@ import { GlobalService } from '../../global.service';
   selector: 'app-footer',
   templateUrl: './footer.component.html',
   styleUrls: ['./footer.component.scss'],
-  encapsulation: ViewEncapsulation.ShadowDom
 })
 export class FooterComponent {
   date: Date = new Date();

apps/fretonator-web/src/app/pages/contact/contact-index/contact-index.component.html

@@ -30,11 +30,9 @@ <h1 class="form__title">Share the love <span role="img" aria-label="red heart em
       </span>
     </div>
     <ng-container *ngIf="name.touched">
-      <p class="form__error" *ngIf="name.errors?.required">Enter your name, yo! A fake one will do.</p>
-      <p class="form__error" *ngIf="name.errors?.pattern">Please enter a valid name that won't break the form!</p>
-      <p class="form__error" *ngIf="name.errors?.maxlength">Come on, your name isn't
-        actually {{name.errors?.maxlength.actualLength}}
-        characters long!</p>
+      <p class="form__error" *ngIf="name.errors?.required">{{getErrorMessage('name', 'required')}}</p>
+      <p class="form__error" *ngIf="name.errors?.pattern">{{getErrorMessage('name', 'pattern')}}</p>
+      <p class="form__error" *ngIf="name.errors?.maxlength">{{getErrorMessage('name', 'maxLength')}}</p>
     </ng-container>
     <label for="email" class="form__label">
       Your contact email
@@ -50,8 +48,7 @@ <h1 class="form__title">Share the love <span role="img" aria-label="red heart em
       </span>
     </div>
     <ng-container *ngIf="email.touched">
-      <p class="form__error" *ngIf="email.errors?.email">An email address isn't required, but if you'd like me to reply
-        to your message, please enter a valid one!</p>
+      <p class="form__error" *ngIf="email.errors?.email">{{getErrorMessage('email', 'valid')}}</p>
     </ng-container>
 
     <label for="message" class="form__label">
@@ -67,8 +64,8 @@ <h1 class="form__title">Share the love <span role="img" aria-label="red heart em
       </span>
     </div>
     <ng-container *ngIf="message.touched">
-      <p class="form__error" *ngIf="message.errors?.required">Go on, give me some feedback!</p>
-      <p class="form__error" *ngIf="message.errors?.minlength">Come on, you can write more than that!</p>
+      <p class="form__error" *ngIf="message.errors?.required">{{getErrorMessage('message', 'required')}}</p>
+      <p class="form__error" *ngIf="message.errors?.minlength">{{getErrorMessage('message', 'minLength')}}</p>
     </ng-container>
 
     <div class="form__honeypot">
@@ -77,9 +74,16 @@ <h1 class="form__title">Share the love <span role="img" aria-label="red heart em
     </div>
 
     <input type="submit" class="form__submit" formControlName="submit" aria-label="Submit Form"/>
+
+    <p class="form__error form__error--global" *ngIf="globalErrors.any">
+      Please fix the following errors in the form to submit:
+      <span class="form__error--inner" *ngIf="globalErrors.name">{{getErrorMessage('name', 'general')}}</span>
+      <span class="form__error--inner" *ngIf="globalErrors.email">{{getErrorMessage('email', 'valid')}}</span>
+      <span class="form__error--inner" *ngIf="globalErrors.message">{{getErrorMessage('message', 'general')}}</span>
+    </p>
+
     <p class="form__error form__error--global" *ngIf="formSubmitError">Eeesh! Something went wrong when we tried to
-      submit the form. Please
-      try again.</p>
+      submit the form. Please try again.</p>
 
   </form>
 </div>

apps/fretonator-web/src/app/pages/contact/contact-index/contact-index.component.scss

@@ -51,6 +51,8 @@
   border: pxToRem(2) solid var(--form-input-border-color);
   background-color: var(--form-input-bg-color);
   color: var(--form-input-color);
+
+  @include focus_accessible();
 }
 
 .form__input--textArea {
@@ -62,7 +64,7 @@
   height: pxToRem($grid-unit * 3);
   position: absolute;
   transform: translateY(50%);
-  left: 92%;
+  right: pxToRem($grid-unit * 2);
 }
 
 .form__validIcon--textArea {
@@ -98,6 +100,22 @@
   border-top-width: pxToRem(2);
 }
 
+.form__error--inner {
+  display: block;
+  margin-bottom: pxToRem($grid-unit * 1);
+  margin-top: pxToRem($grid-unit * 1);
+
+  &:before {
+    display: inline-block;
+    content: '';
+    border-radius: 50%;
+    height: pxToRem($grid-unit * 1.5);
+    width:pxToRem($grid-unit * 1.5);
+    margin-right: pxToRem($grid-unit * 2);
+    background-color: var(--error-fg);
+  }
+}
+
 .form__submit {
   @include hard_button_base();
   margin-top: pxToRem($grid-unit * 6);
@@ -107,3 +125,13 @@
     opacity: 0.5;
   }
 }
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover,
+textarea:-webkit-autofill:focus {
+  -webkit-box-shadow: 0 0 0 30px var(--form-input-bg-color) inset !important;
+  -webkit-text-fill-color: var(--form-input-color) !important;
+}

apps/fretonator-web/src/app/pages/contact/contact-index/contact-index.component.ts

@@ -4,6 +4,7 @@ import { FormService } from '../form.service';
 import { tap } from 'rxjs/operators';
 import { Router } from '@angular/router';
 import { GlobalService } from '../../../global.service';
+import { FormErrorMessages } from '../../../util/constants'
 
 @Component({
   selector: 'app-contact-index',
@@ -14,6 +15,12 @@ export class ContactIndexComponent implements OnInit, AfterViewInit {
   @ViewChild('scrollTarget') scrollTarget: ElementRef<HTMLElement>;
   formName = 'Contact';
   formSubmitError = false;
+  globalErrors = {
+    name: false,
+    email: false,
+    message: false,
+    any: false
+  };
   form = new FormGroup({
     honeypot: new FormControl('', [
       Validators.maxLength(0)
@@ -32,7 +39,7 @@ export class ContactIndexComponent implements OnInit, AfterViewInit {
     ]),
     submit: new FormControl('Submit', [])
   }, {
-    updateOn: 'blur'
+    updateOn: 'change'
   });
 
   constructor(private formService: FormService,
@@ -48,8 +55,11 @@ export class ContactIndexComponent implements OnInit, AfterViewInit {
   }
 
   onSubmit() {
+    this.resetGlobalErrors();
+
     if (this.form.invalid) {
       this.form.markAllAsTouched();
+      this.calculateGlobalErrors();
       return;
     }
 
@@ -99,4 +109,47 @@ export class ContactIndexComponent implements OnInit, AfterViewInit {
     return this.form.get('honeypot');
   }
 
+  resetGlobalErrors() {
+    this.globalErrors = {
+      name: false,
+      email: false,
+      message: false,
+      any: false
+    };
+  }
+
+  getNameError() {
+    if (!this.name.errors) {
+      return;
+    }
+    return true;
+  }
+
+  getEmailError() {
+    if (!this.email.errors) {
+      return;
+    }
+    return true;
+  }
+
+  getMessageError() {
+    if (!this.message.errors) {
+      return;
+    }
+    return true;
+  }
+
+  calculateGlobalErrors() {
+    this.globalErrors = {
+      name: this.getNameError(),
+      email: this.getEmailError(),
+      message: this.getMessageError(),
+      any: this.getNameError() || this.getEmailError() || this.getMessageError()
+    };
+  }
+
+  getErrorMessage(field: string, type: string) {
+    return FormErrorMessages[field][type];
+  }
+
 }

apps/fretonator-web/src/app/util/constants.ts

@@ -636,3 +636,20 @@ export const StandardModePatterns = [
   Mode.aolian,
   Mode.locrian
 ];
+
+export const FormErrorMessages = {
+  name: {
+    required: 'Enter your name, yo! A fake one will do.',
+    pattern: 'Please enter a valid name that won\'t break the form!',
+    maxLength: 'Come on, your name isn\'t actually that long!',
+    general: 'There\'s something wrong with the name field.'
+  },
+  email: {
+    valid: 'An email address isn\'t required, but if you\'d like me to reply to your message, please enter a valid one!'
+  },
+  message: {
+    required: 'Go on, give me some feedback!',
+    minLength: 'Keep typing, you\'re doing great.',
+    general: 'Oops! There\'s something wrong with the message field.'
+  }
+};