Prettify Login page with SLDS

Login form is constructed with plain html at this moment. I'm going to update it with SLDS styles.

For our purposes we need styles for Form Elements (like input and checkbox), Box, Button, Alert and Grid to align form properly. All these elements can be found here
https://www.lightningdesignsystem.com/

./backend/templates/auth/login.html

{% extends "_base.html" %}

{% block content %}
<div>

    <div class="slds-box slds-size_2-of-3 slds-medium-size_1-of-2 slds-large-size_1-of-3 c-login-box">

        <h2>Login</h2>

        <div>
            {% with messages = get_flashed_messages() %}
                {% if messages %}
                    <div class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_warning" role="alert">
                        <span class="slds-assistive-text">warning</span>
                        <span class="slds-icon_container slds-icon-utility-warning slds-m-right_x-small" title="Description of icon when needed">
                            <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
                                <use xlink:href="/static/slds/icons/utility-sprite/svg/symbols.svg#warning"></use>
                            </svg>
                        </span>
                        <p>{{ messages[0] }}</p>
                    </div>
                {% endif %}
            {% endwith %}

            <form method="POST" action="" class="slds-form">
                <div class="slds-form-element slds-form-element_stacked">
                    <label class="slds-form-element__label">Email</label>
                    <div class="slds-form-element__control">
                        <input class="slds-input" type="email" name="email" placeholder="Your Email" />
                    </div>
                </div>

                <div class="slds-form-element slds-form-element_stacked">
                    <label class="slds-form-element__label">Password</label>
                    <div class="slds-form-element__control">
                        <input class="slds-input"  type="password" name="password" placeholder="Your Password" />
                    </div>
                </div>

                <div class="slds-form-element slds-form-element_stacked">
                    <div class="slds-checkbox">
                        <input type="checkbox" name="remember" id="checkbox-remember-me" />
                        <label class="slds-checkbox__label" for="checkbox-remember-me">
                            <span class="slds-checkbox_faux"></span>
                            <span class="slds-form-element__label">Remember me</span>
                        </label>
                    </div>
                </div>

                <div class="c-right">
                    <button class="slds-button slds-button_brand">Login</button>
                </div>

            </form>
        </div>

    </div>

</div>
{% endblock %}

IMPORTANT: these grid size classes allow us implement responsive UI.

slds-size_2-of-3 slds-medium-size_1-of-2 slds-large-size_1-of-3

https://www.lightningdesignsystem.com/utilities/grid/#Creating-Responsive-Layouts