[Feat] Settings UI Auth (#3) & Prepare for v0.1.1-rel

src/aura/ui/pages/config/config.css

@@ -45,6 +45,7 @@
   padding-left: 8px;
   padding-right: 8px;
   color: white;
+  z-index: 12000;
 
   opacity: 1;
   transform: translateY(0);
@@ -368,6 +369,82 @@
   font-size: small;
 }
 
+/* Auth Dialog */
+
+.aura-config-page-auth-dialog-area {
+  position: absolute;
+  height: calc(100% - 40px);
+  width: 100%;
+  top: 40px;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10000;
+  background-color: rgba(255, 255, 255, 0.35);
+
+  opacity: 1;
+  transition: all 0.5s;
+}
+
+.aura-config-page-auth-dialog-area.blur-enabled {
+  height: 100%;
+  top: 0;
+  background-color: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(5px);
+  filter: blur(0.1px);
+  /* ↑ 似乎会导致性能问题 */
+}
+
+.acp-ada-hidden {
+  opacity: 0;
+}
+
+.acp-ada-hidden.blur-enabled {
+  backdrop-filter: blur(0.1px);
+  filter: unset;
+}
+
+.aura-config-page-auth-dialog {
+  height: 40%;
+  width: 100%;
+  background-color: rgba(255, 255, 255, 0.625);
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  align-items: center;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.acp-auth-dialog-title {
+  font-size: x-large;
+  margin-bottom: 1.5rem;
+}
+
+#acp-auth-user-input {
+  max-width: 50%;
+  /* background-color: rgba(255, 255, 255, 0.5); */
+  border-radius: 35px;
+  margin-bottom: 2rem;
+}
+
+#acp-auth-user-input.invalid {
+  animation: invalidShake 0.6s linear;
+}
+
+.acp-auth-confirm-btn {
+  background-color: transparent;
+  border-radius: 35px;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  padding: 0.5rem;
+}
+
+.acp-auth-confirm-btn .layui-icon {
+  font-size: 24px;
+  margin-left: 2px;
+}
+
 /* Toast */
 
 .aura-config-page-toast-area {

src/aura/ui/pages/config/config.html

@@ -80,8 +80,10 @@
       </div>
       <div
         class="operation-el-hidden aura-config-page-operation-el"
-        onclick="window.__HUGO_AURA_UI_FUNCTIONS__.config.toggleSubConfig('behaviourCtrl', true)"
+        aura-disabled="true"
       >
+        <!-- Still WIP -->
+        <!-- onclick="window.__HUGO_AURA_UI_FUNCTIONS__.config.toggleSubConfig('behaviourCtrl', true)" -->
         <div class="aura-config-page-operation-body">
           <img src="../../aura/ui/static/config/behaviour_mon.svg" />
           <div>
@@ -114,6 +116,30 @@
     </div>
   </div>
 
+  <div
+    class="aura-config-page-auth-dialog-area acp-ada-hidden"
+    style="display: none"
+  >
+    <div class="aura-config-page-auth-dialog">
+      <p class="acp-auth-dialog-title">验证您的身份</p>
+
+      <input
+        type="password"
+        class="form-control"
+        placeholder="请输入密码..."
+        aria-label="Aura Password"
+        id="acp-auth-user-input"
+      />
+
+      <button
+        class="acp-auth-confirm-btn"
+        onclick="global.__HUGO_AURA_UI_FUNCTIONS__.config.verifyAuthPassword()"
+      >
+        <i class="layui-icon layui-icon-right"></i>
+      </button>
+    </div>
+  </div>
+
   <div class="aura-config-page-toast-area">
     <div class="toast-container position-fixed bottom-0 end-0 p-3">
       <div

src/aura/ui/pages/config/config.js

@@ -117,6 +117,48 @@ global.__HUGO_AURA_UI_FUNCTIONS__.config = {
 
     global.__HUGO_AURA_UI_REACTIVES__.config.isInSubPage = side;
   },
+
+  verifyAuthPassword: async () => {
+    const showFailedAnimation = async (el) => {
+      el.classList.remove("invalid");
+      await window.__HUGO_AURA_GLOBAL__.utils.sleep(50);
+      el.classList.add("invalid"); // Custom Anim
+      el.classList.add("is-invalid"); // Bootstrap
+    };
+
+    const inputEl = document.getElementById("acp-auth-user-input");
+    const userPasswdInput = inputEl.value;
+
+    if (!userPasswdInput || userPasswdInput.length < 8) {
+      showFailedAnimation(inputEl);
+      return false;
+    }
+
+    const crypto = require("crypto");
+    const encPasswd = crypto
+      .createHash("sha512")
+      .update(userPasswdInput + "EndlessX")
+      .digest("hex")
+      .toUpperCase();
+
+    if (
+      encPasswd ===
+      global.__HUGO_AURA_CONFIG__.auraSettings.settingsPasswordWithSalt
+    ) {
+      const acsDialogAreaEl = document.getElementsByClassName(
+        "aura-config-page-auth-dialog-area"
+      )[0];
+      acsDialogAreaEl.classList.add("acp-ada-hidden");
+      await window.__HUGO_AURA_GLOBAL__.utils.sleep(500);
+      acsDialogAreaEl.style = "display: none;";
+      await window.__HUGO_AURA_GLOBAL__.utils.sleep(250);
+      global.__HUGO_AURA_UI_FUNCTIONS__.config.showSecondPhaseAnim();
+      return true;
+    } else {
+      showFailedAnimation(inputEl);
+      return false;
+    }
+  },
 };
 
 (() => {
@@ -167,23 +209,51 @@ global.__HUGO_AURA_UI_FUNCTIONS__.config = {
     });
   };
 
