feat: webui support logout (#439)

assets/index.css

@@ -222,13 +222,18 @@ body {
   margin-right: 2em;
 }
 
+.login-btn {
+  cursor: pointer;
+}
+
 .save-btn {
   cursor: pointer;
   -webkit-user-select: none;
   user-select: none;
 }
 
-.user-btn {
+.logout-btn {
+  cursor: pointer;
   display: flex;
   align-items: center;
 }

assets/index.html

@@ -75,7 +75,7 @@
       <input type="submit" hidden />
     </form>
     <div class="toolbox-right">
-      <div class="login-btn hidden" title="Login for upload/move/delete/edit permissions">
+      <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" />
@@ -83,10 +83,10 @@
             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">
+      <div class="logout-btn hidden" title="Logout">
         <svg width="16" height="16" viewBox="0 0 16 16">
-          <path
+          <path fill-rule="evenodd" d="M10 3.5a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 1 1 0v2A1.5 1.5 0 0 1 9.5 14h-8A1.5 1.5 0 0 1 0 12.5v-9A1.5 1.5 0 0 1 1.5 2h8A1.5 1.5 0 0 1 11 3.5v2a.5.5 0 0 1-1 0z"/>
-            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" />
+          <path fill-rule="evenodd" d="M4.146 8.354a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H14.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708z"/>
         </svg>
         <span class="user-name"></span>
       </div>

assets/index.js

@@ -94,7 +94,7 @@ let $editor;
 /**
  * @type Element
  */
-let $userBtn;
+let $logoutBtn;
 /**
  * @type Element
  */
@@ -121,7 +121,7 @@ async function ready() {
   $uploadersTable = document.querySelector(".uploaders-table");
   $emptyFolder = document.querySelector(".empty-folder");
   $editor = document.querySelector(".editor");
-  $userBtn = document.querySelector(".user-btn");
+  $logoutBtn = document.querySelector(".logout-btn");
   $userName = document.querySelector(".user-name");
 
   addBreadcrumb(DATA.href, DATA.uri_prefix);
@@ -513,7 +513,8 @@ function setupDropzone() {
 
 async function setupAuth() {
   if (DATA.user) {
-    $userBtn.classList.remove("hidden");
+    $logoutBtn.classList.remove("hidden");
+    $logoutBtn.addEventListener("click", logout);
     $userName.textContent = DATA.user;
   } else {
     const $loginBtn = document.querySelector(".login-btn");
@@ -522,9 +523,7 @@ async function setupAuth() {
       try {
         await checkAuth();
         location.reload();
-      } catch (err) {
+      } catch {}
-        alert(err.message);
-      }
     });
   }
 }
@@ -750,10 +749,21 @@ async function checkAuth() {
   });
   await assertResOK(res);
   document.querySelector(".login-btn").classList.add("hidden");
-  $userBtn.classList.remove("hidden");
+  $logoutBtn.classList.remove("hidden");
   $userName.textContent = "";
 }
 
+function logout() {
+  if (!DATA.auth) return;
+  const url = baseUrl();
+  const xhr = new XMLHttpRequest();
+  xhr.open("AUTH", url, true, ":");
+  xhr.send();
+  setTimeout(() => {
+    location.href = url;
+  }, 200);
+}
+
 /**
  * Create a folder
  * @param {string} name