Redesign sign in screen

app/blueprints/users/account.py

@@ -33,8 +33,8 @@ from . import bp
 class LoginForm(FlaskForm):
 	username = StringField("Username or email", [InputRequired()])
 	password = PasswordField("Password", [InputRequired(), Length(6, 100)])
-	remember_me = BooleanField("Remember me")
+	remember_me = BooleanField("Remember me", default=True)
-	submit = SubmitField("Login")
+	submit = SubmitField("Sign in")
 
 
 def handle_login(form):
@@ -86,6 +86,9 @@ def login():
 		if ret:
 			return ret
 
+	if request.method == "GET":
+		form.remember_me.data = True
+
 
 	return render_template("users/login.html", form=form)
 

app/scss/components.scss

@@ -169,3 +169,43 @@ blockquote {
 		margin-bottom: 0.5em;
 	}
 }
+
+
+.signin {
+	width: 100%;
+	max-width: 330px;
+	padding: 15px;
+	margin: 0 auto;
+
+  	.form-control {
+		position: relative;
+		box-sizing: border-box;
+		height: auto;
+		padding: 10px;
+		font-size: 16px;
+	}
+
+	.form-group {
+		margin-bottom: 0;
+	}
+
+	.form-control:focus {
+		z-index: 2;
+	}
+
+	.checkbox {
+		font-weight: 400;
+	}
+
+	input[type="text"] {
+		margin-bottom: -1px;
+		border-bottom-right-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+
+	input[type="password"] {
+		margin-bottom: 10px;
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+	}
+}

app/templates/base.html

@@ -7,7 +7,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>{% block title %}title{% endblock %} - {{ config.USER_APP_NAME }}</title>
 	<link rel="stylesheet" type="text/css" href="/static/bootstrap.css">
-	<link rel="stylesheet" type="text/css" href="/static/custom.css?v=21">
+	<link rel="stylesheet" type="text/css" href="/static/custom.css?v=22">
 	<link rel="search" type="application/opensearchdescription+xml" href="/static/opensearch.xml" title="ContentDB" />
 	<link rel="shortcut icon" href="/favicon-16.png" sizes="16x16">
 	<link rel="icon" href="/favicon-128.png" sizes="128x128">

app/templates/macros/forms.html

@@ -6,9 +6,9 @@
 
 {% macro render_field(field, label=None, label_visible=true, right_url=None, right_label=None, fieldclass=None, hint=None) -%}
 	<div class="form-group {% if field.errors %}has-danger{% endif %} {{ kwargs.pop('class_', '') }}">
-		{% if field.type != 'HiddenField' and label_visible %}
+		{% if field.type != 'HiddenField' %}
 			{% if not label and label != "" %}{% set label=field.label.text %}{% endif %}
-			{% if label %}<label for="{{ field.id }}">{{ label|safe }}</label>{% endif %}
+			{% if label %}<label for="{{ field.id }}" {% if not label_visible %}class="sr-only"{% endif %}>{{ label|safe }}</label>{% endif %}
 		{% endif %}
 		{{ field(class_=fieldclass or 'form-control', **kwargs) }}
 		{% if hint %}

app/templates/users/login.html

@@ -4,61 +4,36 @@
 	Sign in
 {% endblock %}
 
-{% block content %}
+{% block container %}
-<div class="row">
+	<main class="text-center pt-5">
-	<div class="col-sm-8">
-		<div class="card">
 		{% from "macros/forms.html" import render_field, render_checkbox_field, render_submit_field %}
-			<h2 class="card-header">{%trans%}Sign in{%endtrans%}</h2>
+		<form class="signin" method="POST">
-
-			<form action="" method="POST" class="form card-body" role="form">
 			{{ form.hidden_tag() }}
 
-				{# Username or Email field #}
+			<h1 class="h3 mb-4 font-weight-normal">Sign in</h1>
-				{{ render_field(form.username, tabindex=110) }}
 
-				{# Password field #}
+			{{ render_field(form.username, tabindex=110, label_visible=False, placeholder=_("Username or email")) }}
-				{% set field = form.password %}
+			{{ render_field(form.password, tabindex=120, label_visible=False, placeholder=_("Password")) }}
-				<div class="form-group {% if field.errors %}has-error{% endif %}">
+			<div class="row mb-3">
-					<label for="{{ field.id }}" class="control-label">{{ field.label.text }}
+				{{ render_checkbox_field(form.remember_me, tabindex=130, class_="col-sm") }}
-						<a href="{{ url_for('users.forgot_password') }}" tabindex='195'>
+				<a class="col-sm" href="{{ url_for('users.forgot_password') }}">
-							[{%trans%}Forgot my password{%endtrans%}]</a>
+					{{ _("Forgot my password") }}
-					</label>
+				</a>
-					{{ field(class_='form-control', tabindex=120) }}
-					{% if field.errors %}
-					{% for e in field.errors %}
-					<p class="help-block">{{ e }}</p>
-					{% endfor %}
-					{% endif %}
 			</div>
+			{{ render_submit_field(form.submit, tabindex=140, class_="btn btn-lg btn-primary btn-block") }}
 
-				{# Remember me #}
+			<hr class="my-5" />
-				{{ render_checkbox_field(form.remember_me, tabindex=130) }}
 
-				{# Submit button #}
 			<p>
-					{{ render_submit_field(form.submit, tabindex=180) }}
+				<a class="btn btn-secondary mr-3" href="{{ url_for('github.start') }}">
+					<i class="fab fa-github mr-1"></i>
+					{{ _("GitHub") }}
+				</a>
+				<a class="btn btn-secondary" href="{{ url_for('users.claim') }}">
+					<i class="fas fa-user-plus mr-1"></i>
+					{{ _("Register") }}
+				</a>
 			</p>
 		</form>
-		</div>
+	</main>
-
-		<div class="card mt-4">
-			<h2 class="card-header">{%trans%}Sign in with Github{%endtrans%}</h2>
-			<div class="card-body">
-				<a class="btn btn-primary" href="{{ url_for('github.start') }}">GitHub</a>
-			</div>
-		</div>
-	</div>
-
-	<aside class="col-sm-4">
-		<div class="card">
-			<h2 class="card-header">{%trans%}New here?{%endtrans%}</h2>
-			<div class="card-body">
-				<p>Create an account using your forum account or email.</p>
-
-				<a href="{{ url_for('users.claim') }}" class="btn btn-primary">{%trans%}Claim your account{%endtrans%}</a>
-			</div>
-		</div>
-	</aside>
-</div>
 {% endblock %}