material design for register/login/recover pages

This commit is contained in:
Nicolas Lœuillet
2015-10-05 22:16:18 +02:00
parent 4c5e544183
commit ec3ce598f6
29 changed files with 385 additions and 338 deletions

View File

@ -0,0 +1,20 @@
{% extends "WallabagCoreBundle::layout.html.twig" %}
{% block title %}{% trans %}create an account{% endtrans %}{% endblock %}
{% block body_class %}login{% endblock %}
{% block menu %}{% endblock %}
{% block messages %}{% endblock %}
{% block content %}
<form action="{{ path('fos_user_registration_register') }}" {{ form_enctype(form) }} method="POST" class="fos_user_registration_register">
<fieldset class="w500p center">
<h2 class="mbs txtcenter">{% trans %}create an account{% endtrans %}</h2>
{% include "FOSUserBundle:Registration:register_content.html.twig" %}
</fieldset>
</form>
{% endblock %}
{% block footer %}
{% endblock %}

View File

@ -0,0 +1,38 @@
{% trans_default_domain 'FOSUserBundle' %}
{{ form_errors(form) }}
{{ form_widget(form._token) }}
{% for flashMessage in app.session.flashbag.get('notice') %}
<span><p>{{ flashMessage }}</p></span>
{% endfor %}
<div class="row">
{{ form_errors(form.email) }}
<label for="fos_user_registration_form_email">{% trans %}Email{% endtrans %}</label>
<input type="text" id="fos_user_registration_form_email" name="fos_user_registration_form[email]" />
</div>
<div class="row">
{{ form_errors(form.username) }}
<label for="fos_user_registration_form_username">{% trans %}Username{% endtrans %}</label>
<input type="text" id="fos_user_registration_form_username" name="fos_user_registration_form[username]" />
</div>
<div class="row">
{{ form_errors(form.plainPassword.first) }}
<label for="fos_user_registration_form_plainPassword_first">{% trans %}Password{% endtrans %}</label>
<input type="password" id="fos_user_registration_form_plainPassword_first" name="fos_user_registration_form[plainPassword][first]" />
</div>
<div class="row">
{{ form_errors(form.plainPassword.second) }}
<label for="fos_user_registration_form_plainPassword_second">{% trans %}Repeat password{% endtrans %}</label>
<input type="password" id="fos_user_registration_form_plainPassword_second" name="fos_user_registration_form[plainPassword][second]" />
</div>
<div class="row mts txtcenter">
<button type="submit">{{ 'registration.submit'|trans({}, 'FOSUserBundle') }}</button>
<a href="{{ path('fos_user_security_login') }}" class="button">{% trans %}Login{% endtrans %}</a>
</div>

View File

@ -0,0 +1,17 @@
{% extends "WallabagCoreBundle::layout.html.twig" %}
{% block title %}{% trans %}Forgot password{% endtrans %}{% endblock %}
{% block body_class %}login{% endblock %}
{% block menu %}{% endblock %}
{% block content %}
<form>
<fieldset class="w500p center">
<h2 class="mbs txtcenter">{% trans %}Forgot password{% endtrans %}</h2>
<p>{{ 'An email has been sent to %email%. It contains a link you must click to reset your password.'|trans({'%email%': email}) }}</p>
</fieldset>
</form>
{% endblock %}

View File

@ -0,0 +1,20 @@
{% extends "WallabagCoreBundle::layout.html.twig" %}
{% block title %}{% trans %}Forgot password{% endtrans %}{% endblock %}
{% block body_class %}login{% endblock %}
{% block menu %}{% endblock %}
{% block messages %}{% endblock %}
{% block content %}
<form action="{{ path('fos_user_resetting_send_email') }}" method="post" name="forgotPasswordform">
<fieldset class="w500p center">
<h2 class="mbs txtcenter">{% trans %}Forgot password{% endtrans %}</h2>
{% include "FOSUserBundle:Resetting:request_content.html.twig" %}
</fieldset>
</form>
{% endblock %}
{% block footer %}
{% endblock %}

View File

@ -0,0 +1,17 @@
{% trans_default_domain 'FOSUserBundle' %}
{% trans %}Enter your email address below and we'll send you password reset instructions.{% endtrans %}
{% if invalid_username is defined %}
<p>{{ 'resetting.request.invalid_username'|trans({'%username%': invalid_username}) }}</p>
{% endif %}
<div class="row">
<label for="username">{{ 'resetting.request.username'|trans }}</label>
<input type="text" id="username" name="username" required="required" />
</div>
<div class="row mts txtcenter">
<button type="submit">{{ 'resetting.request.submit'|trans }}</button>
<a href="{{ path('fos_user_security_login') }}" class="button">{% trans %}Login{% endtrans %}</a>
</div>

