fix(forms): Preventing double submit when double-clicking submit buttons. (TV-908)

Merge in TEA/mina-sidor-fa-web from bugfix/TV-908-prevent-double-submit to develop

Squashed commit of the following:

commit b9f0b803a97b104647c835e9244d845b4a6fb41a
Merge: 44fd4ff8 af4f6cbe
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Tue Nov 30 08:53:56 2021 +0100

    Merged develop and fixed conflicts

commit 44fd4ff8f3c58361b991142fad9c64bf6e13f329
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Mon Nov 29 11:51:35 2021 +0100

    Added custom selector to directive

commit 9c4a82556be3d78183cfa4a13413708876519643
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Mon Nov 29 10:43:45 2021 +0100

    Added directive to prevent double submit

apps/mina-sidor-fa/src/app/shared/components/handledare-picker-form/handledare-picker-form.component.html

@@ -9,7 +9,7 @@
     [uiInvalid]="handledareFormControl.invalid && handledareFormControl.touched || invalid"
     (uiOnChange)="handledareChanged()"
   ></ui-select>
-  <digi-button *ngIf="!skipSubmit" class="handledare-picker-form__submit" af-type="submit">
+  <digi-button *ngIf="!skipSubmit" class="handledare-picker-form__submit" af-type="submit" msfaPreventDoubleSubmit>
     {{submitText}}
   </digi-button>
   <div class="handledare-picker-form__validation-wrapper">

apps/mina-sidor-fa/src/app/shared/components/handledare-picker-form/handledare-picker-form.module.ts

@@ -1,10 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
+import { PreventDoubleSubmitModule } from '@msfa-directives/prevent-double-submit.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
-import { HandledarePickerFormComponent } from './handledare-picker-form.component';
 import { UiSelectModule } from '@ui/select/select.module';
 import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
+import { HandledarePickerFormComponent } from './handledare-picker-form.component';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -15,6 +16,7 @@ import { UiValidationMessageModule } from '@ui/validation-message/validation-mes
     UiLoaderModule,
     UiSelectModule,
     UiValidationMessageModule,
+    PreventDoubleSubmitModule,
   ],
   exports: [HandledarePickerFormComponent],
 })

apps/mina-sidor-fa/src/app/shared/components/organization-picker-form/organization-picker-form.component.html

@@ -14,5 +14,7 @@
     [uiInvalid]="organizationFormControl.invalid && organizationFormControl.touched"
     uiValidationMessage="Du måste välja en organisation för att kunna logga in"
   ></ui-select>
-  <digi-button class="organization-picker-form__submit" af-type="submit">{{submitText}}</digi-button>
+  <digi-button class="organization-picker-form__submit" af-type="submit" msfaPreventDoubleSubmit
+    >{{submitText}}</digi-button
+  >
 </form>

apps/mina-sidor-fa/src/app/shared/components/organization-picker-form/organization-picker-form.module.ts

@@ -1,14 +1,15 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
+import { PreventDoubleSubmitModule } from '@msfa-directives/prevent-double-submit.module';
+import { UiSelectModule } from '@ui/select/select.module';
 import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
 import { OrganizationPickerFormComponent } from './organization-picker-form.component';
-import { UiSelectModule } from '@ui/select/select.module';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [OrganizationPickerFormComponent],
-  imports: [CommonModule, ReactiveFormsModule, UiSelectModule, UiValidationMessageModule],
+  imports: [CommonModule, ReactiveFormsModule, UiSelectModule, UiValidationMessageModule, PreventDoubleSubmitModule],
   exports: [OrganizationPickerFormComponent],
 })
 export class OrganizationPickerFormModule {}

apps/mina-sidor-fa/src/app/shared/directives/prevent-double-submit.directive.ts

@@ -0,0 +1,16 @@
+import { Directive, HostListener } from '@angular/core';
+
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[msfaPreventDoubleSubmit]',
+})
+export class PreventDoubleSubmitDirective {
+  @HostListener('click', ['$event'])
+  onSubmit(event: UIEvent): void {
+    const clickCount = event.detail;
+
+    if (clickCount > 1) {
+      event.preventDefault();
+    }
+  }
+}

apps/mina-sidor-fa/src/app/shared/directives/prevent-double-submit.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { PreventDoubleSubmitDirective } from './prevent-double-submit.directive';
+
+@NgModule({
+  declarations: [PreventDoubleSubmitDirective],
+  exports: [PreventDoubleSubmitDirective],
+})
+export class PreventDoubleSubmitModule {}