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/app.module.ts

@@ -17,10 +17,10 @@ import { AvropModule } from './pages/avrop/avrop.module';
 registerLocaleData(localeSe);
 const providers: Provider[] = [
   ApmErrorHandler,
-
   { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
   { provide: LOCALE_ID, useValue: 'sv-SE' },
 ];
+
 // Skip error handler in Dev until "Uncaught Error: ApplicationRef.tick is called recursively" is fixed
 if (environment.production) {
   providers.push({

apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.html

@@ -123,7 +123,7 @@
       <ui-link-button [uiRouterLink]="['/administration/personal', employee.id]" uiType="secondary">
         Avbryt<span class="msfa__a11y-sr-only">&nbsp;redigering av personalkontot.</span>
       </ui-link-button>
-      <digi-button af-type="submit">Spara ändringar</digi-button>
+      <digi-button af-type="submit" msfaPreventDoubleSubmit>Spara ändringar</digi-button>
     </footer>
   </form>
 </digi-typography>

apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.module.ts

@@ -3,25 +3,26 @@ import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
 import { DigiNgFormCheckboxModule } from '@af/digi-ng/_form/form-checkbox';
 import { DigiNgFormDatepickerModule } from '@af/digi-ng/_form/form-datepicker';
 import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobutton-group';
-import { DigiNgPopoverModule } from '@af/digi-ng/_popover/popover';
 import { DigiNgLoaderSpinnerModule } from '@af/digi-ng/_loader/loader-spinner';
+import { DigiNgPopoverModule } from '@af/digi-ng/_popover/popover';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
+import { PreventDoubleSubmitModule } from '@msfa-directives/prevent-double-submit.module';
 import { ErrorListModule } from '@msfa-shared/components/error-list/error-list.module';
 import { HideTextModule } from '@msfa-shared/components/hide-text/hide-text.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
 import { RolesDialogModule } from '@msfa-shared/components/roles-dialog/roles-dialog.module';
 import { TreeNodesSelectorModule } from '@msfa-shared/components/tree-nodes-selector/tree-nodes-selector.module';
 import { LocalDatePipeModule } from '@msfa-shared/pipes/local-date/local-date.module';
+import { UiInputModule } from '@ui/input/input.module';
 import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
+import { UiSelectModule } from '@ui/select/select.module';
 import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { EmployeeDeleteModule } from '../../components/employee-delete/employee-delete.module';
 import { EditEmployeeFormComponent } from './edit-employee-form/edit-employee-form.component';
 import { EmployeeFormComponent } from './employee-form.component';
-import { UiSelectModule } from '@ui/select/select.module';
-import { UiInputModule } from '@ui/input/input.module';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -48,6 +49,7 @@ import { UiInputModule } from '@ui/input/input.module';
     RolesDialogModule,
     UiLinkButtonModule,
     UiInputModule,
+    PreventDoubleSubmitModule,
   ],
 })
 export class EmployeeFormModule {}

apps/mina-sidor-fa/src/app/pages/administration/pages/employee-invite/employee-invite.component.html

@@ -74,7 +74,7 @@
         </digi-notification-alert>
 
         <footer class="employee-invite__footer">
-          <digi-button af-size="m" af-type="submit">Skicka inbjudningslänk</digi-button>
+          <digi-button af-size="m" af-type="submit" msfaPreventDoubleSubmit>Skicka inbjudningslänk</digi-button>
           <ui-link-button uiRouterLink="../" uiType="secondary">
             Avbryt<span class="msfa__a11y-sr-only">&nbsp;och gå tillbaka till personallistan</span>
           </ui-link-button>

apps/mina-sidor-fa/src/app/pages/administration/pages/employee-invite/employee-invite.module.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
+import { PreventDoubleSubmitModule } from '@msfa-directives/prevent-double-submit.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
 import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
@@ -19,6 +20,7 @@ import { EmployeeInviteComponent } from './employee-invite.component';
     UiTextareaModule,
     UiLoaderModule,
     UiLinkButtonModule,
+    PreventDoubleSubmitModule,
   ],
 })
 export class EmployeeInviteModule {}

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/avvikelse-report-form/avvikelse-report-form.component.html

@@ -83,7 +83,7 @@
             </div>
 
             <div class="avvikelse-report-form__cta-wrapper">
-              <digi-button af-type="submit" af-size="m">Förhandsgranska</digi-button>
+              <digi-button af-type="submit" af-size="m" msfaPreventDoubleSubmit>Förhandsgranska</digi-button>
               <ui-link-button uiRouterLink="../" uiType="secondary">
                 Avbryt
                 <span class="msfa__a11y-sr-only">&nbsp;och gå tillbaka till deltagaren</span>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/avvikelse-report-form/avvikelse-report-form.module.ts