View File

@ -0,0 +1,40 @@
{% extends "WallabagCoreBundle::layout.html.twig" %}
{% block title %}{% trans %}login to your wallabag{% endtrans %}{% endblock %}
{% block body_class %}login{% endblock %}
{% block menu %}{% endblock %}
{% block messages %}{% endblock %}
{% block content %}
<form action="{{ path('fos_user_security_check') }}" method="post" name="loginform">
<fieldset class="w500p center">
<h2 class="mbs txtcenter">{% trans %}Login to wallabag{% endtrans %}</h2>
{% if error %}
<div>{{ error.message }}</div>
{% endif %}
{% for flashMessage in app.session.flashbag.get('notice') %}
<p>{{ flashMessage }}</p>
{% endfor %}
<div class="row">
<label class="col w150p" for="username">{% trans %}Username{% endtrans %}</label>
<input type="text" id="username" name="_username" value="{{ last_username }}" />
</div>
<div class="row">
<label class="col w150p" for="password">{% trans %}Password{% endtrans %}</label>
<input type="password" id="password" name="_password" />
</div>
<div class="row mts txtcenter">
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}" />
<button type="submit">Login</button>
<a href="{{ path('fos_user_registration_register') }}" class="button">{% trans %}Register{% endtrans %}</a>
<a href="{{ path('fos_user_resetting_request') }}" class="small">Forgot your password?</a>
</div>
</fieldset>
</form>
{% endblock %}

View File

@ -0,0 +1,12 @@
{% trans_default_domain 'FOSUserBundle' %}
<form action="{{ path('fos_user_change_password') }}" {{ form_enctype(form) }} method="POST" class="fos_user_change_password">
<div class="card-content">
<div class="row">
{{ form_widget(form) }}
<div>
<input type="submit" value="{{ 'change_password.submit'|trans }}" />
</div>
</div>
</div>
</form>

View File

@ -0,0 +1,11 @@
{% extends "FOSUserBundle::layout.html.twig" %}
{% trans_default_domain 'FOSUserBundle' %}
{% block fos_user_content %}
<div class="card-content">
<div class="row">
<p>{{ 'registration.check_email'|trans({'%email%': user.email}) }}</p>
</div>
</div>
{% endblock fos_user_content %}

View File

@ -0,0 +1,17 @@
{% extends "FOSUserBundle::layout.html.twig" %}
{% trans_default_domain 'FOSUserBundle' %}
{% block fos_user_content %}
<div class="card-content">
<div class="row">
<p>{{ 'registration.confirmed'|trans({'%username%': user.username}) }}</p>
{% if targetUrl %}
<p><a href="{{ targetUrl }}">{{ 'registration.back'|trans }}</a></p>
{% endif %}
</div>
<div class="card-action center">
<a href="{{ path('homepage') }}" class="waves-effect waves-light btn"><i class="material-icons left"></i> {% trans %}Go to your account{% endtrans %}</a>
</div>
</div>
{% endblock fos_user_content %}

View File

