179 lines
6.0 KiB
HTML
179 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<meta http-equiv="Cache-Control" content="max-age=86400, must-revalidate">
|
|
<meta http-equiv="Pragma" content="cache">
|
|
<meta http-equiv="Expires" content="86400">
|
|
<style>
|
|
:root{
|
|
--radchat-color: #40a02b;
|
|
--main-bg-color: #11111b;
|
|
--pum-button-inactive-fg: #cdd6f4;
|
|
--pum-button-inactive-bg: #11111b;
|
|
--pum-button-active-fg: #89b4fa;
|
|
--pum-button-active-bg: #1e1e2e;
|
|
--pum-title-color: #cdd6f4;
|
|
--pum-bg-color: #1e1e2e;
|
|
--user-color: #89b4fa;
|
|
--timestamp-color: #313244;
|
|
--separator-color: #181825;
|
|
--message-color: #cdd6f4;
|
|
--message-bg-color: #1e1e2e;
|
|
--input-bg-color: #181825;
|
|
--input-text-color: #cdd6f4;
|
|
--input-button-inactive-bg: #b4befe;
|
|
--input-button-inactive-fg: #11111b;
|
|
--input-button-active-bg: #89b4fa;
|
|
--input-button-active-fg: #11111b;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: var(--main-bg-color);
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
}
|
|
|
|
.login-container, .signup-container {
|
|
background-color: var(--pum-bg-color);
|
|
border-radius: 12px;
|
|
padding: 2rem;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
width: 100%;
|
|
max-width: 400px;
|
|
margin: 1rem;
|
|
}
|
|
|
|
.login-form, .signup-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
h1 {
|
|
color: var(--radchat-color);
|
|
text-align: center;
|
|
margin: 0 0 1.5rem 0;
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.login-input, .signup-input {
|
|
padding: 0.75rem;
|
|
border: none;
|
|
border-radius: 6px;
|
|
background-color: var(--input-bg-color);
|
|
color: var(--input-text-color);
|
|
font-size: 1rem;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.login-button, .signup-button {
|
|
padding: 0.75rem;
|
|
border: none;
|
|
border-radius: 6px;
|
|
background-color: var(--input-button-inactive-bg);
|
|
color: var(--input-button-inactive-fg);
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.login-button:hover, .signup-button:hover {
|
|
background-color: var(--input-button-active-bg);
|
|
color: var(--input-button-active-fg);
|
|
}
|
|
|
|
.login-error, .signup-error {
|
|
color: #e64553;
|
|
text-align: center;
|
|
min-height: 1.5rem;
|
|
}
|
|
|
|
.signup-link {
|
|
text-align: center;
|
|
color: var(--message-color);
|
|
}
|
|
|
|
.signup-link a {
|
|
color: var(--user-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.signup-link a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
</style>
|
|
<title>RadChat Login</title>
|
|
<script>
|
|
function login() {
|
|
const loginUsername = document.getElementById('loginUsername').value;
|
|
const loginPassword = document.getElementById('loginPassword').value;
|
|
const loginError = document.getElementById('loginError');
|
|
fetch('/login', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
username: loginUsername,
|
|
password: loginPassword
|
|
}),
|
|
})
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
if (data.error) {
|
|
loginError.innerHTML = data.error;
|
|
} else {
|
|
window.location.href = '/';
|
|
}
|
|
});
|
|
return false;
|
|
}
|
|
</script>
|
|
<link rel="stylesheet" href="root.css">
|
|
|
|
</head>
|
|
<body>
|
|
<!-- Login Form -->
|
|
<div class="login-container">
|
|
<div class="login-form">
|
|
<h1>RadChat</h1>
|
|
<form id="loginForm" onsubmit="return login()">
|
|
<input
|
|
type="text"
|
|
id="loginUsername"
|
|
class="login-input"
|
|
placeholder="Username"
|
|
required
|
|
>
|
|
<input
|
|
type="password"
|
|
id="loginPassword"
|
|
class="login-input"
|
|
placeholder="Password"
|
|
required
|
|
>
|
|
<button
|
|
type="submit"
|
|
class="login-button"
|
|
>
|
|
Login
|
|
</button>
|
|
<div id="loginError" class="login-error"></div>
|
|
</form>
|
|
<a href="/signup" class="signup-link">Signup</a>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|
|
|