material design for register/login/recover pages

1 files changed, 37 insertions, 60 deletions

diff --git a/src/Wallabag/UserBundle/Resources/views/themes/material/Security/login.html.twig b/src/Wallabag/UserBundle/Resources/views/themes/material/Security/login.html.twig
index e9532037..6bf99bf8 100644
--- a/src/Wallabag/UserBundle/Resources/views/themes/material/Security/login.html.twig
+++ b/src/Wallabag/UserBundle/Resources/views/themes/material/Security/login.html.twig
@@ -1,69 +1,46 @@
-{% extends "WallabagCoreBundle::layout.html.twig" %}
+{% extends "FOSUserBundle::layout.html.twig" %}
 
-{% block title %}{% trans %}login to your wallabag{% endtrans %}{% endblock %}
+{% block fos_user_content %}
+<form action="{{ path('fos_user_security_check') }}" method="post" name="loginform">
+    <div class="card-content">
 
-{% block body_class %}login{% endblock %}
+        {% if error %}
+            <span class="black-text">{{ error.message }}</span>
+        {% endif %}
 
-{% block menu %}{% endblock %}
-{% block messages %}{% endblock %}
+        {% for flashMessage in app.session.flashbag.get('notice') %}
+            <span class="black-text"><p>{{ flashMessage }}</p></span>
+        {% endfor %}
 
-{% block content %}
-    <main class="valign-wrapper">
-        <div class="valign row">
-            <div class="card sw">
-                <div class="center"><img src="{{ asset('themes/baggy/img/logo-other_themes.png') }}" alt="wallabag logo" /></div>
-                <form action="{{ path('fos_user_security_check') }}" method="post" name="loginform">
-                    <div class="card-content">
+        <div class="row">
 
-                        {% if error %}
-                            <span class="black-text">{{ error.message }}</span>
-                        {% endif %}
-
-                        {% for flashMessage in app.session.flashbag.get('notice') %}
-                            <span class="black-text"><p>{{ flashMessage }}</p></span>
-                        {% endfor %}
-
-                        <div class="row">
-
-                            <div class="input-field col s12">
-                                <label for="username">{% trans %}Username{% endtrans %}</label>
-                                <input type="text" id="username" name="_username" value="{{ last_username }}" />
-                            </div>
-
-                            <div class="input-field col s12">
-                                <label for="password">{% trans %}Password{% endtrans %}</label>
-                                <input type="password" id="password" name="_password" />
-                            </div>
-
-                            <div class="input-field col s12">
-                                <input type="checkbox" id="remember_me" name="_remember_me" checked />
-                                <label for="remember_me">{% trans %}Keep me logged in{% endtrans %}</label>
-                            </div>
-
-                        </div>
+            <div class="input-field col s12">
+                <label for="username">{% trans %}Username{% endtrans %}</label>
+                <input type="text" id="username" name="_username" value="{{ last_username }}" />
+            </div>
 
-                    </div>
-                    <div class="card-action">
-                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}" />
-                        <button class="btn waves-effect waves-light" type="submit" name="send">
-                            {% trans %}Login{% endtrans %}
-                            <i class="mdi-content-send right"></i>
-                        </button>
-                        <a href="{{ path('fos_user_registration_register') }}">{% trans %}Register{% endtrans %}</a>
-                    </div>
-                </form>
+            <div class="input-field col s12">
+                <label for="password">{% trans %}Password{% endtrans %}</label>
+                <input type="password" id="password" name="_password" />
             </div>
-            <div class="center">
-                <a href="{{ path('fos_user_resetting_request') }}">{% trans %}Forgot your password?{% endtrans %}</a>
+
+            <div class="input-field col s12">
+                <input type="checkbox" id="remember_me" name="_remember_me" checked />
+                <label for="remember_me">{% trans %}Keep me logged in{% endtrans %}</label>
             </div>
-        </div>
-    </main>
-    <style>
-    main {
-        padding: 0;
-    }
-    </style>
-{% endblock %}
 
-{% block footer %}
-{% endblock %}
+        </div>
+    </div>
+    <div class="card-action center">
+        <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}" />
+        <a href="{{ path('fos_user_registration_register') }}" class="waves-effect waves-light grey btn"><i class="material-icons left"></i> {% trans %}Register{% endtrans %}</a>
+        <button class="btn waves-effect waves-light" type="submit" name="send">
+            {% trans %}Login{% endtrans %}
+            <i class="mdi-content-send right"></i>
+        </button>
+    </div>
+    <div class="center">
+        <a href="{{ path('fos_user_resetting_request') }}">{% trans %}Forgot your password?{% endtrans %}</a>
+    </div>
+</form>
+{% endblock fos_user_content %}