Skip to content

Commit

Permalink
fix: improve sign in layout
Browse files Browse the repository at this point in the history 
- use same widht columns for info and form giving the form more space
  (the auth buttons or second factor buttons did not fit before)
- use full width login buttons on larger screens to give more space to
  lengthy names
- always show login info pane, but show it after the form on small
  screens
  • Loading branch information
@nijel
nijel committed Oct 22, 2024
1 parent 6ac72c7 commit 3756622
Show file tree
Hide file tree
Showing 5 changed files with 171 additions and 180 deletions.
82 changes: 40 additions & 42 deletions weblate/templates/accounts/2fa.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,48 +12,46 @@

<div class="container">

<h2>{{ site_title }}</h2>
<div class="row">

<div class="col-sm-7">
{% include "snippets/login-info.html" %}
</div>

<div class="col-sm-5">

<h4>{% trans "Second factor sign-in" %}</h4>
<div class="panel panel-default">
<div class="panel-body">
<form method="post">

<p class="help-block">
{% trans "Please complete your sign-in using second factor credential." %}
</p>

{% crispy form %}

<input type="hidden" name="next" value="{{ next }}" />

{% if form.show_submit %}
<input type="submit" value="{% trans "Sign in" %}" class="btn btn-primary btn-full" />
{% endif %}
</form>

{% if second_factor_types %}
<div class="clearfix"></div>
<ul class="login-links">
{% for second_factor in second_factor_types %}
<li><a href="{% url "2fa-login" backend=second_factor %}?next={{ next }}">{% second_factor_name second_factor %}</a></li>
{% endfor %}
</ul>
{% endif %}


</div>
</div>

</div>
</div>
<h2>{{ site_title }}</h2>
<div class="row">

<div class="col-sm-6 col-sm-push-6">

<h4>{% trans "Second factor sign-in" %}</h4>
<div class="panel panel-default">
<div class="panel-body">
<form method="post">

<p class="help-block">
{% trans "Please complete your sign-in using second factor credential." %}
</p>

{% crispy form %}

<input type="hidden" name="next" value="{{ next }}" />

{% if form.show_submit %}
<input type="submit" value="{% trans "Sign in" %}" class="btn btn-primary btn-full" />
{% endif %}
</form>

{% if second_factor_types %}
<div class="clearfix"></div>
<ul class="login-links">
{% for second_factor in second_factor_types %}
<li><a href="{% url "2fa-login" backend=second_factor %}?next={{ next }}">{% second_factor_name second_factor %}</a></li>
{% endfor %}
</ul>
{% endif %}

</div>
</div>
</div>

<div class="col-sm-6 col-sm-pull-6">
{% include "snippets/login-info.html" %}
</div>
</div>
</div>

{% endblock %}
87 changes: 43 additions & 44 deletions weblate/templates/accounts/login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,67 +12,66 @@

<div class="container">

{% if form.errors %}
{% trans "This username/password combination was not found. Please try again." as msg %}
{% show_message "error" msg %}
{% endif %}
{% if form.errors %}
{% trans "This username/password combination was not found. Please try again." as msg %}
{% show_message "error" msg %}
{% endif %}

<h2>{{ site_title }}</h2>
<div class="row">
<h2>{{ site_title }}</h2>
<div class="row">

<div class="col-sm-7">
{% include "snippets/login-info.html" %}
</div>

<div class="col-sm-5">
<div class="col-sm-6 col-sm-push-6">

<h4>{% trans "Sign in" %}</h4>
<div class="panel panel-default">
<div class="panel-body">
<form method="post" action="{% url 'login' %}">
<h4>{% trans "Sign in" %}</h4>
<div class="panel panel-default">
<div class="panel-body">
<form method="post" action="{% url 'login' %}">
{% csrf_token %}
{{ form|crispy }}

{% csrf_token %}
{{ form|crispy }}
<input type="hidden" name="next" value="{{ next }}" />

<input type="hidden" name="next" value="{{ next }}" />
<input type="submit" value="{% trans "Sign in" %}" class="btn btn-primary btn-full" />
</form>

<input type="submit" value="{% trans "Sign in" %}" class="btn btn-primary btn-full" />
</form>
{% if login_backends %}

{% if login_backends %}
<h5 class="login-label">{% trans "Sign in with:" %}</h5>

<h5 class="login-label">{% trans "Sign in with:" %}</h5>
{% for name in login_backends %}
<div class="col-md-6 col-xs-12 btn-auth">
<a href="" class="btn btn-default link-post" data-href="{% url 'social:begin' name %}" {% if next %}data-params='{"next": "{{ next|escapejs }}"}'{% endif %}>{% auth_name name " " %}</a>
</div>
{% endfor %}

{% for name in login_backends %}
<div class="col-sm-6 col-xs-12 btn-auth">
<a href="" class="btn btn-default link-post" data-href="{% url 'social:begin' name %}" {% if next %}data-params='{"next": "{{ next|escapejs }}"}'{% endif %}>{% auth_name name " " %}</a>
</div>
{% endfor %}
{% endif %}

