Hide password when entering

This commit is contained in:
SinTan1729 2023-04-11 19:17:04 -05:00
parent d22d88b985
commit abe8238713
2 changed files with 54 additions and 27 deletions

View File

@ -23,7 +23,7 @@
<body> <body>
<div class="container"> <div class="container" id="container">
<form class="pure-form pure-form-aligned" name="new-url-form"> <form class="pure-form pure-form-aligned" name="new-url-form">
<fieldset> <fieldset>
<legend id="logo"><img src="assets/favicon-32.png" width="26px" alt="logo"> Simply Shorten</legend> <legend id="logo"><img src="assets/favicon-32.png" width="26px" alt="logo"> Simply Shorten</legend>
@ -65,6 +65,15 @@
<a href="https://github.com/SinTan1729/simply-shorten" target="_blank" rel="noopener noreferrer">Source Code</a> <a href="https://github.com/SinTan1729/simply-shorten" target="_blank" rel="noopener noreferrer">Source Code</a>
</div> </div>
<dialog id="login-dialog">
<form class="pure-form" name="login-form">
<p>Please enter password to access this website</p>
<input type="password" id="password" />
<button class="pure-button pure-button-primary" value="default">Submit</button>
<p id="wrong-pass">&nbsp;</p>
</form>
</dialog>
</body> </body>
</html> </html>

View File

@ -9,23 +9,15 @@ const getSiteUrl = async () => await fetch("/api/siteurl")
} }
}); });
const auth_fetch = async (link) => {
let reply = await fetch(link).then(res => res.text());
if (reply == "logged_out") {
pass = prompt("Please enter passkey to access this website");
await fetch("/api/login", {
method: "POST",
body: pass
});
return auth_fetch(link);
} else {
return reply;
}
}
const refreshData = async () => { const refreshData = async () => {
let data = await auth_fetch("/api/all"); let reply = await fetch("/api/all").then(res => res.text());
data = data if (reply == "logged_out") {
console.log("logged_out");
document.getElementById("container").style.filter = "blur(2px)"
document.getElementById("login-dialog").showModal();
document.getElementById("password").focus();
} else {
data = reply
.split("\n") .split("\n")
.filter(line => line !== "") .filter(line => line !== "")
.map(line => line.split(",")) .map(line => line.split(","))
@ -36,6 +28,7 @@ const refreshData = async () => {
})); }));
displayData(data); displayData(data);
}
}; };
const displayData = async (data) => { const displayData = async (data) => {
@ -168,14 +161,39 @@ const submitForm = () => {
refreshData(); refreshData();
} }
}); });
}; };
const submitLogin = () => {
const password = document.getElementById("password");
fetch("/api/login", {
method: "POST",
body: password.value
}).then(res => {
if (res.ok) {
document.getElementById("container").style.filter = "blur(0px)"
document.getElementById("login-dialog").remove();
refreshData();
} else {
const wrongPassBox = document.getElementById("wrong-pass");
wrongPassBox.innerHTML = "Wrong password!";
wrongPassBox.setAttribute("style", "color:red");
password.focus();
}
})
}
(async () => { (async () => {
await refreshData(); await refreshData();
const form = document.forms.namedItem("new-url-form"); const form = document.forms.namedItem("new-url-form");
form.onsubmit = e => { form.onsubmit = e => {
e.preventDefault(); e.preventDefault();
submitForm(); submitForm();
} }
const login_form = document.forms.namedItem("login-form");
login_form.onsubmit = e => {
e.preventDefault();
submitLogin();
}
})(); })();