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