sam/Hyperia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

signins

Browse Source
This commit is contained in:
metacryst
2025-09-30 17:44:39 -05:00
parent 7c8fd24b49
commit faf2041b7f
12 changed files with 421 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
ui/public/pages/join.html
View File

@@ -6,10 +6,9 @@
<link rel="icon" href="_/icons/logo.svg">
<link rel="stylesheet" href="index.css">
<style>
#items {
position: absolute;
top: 45vh;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
@@ -19,28 +18,43 @@
text-align: center; /* ensures text inside spans is centered */
}
a {
cursor: default;
text-decoration: underline;
text-underline-offset: 5px;
transition: background .02s, color .2s;
user-select: none;
padding: 4px;
input {
background-color: transparent;
border: none;
border-radius: 5px;
display: inline-block; /* makes background and padding behave */
padding: 0.2em 0.5em; /* adds breathing room */
border-top: 2px solid var(--accent);
border-bottom: 2px solid var(--accent);
height: 2em;
width: 15vw;
padding: 0.2em;
transition: border .2s, padding .2s;
color: var(--accent)
}
input::placeholder {
color: var(--accent);
}
input:focus {
outline: none;
padding: 0.4em;
border-top: 2px solid var(--red);
border-bottom: 2px solid var(--red);
}
input:focus::placeholder {
color: var(--red)
}
input:-webkit-autofill,
input:-webkit-autofill:focus {
transition: background-color 600000s 0s, color 600000s 0s;
}
input[data-autocompleted] {
background-color: #c7a67b !important;
}
a:hover {
text-decoration: none;
background: var(--green);
color: var(--tan);
}
a:active {
background: var(--red); /* background color works now */
color: white; /* optional: change text color for contrast */
}
@media (max-width: 600px) {
input {
width: 50vw
}
}
</style>
<script src="_/code/util.js"></script>
<script type="module">
@@ -50,17 +64,55 @@
</script>
</head>
<body>
<span id="title" onclick='window.location.href="/"'>hyperia
</span>
<span id="title" onclick='console.log("hey"); window.location.href="/"'>hyperia</span>
<div class="links" style="z-index: 1; cursor: default; position: fixed; top: 5.5vh; right: 4.5vw">
<a href="join">join</a>
<span>|</span>
<a href="signin">sign in</a>
</div>
<p style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
Hyperia is invite-only. You'll need a friend to invite you.
</p>
<div id="items">
<script>
Array.from($("a*")).forEach((link) => {
link.addEventListener("click", () => window.history.pushState("", "", link.innerHTML.toLowerCase()))
})
</script>
<form id="signup-form">
<input name="email" id="email" placeholder="email" required style="margin-bottom: 15px;">
<br>
<p id="applicant-message" style="color: green; font-size: 1em; margin: 0.5em 0;"></p>
<button type="submit" style="background-color: rgb(193, 135, 29)">Sign Up</button>
</form>
<script>
document.getElementById('signup-form').addEventListener('submit', async (e) => {
e.preventDefault(); // prevent page reload
const email = document.getElementById('email').value;
const messageEl = document.getElementById('applicant-message');
try {
const res = await fetch('/api/signup', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams({ email }),
});
if (res.ok) {
const data = await res.json();
messageEl.style.color = 'green';
messageEl.textContent = data.message;
} else {
const error = await res.text();
messageEl.style.color = 'red';
messageEl.textContent = 'Error: ' + error;
}
} catch (err) {
messageEl.style.color = 'red';
messageEl.textContent = 'Error submitting form.';
console.error(err);
}
});
</script>
</div>
</body>
</html>

44
ui/public/pages/signin.html
View File

@@ -65,44 +65,22 @@
</head>
<body>
<span id="title" onclick='console.log("hey"); window.location.href="/"'>hyperia</span>
<div class="links" style="z-index: 1; cursor: default; position: fixed; top: 5.5vh; right: 4.5vw">
<a href="join">join</a>
<span>|</span>
<a href="signin">sign in</a>
</div>
<div id="items">
<input id="email" placeholder="email"></input>
<form id="login-form" action="/api/login" method="POST">
<input name="email" placeholder="email" style="margin-bottom: 15px;" required>
<br>
<input id="password" placeholder="password"></input>
<input name="password" type="password" placeholder="password" required>
<br>
<p id="applicant-message" style="color: green; margin-left: 10px; display: inline-block; margin: 0px; margin-left: 20px; font-size: 1em"></p>
<br>
<div>
</div>
<button onclick="login()" style="background-color: rgb(193, 135, 29)">Sign In
<script>
async function login() {
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const messageEl = document.getElementById('applicant-message');
const res = await fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ email, password }),
});
if (res.ok) {
const data = await res.text();
messageEl.style.color = "green"
messageEl.textContent = "Check your email for a login link.";
} else {
const error = await res.text();
console.log(error)
messageEl.style.color = "red"
messageEl.textContent = "Error: " + error;
}
}
</script>
</button>
<button type="submit" style="background-color: rgb(193, 135, 29)">Sign In</button>
</form>
</div>
</body>
</html>