Skip to content

Commit 911eabe

Browse files
author
hoang.tran12
committed
auto lock website DONE ?
1 parent 4f4b70f commit 911eabe

File tree

4 files changed

+246
-65
lines changed

4 files changed

+246
-65
lines changed

‎scripts/auto_lockWebsite.css‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
html {
6+
display: flex;
7+
justify-content: center;
8+
width: 400px;
9+
height: 600px;
10+
margin: auto;
11+
}
12+
13+
body {
14+
width: 100%;
15+
height: 100%;
16+
background-color: #333;
17+
color: #eee;
18+
display: flex;
19+
align-items: center;
20+
flex-direction: column;
21+
}
22+
23+
.sites-container {
24+
width: 100%;
25+
text-align: center;
26+
margin-top: 10px;
27+
overflow-y: auto;
28+
overflow-x: hidden;
29+
}
30+
31+
.site {
32+
display: flex;
33+
flex-direction: row;
34+
justify-content: space-between;
35+
align-items: center;
36+
width: 100%;
37+
padding: 5px 10px;
38+
border-radius: 5px;
39+
}
40+
41+
.site:hover {
42+
background-color: #555;
43+
}
44+
45+
.site p {
46+
font-size: 1.3em;
47+
}
48+
49+
#change-pass {
50+
margin-bottom: 5px;
51+
}
52+
53+
.button {
54+
background-color: #444;
55+
color: #eee;
56+
border: none;
57+
border-radius: 5px;
58+
padding: 7px 15px;
59+
cursor: pointer;
60+
/* transition: all 0.1s ease; */
61+
}
62+
63+
.button:hover {
64+
background-color: #666;
65+
color: #fff;
66+
}
67+
68+
69+
#back {
70+
position: absolute;
71+
display: block;
72+
top: 5px;
73+
left: 5px;
74+
width: 35px;
75+
height: 35px;
76+
text-decoration: none;
77+
color: #fff;
78+
text-align: center;
79+
line-height: 30px;
80+
font-weight: bold;
81+
font-size: 24px;
82+
transition: all 0.2s ease;
83+
cursor: pointer;
84+
border: none;
85+
background-color: transparent;
86+
}
87+
88+
#back:hover {
89+
font-size: 28px;
90+
}

‎scripts/auto_lockWebsite.html‎

Lines changed: 9 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -6,47 +6,24 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Useful Scripts - Auto lock websites</title>
88

9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
10+
integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
11+
crossorigin="anonymous" referrerpolicy="no-referrer" />
912

13+
<link rel="stylesheet" href="../popup/styles/scrollbar.css">
1014
<link rel="stylesheet" href="../popup/libs/swal2.dark.css">
15+
<link rel="stylesheet" href="./auto_lockWebsite.css">
1116
<script src="../popup/libs/swal2.min.js"></script>
12-
13-
<style>
14-
html {
15-
display: flex;
16-
justify-content: center;
17-
width: 400px;
18-
height: 500px;
19-
}
20-
21-
body {
22-
width: 400px;
23-
height: 500px;
24-
background-color: #333;
25-
color: #eee;
26-
display: flex;
27-
justify-content: center;
28-
align-items: center;
29-
flex-direction: column;
30-
}
31-
32-
.sites-container {
33-
width: 100%;
34-
}
35-
36-
.site {
37-
display: flex;
38-
flex-direction: row;
39-
justify-content: space-between;
40-
align-items: center;
41-
width: 100%;
42-
}
43-
</style>
4417
</head>
4518

4619
<body>
4720

4821
<h1>Auto lock websites</h1>
4922

23+
<button class="button" id="change-pass"></button>
24+
<button class="button" id="add-site"></button>
25+
<button type="button" id="back" title="Go Back">⬅️</button>
26+
5027
<script type="module" src="./auto_lockWebsite_main.js"></script>
5128
</body>
5229

‎scripts/auto_lockWebsite.js‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
1-
const passStorageKey = "auto_lock_website_manager_password";
2-
const lockedWebsiteKey = "auto_lock_website_lockedWebsites";
1+
export const passStorageKey = "auto_lock_website_manager_password";
2+
export const lockedWebsiteKey = "auto_lock_website_lockedWebsites";
33

