From d36701d102e7d9dacbc45eff1ed352a9c1530e3c Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date: Tue, 30 Nov 2021 08:55:53 +0100
Subject: [PATCH] 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         |  2 +-
 .../edit-employee-form.component.html            |  2 +-
 .../pages/employee-form/employee-form.module.ts  |  8 +++++---
 .../employee-invite.component.html               |  2 +-
 .../employee-invite/employee-invite.module.ts    |  2 ++
 .../avvikelse-report-form.component.html         |  2 +-
 .../avvikelse-report-form.module.ts              |  4 +++-
 .../franvaro-report-form.component.html          |  2 +-
 .../franvaro-report-form.module.ts               |  6 ++++--
 .../gemensam-planering-form.component.html       |  2 +-
 .../gemensam-planering-form.module.ts            |  2 ++
 .../informativ-rapport-form.component.html       |  2 +-
 .../informativ-rapport-form.module.ts            |  8 +++++---
 .../periodisk-redovisning-form.component.html    |  2 +-
 .../periodisk-redovisning-form.module.ts         |  2 ++
 .../signal-form/signal-form.component.html       |  2 +-
 .../signal-form/signal-form.module.ts            |  4 +++-
 .../slutredovisning-form-step0.component.html    |  2 +-
 .../slutredovisning-form-step1.component.html    |  2 +-
 .../slutredovisning-form-step2.component.html    |  2 +-
 .../slutredovisning-form.module.ts               |  4 +++-
 .../deltagare-export.component.html              |  2 +-
 .../deltagare-export/deltagare-export.module.ts  |  2 ++
 .../handledare-picker-form.component.html        |  2 +-
 .../handledare-picker-form.module.ts             |  4 +++-
 .../organization-picker-form.component.html      |  4 +++-
 .../organization-picker-form.module.ts           |  5 +++--
 .../prevent-double-submit.directive.ts           | 16 ++++++++++++++++
 .../directives/prevent-double-submit.module.ts   |  8 ++++++++
 29 files changed, 78 insertions(+), 29 deletions(-)
 create mode 100644 apps/mina-sidor-fa/src/app/shared/directives/prevent-double-submit.directive.ts
 create mode 100644 apps/mina-sidor-fa/src/app/shared/directives/prevent-double-submit.module.ts

