feat: add copyable links for sharing

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;
+}

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();

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 %>
+    <div class="title">
-    <h1><span class="muted">instance</span> <%= @instance.name %></h1>
+      <%= link_to root_path do %><img src="/icon.png" width="50" alt="eureka.coffee logo" /><% end %>
-    <%= render partial: "zone_img", locals: { zone: @instance.zone, alt: @instance.zone, title: @instance.zone.upcase_first } %>
+      <h1><span class="muted">instance</span> <%= @instance.name %></h1>
-    <div class="needs_pwd">
+      <%= render partial: "zone_img", locals: { zone: @instance.zone, alt: @instance.zone, title: @instance.zone.upcase_first } %>
-      password: <span id="password">???</span>
+      <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">
+    <div class="right">
-      <%= form_with url: authenticate_to_instance_path do |form| %>
+      <div class="copyable" data-copy-content="Tracker: <%= show_instance_url(@instance.public_id) %>">copy tracker url</div>
-        <%= form.text_field :password, placeholder: "enter password..." %>
+      <div class="copyable needs_pwd" data-copy-content="Tracker: <%= show_instance_url(@instance.public_id) %>, Password: ???">copy tracker url and password</div>
-        <%= form.hidden_field :instance, value: @instance.public_id %>
-        <%= form.submit "submit" %>
-      <% end %>
     </div>
   </header>