From 54b93cc349b167b63535f2323a51ecefccaaeea1 Mon Sep 17 00:00:00 2001
From: jelveh <nj@puter.com>
Date: Fri, 13 Dec 2024 18:37:43 -0800
Subject: [PATCH] add a copy button next to App UID in Dev Center

---
 src/dev-center/js/dev-center.js | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/dev-center/js/dev-center.js b/src/dev-center/js/dev-center.js
index 31c9670f..d00341d0 100644
--- a/src/dev-center/js/dev-center.js
+++ b/src/dev-center/js/dev-center.js
@@ -54,6 +54,7 @@ const loading_spinner = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="
 const drop_area_placeholder = `<p>Drop your app folder and files here to deploy.</p><p style="font-size: 16px; margin-top: 0px;">HTML, JS, CSS, ...</p>`;
 const index_missing_error = `Please upload an 'index.html' file or if you're uploading a directory, make sure it contains an 'index.html' file at its root.`;
 const lock_svg = '<svg style="width: 20px; height: 20px; margin-bottom: -5px; margin-left: 5px; opacity: 0.5;" width="59px" height="59px" stroke-width="1.9" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M16 12H17.4C17.7314 12 18 12.2686 18 12.6V19.4C18 19.7314 17.7314 20 17.4 20H6.6C6.26863 20 6 19.7314 6 19.4V12.6C6 12.2686 6.26863 12 6.6 12H8M16 12V8C16 6.66667 15.2 4 12 4C8.8 4 8 6.66667 8 8V12M16 12H8" stroke="#000000" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
+const copy_svg = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-copy" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z"/> </svg>`;
 
 // authUsername
 (async () => {
@@ -536,7 +537,9 @@ function generate_edit_app_section(app) {
                 <input type="text" id="edit-app-index-url" placeholder="https://example-app.com/index.html" value="${html_encode(app.index_url)}">
                 
                 <label for="edit-app-app-id">App ID</label>
-                <input type="text" style="width: 362px;" class="app-uid" value="${html_encode(app.uid)}" readonly>
+                <div style="overflow:hidden;">
+                    <input type="text" style="width: 362px; float:left;" class="app-uid" value="${html_encode(app.uid)}" readonly><span class="copy-app-uid" style="cursor: pointer; height: 35px; display: inline-block; width: 50px; text-align: center; line-height: 35px; margin-left:5px;">${copy_svg}</span>
+                </div>
 
                 <label for="edit-app-icon">Icon</label>
                 <div id="edit-app-icon" style="background-image:url(${!app.icon ? './img/app.svg' : html_encode(app.icon)});" ${app.icon ? 'data-url="' + html_encode(app.icon) + '"' : ''}  ${app.icon ? 'data-base64="' + html_encode(app.icon) + '"' : ''} >
@@ -614,7 +617,7 @@ function generate_edit_app_section(app) {
                     <p><code>credentialless</code> attribute for the <code>iframe</code> tag.</p>
                 </div>
 
-                <div style="box-shadow: 10px 10px 15px #8c8c8c; overflow: hidden; position: fixed; bottom: 0; background: white; padding: 10px; width: 100%; left: 0;">
+                <div style="z-index: 999; box-shadow: 10px 10px 15px #8c8c8c; overflow: hidden; position: fixed; bottom: 0; background: white; padding: 10px; width: 100%; left: 0;">
                     <button type="button" class="edit-app-save-btn button button-primary" style="margin-right: 40px;">Save</button>
                     <button type="button" class="edit-app-reset-btn button button-secondary">Reset</button>
                 </div>
@@ -2766,3 +2769,13 @@ async function handleSocialImageUpload(app_name, socialImageData) {
         throw err;
     }
 }
+
+$(document).on('click', '.copy-app-uid', function(e) {
+    const appUID = $('#edit-app-uid').val();
+    navigator.clipboard.writeText(appUID);
+    // change to 'copied'
+    $(this).html('Copied');
+    setTimeout(() => {
+        $(this).html(copy_svg);
+    }, 2000);
+});
\ No newline at end of file