@@ -7,18 +7,19 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
+import { PreventDoubleSubmitModule } from '@msfa-directives/prevent-double-submit.module';
 import { ConfirmDialogModule } from '@msfa-shared/components/confirm-dialog/confirm-dialog.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
 import { UiBackLinkModule } from '@ui/back-link/back-link.module';
 import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
+import { UiSelectModule } from '@ui/select/select.module';
 import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { UiTextareaModule } from '@ui/textarea/textarea.module';
 import { ReportDescriptionListModule } from '../../../components/report-description-list/report-description-list.module';
 import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
 import { AvvikelseReportFormComponent } from './avvikelse-report-form.component';
 import { AvvikelseReportFormService } from './avvikelse-report-form.service';
-import { UiSelectModule } from '@ui/select/select.module';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -42,6 +43,7 @@ import { UiSelectModule } from '@ui/select/select.module';
     DigiNgDialogModule,
     UiTextareaModule,
     UiLinkButtonModule,
+    PreventDoubleSubmitModule,
   ],
   providers: [AvvikelseReportFormService],
   exports: [AvvikelseReportFormComponent],

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/franvaro-report-form/franvaro-report-form.component.html

@@ -164,7 +164,7 @@
 
             <footer class="franvaro-report-form__footer">
               <div class="franvaro-report-form__cta-wrapper">
-                <digi-button af-type="submit" af-size="m">Förhandsgranska</digi-button>
+                <digi-button af-type="submit" af-size="m" msfaPreventDoubleSubmit>Förhandsgranska</digi-button>
                 <ui-link-button uiRouterLink="../" uiType="secondary">
                   Avbryt
                   <span class="msfa__a11y-sr-only">&nbsp;och gå tillbaka till deltagaren</span>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/franvaro-report-form/franvaro-report-form.module.ts

@@ -4,20 +4,21 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
+import { PreventDoubleSubmitModule } from '@msfa-directives/prevent-double-submit.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
 import { UiBackLinkModule } from '@ui/back-link/back-link.module';
+import { UiInputModule } from '@ui/input/input.module';
 import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
 import { UiRadiobuttonGroupModule } from '@ui/radiobutton-group/radiobutton-group.module';
+import { UiSelectModule } from '@ui/select/select.module';
 import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { UiTextareaModule } from '@ui/textarea/textarea.module';
-import { UiSelectModule } from '@ui/select/select.module';
 import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
 import { ReportDescriptionListModule } from '../../../components/report-description-list/report-description-list.module';
 import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
 import { FranvaroReportFormComponent } from './franvaro-report-form.component';
 import { FranvaroReportFormService } from './franvaro-report-form.service';
-import { UiInputModule } from '@ui/input/input.module';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -40,6 +41,7 @@ import { UiInputModule } from '@ui/input/input.module';
     UiRadiobuttonGroupModule,
     UiLinkButtonModule,
     UiInputModule,
+    PreventDoubleSubmitModule,
   ],
   providers: [FranvaroReportFormService],
   exports: [FranvaroReportFormComponent],

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/gemensam-planering-form/gemensam-planering-form.component.html

@@ -82,7 +82,7 @@
 
             <footer class="gemensam-planering-form__footer">
               <div class="gemensam-planering-form__cta-wrapper">
-                <digi-button af-type="submit" af-size="m">Förhandsgranska</digi-button>
+                <digi-button af-type="submit" af-size="m" msfaPreventDoubleSubmit>Förhandsgranska</digi-button>
                 <ui-link-button uiRouterLink="../" uiType="secondary">
                   Avbryt
                   <span class="msfa__a11y-sr-only">&nbsp;och gå tillbaka till deltagaren</span>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/gemensam-planering-form/gemensam-planering-form.module.ts

@@ -5,6 +5,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
+import { PreventDoubleSubmitModule } from '@msfa-directives/prevent-double-submit.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
 import { UiBackLinkModule } from '@ui/back-link/back-link.module';
 import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
@@ -36,6 +37,7 @@ import { GemensamPlaneringFormService } from './gemensam-planering-form.service'
     DigiNgDialogModule,
     UiValidationMessageModule,
     UiLinkButtonModule,
+    PreventDoubleSubmitModule,
   ],
   providers: [GemensamPlaneringFormService],
   exports: [GemensamPlaneringFormComponent],

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/informativ-rapport-form/informativ-rapport-form.component.html

