Improved login form

demo/demo/templates/admin/login.html

@@ -1,12 +1,32 @@
 {% extends 'admin/login.html' %}
+{% load i18n %}
 
-{% block footer %}
+{% block branding %}
+    <div class="suit-login-graphic">
+        <svg width="75px" height="75px" viewBox="0 0 90 90" version="1.1" xmlns="http://www.w3.org/2000/svg"
+             xmlns:xlink="http://www.w3.org/1999/xlink">
+            <desc>Copyright: Businessman by Ferran Brown from the Noun Project.</desc>
+            <defs></defs>
+            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <g id="Group" fill="#000000">
+                    <circle id="Oval" cx="44.998" cy="17.583" r="17.582"></circle>
+                    <polygon id="Shape" points="49.699 41.668 40.299 41.668 41.299 47.447 48.699 47.447"></polygon>
+                    <path d="M78.249,50.844 L56.41,41.668 L50.022,56.59 L48.668,49.109 L46.432,49.109 L43.565,49.109 L41.251,49.109 L40.007,56.609 L40.014,56.685 L33.588,41.668 L11.351,50.844 L0.693,90 L15.462,90 L20.251,73.813 L21.503,90 L44.998,90 L68.494,90 L69.748,73.813 L74.535,90 L89.306,90 L78.249,50.844 L78.249,50.844 Z M55.962,65.105 L64.148,59.568 L66.851,65.201 L55.962,65.105 L55.962,65.105 Z"
+                          id="Shape"></path>
+                </g>
+            </g>
+        </svg>
+    </div>
     {{ block.super }}
-    <hr>
-    <p style="padding: 0 1.5rem">
+{% endblock %}
+
+{% block footer %}
+    <p style="margin: 0; padding: 1rem 0; background-color: #F1F1F1">
         <span class="text-muted">For demo use: </span>
         <br/>
         Username: <strong>demo</strong><br/>
         Password: <strong>demodemo</strong>
     </p>
+    {{ block.super }}
 {% endblock %}
+

suit/sass/pages/_login.scss

@@ -1,18 +1,105 @@
+.login #container {
+  background: #fff;
+  border-radius: 4px;
+  overflow: hidden;
+  width: 28em;
+  margin: 0 auto;
+  @include media-breakpoint-up(sm) {
+    min-width: 400px;
+    margin-top: 15vh;
+  }
+}
+
 body.login {
+  $spacing: 1.5rem;
+  svg {
+    * {
+      fill: $body-color;
+    }
+  }
+  .suit-login-graphic {
+    display: block;
+    margin: 2rem auto $spacing;
+  }
+  #content {
+    padding: $spacing;
+    .errornote {
+      border-radius: 0;
+      border: 0;
+    }
+  }
   #header {
+    background-color: transparent;
+    padding: 0;
     #branding {
+      padding: 0;
       flex-basis: 100%;
-      padding-left: 0;
+      text-align: center;
       #site-name {
-        margin: .25rem 0;
-        a {
-          display: block;
+        margin: 0 auto;
+        &:first-child {
+          margin-top: $spacing*1.5;
         }
-        .header-label {
-          padding-top: .35rem;
-          float: right;
+        a {
+          @extend .text-semibold;
+          &, &:hover {
+            color: $body-color;
+          }
+          .header-label {
+            font-weight: normal;
+            text-align: center;
+            margin-top: .3rem;
+          }
         }
       }
     }
   }
