mariano/script_hoster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): add index, login and register pages

Browse Source
This commit is contained in:
Mariano Riefolo 2024-08-16 17:18:53 +02:00
parent a254d61221
commit 5bcccff63c
4 changed files with 223 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/assets/toggle_mode.js Normal file
View File

@ -0,0 +1,28 @@
const toggleModeButton = document.getElementById("toggle-mode");
const html = document.documentElement;
const isDarkMode = localStorage.getItem("darkMode") === "true";
if (isDarkMode) {
html.classList.add("theme-dark");
}
toggle_icon();
toggleModeButton.addEventListener("click", () => {
html.classList.toggle("theme-dark");
localStorage.setItem("darkMode", html.classList.contains("theme-dark"));
toggle_icon();
});
function toggle_icon() {
const icon = toggleModeButton.querySelector("i");
if (html.classList.contains("theme-dark")) {
icon.classList.remove("fa-sun");
icon.classList.add("fa-moon");
} else {
icon.classList.remove("fa-moon");
icon.classList.add("fa-sun");
}
}

42
src/static_pages/index.html Normal file
View File

@ -0,0 +1,42 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Home page</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<script defer src="/assets/toggle_mode.js"></script>
</head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="index.html">
<h1 class="title">Script Hoster</h1>
</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<button class="button" id="toggle-mode">
<span class="icon">
<i id="toggle-mode-icon" class="fas"></i>
</span>
</button>
<a class="button is-primary" href="login.html"> Login </a>
<a class="button is-secondary" href="register.html"> Sign up </a>
</div>
</div>
</div>
</nav>
</body>
</html>

75
src/static_pages/login.html Normal file
View File

@ -0,0 +1,75 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Sign in</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css"
/>
<script defer src="/assets/toggle_mode.js"></script>
</head>
<body>
<div
class="container is-flex is-justify-content-center is-align-items-center"
style="height: 100vh"
>
<form class="box">
<div class="field">
<label class="label">Email</label>
<div class="control">
<input class="input" type="email" name="email" />
</div>
</div>
<div class="field">
<label class="label">Password</label>
<div class="control">
<input class="input" type="password" name="password" />
</div>
</div>
<div class="field">
<div class="control">
<button class="button is-link">Login</button>
</div>
</div>
</form>
</div>
<article class="message is-danger is-hidden">
<div class="message-header">Error</div>
<div id="error" class="message-body"></div>
</article>
<script>
document
.querySelector("form")
.addEventListener("submit", function (event) {
event.preventDefault();
var formData = new FormData(event.target);
fetch("api/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
email: formData.get("email"),
password: formData.get("password"),
}),
})
.then(function (response) {
return response.json();
})
.then(function (data) {
if (data.error) {
document.querySelector("#error").innerText = data.error;
document
.querySelector(".message")
.classList.remove("is-hidden");
} else {
document.cookie = "token=" + data.token;
document.location.href = "dashboard.html";
}
});
});
</script>
</body>
</html>

78
src/static_pages/register.html Normal file
View File

@ -0,0 +1,78 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Sign in</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css"
/>
<script defer src="/assets/toggle_mode.js"></script>
</head>
<body><div
class="container is-flex is-justify-content-center is-align-items-center"
style="height: 100vh"
>
<form class="box">
<div class="field">
<label class="label">Email</label>
<div class="control">
<input class="input" type="email" name="email" />
</div>
</div>
<div class="field">
<label class="label">Username</label>
<div class="control">
<input class="input" type="text" name="username" />
</div>
<div class="field">
<label class="label">Password</label>
<div class="control">
<input class="input" type="password" name="password" />
</div>
</div>
<div class="field">
<div class="control">
<button class="button is-link">Register</button>
</div>
</div>
</form>
</div>
<article class="message is-danger is-hidden">
<div class="message-header">Error</div>
<div id="error" class="message-body"></div>
</article>
<script>
document
.querySelector("form")
.addEventListener("submit", function (event) {
event.preventDefault();
var formData = new FormData(event.target);
fetch("api/register", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
email: formData.get("email"),
username: formData.get("username"),
password: formData.get("password"),
}),
})
.then(function (response) {
return response.json();
})
.then(function (data) {
if (data.error) {
document.querySelector("#error").innerText = data.error;
} else {
document.location.href = "login.html";
}
});
});
</script>
</body>
</html>