@@ -96,7 +96,7 @@
           </div>
           <footer class="informativ-rapport-form__footer">
             <div class="informativ-rapport-form__cta-wrapper">
-              <digi-button af-type="submit" af-size="m">Förhandsgranska</digi-button>
+              <digi-button af-type="submit" af-size="m" msfaPreventDoubleSubmit>Förhandsgranska</digi-button>
               <ui-link-button uiRouterLink="../" uiType="secondary">
                 Avbryt
                 <span class="msfa__a11y-sr-only">&nbsp;och gå tillbaka till deltagaren</span>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/informativ-rapport-form/informativ-rapport-form.module.ts

@@ -3,19 +3,20 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
+import { PreventDoubleSubmitModule } from '@msfa-directives/prevent-double-submit.module';
 import { ConfirmDialogModule } from '@msfa-shared/components/confirm-dialog/confirm-dialog.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
 import { UiBackLinkModule } from '@ui/back-link/back-link.module';
+import { UiFileUploadModule } from '@ui/file-upload/file-upload.module';
 import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
+import { UiLoaderModule } from '@ui/loader/loader.module';
+import { UiSelectModule } from '@ui/select/select.module';
 import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { UiTextareaModule } from '@ui/textarea/textarea.module';
 import { ReportDescriptionListModule } from '../../../components/report-description-list/report-description-list.module';
 import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
 import { InformativRapportFormComponent } from './informativ-rapport-form.component';
 import { InformativRapportFormService } from './informativ-rapport-form.service';
-import { UiFileUploadModule } from '@ui/file-upload/file-upload.module';
-import { UiSelectModule } from '@ui/select/select.module';
-import { UiLoaderModule } from '@ui/loader/loader.module';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -35,6 +36,7 @@ import { UiLoaderModule } from '@ui/loader/loader.module';
     UiTextareaModule,
     UiFileUploadModule,
     UiLinkButtonModule,
+    PreventDoubleSubmitModule,
     UiLoaderModule,
   ],
   providers: [InformativRapportFormService],

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.html

@@ -159,7 +159,7 @@
 
               <footer class="periodisk-redovisning-form__footer">
                 <div class="periodisk-redovisning-form__cta-wrapper">
-                  <digi-button af-type="submit" af-size="m">Förhandsgranska</digi-button>
+                  <digi-button af-type="submit" af-size="m" msfaPreventDoubleSubmit>Förhandsgranska</digi-button>
                   <ui-link-button uiRouterLink="../" uiType="secondary">
                     Avbryt
                     <span class="msfa__a11y-sr-only">&nbsp;och gå tillbaka till deltagaren</span>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.module.ts

@@ -4,6 +4,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
+import { PreventDoubleSubmitModule } from '@msfa-directives/prevent-double-submit.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
 import { UiBackLinkModule } from '@ui/back-link/back-link.module';
 import { UiInputModule } from '@ui/input/input.module';
@@ -38,6 +39,7 @@ import { PeriodiskRedovisningFormService } from './periodisk-redovisning-form.se
     UiLinkButtonModule,
     UiInputModule,
     UiValidationMessageModule,
+    PreventDoubleSubmitModule,
   ],
   providers: [PeriodiskRedovisningFormService],
   exports: [PeriodiskRedovisningFormComponent],

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/signal-form/signal-form.component.html

@@ -75,7 +75,7 @@
 
           <footer class="signal-form__footer">
             <div class="signal-form__cta-wrapper">
-              <digi-button af-type="submit" af-size="m">Förhandsgranska</digi-button>
+              <digi-button af-type="submit" af-size="m" msfaPreventDoubleSubmit>Förhandsgranska</digi-button>
               <ui-link-button uiRouterLink="../" uiType="secondary">
                 Avbryt
                 <span class="msfa__a11y-sr-only">&nbsp;och gå tillbaka till deltagaren</span>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/signal-form/signal-form.module.ts

@@ -4,11 +4,13 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
+import { PreventDoubleSubmitModule } from '@msfa-directives/prevent-double-submit.module';
 import { ConfirmDialogModule } from '@msfa-shared/components/confirm-dialog/confirm-dialog.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
 import { UiBackLinkModule } from '@ui/back-link/back-link.module';
 import { UiInputModule } from '@ui/input/input.module';
 import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
+import { UiLoaderModule } from '@ui/loader/loader.module';
 import { UiRadiobuttonGroupModule } from '@ui/radiobutton-group/radiobutton-group.module';
 import { UiSelectModule } from '@ui/select/select.module';
 import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
