2016-12-18 13:12:14 +00:00
|
|
|
<!DOCTYPE html5>
|
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
{% import "header.html" as header %}
|
|
|
|
<title>Login/Register</title>
|
|
|
|
<meta charset="UTF-8">
|
2017-07-21 06:10:48 +00:00
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
2018-02-24 20:51:36 +00:00
|
|
|
<link rel="stylesheet" href="/static/css/common.css">
|
|
|
|
<script src="/static/js/common.js"></script>
|
2018-09-23 23:50:27 +00:00
|
|
|
<script src="/static/js/api.js"></script>
|
2016-12-18 13:12:14 +00:00
|
|
|
|
|
|
|
<style>
|
2016-12-21 09:11:50 +00:00
|
|
|
input
|
|
|
|
{
|
|
|
|
width: 300px;
|
|
|
|
}
|
|
|
|
button
|
|
|
|
{
|
|
|
|
width: 80px;
|
|
|
|
}
|
|
|
|
|
2016-12-18 13:12:14 +00:00
|
|
|
#content_body
|
|
|
|
{
|
2016-12-21 09:11:50 +00:00
|
|
|
max-width: 900px;
|
2018-10-22 01:46:27 +00:00
|
|
|
margin: auto;
|
2016-12-18 13:12:14 +00:00
|
|
|
}
|
2016-12-21 09:11:50 +00:00
|
|
|
|
2016-12-18 13:12:14 +00:00
|
|
|
#login_register_box
|
|
|
|
{
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
2017-07-21 06:02:09 +00:00
|
|
|
flex: 0 0 auto;
|
2016-12-18 13:12:14 +00:00
|
|
|
}
|
2016-12-21 09:11:50 +00:00
|
|
|
|
|
|
|
#login_form,
|
|
|
|
#register_form
|
2016-12-18 13:12:14 +00:00
|
|
|
{
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
2017-03-31 02:34:39 +00:00
|
|
|
|
|
|
|
padding: 10px;
|
2016-12-21 09:11:50 +00:00
|
|
|
margin: 10px;
|
2017-03-31 02:34:39 +00:00
|
|
|
|
|
|
|
border-radius: 5px;
|
|
|
|
border: 1px solid black;
|
2016-12-18 13:12:14 +00:00
|
|
|
}
|
2016-12-21 09:11:50 +00:00
|
|
|
#login_form > *,
|
|
|
|
#register_form > *
|
2016-12-18 13:12:14 +00:00
|
|
|
{
|
|
|
|
margin-top: 5px;
|
|
|
|
margin-bottom: 5px;
|
|
|
|
}
|
2018-02-24 08:34:46 +00:00
|
|
|
#message_area
|
|
|
|
{
|
|
|
|
width: 100%;
|
2018-10-22 01:46:27 +00:00
|
|
|
height: 150px;
|
2018-02-24 08:34:46 +00:00
|
|
|
}
|
2017-07-21 06:02:09 +00:00
|
|
|
@media screen and (max-width: 800px)
|
|
|
|
{
|
|
|
|
#login_register_box
|
|
|
|
{
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
}
|
2016-12-21 09:11:50 +00:00
|
|
|
|
2016-12-18 13:12:14 +00:00
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
{{header.make_header(session=session)}}
|
|
|
|
<div id="content_body">
|
|
|
|
<div id="login_register_box">
|
2016-12-21 09:11:50 +00:00
|
|
|
<div id="login_form" action="/login" method="post">
|
|
|
|
<span>Log in</span>
|
|
|
|
<input type="text" id="login_input_username" name="username" placeholder="username" autofocus>
|
|
|
|
<input type="password" id="login_input_password" name="password" placeholder="password">
|
2019-06-16 00:03:54 +00:00
|
|
|
<button type="submit" id="login_submit_button" class="green_button" onclick="login_form()">Log in</button>
|
2016-12-21 09:11:50 +00:00
|
|
|
</div>
|
|
|
|
<div id="register_form" action="/register" method="post">
|
|
|
|
<span>Register</span>
|
2018-04-15 20:20:08 +00:00
|
|
|
<input type="text" id="register_input_username" name="username" placeholder="username (at least {{min_username_length}})">
|
|
|
|
<input type="password" id="register_input_password_1" name="password_1" placeholder="password (at least {{min_password_length}})">
|
2016-12-21 09:11:50 +00:00
|
|
|
<input type="password" id="register_input_password_2" name="password_2" placeholder="password again">
|
2019-06-16 00:03:54 +00:00
|
|
|
<button type="submit" id="register_input_button" class="green_button" onclick="register_form()">Register</button>
|
2016-12-21 09:11:50 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="message_area">
|
2016-12-18 13:12:14 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
2016-12-21 09:11:50 +00:00
|
|
|
var login_input_username = document.getElementById("login_input_username");
|
|
|
|
var login_input_password = document.getElementById("login_input_password");
|
|
|
|
var login_submit_button = document.getElementById("login_submit_button");
|
2018-07-23 02:12:08 +00:00
|
|
|
common.bind_box_to_button(login_input_username, login_submit_button);
|
|
|
|
common.bind_box_to_button(login_input_password, login_submit_button);
|
2016-12-21 09:11:50 +00:00
|
|
|
|
|
|
|
var register_input_username = document.getElementById("register_input_username");
|
|
|
|
var register_input_password_1 = document.getElementById("register_input_password_1");
|
|
|
|
var register_input_password_2 = document.getElementById("register_input_password_2");
|
|
|
|
var register_input_button = document.getElementById("register_input_button");
|
2018-07-23 02:12:08 +00:00
|
|
|
common.bind_box_to_button(register_input_username, register_input_button);
|
|
|
|
common.bind_box_to_button(register_input_password_1, register_input_button);
|
|
|
|
common.bind_box_to_button(register_input_password_2, register_input_button);
|
2016-12-21 09:11:50 +00:00
|
|
|
|
|
|
|
var message_area = document.getElementById("message_area");
|
|
|
|
|
2018-07-29 08:25:53 +00:00
|
|
|
function login_form()
|
2016-12-21 09:11:50 +00:00
|
|
|
{
|
|
|
|
var username = document.getElementById("login_input_username").value;
|
|
|
|
var password = document.getElementById("login_input_password").value;
|
|
|
|
if (username == "" || password == "")
|
|
|
|
{
|
2018-07-29 08:25:53 +00:00
|
|
|
common.create_message_bubble(message_area, "message_negative", "Fill out the form, yo.");
|
2016-12-21 09:11:50 +00:00
|
|
|
return;
|
|
|
|
}
|
2018-09-23 23:50:27 +00:00
|
|
|
api.users.login(username, password, receive_callback)
|
2018-07-29 08:25:53 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
function register_form()
|
2016-12-21 09:11:50 +00:00
|
|
|
{
|
|
|
|
var username = document.getElementById("register_input_username").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 == "")
|
|
|
|
{
|
2018-07-29 08:25:53 +00:00
|
|
|
common.create_message_bubble(message_area, "message_negative", "Fill out the form, yo.");
|
2016-12-21 09:11:50 +00:00
|
|
|
return;
|
|
|
|
}
|
2018-09-23 23:50:27 +00:00
|
|
|
api.users.register(username, password_1, password_2, receive_callback);
|
2016-12-21 09:11:50 +00:00
|
|
|
}
|
2018-07-29 08:25:53 +00:00
|
|
|
|
2016-12-21 09:11:50 +00:00
|
|
|
function receive_callback(response)
|
|
|
|
{
|
2018-02-18 02:47:17 +00:00
|
|
|
response = response["data"];
|
2017-03-08 05:15:15 +00:00
|
|
|
if ("error_type" in response)
|
2016-12-21 09:11:50 +00:00
|
|
|
{
|
2018-07-29 08:25:53 +00:00
|
|
|
common.create_message_bubble(message_area, "message_negative", response["error_message"]);
|
|
|
|
return;
|
2016-12-21 09:11:50 +00:00
|
|
|
}
|
|
|
|
else
|
|
|
|
{
|
|
|
|
window.location.href = "/";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-12-18 13:12:14 +00:00
|
|
|
</script>
|
|
|
|
</html>
|