Merge pull request #7479 from betagouv/feat/7478

ETQ Usager, je veux entrer mon Iban de manière plus simple

app/javascript/controllers/iban_input_controller.ts

@@ -0,0 +1,13 @@
+import { ApplicationController } from './application_controller';
+
+export class IBANInputController extends ApplicationController {
+  connect() {
+    this.on('input', (event) => {
+      const target = event.target as HTMLInputElement;
+      target.value = target.value
+        .replace(/[^\dA-Z]/g, '')
+        .replace(/(.{4})/g, '$1 ')
+        .trim();
+    });
+  }
+}

app/javascript/controllers/index.ts

@@ -13,6 +13,7 @@ import { TurboEventController } from './turbo_event_controller';
 import { TurboInputController } from './turbo_input_controller';
 import { TurboPollController } from './turbo_poll_controller';
 import { TypeDeChampEditorController } from './type_de_champ_editor_controller';
+import { IBANInputController } from './iban_input_controller';
 
 const Stimulus = Application.start();
 Stimulus.register('autofocus', AutofocusController);
@@ -28,3 +29,4 @@ Stimulus.register('turbo-event', TurboEventController);
 Stimulus.register('turbo-input', TurboInputController);
 Stimulus.register('turbo-poll', TurboPollController);
 Stimulus.register('type-de-champ-editor', TypeDeChampEditorController);
+Stimulus.register('iban-input', IBANInputController);

app/views/shared/dossiers/editable_champs/_iban.html.haml

@@ -2,4 +2,5 @@
   id: champ.input_id,
   placeholder: "27 caractères au format FR7630006000011234567890189",
   required: champ.mandatory?,
-  aria: { describedby: champ.describedby_id }
+  aria: { describedby: champ.describedby_id },
+  data: { controller: 'iban-input'}