187 lines
6.6 KiB
HTML
187 lines
6.6 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 Signup</title>
|
|
<script>
|
|
function signup() {
|
|
const signupUsername = document.getElementById('signupUsername').value;
|
|
const signupPassword = document.getElementById('signupPassword').value;
|
|
const signupConfirmPassword = document.getElementById('signupConfirmPassword').value;
|
|
const signupError = document.getElementById('signupError');
|
|
if (signupPassword !== signupConfirmPassword) {
|
|
signupError.innerHTML = 'Passwords do not match';
|
|
return false;
|
|
}
|
|
fetch('/signup', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
username: signupUsername,
|
|
password: signupPassword,
|
|
}),
|
|
})
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
if (data.error) {
|
|
signupError.innerHTML = data.error;
|
|
} else {
|
|
window.location.href = '/login';
|
|
}
|
|
});
|
|
return false;
|
|
}
|
|
</script>
|
|
<link rel="stylesheet" href="root.css">
|
|
</head>
|
|
<body>
|
|
<!-- Signup Form -->
|
|
<div class="signup-container">
|
|
<div class="signup-form">
|
|
<h1>RadChat</h1>
|
|
<form id="signupForm" onsubmit="return signup()">
|
|
<input
|
|
type="text"
|
|
id="signupUsername"
|
|
class="signup-input"
|
|
placeholder="Username"
|
|
required
|
|
>
|
|
<input
|
|
type="password"
|
|
id="signupPassword"
|
|
class="signup-input"
|
|
placeholder="Password"
|
|
required
|
|
>
|
|
<input
|
|
type="password"
|
|
id="signupConfirmPassword"
|
|
class="signup-input"
|
|
placeholder="Confirm Password"
|
|
required
|
|
>
|
|
<button type="submit" class="signup-button">Sign Up</button>
|
|
</form>
|
|
<div class="signup-error" id="signupError"></div>
|
|
<div class="signup-link">
|
|
Already have an account? <a href="/login">Log In</a>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
|
|
|