Style forms for register and sign up

nextcloudappstore/core/static/assets/css/style.css

@@ -18,3 +18,41 @@
     text-decoration: underline;
 }
 
+.login {
+    max-width: 350px;
+    margin: auto;
+    padding: 15px;
+}
+
+form .text-danger {
+    padding: 15px;
+}
+
+.socialaccount-providers {
+    text-align: center;
+    margin: 0;
+    padding: 15px;
+}
+
+.socialaccount-providers li {
+    list-style-type: none;
+    display: inline-block;
+}
+
+.socialaccount-providers li a {
+    padding: 6px 12px;
+    color: #fff;
+    background-color: #5cb85c;
+    border-color: #4cae4c;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.42857143;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    text-decoration: none;
+}

nextcloudappstore/core/templates/account/login.html

@@ -1,53 +1,62 @@
 {% extends "account/base.html" %}
 
+{% load css_class %}
 {% load i18n %}
 {% load account socialaccount %}
 
 {% block head-title %} - {% trans "Sign In" %}{% endblock %}
 
 {% block content %}
 
-<h1>{% trans "Log In" %}</h1>
-
 {% get_providers as socialaccount_providers %}
 
-{% if socialaccount_providers %}
-<p>{% blocktrans with site.name as site_name %}Please log in with one
-of your existing third party accounts. Or, <a href="{{ signup_url }}">sign up</a>
-for a {{ site_name }} account and sign in below:{% endblocktrans %}</p>
-
-<div class="socialaccount_ballot">
+<div class="login">
+    <h1 class="text-center">{% trans "Log In" %}</h1>
 
-    <ul class="socialaccount_providers">
-        {% include "socialaccount/snippets/provider_list.html" with process="login" %}
-    </ul>
-    <div class="login-or">{% trans 'or' %}</div>
-</div>
+    <hr>
+    {% if socialaccount_providers %}
+        <ul class="socialaccount-providers">
+            {% include "socialaccount/snippets/provider_list.html" with process="login" %}
+        </ul>
+        {% include "socialaccount/snippets/login_extra.html" %}
 
-{% include "socialaccount/snippets/login_extra.html" %}
-
-{% else %}
-<p>{% blocktrans %}If you have not created an account yet, then please
-<a href="{{ signup_url }}">sign up</a> first.{% endblocktrans %}</p>
-{% endif %}
-
-<form class="login" method="POST" action="{% url 'account_login' %}">
-    {% csrf_token %}
-    <table>
-    {{ form }}
-    <tr>
-        <td>
-            <a class="button secondaryAction" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
-        </td>
-        <td>
-            <button class="primaryAction" type="submit">{% trans "Log in" %}</button>
-        </td>
-    </tr>
-    </table>
-
-    {% if redirect_field_value %}
-    <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
     {% endif %}
-</form>
+
+    <hr>
+
+    <form method="POST" action="{% url 'account_login' %}">
+        {% csrf_token %}
+
+        {% for field in form %}
+        <div class="form-group {% if field.errors %}has-error has-feedback{% endif %}">
+            <label class="control-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
+
+            {{ field|css_class:'form-control' }}
+
+            {% if field.errors %}
+                {% for error in field.errors %}
+                    <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
+                    <span class="sr-only">(error)</span>
+                    <p class="text-danger">{{ error|escape }}</p>
+                {% endfor %}
+            {% endif %}
+
+            {% if field.help_text %}
+                <p class="help-block">{{ field.help_text|safe }}</p>
+            {% endif %}
+
+        </div>
+        {% endfor %}
+        <p><button class="btn btn-primary btn-block" type="submit">{% trans 'Log in' %}</button></p>
+        <p class="row text-center">
+            <a class="col-lg-6" href="{% url 'account_reset_password' %}">{% trans 'Forgot password' %}</a>
+            <a class="col-lg-6" href="{% url 'account_signup' %}">{% trans 'Register' %}</a>
+        </p>
+
+        {% if redirect_field_value %}
+            <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
+        {% endif %}
+    </form>
+</div>
 
 {% endblock %}

nextcloudappstore/core/templates/account/signup.html

@@ -1,42 +1,58 @@
 {% extends "account/base.html" %}
-{% load socialaccount %}
 
+{% load socialaccount %}
+{% load css_class %}
 {% load i18n %}
 
 {% block head-title %} - {% trans "Signup" %}{% endblock %}
 
 {% block content %}
-<h1>{% trans "Sign Up" %}</h1>
-
-<p>{% blocktrans %}Already have an account? Then please <a href="{{ login_url }}">log in</a>.{% endblocktrans %}</p>
-
 {% get_providers as socialaccount_providers %}
 
-{% if socialaccount_providers %}
-<p>{% blocktrans with site.name as site_name %}Please sign in with one
-of your existing third party accounts.{% endblocktrans %}</p>
-
-<div class="socialaccount_ballot">
-
-  <ul class="socialaccount_providers">
-    {% include "socialaccount/snippets/provider_list.html" with process="login" %}
-  </ul>
-  <div class="login-or">
-    Or, sign up for a {{ site_name }} account.
-  </div>
-
+<div class="login">
+    <h1 class="text-center">{% trans "Register" %}</h1>
+
+    <hr>
+    {% if socialaccount_providers %}
+    <ul class="socialaccount-providers">
+        {% include "socialaccount/snippets/provider_list.html" with process="login" %}
+    </ul>
+    {% include "socialaccount/snippets/login_extra.html" %}
+
+    {% endif %}
+
+    <hr>
+
+    <form method="POST" action="{% url 'account_signup' %}">
+        {% csrf_token %}
+
+        {% for field in form %}
+        <div class="form-group {% if field.errors %}has-error has-feedback{% endif %}">
+            {% if not field.is_hidden %}
+            <label class="control-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
+            {% endif %}
+
+            {{ field|css_class:'form-control' }}
+
+            {% if field.errors %}
+            {% for error in field.errors %}
+            <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
+            <span class="sr-only">(error)</span>
+            <p class="text-danger">{{ error|escape }}</p>
+            {% endfor %}
+            {% endif %}
+
+            {% if field.help_text %}
+            <p class="help-block">{{ field.help_text|safe }}</p>
+            {% endif %}
+        </div>
+        {% endfor %}
+        <p><button class="btn btn-primary btn-block" type="submit">{% trans 'Register' %}</button></p>
+
+        {% if redirect_field_value %}
+        <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
+        {% endif %}
+    </form>
 </div>
-{% endif %}
-
-<form class="signup" id="signup_form" method="post" action="{% url 'account_signup' %}">
-  {% csrf_token %}
-  <table>
-  {{ form }}
-  </table>
-  {% if redirect_field_value %}
-  <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
-  {% endif %}
-  <button type="submit">{% trans "Sign Up" %} &raquo;</button>
-</form>
 
 {% endblock %}

nextcloudappstore/core/templatetags/css_class.py

@@ -0,0 +1,8 @@
+from django import template
+
+register = template.Library()
+
+
+@register.filter(name='css_class')
+def css_class(value, arg):
+    return value.as_widget(attrs={'class': arg})