{% endif %}
{% if can_reset or registration_open %}
<div class="clearfix"></div>
<ul class="login-links">
{% if can_reset %}
<li><a href="{% url 'password_reset' %}">{% trans "Forgot your password?" %}</a></li>
{% endif %}

{% if can_reset or registration_open %}
<div class="clearfix"></div>
<ul class="login-links">
{% if can_reset %}
{% url 'password_reset' as reset_url %}
<li><a href="{{ reset_url }}">{% trans "Forgot your password?" %}</a></li>
{% endif %}
{% if registration_open %}
<li><a href="{% url 'register' %}">{% trans "Register new account" %}</a></li>
{% endif %}
</ul>
{% endif %}

{% if registration_open %}
{% url 'register' as register_url %}
<li><a href="{{ register_url }}">{% trans "Register new account" %}</a></li>
{% endif %}
</ul>
{% endif %}


</div>
</div>

</div>
</div>
</div>

</div>
</div>
<div class="col-sm-6 col-sm-pull-6">
{% include "snippets/login-info.html" %}
</div>

</div>
</div>

{% endblock %}
99 changes: 48 additions & 51 deletions weblate/templates/accounts/register.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,75 +12,72 @@

{% if registration_email or registration_backends %}

<div class="container">
<div class="container">

{% if invitation %}
<div class="alert alert-info">
{% include "snippets/invite-info.html" %}
{% translate "Please complete the registration to accept the invitation." %}
</div>
{% endif %}
{% if invitation %}
<div class="alert alert-info">
{% include "snippets/invite-info.html" %}
{% translate "Please complete the registration to accept the invitation." %}
</div>
{% endif %}

{% if form.errors %}
{% trans "Please fix errors in the registration form." as msg%}
{% show_message "error" msg %}
{% endif %}
{% if form.errors %}
{% trans "Please fix errors in the registration form." as msg%}
{% show_message "error" msg %}
{% endif %}

<h2>{{ site_title }}</h2>
<div class="row">
<h2>{{ site_title }}</h2>
<div class="row">

<div class="col-sm-7">
{% include "snippets/login-info.html" %}
</div>
<div class="col-sm-6 col-sm-push-6">

<div class="col-sm-5">
<h4>{% trans "Register in Weblate" %}</h4>

<h4>{% trans "Register in Weblate" %}</h4>
<div class="panel panel-default">
<div class="panel-body">

<div class="panel panel-default">
<div class="panel-body">
{% if registration_email %}

{% if registration_email %}
<form action="{% url 'register' %}" method="post" accept-charset="utf-8">
{% csrf_token %}
{{ form|crispy }}
{% if captcha_form %}
{{ captcha_form|crispy }}
{% endif %}
<input type="submit" value="{% trans 'Register' %}" class="btn btn-primary btn-full" />
</form>

<form action="{% url 'register' %}" method="post" accept-charset="utf-8">
{% endif %}

{% csrf_token %}
{{ form|crispy }}
{% if captcha_form %}
{{ captcha_form|crispy }}
{% endif %}
<input type="submit" value="{% trans 'Register' %}" class="btn btn-primary btn-full" />
</form>
{% if registration_backends %}

{% endif %}
<h5 class="login-label">{% trans "Create an account using:" %}</h5>

{% if registration_backends %}
{% for name in registration_backends %}
<div class="col-sm-6 col-xs-12 btn-auth">
<a href="" class="btn btn-default link-post" data-href="{% url 'social:begin' name %}" {% if next %}data-params='{"next": "{{ next|escapejs }}"}'{% endif %}>{% auth_name name " " %}</a>
</div>
{% endfor %}

<h5 class="login-label">{% trans "Create an account using:" %}</h5>
{% endif %}
</div>
</div>
</div>

{% for name in registration_backends %}
<div class="col-sm-6 col-xs-12 btn-auth">
<a href="" class="btn btn-default link-post" data-href="{% url 'social:begin' name %}" {% if next %}data-params='{"next": "{{ next|escapejs }}"}'{% endif %}>{% auth_name name " " %}</a>
</div>
{% endfor %}
<div class="col-sm-6 col-sm-pull-6">
{% include "snippets/login-info.html" %}
</div>

{% endif %}
</div>

</div>
{% else %}

<p>
{% url 'contact' as contact_url %}
{% trans "Sorry, new registrations are turned off on this site." %}
<a href="{{ contact_url }}">{% trans "You can contact us for more details." %}</a>
</p>
<p>
{% url 'contact' as contact_url %}
{% trans "Sorry, new registrations are turned off on this site." %}
<a href="{{ contact_url }}">{% trans "You can contact us for more details." %}</a>
</p>

{% endif %}


</div>
</div>

</div>
</div>
</div>
{% endblock %}
Loading

0 comments on commit 3756622

Please sign in to comment.