+  .errorlist {
+    @include reset-list();
+    margin: -.5rem $spacing/2 $spacing;
+    color: $alert-danger-text;
+  }
+  .form-row {
+    input:not([type='hidden']) {
+      padding-left: $spacing/2;
+      padding-right: $spacing/2;
+      margin-bottom: $spacing/1.75;
+      &:not(:focus) {
+        background-color: $body-bg;
+        border-color: $body-bg;
+      }
+    }
+    &.has-danger {
+      input:not([type='hidden']) {
+        border-color: $alert-danger-text;
+      }
+    }
+  }
+  .submit-row {
+    label {
+      display: none;
+    }
+    input[type='submit'] {
+      display: block;
+      width: 100%;
+      margin: $spacing 0 0 0;
+      border: none;
+      //color: #fff !important;
+      text-align: center;
+      @extend .btn;
+      @extend .btn-lg;
+      @extend .btn-primary;
+      //background-color: desaturate($link-color-brighter, 5%);
+      padding: $spacing/1.5 $spacing;
+      //&:hover, &:focus {
+      //  background-color: $link-color-bright;
+      //  &:active {
+      //    background-color: $link-color;
+      //  }
+      //}
+      //&:active {
+      //  background-color: $link-color;
+      //}
+    }
+  }
 }

suit/static/admin/css/login.css

@@ -0,0 +1 @@
+/* Overridden by Django Suit empty stylesheet to reset original style. */

suit/templates/admin/login.html

@@ -0,0 +1,62 @@
+{% extends 'admin/login.html' %}
+{% load i18n %}
+
+
+{% block content %}
+
+    {% if form.errors and not form.non_field_errors %}
+        <p class="errornote">
+            {% if form.errors.items|length == 1 %}{% trans "Please correct the error below." %}{% else %}
+                {% trans "Please correct the errors below." %}{% endif %}
+        </p>
+    {% endif %}
+
+    {% if form.non_field_errors %}
+        {% for error in form.non_field_errors %}
+            <p class="errornote">
+                {{ error }}
+            </p>
+        {% endfor %}
+    {% endif %}
+
+    <div id="content-main">
+
+        {% if user.is_authenticated %}
+            <p class="errornote">
+                {% blocktrans trimmed %}
+                    You are authenticated as {{ username }}, but are not authorized to
+                    access this page. Would you like to login to a different account?
+                {% endblocktrans %}
+            </p>
+        {% endif %}
+
+        <form action="{{ app_path }}" method="post" id="login-form">{% csrf_token %}
+            <div class="form-row{% if form.username.errors %} has-danger{% endif %}">
+                <input type="text" name="{{ form.username.html_name }}" id="{{ form.username.id_for_label }}"
+                       placeholder="{{ form.username.label }}" maxlength="254" value="{% if form.username.value %}{{ form.username.value }}{% endif %}" class="form-control form-control-lg">
+                {{ form.username.errors }}
+            </div>
+            <div class="form-row{% if form.password.errors %} has-danger{% endif %}">
+                <input type="password" name="{{ form.password.html_name }}" id="{{ form.password.id_for_label }}" placeholder="{{ form.password.label }}" class="form-control form-control-lg">
+                {{ form.password.errors }}
+                <input type="hidden" name="next" value="{{ next }}"/>
+            </div>
+            {% url 'admin_password_reset' as password_reset_url %}
+            {% if password_reset_url %}
+                <div class="password-reset-link">
+                    <a href="{{ password_reset_url }}">{% trans 'Forgotten your password or username?' %}</a>
+                </div>
+            {% endif %}
+            <div class="submit-row">
+                <label>&nbsp;</label><input type="submit" value="{% trans 'Log in' %}"/>
+            </div>
+        </form>
+
+        <script type="text/javascript">
+            if(!document.getElementById('id_username').value)
+                document.getElementById('id_username').focus();
+            else
+                document.getElementById('id_password').focus();
+        </script>
+    </div>
+{% endblock %}

suit/templatetags/suit_forms.py

@@ -115,3 +115,12 @@ def suit_form_conf(context, param_name, inline_admin_formset=None):
     if param_by_model_admin is not None:
         return param_by_model_admin
     return get_config(param_name, context['request'])
+
+
+@register.filter
+def suit_form_field_placeholder(field, placeholder):
+    """
+    Get CSS class for field by widget name, for easier styling
+    """
+    field.field.widget.attrs['placeholder'] = placeholder
+    return field