.

Author: HoangTran0410

scripts/auto_lockWebsite.html

@@ -6,12 +6,39 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Useful Scripts - Auto lock websites</title>
 
+
+  <link rel="stylesheet" href="../popup/libs/swal2.dark.css">
+  <script src="../popup/libs/swal2.min.js"></script>
+
   <style>
+    html {
+      display: flex;
+      justify-content: center;
+      width: 400px;
+      height: 500px;
+    }
+
     body {
       width: 400px;
       height: 500px;
       background-color: #333;
       color: #eee;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+    }
+
+    .sites-container {
+      width: 100%;
+    }
+
+    .site {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
     }
   </style>
 </head>

scripts/auto_lockWebsite.js

@@ -5,7 +5,7 @@ async function initPassword() {
   const { t } = await import("../popup/helpers/lang.js");
   const { Storage } = await import("./helpers/utils.js");
 
-  let pass = await Storage.get(passStorageKey);
+  let pass = await getCurPass();
   if (pass) return true;
 
   const { value: newPass } = await Swal.fire({
@@ -29,20 +29,28 @@ async function initPassword() {
   return false;
 }
 
-async function checkPass() {
-  const { t } = await import("../popup/helpers/lang.js");
+async function getCurPass() {
   const { Storage } = await import("./helpers/utils.js");
+  let curPass = await Storage.get(passStorageKey);
+  return curPass;
+}
 
-  let passToOpenManager = await Storage.get(passStorageKey);
-  if (passToOpenManager == null) return "not init";
+export async function checkPass(reason) {
+  const { t } = await import("../popup/helpers/lang.js");
+
+  let curPass = await getCurPass();
+  if (curPass == null) return "not init";
 
   const { value: pass } = await Swal.fire({
     title: t({
+      vi: "Nhập mật khẩu" + t(reason),
+      en: "Enter password" + t(reason),
+    }),
+    input: "password",
+    inputPlaceholder: t({
       vi: "Nhập mật khẩu",
       en: "Enter password",
     }),
-    input: "password",
-    inputPlaceholder: t({ vi: "Nhập mật khẩu", en: "Enter your password" }),
     inputAttributes: {
       autocapitalize: "off",
       autocorrect: "off",
@@ -58,7 +66,7 @@ async function checkPass() {
     },
   });
 
-  if (pass === passToOpenManager) return true;
+  if (pass === curPass) return true;
   if (pass != null) {
     await Swal.fire(
       t({ vi: "Sai mật khẩu", en: "Wrong password!" }),
@@ -93,13 +101,12 @@ export default {
   },
 
   infoLink: async function openManager() {
-    let res = await checkPass();
-    if (res === "not init") {
-      res = await initPassword();
+    let curPass = await getCurPass();
+    if (curPass == null) {
+      curPass = await initPassword();
     }
-
-    if (res) {
-      window.open("/scripts/auto_lockWebsite.html", "_blank");
+    if (curPass) {
+      window.open("/scripts/auto_lockWebsite.html", "_self");
     }
   },
 
@@ -110,7 +117,10 @@ export default {
     },
     onDisable: async () => {
       const { Storage } = await import("./helpers/utils.js");
-      let res = await checkPass();
+      let res = await checkPass({
+        vi: " để tắt chức năng",
+        en: " to disable feature",
+      });
       if (res === true) {
         await Storage.remove(passStorageKey);
         await Storage.remove(lockedWebsiteKey);

scripts/auto_lockWebsite_main.js

@@ -0,0 +1,52 @@
+import { t } from "../popup/helpers/lang.js";
+import { Storage } from "./helpers/utils.js";
+import { checkPass } from "./auto_lockWebsite.js";
+
+const passStorageKey = "auto_lock_website_manager_password";
+const lockedWebsiteKey = "auto_lock_website_lockedWebsites";
+
+async function renderSites() {
+  let sites = await Storage.get(lockedWebsiteKey, []);
+
+  sites.forEach((site) => {
+    let div = document.createElement("div");
+    div.classList.add("sites-container");
+    div.innerHTML = `
+        <div class="site">
+            <p>${site}</p>
+            <button class="removeBtn">Remove</button>
+        </div>
+    `;
+    let removeBtn = div.querySelector(".removeBtn");
+    removeBtn.addEventListener("click", async () => {
+      let { isConfirmed } = await Swal.fire({
+        title: t({
+          vi: "Mở khoá trang web " + site + "?",
+          en: "Unlock " + site + "?",
+        }),
+        showCancelButton: true,
+        confirmButtonText: t({ vi: "Mở khoá", en: "Unlock" }),
+        cancelButtonText: t({ vi: "Huỷ", en: "Cancel" }),
+      });
+      if (isConfirmed) {
+        let index = sites.indexOf(site);
+        sites.splice(index, 1);
+        await Storage.set(lockedWebsiteKey, sites);
+        div.remove();
+      }
+    });
+    document.body.appendChild(div);
+  });
+}
+
+checkPass().then((res) => {
+  if (res === true) {
+    renderSites();
+  } else {
+    if (window.history.length) {
+      window.history.back();
+    } else {
+      window.close();
+    }
+  }
+});