Add button to copy paste uuid (web)

Signed-off-by: Joe Ma <rikkaneko23@gmail.com>

.idea/codeStyles/Project.xml

@@ -1,5 +1,29 @@
 <component name="ProjectCodeStyleConfiguration">
   <code_scheme name="Project" version="173">
+    <DBN-PSQL>
+      <case-options enabled="true">
+        <option name="KEYWORD_CASE" value="lower" />
+        <option name="FUNCTION_CASE" value="lower" />
+        <option name="PARAMETER_CASE" value="lower" />
+        <option name="DATATYPE_CASE" value="lower" />
+        <option name="OBJECT_CASE" value="preserve" />
+      </case-options>
+      <formatting-settings enabled="false" />
+    </DBN-PSQL>
+    <DBN-SQL>
+      <case-options enabled="true">
+        <option name="KEYWORD_CASE" value="lower" />
+        <option name="FUNCTION_CASE" value="lower" />
+        <option name="PARAMETER_CASE" value="lower" />
+        <option name="DATATYPE_CASE" value="lower" />
+        <option name="OBJECT_CASE" value="preserve" />
+      </case-options>
+      <formatting-settings enabled="false">
+        <option name="STATEMENT_SPACING" value="one_line" />
+        <option name="CLAUSE_CHOP_DOWN" value="chop_down_if_statement_long" />
+        <option name="ITERATION_ELEMENTS_WRAPPING" value="chop_down_if_not_single" />
+      </formatting-settings>
+    </DBN-SQL>
     <GoCodeStyleSettings>
       <option name="ADD_LEADING_SPACE_TO_COMMENTS" value="true" />
       <option name="RUN_GO_FMT_ON_REFORMAT" value="false" />

.idea/jsLibraryMappings.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="JavaScriptLibraryMappings">
-    <file url="PROJECT" libraries="{bootstrap, bootstrap-icons, font-awesome, jquery}" />
+    <file url="file://$PROJECT_DIR$" libraries="{Node.js Core}" />
-    <includedPredefinedLibrary name="Node.js Core" />
+    <file url="file://$PROJECT_DIR$/web" libraries="{bootstrap, bootstrap-icons, font-awesome, jquery, popper.js}" />
   </component>
 </project>

web.iml

@@ -8,5 +8,10 @@
     <orderEntry type="library" name="bootstrap-icons" level="application" />
     <orderEntry type="library" name="font-awesome" level="application" />
     <orderEntry type="library" name="jquery" level="application" />
+    <orderEntry type="library" name="font-awesome" level="application" />
+    <orderEntry type="library" name="bootstrap" level="application" />
+    <orderEntry type="library" name="bootstrap-icons" level="application" />
+    <orderEntry type="library" name="jquery" level="application" />
+    <orderEntry type="library" name="popper.js" level="application" />
   </component>
 </module>

web/v2/js/paste.js

@@ -36,6 +36,8 @@ let paste_modal = {
   qrcode: null,
   title: null,
   expired: null,
+  id_copy_btn: null,
+  id_copy_btn_icon: null,
 };
 
 let saved_modal = null;
@@ -80,10 +82,17 @@ function build_paste_modal(paste_info, show_qrcode = true, saved = true) {
     return;
   }
 
+  let tooltip = bootstrap.Tooltip.getInstance(paste_modal.id_copy_btn);
+
   paste_modal.uuid.text(paste_info.link);
   paste_modal.uuid.prop('href', paste_info.link);
   paste_modal.qrcode.prop('src', paste_info.link_qr);
   paste_modal.qrcode.prop('alt', paste_info.link);
+  paste_modal.id_copy_btn_icon.addClass('bi-clipboard');
+  paste_modal.id_copy_btn_icon.removeClass('bi-check2');
+  paste_modal.id_copy_btn.addClass('btn-primary');
+  paste_modal.id_copy_btn.removeClass('btn-success');
+  tooltip.setContent({'.tooltip-inner': 'Click to copy'});
 
   // Hide/Show QRCode
   if (!show_qrcode) paste_modal.qrcode.addClass('d-none');
@@ -108,6 +117,8 @@ $(function () {
   paste_modal.modal = $('#paste_modal');
   paste_modal.uuid = $('#paste_uuid');
   paste_modal.qrcode = $('#paste_qrcode');
+  paste_modal.id_copy_btn = $('#id_copy_button');
+  paste_modal.id_copy_btn_icon = $('#id_copy_button_icon');
 
   let file_stat = $('#file_stats');
   let title = $('#paste_title');
@@ -287,6 +298,26 @@ $(function () {
     }
   });
 
+  paste_modal.id_copy_btn.on('click', async function () {
+    const uuid = paste_modal.uuid.text();
+    let tooltip = bootstrap.Tooltip.getInstance(paste_modal.id_copy_btn);
+
+    if (navigator.clipboard) {
+      try {
+        await navigator.clipboard.writeText(uuid);
+        paste_modal.id_copy_btn_icon.removeClass('bi-clipboard');
+        paste_modal.id_copy_btn_icon.addClass('bi-check2');
+        paste_modal.id_copy_btn.removeClass('btn-primary');
+        paste_modal.id_copy_btn.addClass('btn-success');
+        tooltip.setContent({'.tooltip-inner': 'Copied'});
+      } catch (err) {
+        tooltip.setContent({'.tooltip-inner': 'Copied failed'});
+      }
+    } else {
+      tooltip.setContent({'.tooltip-inner': 'Copied failed'});
+    }
+  });
+
 });
 
 function select_input_type(name) {

web/v2/paste.html

@@ -168,6 +168,7 @@
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
+        <div class="mb-3">
           <h3>Paste Service</h3>
           <p>
             <a href="https://pb.nekoul.com">pb.nekoul.com</a> is a pastebin-like service hosted on Cloudflare Worker.
@@ -183,6 +184,12 @@
               href="https://wiki.archlinux.org/title/CURL">curl</a>.
           </p>
         </div>
+        <div>
+          <img src="https://files.nekoul.com/pub/satanichia.png" class="rounded mx-auto d-block w-100"
+               alt="There should be a Satanichia ~" data-bs-toggle="tooltip"
+               data-bs-placement="bottom" title="Satanichia is so cute >w<">
+        </div>
+      </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
       </div>
@@ -198,8 +205,12 @@
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
-        <div class="mb-2 text-center fs-4">
+        <div class="mb-2 input-group justify-content-center">
-          <a href="" class="link-primary" id="paste_uuid"></a>
+          <span class="input-group-text" id="paste_uuid"></span>
+          <button class="btn btn-primary" type="button" id="id_copy_button"
+                  data-bs-toggle="tooltip" data-bs-placement="bottom" title="Click to copy">
+            <i class="bi bi-clipboard" id="id_copy_button_icon"></i>
+          </button>
         </div>
         <img src="" class="mb-3 rounded mx-auto d-block w-75" alt="" id="paste_qrcode" style="max-width: 280px">
         <div class="mb-3 w-75 mx-auto">