@ -1,32 +0,0 @@
{% extends "WallabagCoreBundle::layout.html.twig" %}
{% block title %}{% trans %}create an account{% endtrans %}{% endblock %}
{% block body_class %}register{% endblock %}
{% block menu %}{% endblock %}
{% block messages %}{% endblock %}
{% 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>
{% include "FOSUserBundle:Registration:register_content.html.twig" %}
</div>
<div class="center">
<a href="{{ path('fos_user_security_login') }}">{% trans %}Already have an account?{% endtrans %}</a>
</div>
</div>
</main>
<style>
main {
padding: 0;
}
</style>
{% endblock %}
{% block footer %}
{% endblock %}

View File

@ -2,12 +2,44 @@
<form action="{{ path('fos_user_registration_register') }}" {{ form_enctype(form) }} method="POST" class="fos_user_registration_register">
<div class="card-content">
{{ form_widget(form) }}
<input type="submit" value="{{ 'registration.submit'|trans }}" />
<div class="row">
{{ form_errors(form) }}
{{ form_widget(form._token) }}
{% for flashMessage in app.session.flashbag.get('notice') %}
<span class="black-text"><p>{{ flashMessage }}</p></span>
{% endfor %}
<div class="input-field col s12">
{{ form_errors(form.email) }}
<label for="fos_user_registration_form_email">{% trans %}Email{% endtrans %}</label>
<input type="text" id="fos_user_registration_form_email" name="fos_user_registration_form[email]" />
</div>
<div class="input-field col s12">
{{ form_errors(form.username) }}
<label for="fos_user_registration_form_username">{% trans %}Username{% endtrans %}</label>
<input type="text" id="fos_user_registration_form_username" name="fos_user_registration_form[username]" />
</div>
<div class="input-field col s12">
{{ form_errors(form.plainPassword.first) }}
<label for="fos_user_registration_form_plainPassword_first">{% trans %}Password{% endtrans %}</label>
<input type="password" id="fos_user_registration_form_plainPassword_first" name="fos_user_registration_form[plainPassword][first]" />
</div>
<div class="input-field col s12">
{{ form_errors(form.plainPassword.second) }}
<label for="fos_user_registration_form_plainPassword_second">{% trans %}Repeat password{% endtrans %}</label>
<input type="password" id="fos_user_registration_form_plainPassword_second" name="fos_user_registration_form[plainPassword][second]" />
</div>
</div>
</div>
<div class="card-action">
<div class="card-action center">
<a href="{{ path('fos_user_security_login') }}" class="waves-effect waves-light grey btn"><i class="material-icons left"></i> {% trans %}Login{% endtrans %}</a>
<button class="btn waves-effect waves-light" type="submit" name="send">
{% trans %}Create account{% endtrans %}
{{ 'registration.submit'|trans({}, 'FOSUserBundle') }}
<i class="mdi-content-send right"></i>
</button>
</div>

View File

@ -0,0 +1,11 @@
{% extends "FOSUserBundle::layout.html.twig" %}
{% trans_default_domain 'FOSUserBundle' %}
{% block fos_user_content %}
<div class="card-content">
<div class="row">
{{ 'resetting.check_email'|trans({'%email%': email}) }}
</div>
</div>
{% endblock fos_user_content %}

View File

@ -0,0 +1,11 @@
{% extends "FOSUserBundle::layout.html.twig" %}
{% trans_default_domain 'FOSUserBundle' %}
{% block fos_user_content %}
<div class="card-content">
<div class="row">
{{ 'resetting.password_already_requested'|trans }}
</div>
</div>
{% endblock fos_user_content %}

View File

@ -0,0 +1,26 @@
{% trans_default_domain 'FOSUserBundle' %}
<form action="{{ path('fos_user_resetting_send_email') }}" method="POST" class="fos_user_resetting_request">
<div class="card-content">
<div class="row">
<p>{% trans %}Enter your email address below and we'll send you password reset instructions.{% endtrans %}</p>
{% for flashMessage in app.session.flashbag.get('notice') %}
<span class="black-text"><p>{{ flashMessage }}</p></span>
{% endfor %}
{% if invalid_username is defined %}
<p>{{ 'resetting.request.invalid_username'|trans({'%username%': invalid_username}) }}</p>
{% endif %}
<div class="input-field col s12">
<label for="username">{{ 'resetting.request.username'|trans }}</label>
<input type="text" id="username" name="username" required="required" />
</div>
</div>
</div>
<div class="card-action center">
<a href="{{ path('fos_user_security_login') }}" class="waves-effect waves-light grey btn"><i class="material-icons left"></i> {% trans %}Login{% endtrans %}</a>
<button class="btn waves-effect waves-light" type="submit" name="send">
{{ 'resetting.request.submit'|trans }}
</button>
</div>
</form>

View File

@ -0,0 +1,15 @@
{% trans_default_domain 'FOSUserBundle' %}
<form action="{{ path('fos_user_resetting_reset', {'token': token}) }}" {{ form_enctype(form) }} method="POST" class="fos_user_resetting_reset">
<div class="card-content">
<div class="row">
{{ form_widget(form) }}
</div>
<div class="card-action center">
<button class="btn waves-effect waves-light" type="submit" name="send">
{{ 'resetting.reset.submit'|trans }}
<i class="mdi-content-send right"></i>
</button>
</div>
</div>
</form>

View File

@ -1,27 +0,0 @@
{% extends "WallabagCoreBundle::layout.html.twig" %}
{% block title %}{% trans %}Forgot password{% endtrans %}{% endblock %}
{% block body_class %}login{% endblock %}
{% block menu %}{% endblock %}
{% block content %}
<main class="valign-wrapper">
<div class="valign row">
<h1>{% trans %}Forgot password{% endtrans %}</h1>
<div class="card sw">
<div class="card-content">
<span class="card-title black-text">
<p>{{ 'An email has been sent to %email%. It contains a link you must click to reset your password.'|trans({'%email%': email}) }}</p>
</span>
</div>
</div>
</div>
</main>
<style>
main {
padding: 0;
}
</style>
{% endblock %}

View File

@ -1,59 +0,0 @@
{% extends "WallabagCoreBundle::layout.html.twig" %}
{% block title %}{% trans %}Forgot password{% endtrans %}{% endblock %}
{% block body_class %}login{% endblock %}
{% block menu %}{% endblock %}
{% block content %}
<main class="valign-wrapper">
<div class="valign row">
<h1>{% trans %}Forgot password{% endtrans %}</h1>
<div class="card sw">
<form action="{{ path('forgot_password') }}" method="post" name="forgotPasswordform">
<div class="card-content">
<span class="card-title black-text"><p>{% trans %}Enter your email address below and we'll send you password reset instructions.{% endtrans %}</p></span>
{% if form_errors(form) %}
<span class="black-text">{{ form_errors(form) }}</span>
{% endif %}
{% for flashMessage in app.session.flashbag.get('notice') %}
<span class="black-text"><p>{{ flashMessage }}</p></span>
{% endfor %}
{% if form_errors(form.email) %}
<span class="black-text">{{ form_errors(form.email) }}</span>
{% endif %}
<div class="input-field s12">
{{ form_label(form.email) }}
{{ form_widget(form.email) }}
</div>
</div>
<div class="card-action">
<button class="btn waves-effect waves-light" type="submit" name="send">
{% trans %}Send{% endtrans %}
<i class="mdi-content-send right"></i>
</button>
</div>
{{ form_rest(form) }}
</form>
</div>
<div class="center">
<a href="{{ path('login') }}">{% trans %}Back to login{% endtrans %}</a>
</div>
</div>
</main>
<style>
main {
padding: 0;
}
</style>
{% endblock %}
{% block footer %}
{% endblock %}

View File

@ -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>
<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="username">{% trans %}Username{% endtrans %}</label>
<input type="text" id="username" name="_username" value="{{ last_username }}" />
</div>
<div class="center">
<a href="{{ path('fos_user_resetting_request') }}">{% trans %}Forgot your password?{% endtrans %}</a>
<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>
</main>
<style>
main {
padding: 0;
}
</style>
{% endblock %}
{% block footer %}
{% endblock %}
</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 %}

