feat: add copyable links for sharing

This commit is contained in:
insects 2025-03-11 02:09:06 +01:00
parent 62a329aebd
commit 19319b8479
3 changed files with 56 additions and 12 deletions

View file

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

View file

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

View file

@ -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>