LibreGaming
/
contentdb
14
0
Fork 0
Code Issues 13 Pull Requests Projects Releases Wiki Activity

Redesign sign in screen

This commit is contained in:
rubenwardy 2021-02-03 00:56:43 +00:00
parent b5f47b1b73
commit 21cf5b57c1
5 changed files with 76 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/blueprints/users/account.py
View File

@ -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")
submit = SubmitField("Login")
remember_me = BooleanField("Remember me", default=True)
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)

40
app/scss/components.scss
View File

@ -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;
}
}

2
app/templates/base.html
View File

@ -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">

4
app/templates/macros/forms.html
View File

@ -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 %}

81
app/templates/users/login.html
View File

@ -1,64 +1,39 @@
{% extends "base.html" %}
{% block title %}
Sign in
Sign in
{% endblock %}
{% block content %}
<div class="row">
<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>
{% block container %}
<main class="text-center pt-5">
{% from "macros/forms.html" import render_field, render_checkbox_field, render_submit_field %}
<form class="signin" method="POST">
{{ form.hidden_tag() }}
<form action="" method="POST" class="form card-body" role="form">
{{ form.hidden_tag() }}
<h1 class="h3 mb-4 font-weight-normal">Sign in</h1>
{# Username or Email field #}
{{ render_field(form.username, tabindex=110) }}
{# Password field #}
{% set field = form.password %}
<div class="form-group {% if field.errors %}has-error{% endif %}">
<label for="{{ field.id }}" class="control-label">{{ field.label.text }}
<a href="{{ url_for('users.forgot_password') }}" tabindex='195'>
[{%trans%}Forgot my password{%endtrans%}]</a>
</label>
{{ field(class_='form-control', tabindex=120) }}
{% if field.errors %}
{% for e in field.errors %}
<p class="help-block">{{ e }}</p>
{% endfor %}
{% endif %}
</div>
{# Remember me #}
{{ render_checkbox_field(form.remember_me, tabindex=130) }}
{# Submit button #}
<p>
{{ render_submit_field(form.submit, tabindex=180) }}
</p>
</form>
</div>
<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>
{{ render_field(form.username, tabindex=110, label_visible=False, placeholder=_("Username or email")) }}
{{ render_field(form.password, tabindex=120, label_visible=False, placeholder=_("Password")) }}
<div class="row mb-3">
{{ render_checkbox_field(form.remember_me, tabindex=130, class_="col-sm") }}
<a class="col-sm" href="{{ url_for('users.forgot_password') }}">
{{ _("Forgot my password") }}
</a>
</div>
</div>
</div>
{{ render_submit_field(form.submit, tabindex=140, class_="btn btn-lg btn-primary btn-block") }}
<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>
<hr class="my-5" />
<a href="{{ url_for('users.claim') }}" class="btn btn-primary">{%trans%}Claim your account{%endtrans%}</a>
</div>
</div>
</aside>
</div>
<p>
<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>
</main>
{% endblock %}