View File

@ -1,57 +0,0 @@
{% extends "WallabagCoreBundle::layout.html.twig" %}
{% block title %}{% trans %}Change password{% endtrans %}{% endblock %}
{% block body_class %}login{% endblock %}
{% block menu %}{% endblock %}
{% block content %}
<main class="valign-wrapper">
<div class="valign row">
<div class="card sw">
<form action="{{ path('forgot_password_reset', {'token': token}) }}" method="post" name="loginform">
<div class="card-content">
<span class="card-title black-text"><p>{% trans %}Change password{% endtrans %}</p></span>
{% if form_errors(form) %}
<span class="black-text">{{ form_errors(form) }}</span>
{% endif %}
{% if form_errors(form.new_password.first) %}
<span class="black-text">{{ form_errors(form.new_password.first) }}</span>
{% endif %}
{% if form_errors(form.new_password.second) %}
<span class="black-text">{{ form_errors(form.new_password.second) }}</span>
{% endif %}
<div class="input-field s12">
{{ form_label(form.new_password.first) }}
{{ form_widget(form.new_password.first) }}
</div>
<div class="input-field s12">
{{ form_label(form.new_password.second) }}
{{ form_widget(form.new_password.second) }}
</div>
</div>
<div class="card-action">
<button class="btn waves-effect waves-light" type="submit" name="send">
{% trans %}Change password{% endtrans %}
<i class="mdi-content-send right"></i>
</button>
</div>
{{ form_rest(form) }}
</form>
</div>
</div>
</main>
<style>
main {
padding: 0;
}
</style>
{% endblock %}

View File

@ -0,0 +1,26 @@
{% extends "WallabagCoreBundle::layout.html.twig" %}
{% block title %}Welcome on wallabag!{% endblock %}
{% block menu %}{% endblock %}
{% block messages %}{% endblock %}
{% block content %}
<main class="valign-wrapper">
<div class="valign row">
<div class="card sw">
<div class="center"><img src="{{ asset('themes/material/img/logo-other_themes.png') }}" alt="wallabag logo" /></div>
{% block fos_user_content %}
{% endblock fos_user_content %}
</div>
</div>
</main>
<style>
main {
padding: 0;
}
</style>
{% endblock %}
{% block footer %}
{% endblock %}