From 9da9e6b0042095dcc45f07ffbf593a33ccdd1fda Mon Sep 17 00:00:00 2001
From: Yassine Guedidi <yassine@guedidi.com>
Date: Sun, 2 Mar 2025 14:37:38 +0100
Subject: [PATCH] Extract Clipboard controller

---
 assets/controllers/clipboard_controller.js      | 16 ++++++++++++++++
 assets/index.js                                 |  7 -------
 templates/Developer/client_parameters.html.twig |  4 ++--
 templates/Developer/index.html.twig             |  4 ++--
 4 files changed, 20 insertions(+), 11 deletions(-)
 create mode 100644 assets/controllers/clipboard_controller.js

diff --git a/assets/controllers/clipboard_controller.js b/assets/controllers/clipboard_controller.js
new file mode 100644
index 000000000..eba297138
--- /dev/null
+++ b/assets/controllers/clipboard_controller.js
@@ -0,0 +1,16 @@
+import { Controller } from '@hotwired/stimulus';
+import ClipboardJS from 'clipboard';
+
+export default class extends Controller {
+  connect() {
+    this.clipboard = new ClipboardJS(this.element);
+
+    this.clipboard.on('success', (e) => {
+      e.clearSelection();
+    });
+  }
+
+  disconnect() {
+    this.clipboard.destroy();
+  }
+}
diff --git a/assets/index.js b/assets/index.js
index 1f8d3256d..92b434abb 100755
--- a/assets/index.js
+++ b/assets/index.js
@@ -6,7 +6,6 @@ import $ from 'jquery';
 import '@materializecss/materialize/dist/css/materialize.css';
 import '@materializecss/materialize/dist/js/materialize';
 
-import ClipboardJS from 'clipboard';
 import 'mathjax/es5/tex-svg';
 
 /* Fonts */
@@ -67,12 +66,6 @@ $(document).ready(() => {
   $('#user_emailTwoFactor').on('change', () => {
     $('#user_googleTwoFactor').prop('checked', false);
   });
-
-  // handle copy to clipboard for developer stuff
-  const clipboard = new ClipboardJS('.btn');
-  clipboard.on('success', (e) => {
-    e.clearSelection();
-  });
 });
 
 (function darkTheme() {
diff --git a/templates/Developer/client_parameters.html.twig b/templates/Developer/client_parameters.html.twig
index b17d3ea34..70fe3943d 100644
--- a/templates/Developer/client_parameters.html.twig
+++ b/templates/Developer/client_parameters.html.twig
@@ -18,14 +18,14 @@
                         <td>{{ 'developer.client_parameter.field_id'|trans }}</td>
                         <td>
                             <strong><code>{{ client_id }}</code></strong>
-                            <button class="btn" data-clipboard-text="{{ client_id }}">{{ 'developer.client.copy_to_clipboard'|trans }}</button>
+                            <button class="btn" data-controller="clipboard" data-clipboard-text="{{ client_id }}">{{ 'developer.client.copy_to_clipboard'|trans }}</button>
                         </td>
                     </tr>
                     <tr>
                         <td>{{ 'developer.client_parameter.field_secret'|trans }}</td>
                         <td>
                             <strong><code>{{ client_secret }}</code></strong>
-                            <button class="btn" data-clipboard-text="{{ client_secret }}">{{ 'developer.client.copy_to_clipboard'|trans }}</button>
+                            <button class="btn" data-controller="clipboard" data-clipboard-text="{{ client_secret }}">{{ 'developer.client.copy_to_clipboard'|trans }}</button>
                         </td>
                     </tr>
                 </table>
diff --git a/templates/Developer/index.html.twig b/templates/Developer/index.html.twig
index 69cb0498d..8ca4767fb 100644
--- a/templates/Developer/index.html.twig
+++ b/templates/Developer/index.html.twig
@@ -35,14 +35,14 @@
                                             <td>{{ 'developer.existing_clients.field_id'|trans }}</td>
                                             <td>
                                                 <strong><code>{{ client.clientId }}</code></strong>
-                                                <button class="btn" data-clipboard-text="{{ client.clientId }}">{{ 'developer.client.copy_to_clipboard'|trans }}</button>
+                                                <button class="btn" data-controller="clipboard" data-clipboard-text="{{ client.clientId }}">{{ 'developer.client.copy_to_clipboard'|trans }}</button>
                                             </td>
                                         </tr>
                                         <tr>
                                             <td>{{ 'developer.existing_clients.field_secret'|trans }}</td>
                                             <td>
                                                 <strong><code>{{ client.secret }}</code></strong>
-                                                <button class="btn" data-clipboard-text="{{ client.secret }}">{{ 'developer.client.copy_to_clipboard'|trans }}</button>
+                                                <button class="btn" data-controller="clipboard" data-clipboard-text="{{ client.secret }}">{{ 'developer.client.copy_to_clipboard'|trans }}</button>
                                             </td>
                                         </tr>
                                         <tr>