diff --git a/apps/mina-sidor-fa/src/app/app.module.ts b/apps/mina-sidor-fa/src/app/app.module.ts
index 249b4e2..bfc2062 100644
--- a/apps/mina-sidor-fa/src/app/app.module.ts
+++ b/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({
diff --git a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.html b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.html
index 1f0124d..b619519 100644
--- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.html
+++ b/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>
diff --git a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.module.ts b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.module.ts
index 0e3d73c..54d2174 100644
--- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.module.ts
+++ b/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 {}
diff --git a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-invite/employee-invite.component.html b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-invite/employee-invite.component.html
index eeb379d..6ed865b 100644
--- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-invite/employee-invite.component.html
+++ b/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>
diff --git a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-invite/employee-invite.module.ts b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-invite/employee-invite.module.ts
index fd9b6dc..25445ea 100644
--- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-invite/employee-invite.module.ts
+++ b/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 {}
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/avvikelse-report-form/avvikelse-report-form.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/avvikelse-report-form/avvikelse-report-form.component.html
index 74cc2b2..ef3b7a8 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/avvikelse-report-form/avvikelse-report-form.component.html
+++ b/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>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/avvikelse-report-form/avvikelse-report-form.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/avvikelse-report-form/avvikelse-report-form.module.ts
index 0b39fc8..45d448c 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/avvikelse-report-form/avvikelse-report-form.module.ts
+++ b/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],
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/franvaro-report-form/franvaro-report-form.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/franvaro-report-form/franvaro-report-form.component.html
index 47982c6..c26324d 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/franvaro-report-form/franvaro-report-form.component.html
+++ b/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>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/franvaro-report-form/franvaro-report-form.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/franvaro-report-form/franvaro-report-form.module.ts
index ce60b0c..148b6a4 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/franvaro-report-form/franvaro-report-form.module.ts
+++ b/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],
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/gemensam-planering-form/gemensam-planering-form.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/gemensam-planering-form/gemensam-planering-form.component.html
index aecf1f3..2db3ee7 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/gemensam-planering-form/gemensam-planering-form.component.html
+++ b/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>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/gemensam-planering-form/gemensam-planering-form.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/gemensam-planering-form/gemensam-planering-form.module.ts
index 372c0d9..878dc31 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/gemensam-planering-form/gemensam-planering-form.module.ts
+++ b/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],
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/informativ-rapport-form/informativ-rapport-form.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/informativ-rapport-form/informativ-rapport-form.component.html
index b9fe07a..fc8228e 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/informativ-rapport-form/informativ-rapport-form.component.html
+++ b/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>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/informativ-rapport-form/informativ-rapport-form.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/informativ-rapport-form/informativ-rapport-form.module.ts
index 90a7e9e..4dd4867 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/informativ-rapport-form/informativ-rapport-form.module.ts
+++ b/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],
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.html
index a2da1ed..911c363 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.html
+++ b/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>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.module.ts
index 8a0a1a9..7e4c921 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.module.ts
+++ b/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],
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/signal-form/signal-form.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/signal-form/signal-form.component.html
index ab47e98..5fba4f8 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/signal-form/signal-form.component.html
+++ b/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>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/signal-form/signal-form.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/signal-form/signal-form.module.ts
index edcaf47..ddcbfd1 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/signal-form/signal-form.module.ts
+++ b/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],
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step0/slutredovisning-form-step0.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step0/slutredovisning-form-step0.component.html
index ec68ee9..f614540 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step0/slutredovisning-form-step0.component.html
+++ b/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>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step1/slutredovisning-form-step1.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step1/slutredovisning-form-step1.component.html
index 7ca4c34..0205076 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step1/slutredovisning-form-step1.component.html
+++ b/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>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step2/slutredovisning-form-step2.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step2/slutredovisning-form-step2.component.html
index 9ca21aa..afd2ea6 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step2/slutredovisning-form-step2.component.html
+++ b/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>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form.module.ts
index c635021..365169a 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form.module.ts
+++ b/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],
diff --git a/apps/mina-sidor-fa/src/app/pages/exports/pages/deltagare-export/deltagare-export.component.html b/apps/mina-sidor-fa/src/app/pages/exports/pages/deltagare-export/deltagare-export.component.html
index cc8087e..c574e6c 100644
--- a/apps/mina-sidor-fa/src/app/pages/exports/pages/deltagare-export/deltagare-export.component.html
+++ b/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>
diff --git a/apps/mina-sidor-fa/src/app/pages/exports/pages/deltagare-export/deltagare-export.module.ts b/apps/mina-sidor-fa/src/app/pages/exports/pages/deltagare-export/deltagare-export.module.ts
index bf55f99..590d388 100644
--- a/apps/mina-sidor-fa/src/app/pages/exports/pages/deltagare-export/deltagare-export.module.ts
+++ b/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],
 })
diff --git a/apps/mina-sidor-fa/src/app/shared/components/handledare-picker-form/handledare-picker-form.component.html b/apps/mina-sidor-fa/src/app/shared/components/handledare-picker-form/handledare-picker-form.component.html
index 616ad9c..e035cc0 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/handledare-picker-form/handledare-picker-form.component.html
+++ b/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">
diff --git a/apps/mina-sidor-fa/src/app/shared/components/handledare-picker-form/handledare-picker-form.module.ts b/apps/mina-sidor-fa/src/app/shared/components/handledare-picker-form/handledare-picker-form.module.ts
index 988483b..8597210 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/handledare-picker-form/handledare-picker-form.module.ts
+++ b/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],
 })
diff --git a/apps/mina-sidor-fa/src/app/shared/components/organization-picker-form/organization-picker-form.component.html b/apps/mina-sidor-fa/src/app/shared/components/organization-picker-form/organization-picker-form.component.html
index faaf1ad..a7f4ba6 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/organization-picker-form/organization-picker-form.component.html
+++ b/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>
diff --git a/apps/mina-sidor-fa/src/app/shared/components/organization-picker-form/organization-picker-form.module.ts b/apps/mina-sidor-fa/src/app/shared/components/organization-picker-form/organization-picker-form.module.ts
index bd55781..18f1c72 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/organization-picker-form/organization-picker-form.module.ts
+++ b/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 {}
diff --git a/apps/mina-sidor-fa/src/app/shared/directives/prevent-double-submit.directive.ts b/apps/mina-sidor-fa/src/app/shared/directives/prevent-double-submit.directive.ts
new file mode 100644
index 0000000..6b36100
--- /dev/null
+++ b/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();
+    }
+  }
+}
diff --git a/apps/mina-sidor-fa/src/app/shared/directives/prevent-double-submit.module.ts b/apps/mina-sidor-fa/src/app/shared/directives/prevent-double-submit.module.ts
new file mode 100644
index 0000000..c1ce03a
--- /dev/null
+++ b/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 {}