enhance ui

*fix confirm password style conflict
*add copy to clipboard button when possible
*show previous submit logic fix

src/ui/static/js/global.js

@@ -402,6 +402,44 @@ class Banner {
   }
 }
 
+class Clipboard {
+  constructor() {
+    this.init();
+  }
+
+  init() {
+    // Show clipboard copy if https
+    window.addEventListener("load", () => {
+      if (!window.location.href.startsWith("https://")) return;
+
+      document.querySelectorAll("[data-clipboard-copy]").forEach((el) => {
+        el.classList.remove("hidden");
+      });
+    });
+
+    window.addEventListener("click", (e) => {
+      if (!e.target.hasAttribute("data-clipboard-target")) return;
+
+      navigator.permissions
+        .query({ name: "clipboard-write" })
+        .then((result) => {
+          if (result.state === "granted" || result.state === "prompt") {
+            /* write to the clipboard now */
+            const copyEl = document.querySelector(
+              e.target.getAttribute("data-clipboard-target")
+            );
+
+            copyEl.select();
+            copyEl.setSelectionRange(0, 99999); // For mobile devices
+
+            // Copy the text inside the text field
+            navigator.clipboard.writeText(copyEl.value);
+          }
+        });
+    });
+  }
+}
+
 const setCheckbox = new Checkbox();
 const setSelect = new Select();
 const setPassword = new Password();
@@ -424,3 +462,5 @@ const setFlashSidebar = new Sidebar(
   "[data-flash-sidebar-open]",
   "[data-flash-sidebar-close]"
 );
+
+const setClipboard = new Clipboard();

src/ui/static/js/profile.js

@@ -41,6 +41,8 @@ class SubmitProfile {
     this.pwCheckEl.classList.remove(
       "focus:!border-red-500",
       "focus:valid:!border-red-500",
+      "focus:!ring-red-500",
+      "focus:valid:!ring-red-500",
       "active:!border-red-500",
       "active:valid:!border-red-500",
       "valid:!border-red-500"
@@ -53,6 +55,8 @@ class SubmitProfile {
     this.pwCheckEl.classList.add(
       "focus:!border-red-500",
       "focus:valid:!border-red-500",
+      "focus:!ring-red-500",
+      "focus:valid:!ring-red-500",
       "active:!border-red-500",
       "active:valid:!border-red-500",
       "valid:!border-red-500"
@@ -113,12 +117,12 @@ class SwitchTabForm {
       const names = ["password", "username", "totp"];
 
       names.forEach((name) => {
-        this.showRelateTab(name);
+        this.showRelateTab(name, content);
       });
     });
   }
 
-  showRelateTab(name) {
+  showRelateTab(name, content) {
     if (!content.includes(`(${name})`)) return;
     document.querySelector(`button[data-tab-handler="${name}"]`).click();
   }

src/ui/templates/profile.html

@@ -49,7 +49,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
     >
       <span class="w-full flex justify-between items-center">
         <!-- text and icon -->
-        <span class="settings-tabs-name"> Password </span>
+        <span class="settings-tabs-name">Password</span>
         <svg
           data-popover-btn="password"
           class="fill-blue-500 h-5 w-5 mr-2 hover:brightness-95"
@@ -181,7 +181,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
       method="POST"
       autocomplete="off"
     >
-    <input type="hidden" name="operation" value="username" />
+      <input type="hidden" name="operation" value="username" />
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
       <input
         type="hidden"
@@ -543,6 +543,31 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
         value="{{ secret_token }}"
         readonly
       />
+      <div
+        data-clipboard-copy
+        class="hidden absolute flex right-[3.25rem] md:right-[3.75rem] h-5.5 w-5.5 top-[52%]"
+      >
+        <button
+          data-clipboard-target="#secret_token"
+          class="bg-white dark:bg-slate-700 rounded-full h-full w-full flex items-center align-middle hover:brightness-95 transition-all"
+          type="button"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="stroke-gray-700 dark:stroke-gray-400 pointer-events-none hover:brightness-95 transition-all"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
+            />
+          </svg>
+        </button>
+      </div>
       <div
         data-setting-password-container
         class="absolute flex right-6 md:right-8 h-5 w-5 top-[55%]"