Improved copiable fields

app/static/main.css

@@ -118,3 +118,15 @@ i.disabled {
 span.expired {
   color: #888;
 }
+
+.copy:hover {
+  transform: scale(1.5, 1.5);
+  -ms-transform: scale(1.5, 1.5)); /* IE 9 */
+  -webkit-transform: scale(1.5, 1.5);
+}
+.copy:hover::after {
+  content: "📄 click to copy";
+  font-size: 80%;
+  /* font-style:oblique; */
+  font-family: monospace;
+}

app/templates/node.html

@@ -76,11 +76,11 @@
 <h5>addresses</h5>
 {% for ip in node.ipAddresses %}
 <div class="row data">
-    <div class="col col-3">
+    <div class="col col-6">
         <span class="address copy"
             value="{{ ip }}">
         {{ ip }}
-        </spanundefined>
+        </span>
     </div>
 </div>
 {% endfor %}
@@ -132,7 +132,9 @@
         <strong>machineKey</strong>
     </div>
     <div class="col col-8 float-left">
+        <span class="copy" value="{{ node.machineKey }}">
             <code>{{ node.machineKey }}</code>
+        </span>
     </div>
 </div>
 
@@ -141,7 +143,9 @@
         <strong>nodeKey</strong>
     </div>
     <div class="col col-8 float-left">
+        <span class="copy" value="{{ node.nodeKey }}">
             <code>{{ node.nodeKey }}</code>
+        </span>
     </div>
 </div>
 
@@ -150,7 +154,9 @@
         <strong>discoKey</strong>
     </div>
     <div class="col col-8 float-left">
+        <span class="copy" value="{{ node.discoKey }}">
             <code>{{ node.discoKey }}</code>
+        </span>
     </div>
 </div>
 <p></p>
@@ -220,7 +226,7 @@
 {% block scripts %}
 <script>
     $(function () {
-        $('.address.copy').on('click', function() {
+        $('.copy').on('click', function() {
             copyToClipboard(this)
         })
     })

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "hsman"
-version = "0.9.16"
+version = "0.9.17"
 description = "Flask Admin webui for Headscale"
 authors = ["Andrea Mistrali <andrea@mistrali.pw>"]
 license = "BSD"