136 lines
4 KiB
HTML
136 lines
4 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">
|
|
{% 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;
|
|
grid-template:
|
|
"login_form register_form" auto
|
|
"message_area message_area" auto
|
|
/ 1fr 1fr;
|
|
}
|
|
|
|
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;
|
|
width: 100%;
|
|
height: 150px;
|
|
}
|
|
|
|
@media screen and (max-width: 800px)
|
|
{
|
|
#content_body
|
|
{
|
|
grid-template:
|
|
"login_form" auto
|
|
"register_form" auto
|
|
"message_area" auto
|
|
/ 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="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="register_form(event)">Register</button>
|
|
</form>
|
|
<div id="message_area">
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
|
|
<script type="text/javascript">
|
|
var message_area = document.getElementById("message_area");
|
|
|
|
function login_form(event)
|
|
{
|
|
event.preventDefault();
|
|
var username = document.getElementById("login_input_username").value;
|
|
var 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, receive_callback)
|
|
}
|
|
|
|
function register_form(event)
|
|
{
|
|
event.preventDefault();
|
|
var username = document.getElementById("register_input_username").value;
|
|
var display_name = document.getElementById("register_input_display_name").value;
|
|
var password_1 = document.getElementById("register_input_password_1").value;
|
|
var 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, receive_callback);
|
|
}
|
|
|
|
function receive_callback(response)
|
|
{
|
|
response = response["data"];
|
|
if ("error_type" in response)
|
|
{
|
|
common.create_message_bubble(message_area, "message_negative", response["error_message"]);
|
|
return;
|
|
}
|
|
else
|
|
{
|
|
window.location.href = "/";
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</html>
|