--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/default/login/logged.html	Fri Oct 27 18:56:21 2017 +0200
@@ -0,0 +1,22 @@
+{% set post_confirm_message=_("You have been logged correctly") %}
+{% if not embedded %}{% extends 'base/base.html' %}{% endif %}
+{% import 'input/form.html' as form with context %}
+{% import 'input/field.html' as field with context %}
+
+{% block title %}{{C.APP_NAME}}{% endblock %}
+
+{% block confirm_message %}
+    {% trans %}You have been logged correctly{% endtrans %}
+{% endblock confirm_message %}
+
+{% block body %}
+<div id='logged'>
+    <div class='logged_box box'>
+        <p>You are logged under the account <span class="logged_profile">{{profile}}</span></p>
+    </div>
+    {% call form.form() %}
+        {{ field.meta('type', 'disconnect') }}
+        {{ field.submit(_("Disconnect")) }}
+    {% endcall %}
+</div>
+{% endblock body %}

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/default/login/login.html	Fri Oct 27 18:56:21 2017 +0200
@@ -0,0 +1,59 @@
+{% if not embedded %}{% extends 'base/base.html' %}{% endif %}
+{% import 'input/form.html' as form with context %}
+{% import 'input/field.html' as field with context %}
+
+{% block title %}{{C.APP_NAME}} login{% endblock %}
+
+{% block body %}
+<div id="login_container">
+<div id="login_box">
+    <div id="login_left">
+        <img src="{{media_path}}libervia/register_left.png">
+    </div>
+    <div id="login_right">
+        {% block login_right_top %}{% endblock %}
+        {% if login_error is defined %}
+            {# error messages displayed in case of failing attempt to login #}
+            <div id="login_error">
+                <p>
+                {% block login_error_message %}
+                {% if login_error == S_C.PROFILE_AUTH_ERROR %}
+                    {%- trans %}Your login and/or password is incorrect. Please try again.{% endtrans -%}
+                {% elif login_error == S_C.XMPP_AUTH_ERROR %}
+                    {%- trans %}Your XMPP account failed to connect. Did you enter the good password? If you have changed your XMPP password since your last connection on Libervia, please use another SàT frontend to update your profile.{% endtrans -%}
+                {% elif login_error == S_C.NO_REPLY %}
+                    {%- trans %}Did not received a reply (the timeout expired or the connection is broken).{% endtrans -%}
+                {% else %}
+                    {%- trans %}An unknown error occurred, please contact your service administrator.{% endtrans -%}
+                {% endif %}
+                {% endblock login_error_message %}
+                </p>
+            </div>
+        {% endif %}
+
+        <div id="login_form">
+            {% block login_form %}
+            {% call form.form() %}
+                {{ field.meta('type', 'login') }}
+                {{ field.text("login", _("Login"),
+                              required=true,
+                              value=login,
+                              )}}
+                {{ field.password("password", _("Password"), required=not empty_password_allowed) }}
+                {{ field.submit(_("Log in")) }}
+            {% endcall %}
+            {% endblock login_form %}
+        </div>
+        {% block login_right_bottom %}
+        {% if register_url is defined %}
+            <div id="create_account_link">
+                <p>
+                    <a href="{{register_url}}">{% trans %}No account yet? Create a new one!{% endtrans %}</a>
+                </p>
+            </div>
+        {% endif %}
+        {% endblock login_right_bottom %}
+    </div>
+</div>
+</div>
+{% endblock body %}

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/default/login/register.html	Fri Oct 27 18:56:21 2017 +0200
@@ -0,0 +1,49 @@
+{% extends 'login/login.html' %}
+
+{% block title %}{{C.APP_NAME}} register new account{% endblock %}
+
+{% block login_error_message %}
+{% if login_error == S_C.ALREADY_EXISTS %}
+    {%- trans %}This login already exists, please choose another one.{% endtrans -%}
+{% elif login_error == S_C.INVALID_INPUT %}
+    {%- trans %}The data you entered are nod valid.{% endtrans -%}
+{% elif login_error == S_C.BAD_REQUEST %}
+    {%- trans %}Bad request, please contact your service administrator{% endtrans -%}
+{% else %}
+    {%- trans %}An unknown error occurred, please contact your service administrator.{% endtrans -%}
+{% endif %}
+{% endblock login_error_message %}
+
+{% block login_right_top %}
+{% if login_url is defined %}
+    <div id="login_link">
+        <a href="{{login_url}}">
+            {%- trans %}Go to login page{% endtrans -%}
+        </a>
+    </div>
+{% endif %}
+{% endblock login_right_top %}
+
+{% block login_form %}
+{% call form.form(class='register') %}
+    {{ field.meta('type', 'register') }}
+    {{ field.text("login", _("Login"),
+                  required=true,
+                  pattern=S_C.REG_LOGIN_RE,
+                  title=_("Login must be lower case, with only plain letters (a-z), numbers (0-9) or underscore(_)"),
+                  value=login,
+                  )}}
+    {{ field.email("email", _("Email"),
+                   required=true,
+                   value=email,
+                   )}}
+    {{ field.password("password", _("Password"),
+                      required=true,
+                      minlength=S_C.PASSWORD_MIN_LENGTH,
+                      value=password,
+                      )}}
+    {{ field.submit(_("Register new account")) }}
+{% endcall %}
+{% endblock login_form %}
+
+{% block login_right_bottom %}{% endblock %}

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/default/static/login.css	Fri Oct 27 18:56:21 2017 +0200
@@ -0,0 +1,197 @@
+body {
+    background: #111;
+}
+
+footer {
+    color: #999;
+}
+
+#login_container {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+#login_box {
+    display: flex;
+    background: #111;
+    color: #aaa;
+    width: 600px;
+    margin: auto;
+}
+
+#login_left {
+    display: none;
+}
+
+#login_right {
+    width: 100%;
+    position: relative;
+}
+
+#login_form {
+    margin-top: 60px;
+}
+
+#login_form label {
+    font-weight: bold;
+    display: block;
+    text-align: center;
+}
+
+#login_form input:not(.form_submit) {
+    display: block;
+    margin: 0 auto;
+    height: 25px;
+    line-height: 25px;
+    width: 200px;
+    text-indent: 11px;
+    background: #000;
+    color: #ccc;
+    border: 1px solid #555;
+    border-radius: 15px 15px 15px 15px;
+}
+
+#login_form input:hover {
+    background-color: #222;
+}
+
+#login_form input:focus {
+    border: 1px solid #999;
+}
+
+#login_box .form_input {
+    display: block;
+    margin-bottom: 1em;
+}
+
+#login_form .form_submit,
+#logged .form_submit {
+    /* FIXME: as above /media is not good.
+     * url should be replaced by real gradient */
+    color: #fff;
+    background: #222 url('/media/libervia/gradient.png') repeat-x;
+    font-weight: bold;
+    line-height: 1;
+    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
+    padding: 7px 10px 8px;
+    border: 0;
+    border-radius: 6px 6px 6px 6px;
+    cursor: pointer;
+    margin-top: 30px;
+}
+
+#login_form .form_submit:hover,
+#logged .form_submit:hover {
+    background-color: #bc0000;
+}
+
+#login_error {
+    position: absolute;
+    margin: -90px 0 0;
+    width: 100%;
+    height: 150px;
+    overflow: auto;
+    font-size: 0.9em;
+	font-weight: bold;
+	color: lightcoral;
+	text-align: center;
+}
+
+#login_error p {
+    position: absolute;
+    bottom: 0;
+    margin-left: 46px;
+    margin-right: 46px;
+}
+
+#create_account_link {
+    width: 100%;
+    margin-top: 3em;
+}
+
+#login_link {
+    margin-top: 1em;
+}
+
+#create_account_link a,
+#login_link a {
+    text-decoration: none;
+    text-align: center;
+    font-size: 0.8em;
+    cursor: pointer;
+    color: #fff;
+    display: block;
+    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.2);
+}
+
+.logged_box {
+    margin: 3em;
+	padding: 1em;
+	text-align: center;
+	font-style: italic;
+}
+
+.logged_profile {
+    font-style: normal;
+    font-weight: bold;
+}
+
+#login_form form.register input[type=submit] {
+    margin-top: 0.5em;
+}
+
+@media (min-width: 600px) {
+    body {
+        background: transparent;
+    }
+
+    footer {
+        color: black;
+    }
+
+    #login_left {
+        display: inline;
+    }
+
+    #login_right {
+        /* FIXME: there is not way to correctly select images from
+         * media path at the moment */
+        background: url('/media/libervia/register_right.png');
+    }
+
+    #login_error {
+        width: auto;
+        max-height: 50px;
+        margin: 10px 46px 0;
+    }
+     
+    #login_error p {
+        position: static;
+        margin: 0;
+    }
+
+    #login_form label {
+        text-align: initial;
+        position: relative;
+        left: 50px;
+    }
+
+    #login_form label::after {
+        content: ':'
+    }
+
+    #login_form input:not(.form_submit) {
+        display: inline;
+        margin: 0;
+        position: relative;
+        left: 50px;
+    }
+
+    #create_account_link {
+        margin-top: 0;
+        bottom: 0;
+        position: absolute;
+    }
+}

--- a/default/static/styles.css	Fri Oct 27 18:55:25 2017 +0200
+++ b/default/static/styles.css	Fri Oct 27 18:56:21 2017 +0200
@@ -69,8 +69,18 @@
 
 .xmlui_cont_vertical>.xmlui_widget {
     width: 100%;
+    min-height: 1em;
+    min-width: 1px;
 }
 
 label.xmlui_label {
     font-weight: bold;
 }
+
+td a {
+  /* we use <a> for non JS links in table
+   * so we don't want specific color/text-decoration by default
+   */
+  color: inherit;
+  text-decoration: inherit;
+}