Ethan Dalool
adb1d0ef39
There was always some semblance that two blank lines has some kind of meaning or structure that's different from single blank lines, but in reality it was mostly arbitrary and I can't stand to look at it any more.
138 lines
4.1 KiB
HTML
138 lines
4.1 KiB
HTML
<!DOCTYPE html5>
|
|
<html>
|
|
<head>
|
|
{% import "header.html" as header %}
|
|
<title>Login/Register</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<link rel="stylesheet" href="/static/css/common.css">
|
|
<link rel="stylesheet" href="/static/css/etiquette.css">
|
|
{% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
|
|
<script src="/static/js/common.js"></script>
|
|
<script src="/static/js/api.js"></script>
|
|
|
|
<style>
|
|
input
|
|
{
|
|
width: 300px;
|
|
}
|
|
button
|
|
{
|
|
width: 80px;
|
|
}
|
|
|
|
#content_body
|
|
{
|
|
margin: auto;
|
|
}
|
|
|
|
form
|
|
{
|
|
display: grid;
|
|
grid-auto-rows: max-content;
|
|
grid-row-gap: 8px;
|
|
margin: 0;
|
|
}
|
|
form h2
|
|
{
|
|
margin: 0;
|
|
}
|
|
#login_form { grid-area: login_form; }
|
|
#register_form { grid-area: register_form; }
|
|
#message_area
|
|
{
|
|
grid-area: message_area;
|
|
}
|
|
|
|
@media screen and (min-width: 800px)
|
|
{
|
|
#content_body
|
|
{
|
|
grid-template:
|
|
"login_form register_form" auto
|
|
"message_area message_area" 150px
|
|
/ 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 800px)
|
|
{
|
|
#content_body
|
|
{
|
|
grid-template:
|
|
"login_form" auto
|
|
"register_form" auto
|
|
"message_area" 150px
|
|
/ 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
{{header.make_header(session=session)}}
|
|
<div id="content_body">
|
|
<form id="login_form" class="panel" action="/login" method="post">
|
|
<h2>Log in</h2>
|
|
<input type="text" id="login_input_username" name="username" placeholder="username" autofocus>
|
|
<input type="password" id="login_input_password" name="password" placeholder="password">
|
|
<button type="submit" id="login_submit_button" class="green_button" onclick="return login_form(event);">Log in</button>
|
|
</form>
|
|
<form id="register_form" class="panel" action="/register" method="post">
|
|
<h2>Register</h2>
|
|
<input type="text" id="register_input_username" name="username" placeholder="username (at least {{min_username_length}})">
|
|
<input type="text" id="register_input_display_name" name="display_name" placeholder="display name (optional)">
|
|
<input type="password" id="register_input_password_1" name="password_1" placeholder="password (at least {{min_password_length}})">
|
|
<input type="password" id="register_input_password_2" name="password_2" placeholder="password again">
|
|
<button type="submit" id="register_input_button" class="green_button" onclick="return register_form(event);">Register</button>
|
|
</form>
|
|
<div id="message_area">
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
<script type="text/javascript">
|
|
const message_area = document.getElementById("message_area");
|
|
|
|
function login_form(event)
|
|
{
|
|
event.preventDefault();
|
|
const username = document.getElementById("login_input_username").value;
|
|
const password = document.getElementById("login_input_password").value;
|
|
if (username == "" || password == "")
|
|
{
|
|
common.create_message_bubble(message_area, "message_negative", "Fill out the form, yo.");
|
|
return;
|
|
}
|
|
api.users.login(username, password, login_register_callback)
|
|
}
|
|
|
|
function register_form(event)
|
|
{
|
|
event.preventDefault();
|
|
const username = document.getElementById("register_input_username").value;
|
|
const display_name = document.getElementById("register_input_display_name").value;
|
|
const password_1 = document.getElementById("register_input_password_1").value;
|
|
const password_2 = document.getElementById("register_input_password_2").value;
|
|
if (username == "" || password_1 == "" || password_2 == "")
|
|
{
|
|
common.create_message_bubble(message_area, "message_negative", "Fill out the form, yo.");
|
|
return;
|
|
}
|
|
api.users.register(username, display_name, password_1, password_2, login_register_callback);
|
|
}
|
|
|
|
function login_register_callback(response)
|
|
{
|
|
if ("error_type" in response.data)
|
|
{
|
|
common.create_message_bubble(message_area, "message_negative", response.data.error_message);
|
|
return;
|
|
}
|
|
else
|
|
{
|
|
window.location.href = "/";
|
|
}
|
|
}
|
|
</script>
|
|
</html>
|