feat(frontend): add index, login and register pages
This commit is contained in:
parent
a254d61221
commit
5bcccff63c
28
src/assets/toggle_mode.js
Normal file
28
src/assets/toggle_mode.js
Normal 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
42
src/static_pages/index.html
Normal 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
75
src/static_pages/login.html
Normal 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
78
src/static_pages/register.html
Normal 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>
|
Loading…
Reference in New Issue
Block a user