feat: ui improves the login experience (#182)

close #157 #158
2026-04-09 00:59:02 +03:00 · 2023-02-21 12:42:40 +08:00
parent a61fda6e80
commit 6d9758c71d
6 changed files with 164 additions and 34 deletions
--- a/assets/index.css
+++ b/assets/index.css
@@ -208,9 +208,12 @@ body {
  outline: none;
 }

-.save-btn {
+.toolbox2 {
  margin-left: auto;
  margin-right: 2em;
+}
+
+.save-btn {
  cursor: pointer;
  user-select: none;
 }
--- a/assets/index.html
+++ b/assets/index.html
@@ -72,12 +72,27 @@
      <input id="search" name="q" type="text" maxlength="128" autocomplete="off" tabindex="1">
      <input type="submit" hidden />
    </form>
-    <div class="save-btn hidden" title="Save file">
-      <svg viewBox="0 0 1024 1024" width="24" height="24">
-        <path
-          d="M426.666667 682.666667v42.666666h170.666666v-42.666666h-170.666666z m-42.666667-85.333334h298.666667v128h42.666666V418.133333L605.866667 298.666667H298.666667v426.666666h42.666666v-128h42.666667z m260.266667-384L810.666667 379.733333V810.666667H213.333333V213.333333h430.933334zM341.333333 341.333333h85.333334v170.666667H341.333333V341.333333z"
-          fill="#444444" p-id="8311"></path>
-      </svg>
+    <div class="toolbox2">
+      <div class="login-btn hidden" title="Login">
+        <svg width="16" height="16" viewBox="0 0 16 16">
+          <path fill-rule="evenodd"
+            d="M6 3.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 6.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-8A1.5 1.5 0 0 0 5 3.5v2a.5.5 0 0 0 1 0v-2z" />
+          <path fill-rule="evenodd"
+            d="M11.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H1.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z" />
+        </svg>
+      </div>
+      <div class="user-btn hidden">
+        <svg width="16" height="16" viewBox="0 0 16 16">
+          <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z"/>
+        </svg>
+      </div>
+      <div class="save-btn hidden" title="Save file">
+        <svg viewBox="0 0 1024 1024" width="24" height="24">
+          <path
+            d="M426.666667 682.666667v42.666666h170.666666v-42.666666h-170.666666z m-42.666667-85.333334h298.666667v128h42.666666V418.133333L605.866667 298.666667H298.666667v426.666666h42.666666v-128h42.666667z m260.266667-384L810.666667 379.733333V810.666667H213.333333V213.333333h430.933334zM341.333333 341.333333h85.333334v170.666667H341.333333V341.333333z"
+            fill="#444444" p-id="8311"></path>
+        </svg>
+      </div>
    </div>
  </div>
  <div class="main">
--- a/assets/index.js
+++ b/assets/index.js
@@ -16,6 +16,8 @@
 * @property {boolean} allow_delete
 * @property {boolean} allow_search
 * @property {boolean} allow_archive
+ * @property {boolean} auth
+ * @property {string} user
 * @property {boolean} dir_exists
 * @property {string} editable
 */
@@ -71,6 +73,10 @@ let $emptyFolder;
 * @type Element
 */
 let $editor;
+/**
+ * @type Element
+ */
+let $userBtn;

 function ready() {
  $pathsTable = document.querySelector(".paths-table")
@@ -79,6 +85,7 @@ function ready() {
  $uploadersTable = document.querySelector(".uploaders-table");
  $emptyFolder = document.querySelector(".empty-folder");
  $editor = document.querySelector(".editor");
+  $userBtn = document.querySelector(".user-btn");

  addBreadcrumb(DATA.href, DATA.uri_prefix);

@@ -86,6 +93,10 @@ function ready() {
    document.title = `Index of ${DATA.href} - Dufs`;
    document.querySelector(".index-page").classList.remove("hidden");

+    if (DATA.auth) {
+      setupAuth();
+    }
+
    if (DATA.allow_search) {
      setupSearch()
    }
@@ -106,7 +117,6 @@ function ready() {
    document.title = `Edit of ${DATA.href} - Dufs`;
    document.querySelector(".editor-page").classList.remove("hidden");;

-
    setupEditor();
  }
 }
@@ -203,16 +213,22 @@ Uploader.globalIdx = 0;

 Uploader.runnings = 0;

+Uploader.auth = false;
+
 /**
 * @type Uploader[]
 */
 Uploader.queues = [];


-Uploader.runQueue = () => {
+Uploader.runQueue = async () => {
  if (Uploader.runnings > 2) return;
  let uploader = Uploader.queues.shift();
  if (!uploader) return;
+  if (!Uploader.auth) {
+    Uploader.auth = true;
+    await login();
+  }
  uploader.ajax();
 }

@@ -365,7 +381,7 @@ function addPath(file, index) {
    ${getPathSvg(file.path_type)}
  </td>
  <td class="path cell-name">
-    <a href="${url}">${encodedName}</a>
+    <a href="${url}" target="_blank">${encodedName}</a>
  </td>
  <td class="cell-mtime">${formatMtime(file.mtime)}</td>
  <td class="cell-size">${formatSize(file.size).join(" ")}</td>
@@ -385,10 +401,11 @@ async function deletePath(index) {
  if (!confirm(`Delete \`${file.name}\`?`)) return;

  try {
+    await login();
    const res = await fetch(newUrl(file.name), {
      method: "DELETE",
    });
-    await assertFetch(res);
+    await assertResOK(res);
    document.getElementById(`addPath${index}`).remove();
    DATA.paths[index] = null;
    if (!DATA.paths.find(v => !!v)) {
@@ -425,14 +442,15 @@ async function movePath(index) {
  const newFileUrl = fileUrlObj.origin + prefix + newPath.split("/").map(encodeURIComponent).join("/");

  try {
+    await login();
    const res = await fetch(fileUrl, {
      method: "MOVE",
      headers: {
        "Destination": newFileUrl,
      }
    });
-    await assertFetch(res);
-    location.href = newFileUrl.split("/").slice(0, -1).join("/")
+    await assertResOK(res);
+    location.href = newFileUrl.split("/").slice(0, -1).join("/");
  } catch (err) {
    alert(`Cannot move \`${filePath}\` to \`${newPath}\`, ${err.message}`);
  }
@@ -445,7 +463,7 @@ function dropzone() {
      e.stopPropagation();
    });
  });
-  document.addEventListener("drop", e => {
+  document.addEventListener("drop", async e => {
    if (!e.dataTransfer.items[0].webkitGetAsEntry) {
      const files = e.dataTransfer.files.filter(v => v.size > 0);
      for (const file of files) {
@@ -462,6 +480,18 @@ function dropzone() {
  });
 }

+function setupAuth() {
+  if (DATA.user) {
+    $userBtn.classList.remove("hidden");
+    $userBtn.title = DATA.user;
+  } else {
+    const $loginBtn = document.querySelector(".login-btn");
+    $loginBtn.classList.remove("hidden");
+    $loginBtn.addEventListener("click", () => login(true));
+  }
+}
+
+
 /**
 * Setup searchbar
 */
@@ -491,7 +521,7 @@ function setupUpload() {
    if (name) createFolder(name);
  });
  document.querySelector(".upload-file").classList.remove("hidden");
-  document.getElementById("file").addEventListener("change", e => {
+  document.getElementById("file").addEventListener("change", async e => {
    const files = e.target.files;
    for (let file of files) {
      new Uploader(file, []).upload();
@@ -527,7 +557,7 @@ async function setupEditor() {
  $editor.classList.remove("hidden");
  try {
    const res = await fetch(baseUrl());
-    await assertFetch(res);
+    await assertResOK(res);
    const text = await res.text();
    $editor.value = text;
  } catch (err) {
@@ -549,6 +579,24 @@ async function saveChange() {
  }
 }

+async function login(alert = false) {
+  if (!DATA.auth) return;
+  try {
+    const res = await fetch(baseUrl() + "?auth");
+    await assertResOK(res);
+    document.querySelector(".login-btn").classList.add("hidden");
+    $userBtn.classList.remove("hidden");
+    $userBtn.title = "";
+  } catch (err) {
+    let message = `Cannot login, ${err.message}`;
+    if (alert) {
+      alert(message);
+    } else {
+      throw new Error(message);
+    }
+  }
+}
+
 /**
 * Create a folder
 * @param {string} name 
@@ -556,10 +604,11 @@ async function saveChange() {
 async function createFolder(name) {
  const url = newUrl(name);
  try {
+    await login();
    const res = await fetch(url, {
      method: "MKCOL",
    });
-    await assertFetch(res);
+    await assertResOK(res);
    location.href = url;
  } catch (err) {
    alert(`Cannot create folder \`${name}\`, ${err.message}`);
@@ -569,11 +618,12 @@ async function createFolder(name) {
 async function createFile(name) {
  const url = newUrl(name);
  try {
+    await login();
    const res = await fetch(url, {
      method: "PUT",
      body: "",
    });
-    await assertFetch(res);
+    await assertResOK(res);
    location.href = url + "?edit";
  } catch (err) {
    alert(`Cannot create file \`${name}\`, ${err.message}`);
@@ -663,7 +713,7 @@ function encodedStr(rawStr) {
  });
 }

-async function assertFetch(res) {
+async function assertResOK(res) {
  if (!(res.status >= 200 && res.status < 300)) {
    throw new Error(await res.text())
  }