voussoir/etiquette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Make login page javascript-based instead of html form (sorry)

Browse source
This commit is contained in:
voussoir 2016-12-21 01:11:50 -08:00
parent 36acf79bbe
commit 5038d92b93
7 changed files with 151 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
etiquette.py
View file

@ -178,7 +178,7 @@ def get_register():
@decorators.required_fields(['username', 'password'])
def post_login():
if session_manager.get(request):
flask.abort(403, 'You\'re already signed in.')
return jsonify.make_json_response({'error': 'You\'re already signed in'}, status=403)
username = request.form['username']
password = request.form['password']
@ -186,43 +186,46 @@ def post_login():
user = P.get_user(username=username)
user = P.login(user.id, password)
except (exceptions.NoSuchUser, exceptions.WrongLogin):
flask.abort(422, 'Wrong login.')
return jsonify.make_json_response({'error': 'Wrong login'}, status=422)
session = sessions.Session(request, user)
session_manager.add(session)
response = flask.Response('redirect', status=302, headers={'Location': '/'})
return response
return jsonify.make_json_response({})
@site.route('/register', methods=['POST'])
@session_manager.give_token
@decorators.required_fields(['username', 'password_1', 'password_2'])
def post_register():
if session_manager.get(request):
flask.abort(403, 'You\'re already signed in.')
return jsonify.make_json_response({'error': 'You\'re already signed in'}, status=403)
username = request.form['username']
password_1 = request.form['password_1']
password_2 = request.form['password_2']
if password_1 != password_2:
flask.abort(422, 'Passwords do not match.')
return jsonify.make_json_response({'error': 'Passwords do not match'}, status=422)
try:
user = P.register_user(username, password_1)
except exceptions.UsernameTooShort as e:
flask.abort(422, 'Username shorter than minimum of %d' % P.config['min_username_length'])
error = 'Username shorter than minimum of %d' % P.config['min_username_length']
except exceptions.UsernameTooLong as e:
flask.abort(422, 'Username longer than maximum of %d' % P.config['max_username_length'])
error = 'Username longer than maximum of %d' % P.config['max_username_length']
except exceptions.InvalidUsernameChars as e:
flask.abort(422, 'Username contains invalid characters %s' % e.args[0])
error = 'Username contains invalid characters %s' % e.args[0]
except exceptions.PasswordTooShort as e:
flask.abort(422, 'Password is shorter than minimum of %d' % P.config['min_password_length'])
error = 'Password is shorter than minimum of %d' % P.config['min_password_length']
except exceptions.UserExists as e:
flask.abort(422, 'User %s already exists' % e.args[0])
error = 'User %s already exists' % e.args[0]
else:
error = None
if error is not None:
return jsonify.make_json_response({'error': error}, status=422)
session = sessions.Session(request, user)
session_manager.add(session)
response = flask.Response('redirect', status=302, headers={'Location': '/'})
return response
return jsonify.make_json_response({})
@site.route('/logout', methods=['GET', 'POST'])
@session_manager.give_token

19
static/common.css
View file

@ -169,16 +169,29 @@ li
font-family: monospace;
line-height: 1.3;
}
.callback_message_positive, .callback_message_negative
#message_area
{
overflow-y: auto;
background-color: rgba(0, 0, 0, 0.1);
width: 100%;
height: 100%;
max-height: 300px;
display: flex;
flex-direction: column;
justify-content center;
align-items: center;
flex: 2;
}
.message_positive, .message_negative
{
width: 80%;
margin: 4px;
}
.callback_message_positive
.message_positive
{
background-color: #afa;
}
.callback_message_negative
.message_negative
{
background-color: #faa;
}

2
static/common.js
View file

