Improved rendering of repository URL in student assignment view (#7807)

* Made the URL not render as a link
* Added copy functionality

Author: Karl-Michaud

app/assets/stylesheets/common/_markus.scss

@@ -628,6 +628,13 @@ kbd {
         li {
           margin-bottom: 0.5em;
         }
+
+        .copy-url-button {
+          margin-left: 0.5em;
+          margin-bottom: 0.3em;
+          min-width: auto;
+          padding: 0.2em 0.1em 0.2em 0.4em;
+        }
       }
     }
   }

app/javascript/common/fontawesome_config.js

@@ -16,6 +16,7 @@ import {
   faClose,
   faComments,
   faCompress,
+  faCopy,
   faDice,
   faDownload,
   faEnvelopeCircleCheck,
@@ -77,6 +78,7 @@ library.add(
   faClose,
   faComments,
   faCompress,
+  faCopy,
   faDice,
   faDownload,
   faEnvelopeCircleCheck,

app/views/assignments/_read.html.erb

@@ -124,10 +124,16 @@
     <% if allowed_to?(:access_repo?, @grouping) %>
       <h3><%= t('groups.student_interface.url_repository') %></h3>
       <div class='sub_block'>
-        HTTPS: <a href='#'><%= @grouping.group.repository_external_access_url %></a>
+        HTTPS: <code><%= @grouping.group.repository_external_access_url %></code>
+        <button class="copy-url-button" data-clipboard-text="<%= @grouping.group.repository_external_access_url %>">
+          <i class="fa-solid fa-copy"></i>
+        </button>
         <% if allowed_to?(:view?, with: KeyPairPolicy) %>
           <br>
-          SSH: <a href='#'><%= @grouping.group.repository_ssh_access_url %></a>
+          SSH: <code><%= @grouping.group.repository_ssh_access_url %></code>
+          <button class="copy-url-button" data-clipboard-text="<%= @grouping.group.repository_ssh_access_url %>">
+            <i class="fa-solid fa-copy"></i>
+          </button>
         <% end %>
       </div>
     <% end %>
@@ -201,3 +207,18 @@
     <% end %>
 <% end %>
 </div>
+
+<%= javascript_tag nonce: true do %>
+  document.addEventListener("DOMContentLoaded", () => {
+    document.querySelectorAll('.copy-url-button').forEach(button => {
+      button.addEventListener('click', () => {
+        navigator.clipboard.writeText(button.dataset.clipboardText).then(() => {
+          var flashDiv = document.getElementsByClassName("success")[0];
+          var contents = flashDiv.getElementsByClassName("flash-content")[0] || flashDiv;
+          contents.innerHTML = "<p><%= t('groups.student_interface.copied_to_clipboard') %></p>";
+          flashDiv.style.display = "block";
+        });
+      });
+    });
+  });
+<% end %>

config/locales/views/groups/en.yml

@@ -77,6 +77,7 @@ en:
     student_interface:
       confirm_create_group: This action will decline your pending invitations. Are you sure?
       confirm_delete_group: 'WARNING: You will lose access to your submitted files after deleting your group. Make sure you have a local copy of your files before clicking OK.'
+      copied_to_clipboard: Successfully copied to clipboard.
       form_group: Create a group
       group_information: Group information
       group_options: Group options