Block copy paste for emailVerification input, add loading and disable form...

Block copy paste for emailVerification input, add loading and disable form while processing, fix some trnaslation

src/app/core/components/contact/contact.component.html

@@ -77,7 +77,7 @@
             <label class="label" for="emailConfirmation" i18n="@@contact.emailConfirmation">Confirm your email
               address</label>
             <p class="control has-icons-right">
-              <input id="emailConfirmation" class="input" type="email" formControlName="emailConfirmation" [ngClass]="{'is-danger': emailConfirmationError || fieldIsInvalid('emailConfirmation'), 'is-success': !emailConfirmationError && fieldIsValid('emailConfirmation')}">
+              <input blockCopyPaste id="emailConfirmation" class="input" type="email" formControlName="emailConfirmation" [ngClass]="{'is-danger': emailConfirmationError || fieldIsInvalid('emailConfirmation'), 'is-success': !emailConfirmationError && fieldIsValid('emailConfirmation')}">
               <span class="icon is-small is-right has-text-success" *ngIf="!emailConfirmationError && fieldIsValid('emailConfirmation')">
                 <i class="fas fa-check-circle"></i>
               </span>
@@ -111,19 +111,19 @@
 
       <div class="column is-12-mobile is-10-tablet is-9-desktop">
         <div class="field">
-          <label class="label" [for]="subjectLabelFor" i18n="@@contact.subject">Sujet</label>
+          <label class="label" [for]="subjectLabelFor" i18n="@@contact.subject">Subject</label>
           <div class="dropdown" [ngClass]="{'is-active': subjectDropdownState}" (clickOutside)="closeSubjectDropdown()">
             <div class="dropdown-trigger" (click)="toggleSubject()">
-              <button id="subjectDropdown" type="button" class="button" aria-haspopup="true" aria-controls="dropdown-menu">
+              <button id="subjectDropdown" type="button" class="button" aria-haspopup="true" aria-controls="dropdown-menu" [disabled]="formDisabled">
                 <span>{{ selectedSubject !== null && selectedSubject.value !== null ? selectedSubject.value : '---'}}</span>
                 <span class="icon is-small">
                   <i class="fas fa-angle-down" aria-hidden="true"></i>
                 </span>
               </button>
             </div>
-            <div class="dropdown-menu" id="dropdown-menu" role="menu">
+            <div class="dropdown-menu" id="dropdown-menu" role="menu">  
               <ul class="dropdown-content">
-                <li class="dropdown-item" *ngFor="let sub of subjects" (click)="setSubject(sub)">
+                <li class="dropdown-item" *ngFor="let sub of subjects" (keydown.enter)="setSubject(sub)" (click)="setSubject(sub)" tabindex=0>
                   {{ sub.value }}
                 </li>
               </ul>
@@ -167,7 +167,7 @@
         </div>
 
         <div class="has-text-right button-wrapper">
-          <button type="submit" class="button is-primary" [disabled]="formIsInvalid()" i18n="@@contact.send">Envoyer</button>
+          <button type="submit" class="button is-primary" [ngClass]="{'is-loading': formDisabled}" [disabled]="formIsInvalid() || formDisabled" i18n="@@contact.send">Send</button>
         </div>
       </div>
     </div>

src/app/core/components/contact/contact.component.ts

@@ -24,7 +24,7 @@ export class ContactComponent implements OnInit {
   ) {
     this.form = this._fb.group(
       {
-        firstname: ['', Validators.required],
+        firstname: ['', [Validators.required]],
         lastname: ['', Validators.required],
         email: ['', [Validators.required, Validators.email]],
         emailConfirmation: ['', [Validators.required, Validators.email]],
@@ -33,13 +33,14 @@ export class ContactComponent implements OnInit {
       });
   }
 
-  ngOnInit() {
-  }
+  ngOnInit() {}
 
   send() {
     const email = new Email(this.form.value);
+    this.form.disable();
     this._emailService.send(email).subscribe(
       (res) => {
+        this.form.enable();
         this._notificationService.notify(
           {
             type: 'success',
@@ -49,6 +50,7 @@ export class ContactComponent implements OnInit {
         this.form.reset();
       },
       (err) => {
+        this.form.enable();
         this._notificationService.notify(
           {
             type: 'error',
@@ -90,7 +92,9 @@ export class ContactComponent implements OnInit {
   }
 
   toggleSubject() {
-    this.subjectDropdownState = !this.subjectDropdownState;
+    if (!this.formDisabled) {
+      this.subjectDropdownState = !this.subjectDropdownState;
+    }
   }
 
   closeSubjectDropdown() {
@@ -114,6 +118,9 @@ export class ContactComponent implements OnInit {
     return this.displaySubjectInput ? 'subjectInput' : 'subjectDropdown';
   }
 
+  get formDisabled(): boolean {
+    return this.form.disabled;
+  }
 }
 
 interface Subject {

src/app/shared/directives/block-copypaste.directive.ts

+import { Directive, HostListener } from '@angular/core';
+
+@Directive({
+  selector: '[blockCopyPaste]',
+})
+export class BlockCopyPasteDirective {
+  constructor() { }
+
+  @HostListener('paste', ['$event']) blockPaste(e: KeyboardEvent) {
+    e.preventDefault();
+  }
+
+  @HostListener('copy', ['$event']) blockCopy(e: KeyboardEvent) {
+    e.preventDefault();
+  }
+
+  @HostListener('cut', ['$event']) blockCut(e: KeyboardEvent) {
+    e.preventDefault();
+  }
+}

src/app/shared/directives/index.ts

 import { PreventDefaultDirective } from './prevent-default.directive';
 import { DynamicLinks } from './dynamic-links';
 import { ClickOutsideDirective } from './click-outside.directive';
+import { BlockCopyPasteDirective } from './block-copypaste.directive';
 
-export { PreventDefaultDirective, DynamicLinks, ClickOutsideDirective };
+export { PreventDefaultDirective, DynamicLinks, ClickOutsideDirective, BlockCopyPasteDirective };
 
 // tslint:disable-next-line:variable-name
 export const SharedDirectives = [
   PreventDefaultDirective,
   DynamicLinks,
   ClickOutsideDirective,
+  BlockCopyPasteDirective,
 ];

src/i18n/contact/contact.ts

@@ -31,5 +31,5 @@ export const subjects = [
 
 export const feedbackMessages = {
   error: 'Sorry, we couldn\'t send your message, please try again later',
-  success: 'You message has been sent successfully.',
+  success: 'Your message has been sent successfully.',
 };

src/i18n/messages.fr.xlf

@@ -337,7 +337,7 @@
       </trans-unit>
       <trans-unit id="contact.emailConfirmation" datatype="html">
          <source>Confirm your email address</source>
-         <target>Confirmez votre adresse email</target>
+         <target>Confirmez votre adresse email.</target>
       </trans-unit>
       <trans-unit id="contact.errors.missingConfirmationEmail" datatype="html">
          <source>You must confirm your email address.</source>