148 lines
4.4 KiB
HTML
148 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<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="icon" href="/favicon.png" type="image/png"/>
|
|
<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-bottom: 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>
|
|
{% if registration_enabled %}
|
|
<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>
|
|
{% else %}
|
|
<span>Registrations are disabled.</span>
|
|
{% endif %}
|
|
</form>
|
|
<div id="message_area" class="panel">
|
|
</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 (! response.meta.json_ok)
|
|
{
|
|
alert(JSON.stringify(response));
|
|
return;
|
|
}
|
|
if ("error_type" in response.data)
|
|
{
|
|
common.create_message_bubble(message_area, "message_negative", response.data.error_message);
|
|
return;
|
|
}
|
|
else
|
|
{
|
|
common.go_to_root();
|
|
}
|
|
}
|
|
</script>
|
|
</html>
|