-  const showAnimation = async () => {
-    const defaultHeader = document.getElementsByClassName(
-      "index__header__16DmR2a5"
-    )[0];
+  global.__HUGO_AURA_UI_FUNCTIONS__.config.showSecondPhaseAnim = () => {
+    showOperationsAnimation();
+  };
 
+  const handleSettingsAuth = async () => {
+    const isAuthEnabled =
+      global.__HUGO_AURA_CONFIG__.auraSettings.settingsPasswordEnabled;
+
+    if (!isAuthEnabled) {
+      showOperationsAnimation();
+    } else {
+      await window.__HUGO_AURA_GLOBAL__.utils.sleep(50);
+      const acsDialogAreaEl = document.getElementsByClassName(
+        "aura-config-page-auth-dialog-area"
+      )[0];
+      acsDialogAreaEl.style = "";
+      if (
+        global.__HUGO_AURA_CONFIG__.auraSettings.appearance
+          .enablePasswdDialogBlur
+      ) {
+        acsDialogAreaEl.classList.add("blur-enabled");
+      }
+      await window.__HUGO_AURA_GLOBAL__.utils.sleep(500);
+      acsDialogAreaEl.classList.remove("acp-ada-hidden");
+    }
+  };
+
+  const showAnimation = async () => {
     const auraConfigPageRoot = document.getElementsByClassName(
       "aura-config-page-root"
     )[0];
     await window.__HUGO_AURA_GLOBAL__.utils.sleep(200);
     auraConfigPageRoot.className = "aura-config-page-root";
 
+    const defaultHeader = document.getElementsByClassName(
+      "index__header__16DmR2a5"
+    )[0];
+
     await window.__HUGO_AURA_GLOBAL__.utils.sleep(500);
     defaultHeader.style = "display: none;";
     showVersionContainerAnimation();
     showHeaderAnimation();
     await window.__HUGO_AURA_GLOBAL__.utils.sleep(500);
-    showOperationsAnimation();
+
+    await handleSettingsAuth();
   };
 
   const onMounted = () => {