4-
async function initPassword() {
4+
export async function initPassword(createNew = false) {
55
const { t } = await import("../popup/helpers/lang.js");
66
const { Storage } = await import("./helpers/utils.js");
77

8-
let pass = await getCurPass();
9-
if (pass) return true;
8+
if (!createNew) {
9+
let pass = await getCurPass();
10+
if (pass) return true;
11+
}
1012

1113
const { value: newPass } = await Swal.fire({
1214
title: t({ vi: "Tạo mật khẩu mới", en: "Create new password" }),
@@ -42,6 +44,7 @@ export async function checkPass(reason) {
4244
if (curPass == null) return "not init";
4345

4446
const { value: pass } = await Swal.fire({
47+
icon: "info",
4548
title: t({
4649
vi: "Nhập mật khẩu" + t(reason),
4750
en: "Enter password" + t(reason),
@@ -179,7 +182,6 @@ export default {
179182
function lockAgain() {
180183
let overlay = document.querySelector(`#${id}`);
181184
let style = document.querySelector(`#${idStyle}`);
182-
183185
if (!overlay || !style) return;
184186
overlay.style.top = "0";
185187
style.disabled = false;
@@ -203,7 +205,7 @@ export default {
203205
const overlay = document.createElement("div");
204206
overlay.id = id;
205207
overlay.innerHTML = /* html */ `
206-
<h1>Useful Script - Auto lock websites</h1>
208+
<h1>This websites has been Locked</h1>
207209
<input id="password" type="password" placeholder="Enter password to unlock.." autocomplete="new-password" />
208210
<div id="unlock-temporarly-container" title="Enable to unlock temporarly => will lock again if website reload">
209211
<input id="unlock-temporarly" type="checkbox" />
@@ -256,6 +258,7 @@ export default {
256258
background-color: #04aa6d;
257259
}
258260
#${id} > input {
261+
letter-spacing: normal;
259262
margin-top: 20px;
260263
font-size: 20px;
261264
padding: 10px;
@@ -271,6 +274,10 @@ export default {
271274
background-color: #282828;
272275
box-shadow: 0px 5px 5px #555;
273276
}
277+
#${id} label {
278+
color: #ccc !important;
279+
background-color: transparent !important;
280+
}
274281
</style>
275282
`;
276283
setTimeout(() => {

‎scripts/auto_lockWebsite_main.js‎

Lines changed: 133 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,159 @@
11
import { t } from "../popup/helpers/lang.js";
22
import { Storage } from "./helpers/utils.js";
3-
import { checkPass } from "./auto_lockWebsite.js";
3+
import {
4+
checkPass,
5+
initPassword,
6+
lockedWebsiteKey,
7+
} from "./auto_lockWebsite.js";
48

5-
const passStorageKey = "auto_lock_website_manager_password";
6-
const lockedWebsiteKey = "auto_lock_website_lockedWebsites";
9+
async function addSite(site) {
10+
let sites = await Storage.get(lockedWebsiteKey, []);
11+
if (sites.includes(site)) return;
12+
sites.unshift(site);
13+
await Storage.set(lockedWebsiteKey, sites);
14+
}
715

816
async function renderSites() {
917
let sites = await Storage.get(lockedWebsiteKey, []);
1018

19+
const containerClass = "sites-container";
20+
const exist = document.querySelector("." + containerClass);
21+
if (exist) exist.remove();
22+
23+
let container = document.createElement("div");
24+
container.classList.add(containerClass);
25+
26+
if (!sites.length) {
27+
container.innerHTML = t({
28+
vi: "Không có website nào bị khoá",
29+
en: "No website is locked",
30+
});
31+
}
32+
1133
sites.forEach((site) => {
1234
let div = document.createElement("div");
13-
div.classList.add("sites-container");
14-
div.innerHTML = `
15-
<div class="site">
16-
<p>${site}</p>
17-
<button class="removeBtn">Remove</button>
18-
</div>
35+
div.classList.add("site");
36+
div.innerHTML += `
37+
<p>${site}</p>
38+
<button class="button">${t({
39+
vi: "Mở khoá",
40+
en: "Unlock",
41+
})}</button>
1942
`;
20-
let removeBtn = div.querySelector(".removeBtn");
21-
removeBtn.addEventListener("click", async () => {
22-
let { isConfirmed } = await Swal.fire({
43+
let removeBtn = div.querySelector(".button");
44+
removeBtn.addEventListener("click", () => {
45+
Swal.fire({
2346
title: t({
2447
vi: "Mở khoá trang web " + site + "?",
2548
en: "Unlock " + site + "?",
2649
}),
2750
showCancelButton: true,
2851
confirmButtonText: t({ vi: "Mở khoá", en: "Unlock" }),
2952
cancelButtonText: t({ vi: "Huỷ", en: "Cancel" }),
53+
}).then(({ isConfirmed }) => {
54+
if (isConfirmed) {
55+
let index = sites.indexOf(site);
56+
sites.splice(index, 1);
57+
Storage.set(lockedWebsiteKey, sites);
58+
// listener will trigger and re-draw all
59+
// div.remove();
60+
}
3061
});
31-
if (isConfirmed) {
32-
let index = sites.indexOf(site);
33-
sites.splice(index, 1);
34-
await Storage.set(lockedWebsiteKey, sites);
35-
div.remove();
62+
});
63+
container.appendChild(div);
64+
});
65+
66+
document.body.appendChild(container);
67+
}
68+
69+
function initAddSite() {
70+
let addSiteBtn = document.querySelector("#add-site");
71+
addSiteBtn.innerHTML = t({
72+
vi: '<i class="fa-solid fa-plus fa-lg"></i> Thêm trang web',
73+
en: '<i class="fa-solid fa-plus fa-lg"></i> Add website',
74+
});
75+
addSiteBtn.addEventListener("click", () => {
76+
Swal.fire({
77+
title: t({ vi: "Khoá trang web", en: "Lock website" }),
78+
inputLabel: t({
79+
vi: "Nhập link trang web muốn khoá",
80+
en: "Enter website url want to lock",
81+
}),
82+
input: "text",
83+
inputAttributes: {
84+
autocapitalize: "off",
85+
autocorrect: "off",
86+
},
87+
showCancelButton: true,
88+
confirmButtonText: t({ vi: "Khoá", en: "Lock" }),
89+
cancelButtonText: t({ vi: "Huỷ", en: "Cancel" }),
90+
inputValidator: (value) => {
91+
if (!value) {
92+
return t({
93+
vi: "Vui lòng nhập trang web",
94+
en: "Please enter website url",
95+
});
96+
}
97+
},
98+
}).then(({ isConfirmed, value }) => {
99+
if (!isConfirmed) return;
100+
101+
let hostname = value;
102+
try {
103+
let url = new URL(value);
104+
hostname = url.hostname;
105+
} catch (error) {
106+
console.log(error);
107+
}
108+
addSite(hostname);
109+
});
110+
});
111+
}
112+
113+
function initChangePass() {
114+
let changePassBtn = document.querySelector("#change-pass");
115+
changePassBtn.innerHTML = t({
116+
vi: '<i class="fa-solid fa-key fa-lg"></i> Đổi mật khẩu',
117+
en: '<i class="fa-solid fa-key fa-lg"></i> Change password',
118+
});
119+
changePassBtn.addEventListener("click", () => {
120+
initPassword(true).then((res) => {
121+
if (res) {
122+
Swal.fire({
123+
icon: "success",
124+
title: t({
125+
vi: "Đổi mật khẩu thành công",
126+
en: "Change password success",
127+
}),
128+
showConfirmButton: false,
129+
timer: 1500,
130+
});
36131
}
37132
});
38-
document.body.appendChild(div);
39133
});
40134
}
41135

42-
checkPass().then((res) => {
43-
if (res === true) {
44-
renderSites();
136+
function goBack() {
137+
if (window.history.length > 1) {
138+
window.history.back();
45139
} else {
46-
if (window.history.length) {
47-
window.history.back();
48-
} else {
49-
window.close();
50-
}
140+
window.close();
141+
}
142+
}
143+
144+
checkPass({
145+
vi: " để truy cập trang quản lý",
146+
en: " to access manager",
147+
}).then((res) => {
148+
if (res !== true) {
149+
goBack();
150+
return;
51151
}
152+
initAddSite();
153+
initChangePass();
154+
renderSites();
155+
document.querySelector("#back").addEventListener("click", goBack);
156+
chrome.storage.onChanged.addListener((changes, areaName) => {
157+
if (changes?.[lockedWebsiteKey]) renderSites();
158+
});
52159
});

0 commit comments

Comments
 (0)