Improve login page UI

This commit is contained in:
pluja 2020-10-06 20:14:30 +02:00
parent 282618b6b8
commit 5304aadbfa
3 changed files with 19 additions and 19 deletions

View File

@ -5,10 +5,11 @@ from app.models import User
class LoginForm(FlaskForm): class LoginForm(FlaskForm):
style={'class': 'ui primary button'}
username = StringField('Username', validators=[DataRequired()]) username = StringField('Username', validators=[DataRequired()])
password = PasswordField('Password', validators=[DataRequired()]) password = PasswordField('Password', validators=[DataRequired()])
remember_me = BooleanField('Remember Me') remember_me = BooleanField('Remember Me')
submit = SubmitField('Sign In') submit = SubmitField('Sign In', render_kw=style)
class SearchForm(FlaskForm): class SearchForm(FlaskForm):
username = StringField('Username') username = StringField('Username')

View File

@ -45,17 +45,18 @@
{% with messages = get_flashed_messages() %} {% with messages = get_flashed_messages() %}
{% if messages %} {% if messages %}
<div class="ui info message"> <div class="text centered container ui">
<div class="header"> <div class="ui info message">
Information <div class="header">
Information
</div>
<ul class="list">
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
</div> </div>
<ul class="list">
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
</div> </div>
</ul>
{% endif %} {% endif %}
{% endwith %} {% endwith %}

View File

@ -11,13 +11,13 @@
</div> </div>
</div> </div>
{% endif %} {% endif %}
<h2 class="ui centered header">Login</h2> <h2 class="ui centered header">LOGIN</h2>
<div class="ui grid"> <div class="text center aligned container ui" id="container">
<div class="ui one column stackable center aligned page grid" id="container"> <div class="text center aligned container ui">
<div class="row">
<form class="ui form" action="" method="post" novalidate> <form class="ui form" action="" method="post" novalidate>
{{ form.hidden_tag() }} {{ form.hidden_tag() }}
<p> <p>
<i class="user icon"></i>
{{ form.username.label }}<br> {{ form.username.label }}<br>
{{ form.username(size=32) }}<br> {{ form.username(size=32) }}<br>
{% for error in form.username.errors %} {% for error in form.username.errors %}
@ -25,6 +25,7 @@
{% endfor %} {% endfor %}
</p> </p>
<p> <p>
<i class="key icon"></i>
{{ form.password.label }}<br> {{ form.password.label }}<br>
{{ form.password(size=32) }}<br> {{ form.password(size=32) }}<br>
{% for error in form.password.errors %} {% for error in form.password.errors %}
@ -35,11 +36,8 @@
<p>{{ form.submit() }}</p> <p>{{ form.submit() }}</p>
</form> </form>
</div> </div>
<div class="row"> <div class="text center aligned container ui">
<div class="ui compact centered message"> <a href="{{ url_for('register') }}"><button class="ui button">Register</button></a>
<p>New user? <a href="{{ url_for('register') }}">Click to Register!</a></p>
</div>
</div> </div>
</div>
</div> </div>
{% endblock %} {% endblock %}