github_mirrors/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter.git synced 2025-01-24 06:50:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

add a copy button next to App UID in Dev Center

Browse Source
This commit is contained in:
jelveh 2024-12-13 18:37:43 -08:00
parent 65d918866e
commit 54b93cc349
1 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/dev-center/js/dev-center.js
View File

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