Add setup and API files with enhanced user interface and error handling
This commit is contained in:
marc-go committed
1 parent
84e0630893
commit
06a4f9a6c0
4 files changed
+130
-42
No files matched your search
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"@material/web/": "https://esm.run/@material/web/"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script type="module">
|
||||
import '@material/web/all.js';
|
||||
import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';
|
||||
|
||||
document.adoptedStyleSheets.push(typescaleStyles.styleSheet);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1 class="md-typescale-display-medium">Hello!</h1>
|
||||
<p>Welcome to your Guestbook! Enter here your prefered username and password.</p>
|
||||
<md-filled-text-field label="Username" type="text"></md-filled-text-field><br><br>
|
||||
<md-filled-text-field label="Password" type="password"></md-filled-text-field><br><br>
|
||||
<md-filled-text-field label="Repeat Password" type="password"></md-filled-text-field><br><br>
|
||||
<md-filled-button disabled>Save</md-filled-button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,11 +1,121 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Setup</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"@material/web/": "https://esm.run/@material/web/"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script type="module">
|
||||
import '@material/web/all.js';
|
||||
import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';
|
||||
|
||||
document.adoptedStyleSheets.push(typescaleStyles.styleSheet);
|
||||
</script>
|
||||
|
||||
<title>Setup</title>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--md-sys-color-primary: rgb(58, 58, 255);
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>La setup</h1>
|
||||
<div class="content">
|
||||
<h1 class="md-typescale-display-medium">Hello!</h1>
|
||||
<p>Welcome to your Guestbook! Enter here your prefered username and password.</p>
|
||||
<md-filled-text-field label="Username" type="text" id="setup-username"></md-filled-text-field><br><br>
|
||||
<md-filled-text-field label="Password" type="password" id="setup-password"></md-filled-text-field><br><br>
|
||||
<md-filled-text-field label="Repeat Password" type="password" id="setup-password-repeat"></md-filled-text-field><br><br>
|
||||
<md-filled-button id="submit-button">Save</md-filled-button>
|
||||
</div>
|
||||
<md-dialog id="http-dialog">
|
||||
<div slot="headline">
|
||||
Warning
|
||||
</div>
|
||||
<form slot="content" method="dialog">
|
||||
Your browser is using http instead of https. That means your connection is not encrypted and everyone in your network can read your credentials.
|
||||
</form>
|
||||
<div slot="actions">
|
||||
<md-text-button id="http-dialog-close-button">I know what i'm doing!</md-text-button>
|
||||
</div>
|
||||
</md-dialog>
|
||||
<md-dialog id="error-dialog">
|
||||
<div slot="headline">
|
||||
Error
|
||||
</div>
|
||||
<form slot="content" method="dialog" id="error-dialog-text">
|
||||
|
||||
</form>
|
||||
<div slot="actions">
|
||||
<md-filled-button id="close-button">Close</md-filled-button>
|
||||
</div>
|
||||
</md-dialog>
|
||||
<script>
|
||||
if (window.location.protocol == "http:") {
|
||||
document.getElementById("http-dialog").setAttribute("open", "");
|
||||
document.getElementById("http-dialog-close-button").addEventListener("click", function() {
|
||||
document.getElementById("http-dialog").removeAttribute("open");
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById("submit-button").addEventListener("click", function() {
|
||||
checkSetup();
|
||||
});
|
||||
|
||||
document.getElementById("close-button").addEventListener("click", function() {
|
||||
document.getElementById("error-dialog").removeAttribute("open");
|
||||
})
|
||||
|
||||
function checkSetup() {
|
||||
const username = document.getElementById("setup-username").value;
|
||||
const password = document.getElementById("setup-password").value;
|
||||
const password_repeat = document.getElementById("setup-password-repeat").value;
|
||||
|
||||
// Check if Passwords match
|
||||
if (password !== password_repeat) {
|
||||
console.error("Passwords does not match");
|
||||
|
||||
document.getElementById("error-dialog-text").innerHTML = "Passwords does not match";
|
||||
document.getElementById("error-dialog").setAttribute("open", "");
|
||||
}
|
||||
|
||||
// Send data
|
||||
fetch("/api/setup/save.php", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
username: username,
|
||||
password: password
|
||||
}),
|
||||
headers: {
|
||||
"Content-type": "application/json; charset=UTF-8"
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => function() {
|
||||
if (data.status !== 200) {
|
||||
console.error("Server returned following message: " + data.error);
|
||||
|
||||
document.getElementById("error-dialog-text").innerHTML = data.display_error;
|
||||
document.getElementById("error-dialog").setAttribute("open", "");
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user