@@ -17,7 +19,6 @@ import { ReportDescriptionListModule } from '../../../components/report-descript
 import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
 import { SignalFormComponent } from './signal-form.component';
 import { SignalFormService } from './signal-form.service';
-import { UiLoaderModule } from '@ui/loader/loader.module';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -40,6 +41,7 @@ import { UiLoaderModule } from '@ui/loader/loader.module';
     UiInputModule,
     UiValidationMessageModule,
     UiLinkButtonModule,
+    PreventDoubleSubmitModule,
   ],
   providers: [SignalFormService],
   exports: [SignalFormComponent],

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step0/slutredovisning-form-step0.component.html

@@ -48,7 +48,7 @@
     ></msfa-slutredovisning-form-step0-other>
 
     <footer class="slutredovisning-form-step0__footer">
-      <digi-button af-type="submit">Vidare till steg 2</digi-button>
+      <digi-button af-type="submit" msfaPreventDoubleSubmit>Vidare till steg 2</digi-button>
       <ui-link-button uiRouterLink="../" uiType="secondary">
         Avbryt
         <span class="msfa__a11y-sr-only">&nbsp;och gå tillbaka till deltagaren</span>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step1/slutredovisning-form-step1.component.html

@@ -27,7 +27,7 @@
       <!--    TODO: If something is required at the top of the form it will be hard to see when at the bottom and clicking next -->
 
       <footer class="slutredovisning-form-step1__footer">
-        <digi-button af-type="submit">Nästa</digi-button>
+        <digi-button af-type="submit" msfaPreventDoubleSubmit>Nästa</digi-button>
         <digi-button af-type="button" af-variation="secondary" (click)="goBack()">
           Tillbaka
           <span class="msfa__a11y-sr-only">&nbsp;till steg förgående steg</span>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step2/slutredovisning-form-step2.component.html

@@ -40,7 +40,7 @@
     ></ui-textarea>
 
     <footer class="slutredovisning-form-step2__footer">
-      <digi-button af-type="submit">Nästa</digi-button>
+      <digi-button af-type="submit" msfaPreventDoubleSubmit>Nästa</digi-button>
       <digi-button af-type="button" af-variation="secondary" (click)="goBack()">
         Tillbaka
         <span class="msfa__a11y-sr-only">&nbsp;till steg förgående steg</span>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form.module.ts

@@ -8,12 +8,13 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
+import { PreventDoubleSubmitModule } from '@msfa-directives/prevent-double-submit.module';
 import { ConfirmDialogModule } from '@msfa-shared/components/confirm-dialog/confirm-dialog.module';
-import { UiIconModule } from '@ui/icon/icon.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
 import { UiBackLinkModule } from '@ui/back-link/back-link.module';
 import { UiCheckboxModule } from '@ui/checkbox/checkbox.module';
 import { UiErrorListModule } from '@ui/error-list/error-list.module';
+import { UiIconModule } from '@ui/icon/icon.module';
 import { UiInputModule } from '@ui/input/input.module';
 import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
@@ -75,6 +76,7 @@ import { SlutredovisningFormService } from './slutredovisning-form.service';
     UiInputModule,
     SlutredovisningViewDescriptionListModule,
     UiLinkButtonModule,
+    PreventDoubleSubmitModule,
   ],
   providers: [SlutredovisningFormService],
   exports: [SlutredovisningFormComponent],

apps/mina-sidor-fa/src/app/pages/exports/pages/deltagare-export/deltagare-export.component.html

@@ -61,7 +61,7 @@
             <p>Det finns inga deltagare att exportera. Försök att ändra filtreringen och försök igen.</p>
           </digi-notification-alert>
           <div class="deltagare-export__cta-wrapper">
-            <digi-button af-type="submit" af-size="m">Exportera deltagare</digi-button>
+            <digi-button af-type="submit" af-size="m" msfaPreventDoubleSubmit>Exportera deltagare</digi-button>
           </div>
         </footer>
       </form>

apps/mina-sidor-fa/src/app/pages/exports/pages/deltagare-export/deltagare-export.module.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
+import { PreventDoubleSubmitModule } from '@msfa-directives/prevent-double-submit.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
 import { UiCheckboxModule } from '@ui/checkbox/checkbox.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
@@ -21,6 +22,7 @@ import { DeltagareExportService } from './deltagare-export.service';
     UiCheckboxModule,
     UiLoaderModule,
     DigiNgFormDatepickerModule,
+    PreventDoubleSubmitModule,
   ],
   providers: [DeltagareExportService],
 })

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 {}