@ -29,9 +29,9 @@ function post(url, data, callback)
{
if (request.readyState == 4)
{
var text = request.responseText;
if (callback != null)
{
var text = request.responseText;
console.log(text);
callback(JSON.parse(text));
}

151
templates/login.html
View file

@ -8,33 +8,6 @@
<script src="/static/common.js"></script>
<style>
#content_body
{
justify-content: center;
align-content: center;
flex: 1;
}
#login_register_box
{
margin: auto;
display: flex;
flex-direction: row;
}
form
{
flex: 1;
display: flex;
flex-direction: column;
padding: 25px;
margin: 25px;
border: 1px black solid;
border-radius: 6px;
}
form > *
{
margin-top: 5px;
margin-bottom: 5px;
}
input
{
width: 300px;
@ -43,6 +16,42 @@ button
{
width: 80px;
}
#content_body
{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
#login_register_box
{
display: flex;
flex-direction: row;
}
#login_form,
#register_form
{
padding: 10px;
border-radius: 5px;
display: flex;
flex-direction: column;
border: 1px solid black;
margin: 10px;
}
#login_form > *,
#register_form > *
{
margin-top: 5px;
margin-bottom: 5px;
}
</style>
</head>
@ -51,24 +60,86 @@ button
{{header.make_header(session=session)}}
<div id="content_body">
<div id="login_register_box">
<form id="login_form" action="/login" method="post">
<span>Log in</span>
<input type="text" name="username" placeholder="username" autofocus>
<input type="password" name="password" placeholder="password">
<button type="submit">Log in</button>
</form>
<form id="register_form" action="/register" method="post">
<span>Register</span>
<input type="text" name="username" placeholder="username">
<input type="password" name="password_1" placeholder="password">
<input type="password" name="password_2" placeholder="password again">
<button type="submit">Register</button>
</form>
<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">
<button type="submit" id="login_submit_button" onclick="submit_login()">Log in</button>
</div>
<div id="register_form" action="/register" method="post">
<span>Register</span>
<input type="text" id="register_input_username" name="username" placeholder="username">
<input type="password" id="register_input_password_1" name="password_1" placeholder="password">
<input type="password" id="register_input_password_2" name="password_2" placeholder="password again">
<button type="submit" id="register_input_button" onclick="submit_register()">Register</button>
</div>
</div>
<div id="message_area">
</div>
</div>
</body>
<script type="text/javascript">
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");
bind_box_to_button(login_input_username, login_submit_button);
bind_box_to_button(login_input_password, login_submit_button);
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");
bind_box_to_button(register_input_username, register_input_button);
bind_box_to_button(register_input_password_1, register_input_button);
bind_box_to_button(register_input_password_2, register_input_button);
var message_area = document.getElementById("message_area");
function submit_login()
{
var username = document.getElementById("login_input_username").value;
var password = document.getElementById("login_input_password").value;
if (username == "" || password == "")
{
create_message_bubble(message_area, "message_negative", "Fill out the form yo", 8000);
return;
}
var url = "/login";
data = new FormData();
data.append("username", username);
data.append("password", password);
return post(url, data, receive_callback);
}
function submit_register()
{
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 == "")
{
create_message_bubble(message_area, "message_negative", "Fill out the form yo", 8000);
return;
}
var url = "/register";
data = new FormData();
data.append("username", username);
data.append("password_1", password_1);
data.append("password_2", password_2);
return post(url, data, receive_callback);
}
function receive_callback(response)
{
if ("error" in response)
{
create_message_bubble(message_area, "message_negative", response["error"], 8000);
}
else
{
window.location.href = "/";
}
}
</script>
</html>

4
templates/photo.html
View file

@ -192,13 +192,13 @@ function receive_callback(response)
var tagname = response["tagname"];
if ("error" in response)
{
message_positivity = "callback_message_negative";
message_positivity = "message_negative";
message_text = '"' + tagname + '" ' + response["error"];
}
else if ("action" in response)
{
var action = response["action"];
message_positivity = "callback_message_positive";
message_positivity = "message_positive";
if (action == "add_tag")
{
message_text = "Added tag " + tagname;

2
templates/search.html
View file

@ -21,7 +21,7 @@ form
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
}
.search_warning
{

4
templates/tags.html
View file

@ -131,13 +131,13 @@ function receive_callback(responses)
var tagname = response["tagname"];
if ("error" in response)
{
message_positivity = "callback_message_negative";
message_positivity = "message_negative";
message_text = '"' + tagname + '" ' + response["error"];
}
else if ("action" in response)
{
var action = response["action"];
message_positivity = "callback_message_positive";
message_positivity = "message_positive";
if (action == "new_tag")
{message_text = "Created tag " + tagname;}