From 19319b8479c13c8d1146c006d2d60bccc8746369 Mon Sep 17 00:00:00 2001
From: insects <mail@liv.nrw>
Date: Tue, 11 Mar 2025 02:09:06 +0100
Subject: [PATCH] feat: add copyable links for sharing

---
 app/assets/stylesheets/application.css | 21 ++++++++++++++++++-
 app/javascript/list.js                 | 19 +++++++++++++++++
 app/views/instance/show.html.erb       | 28 ++++++++++++++++----------
 3 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 5b9b3b8..92566ae 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -6,10 +6,20 @@ body {
 header {
     display: flex;
     align-items: center;
-    gap: 3px;
+    justify-content: space-between;
     margin-bottom: 10px;
 }
 
+header .title {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+header .right {
+    text-align: right;
+}
+
 header h1 {
     margin: 0;
 }
@@ -150,3 +160,12 @@ span#password {
 .hidden {
     display: none;
 }
+
+.copyable {
+    color: blue;
+    text-decoration: underline;
+}
+
+.copyable:hover {
+    cursor: pointer;
+}
diff --git a/app/javascript/list.js b/app/javascript/list.js
index 80ecc6d..8517295 100644
--- a/app/javascript/list.js
+++ b/app/javascript/list.js
@@ -22,6 +22,25 @@ function checkPwd() {
         const pwd_el = document.getElementById("password");
         pwd_el.innerHTML = pwd;
     }
+
+    const copy_els = document.querySelectorAll(".copyable");
+    const cb = window.navigator.clipboard;
+    copy_els.forEach(el => {
+        el.addEventListener("click", evt => {
+            evt.preventDefault();
+            let content = el.dataset.copyContent;
+            if (content.includes("???")) {
+                content = content.replace("???", pwd);
+            }
+            cb.writeText(content).then(() => {
+                const curText = el.innerHTML;
+                el.innerHTML = "copied!";
+                setTimeout(() => {
+                    el.innerHTML = curText;
+                }, 2000);
+            });
+        });
+    });
 }
 
 checkPwd();
diff --git a/app/views/instance/show.html.erb b/app/views/instance/show.html.erb
index 28eff80..9673813 100644
--- a/app/views/instance/show.html.erb
+++ b/app/views/instance/show.html.erb
@@ -1,18 +1,24 @@
 <div id="public_id" data-content="<%= @instance.public_id %>"></div>
 <div hx-get="" hx-trigger="every 30s" hx-swap="innerHTML" hx-select="#nm-list" hx-target="#nm-list">
   <header>
-    <%= link_to root_path do %><img src="/icon.png" width="50" alt="eureka.coffee logo" /><% end %>
-    <h1><span class="muted">instance</span> <%= @instance.name %></h1>
-    <%= render partial: "zone_img", locals: { zone: @instance.zone, alt: @instance.zone, title: @instance.zone.upcase_first } %>
-    <div class="needs_pwd">
-      password: <span id="password">???</span>
+    <div class="title">
+      <%= link_to root_path do %><img src="/icon.png" width="50" alt="eureka.coffee logo" /><% end %>
+      <h1><span class="muted">instance</span> <%= @instance.name %></h1>
+      <%= render partial: "zone_img", locals: { zone: @instance.zone, alt: @instance.zone, title: @instance.zone.upcase_first } %>
+      <div class="needs_pwd">
+        password: <span id="password">???</span>
+      </div>
+      <div class="no_pwd">
+        <%= form_with url: authenticate_to_instance_path do |form| %>
+          <%= form.text_field :password, placeholder: "enter password..." %>
+          <%= form.hidden_field :instance, value: @instance.public_id %>
+          <%= form.submit "submit" %>
+        <% end %>
+      </div>
     </div>
-    <div class="no_pwd">
-      <%= form_with url: authenticate_to_instance_path do |form| %>
-        <%= form.text_field :password, placeholder: "enter password..." %>
-        <%= form.hidden_field :instance, value: @instance.public_id %>
-        <%= form.submit "submit" %>
-      <% end %>
+    <div class="right">
+      <div class="copyable" data-copy-content="Tracker: <%= show_instance_url(@instance.public_id) %>">copy tracker url</div>
+      <div class="copyable needs_pwd" data-copy-content="Tracker: <%= show_instance_url(@instance.public_id) %>, Password: ???">copy tracker url and password</div>
     </div>
   </header>