Create CopyToClipboardInput view component

src/api/app/components/copy_to_clipboard_input_component.html.haml

@@ -0,0 +1,23 @@
+-# TODO: Relying on a form builder is a bit weird. We could perhaps directly use `text_field_tag` instead and pass an input value to the component.
+= @form_builder.text_field(:string_readonly, id: 'copy-to-clipboard-readonly', class: 'form-control', readonly: true)
+.input-group-append#copy-to-clipboard
+  %span.input-group-text
+    %i.fas.fa-clipboard
+
+:javascript
+  function copyToClipboard() {
+    document.getElementById('copy-to-clipboard-readonly').select();
+    document.execCommand('copy');
+  }
+
+- content_for :ready_function do
+  :plain
+    // Definition of the tooltip and click event handler for the "Copy to clipboard" icon
+    $('#copy-to-clipboard').tooltip({ title: 'Copy to clipboard' }).on('click', function () {
+      copyToClipboard();
+
+      // Shows "Copied!" tooltip. Later on shows the previous message 'Copy to clipboard' as tooltip.
+      $(this).tooltip('dispose').tooltip({ title: 'Copied!' }).tooltip('show').on('hidden.bs.tooltip', function () {
+        $(this).tooltip('dispose').tooltip({ title: 'Copy to clipboard' });
+      });
+    });

src/api/app/components/copy_to_clipboard_input_component.rb

@@ -0,0 +1,6 @@
+class CopyToClipboardInputComponent < ApplicationComponent
+  def initialize(form_builder:)
+    super
+    @form_builder = form_builder
+  end
+end

src/api/app/views/webui/users/tokens/_create.js.erb

@@ -1,7 +1,7 @@
 $('#flash').html("<%= escape_javascript(render(layout: false, partial: 'layouts/webui/flash', object: flash)) %>");
 <% if flash[:error].blank? %>
   $('#created-token').removeClass('d-none');
-  $('#token_string_readonly').val("<%= escape_javascript(string) %>");
-  $('.form-row :input').not('#token_string_readonly').prop('disabled', true);
+  $('#copy-to-clipboard-readonly').val("<%= escape_javascript(string) %>");
+  $('.form-row :input').not('#copy-to-clipboard-readonly').prop('disabled', true);
   $('.actions').html("<%= escape_javascript(render partial: 'actions') %>");
 <% end %>

src/api/app/views/webui/users/tokens/_update.js.erb

@@ -2,9 +2,9 @@ $('#flash').html("<%= escape_javascript(render(layout: false, partial: 'layouts/
 <% if flash[:error].blank? %>
   $('#regenerate-token-modal').modal('hide');
   $('#regenerate-token-group,#scm-token-group').addClass('d-none');
-  $('#token_string_readonly').val("<%= escape_javascript(string) %>");
+  $('#copy-to-clipboard-readonly').val("<%= escape_javascript(string) %>");
   $('.actions').html("<%= escape_javascript(render partial: 'actions') %>");
   $('#created-token').removeClass('d-none').hide().slideDown('slow', function() {
-    $('#token_string_readonly').focus();
+    $('#copy-to-clipboard-readonly').focus();
   });
 <% end %>

src/api/app/views/webui/users/tokens/edit.html.haml

@@ -12,10 +12,7 @@
               %fieldset.form-group
                 = f.label(:string_readonly, 'Your new OBS Personal Access Token Secret', class: 'col-form-label col-form-label-lg')
                 .input-group
-                  = f.text_field(:string_readonly, class: 'form-control', readonly: true)
-                  .input-group-append#copy-to-clipboard
-                    %span.input-group-text
-                      %i.fas.fa-clipboard
+                  = render CopyToClipboardInputComponent.new(form_builder: f)
               %hr
 
           .form-row
@@ -61,21 +58,3 @@
             %a.btn.btn-sm.btn-outline-secondary.px-4{ data: { dismiss: 'modal' } }
               Cancel
             = f.submit('Regenerate', class: 'btn btn-sm btn-danger px-4', data: { disable: { with: 'Regenerate' } })
-
-:javascript
-  function copyToClipboard(elementId) {
-    document.getElementById(elementId).select();
-    document.execCommand('copy');
-  }
-
-- content_for :ready_function do
-  :plain
-    // Definition of the tooltip and click event handler for the "Copy to clipboard" icon
-    $('#copy-to-clipboard').tooltip({ title: 'Copy to clipboard' }).on('click', function () {
-      copyToClipboard('token_string_readonly');
-
-      // Shows "Copied!" tooltip. Later on shows the previous message 'Copy to clipboard' as tooltip.
-      $(this).tooltip('dispose').tooltip({ title: 'Copied!' }).tooltip('show').on('hidden.bs.tooltip', function () {
-        $(this).tooltip('dispose').tooltip({ title: 'Copy to clipboard' });
-      });
-    });

src/api/app/views/webui/users/tokens/new.html.haml

@@ -13,10 +13,7 @@
               %fieldset.form-group
                 = f.label(:string_readonly, 'Your new OBS Personal Access Token Secret', class: 'col-form-label col-form-label-lg')
                 .input-group
-                  = f.text_field(:string_readonly, class: 'form-control', readonly: true)
-                  .input-group-append#copy-to-clipboard
-                    %span.input-group-text
-                      %i.fas.fa-clipboard
+                  = render CopyToClipboardInputComponent.new(form_builder: f)
               %hr
 
           .form-row
@@ -51,12 +48,6 @@
             = link_to('Cancel', tokens_path, title: 'Cancel', class: 'btn btn-outline-secondary px-4 mr-3 mt-3 mt-sm-0')
             = f.submit('Create', class: 'btn btn-primary px-4 mt-3 mt-sm-0')
 
-:javascript
-  function copyToClipboard(elementId) {
-    document.getElementById(elementId).select();
-    document.execCommand('copy');
-  }
-
 - content_for :ready_function do
   :plain
     // Default type value: 'runservice'
@@ -75,13 +66,3 @@
         $('#token_scm_token').attr('required', false);
       }
     });
-
-    // Definition of the tooltip and click event handler for the "Copy to clipboard" icon
-    $('#copy-to-clipboard').tooltip({ title: 'Copy to clipboard' }).on('click', function () {
-      copyToClipboard('token_string_readonly');
-
-      // Shows "Copied!" tooltip. Later on shows the previous message 'Copy to clipboard' as tooltip.
-      $(this).tooltip('dispose').tooltip({ title: 'Copied!' }).tooltip('show').on('hidden.bs.tooltip', function () {
-        $(this).tooltip('dispose').tooltip({ title: 'Copy to clipboard' });
-      });
-    });