templates: Redesign login

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/static/css/site.scss b/src/static/css/site.scss
index 8c514eff0408d16dcdf1b6d3b48dc55882dfbe74..1ca2c237fd71155a64f32d1daa53908315ff6339 100644 (file)
--- a/src/static/css/site.scss
+++ b/src/static/css/site.scss
@@ -71,7 +71,7 @@ $foundation-palette: (
 
 // Helpers
 @include foundation-float-classes;
-// @include foundation-flex-classes;
+@include foundation-flex-classes;
 @include foundation-visibility-classes;
 // @include foundation-prototype-classes;
 

diff --git a/src/templates/login.html b/src/templates/login.html
index ce8d9ca36cdaee8b32f60700cb50ea80f74ef997..0949b105b1366fb53a66394e9766260a26db7d9f 100644 (file)
--- a/src/templates/login.html
+++ b/src/templates/login.html
@@ -1,41 +1,27 @@
 {% extends "base.html" %}
 
-{% block title %}{{ _("Login") }}{% end block %}
+{% block title %}{{ _("Log In") }}{% end block %}
 
-{% block body %}
-       <div class="row align-items-center justify-content-center">
-               <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4">
-                       <h1>{{ _("Login") }}</h1>
-               </div>
-       </div>
+{% block container %}
+       <div class="grid-x grid-padding-x align-center">
+               <div class="cell medium-6">
+                       <div class="callout">
+                               <h3>{{ _("Log In") }}</h3>
+
+                               {% if failed %}
+                                       <p>{{ _("Login failed") }}</p>
+                               {% end %}
+
+                               <form method="POST" action="">
+                                       {% raw xsrf_form_html() %}
 
-       {% if failed %}
-       <div class="row align-items-center justify-content-center">
-               <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4">
-                       <div class="alert alert-danger">
-                               <h4 class="alert-heading">{{ _("Login failed!") }}</h4>
-                               {{ _("Username and/or password was wrong. Login failed.") }}
+                                       <input type="text" name="name" placeholder="{{ _("Username") }}">
+
+                                       <input type="password" name="pass" placeholder="{{ _("Password") }}">
+
+                                       <button type="submit" class="primary button">{{ _("Log In") }}</button>
+                               </form>
                        </div>
                </div>
        </div>
-       {% end %}
-       <div class="row align-items-center justify-content-center">
-               <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4">
-                       <form method="POST" action="">
-                               {% raw xsrf_form_html() %}
-                               <div class="form-group">
-                                         <label for="name">{{ _("Username or email address") }}</label>
-                                         <input type="text"
-                                                 class="form-control" id="name" name="name" aria-describedby="nameHelp"
-                                                 placeholder="Enter email or username">
-                               </div>
-                               <div class="form-group">
-                                         <label for="pass">{{ _("Password") }}</label>
-                                         <input type="password" class="form-control" id="pass" name="pass" laceholder="{{ _("Password") }}">
-                               </div>
-                               <button type="submit" class="btn btn-primary">{{ _("Login") }}</button>
-                       </form>
-                       <hr>
-               </div>
-       </div>
 {% end %}