Refactor input fields macro

This commit is contained in:
Nicolas Le Goff
2013-02-26 20:17:27 +01:00
committed by Romain Neutron
parent 7d7cfb5c8f
commit 8058c43b5c
8 changed files with 109 additions and 360 deletions

View File

@@ -11,81 +11,23 @@
</div><!-- /row -->
<div class="row-fluid">
<div class="span12" ng-controller="passwordChangeFormCtrl">
<form novalidate name="passwordChangeForm" ng-submit="submit();">
<div class="row-fluid">
<div class="span12">
<label for="login-password">
{% trans "Password" %}*
</label>
<table class="input-table" ng-class="getInputClass('password')">
<tr>
<td class="icon"><i class="icon-lock icon-white"></i></td>
<td>
<input
id="login-password"
name="password"
value=""
class="input-block-level"
type="password"
placeholder=""
required
ng-model="password"
force-model-update
>
</td>
</tr>
</table>
<div ng-show="!passwordChangeForm.password.errors.filled">
{{ auth_macro.fieldError("This field is required") }}
</div>
{#{% verbatim %}
<tt>passwordChangeForm.password.$valid = {{passwordChangeForm.password.$valid}}</tt><br>
<tt>passwordChangeForm.password.$error = {{passwordChangeForm.password.$error}}</tt><br>
<tt>passwordChangeForm.$valid = {{passwordChangeForm.$valid}}</tt><br>
<tt>passwordChangeForm.password.errors.filled = {{passwordChangeForm.password.errors.filled}}</tt><br>
{% endverbatim %}#}
</div>
</div>
<form novalidate name="{{ form.vars.name}}" ng-submit="submit();">
<div class="row-fluid">
<div class="span12">
<label for="login-password-confirm">
{% trans "Confirm your password" %}*
</label>
<table class="input-table" ng-class="getInputClass('passwordConfirm')">
<tr>
<td class="icon"><i class="icon-lock icon-white"></i></td>
<td>
<input
id="login-password-confirm"
name="passwordConfirm"
value=""
class="input-block-level"
type="password"
placeholder=""
required
ng-model="passwordConfirm"
force-model-update
ui-validate=" '$value==password' "
ui-validate-watch=" 'password' "
>
</td>
</tr>
</table>
<div ng-show="passwordChangeForm.passwordConfirm.$error.validator">
{{ auth_macro.fieldError("Passwords do not match!") }}
</div>
{#{% verbatim %}
<tt>passwordChangeForm.passwordConfirm.$valid = {{passwordChangeForm.passwordConfirm.$valid}}</tt><br>
<tt>passwordChangeForm.passwordConfirm.$error = {{passwordChangeForm.passwordConfirm.$error}}</tt><br>
<tt>passwordChangeForm.$valid = {{passwordChangeForm.$valid}}</tt><br>
<tt>passwordChangeForm.passwordConfirm.errors.filled = {{passwordChangeForm.passwordConfirm.errors.filled}}</tt><br>
<tt>passwordChangeForm.passwordConfirm.$error.validator = {{passwordChangeForm.passwordConfirm.$error.validator}}</tt><br>
{% endverbatim %}#}
{{ auth_macro.fieldInput(form.password, form.vars.name, 'icon-lock') }}
</div>
</div>
<div class="row-fluid">
<div class="span12">
{{ auth_macro.fieldInput(form.passwordConfirm, form.vars.name, 'icon-lock', {
"ui-validate" : " '$value==" ~ form.password.vars.name ~ "' ",
"ui-validate-watch" : "'" ~ form.password.vars.name ~ "'"
}, {
"validate_message" : "Passwords do not match"|trans
})
}}
</div>
</div>
<div class="row-fluid">
<div class="span12">
<button type="submit" class="btn btn-success btn-trigger ">{% trans "Validate" %}</button>

View File

@@ -14,44 +14,10 @@
</div><!-- /row -->
<div class="row-fluid">
<div class="span12" ng-controller="forgottenPasswordFormCtrl">
<form novalidate name="forgottenPasswordForm" ng-submit="submit();">
<form novalidate name="{{ form.vars.name }}" ng-submit="submit();">
<div class="row-fluid">
<div class="span12">
<div class="span12">
<label for="login-email">
{% trans "E-mail" %}*
</label>
<table class="input-table" ng-class="getInputClass('email')">
<tr>
<td class="icon"><i class="icon-envelope icon-white"></i></td>
<td>
<input
id="login-email"
name="email"
value=""
class="input-block-level"
type="email"
placeholder=""
required
ng-model="email"
force-model-update
>
</td>
</tr>
</table>
<div ng-show="!forgottenPasswordForm.email.errors.filled">
{{ auth_macro.fieldError("This field is required") }}
</div>
<div ng-show="forgottenPasswordForm.email.errors.filled && !forgottenPasswordForm.email.errors.valid">
{{ auth_macro.fieldError("Thes field is not valid") }}
</div>
{#{% verbatim %}
<tt>forgottenPasswordForm.email.$valid = {{forgottenPasswordForm.email.$valid}}</tt><br>
<tt>forgottenPasswordForm.email.$error = {{forgottenPasswordForm.email.$error}}</tt><br>
<tt>forgottenPasswordForm.$valid = {{forgottenPasswordForm.$valid}}</tt><br>
<tt>forgottenPasswordForm.email.errors.filled = {{forgottenPasswordForm.email.errors.filled}}</tt><br>
<tt>forgottenPasswordForm.email.errors.valid = {{forgottenPasswordForm.email.errors.valid}}</tt><br>
{% endverbatim %}#}
{{ auth_macro.fieldInput(form.email, form.vars.name, 'icon-envelope') }}
</div>
</div>
</div>
@@ -64,4 +30,3 @@
</div>
</div><!-- /row -->
{% endblock %}

View File

@@ -1,8 +1,23 @@
{#
variable "feed" to get public feeds
variable "recaptcha_display" should be setted Tell whether the recaptch should be displayed
variable "recaptacha" should be setted The recaptcha object
#}
{% extends "login/layout/sidebar-layout.html.twig" %}
{% import "common/macros.html.twig" as macro %}
{% import "login/common/macros.html.twig" as auth_macro %}
{% block header_rss %}
{% for feed in feeds %}
{% set link = feed.get_homepage_link(app['phraseanet.registry'], 'rss') %}
<link rel="alternate" type="{{ link.get_mimetype() }}" title="{{ link.get_title() }}" href="{{ link.get_href() }}" />
{% set link = feed.get_homepage_link(app['phraseanet.registry'], 'atom') %}
<link rel="alternate" type="{{ link.get_mimetype() }}" title="{{ link.get_title() }}" href="{{ link.get_href() }}" />
{% endfor %}
{% endblock %}
{% block sidebar %}
<div class="well-large sidebar-block">
<div class="row-fluid">
@@ -14,78 +29,27 @@
<div class="row-fluid">
<div class="span12" ng-controller="LoginFormController">
{{ auth_macro.alert() }}
<form novalidate name="loginForm" ng-submit="submit();">
<form novalidate name="{{ form.vars.name }}" ng-submit="submit();">
<div class="row-fluid">
<div class="span12">
<label for="login-email">
{% trans "E-mail" %}*
</label>
{# todo bind with form macro using div_form_layout #}
<table class="input-table" ng-class="getInputClass('email')">
<tr>
<td class="icon"><i class="icon-envelope-alt icon-white"></i></td>
<td>
<input
id="login-email"
name="email"
value=""
class="input-block-level"
type="email"
placeholder=""
required
ng-model="email"
force-model-update
>
</td>
</tr>
</table>
<div ng-show="!loginForm.email.errors.filled">
{{ auth_macro.fieldError("This field is required") }}
</div>
<div ng-show="loginForm.email.errors.filled && !loginForm.email.errors.valid">
{{ auth_macro.fieldError("This field is not valid") }}
</div>
</div>
<div class="span12">
{{ auth_macro.fieldInput(form.email, form.vars.name, 'icon-envelope') }}
</div>
</div>
<div class="row-fluid">
<div class="span12">
<label for="login-password">
{% trans "Password" %}*
</label>
<table class="input-table" ng-class="getInputClass('password')">
<tr>
<td class="icon"><i class="icon-lock icon-white"></i></td>
<td>
<input
id="login-password"
name="password"
value=""
class="input-block-level"
type="password"
placeholder=""
required
ng-model="password"
force-model-update
>
</td>
</tr>
</table>
<div ng-show="!loginForm.password.errors.filled">
{{ auth_macro.fieldError("This field is required") }}
</div>
</div>
<div class="span12">
{{ auth_macro.fieldInput(form.password, form.vars.name, 'icon-lock') }}
</div>
</div>
<div class="text-right">
<a class="forget-password-link" href="{{ path("login_forgot_password") }}">{% trans "Forgot password?" %}</a>
</div>
{% set recaptcha_display = true %}
{% if recaptcha_display %}
<div class="row-fluid">
<div class="span12">
{% set recaptcha = "" %}
{{ macro.captcha(recaptcha) }}
</div>
</div>
@@ -118,16 +82,6 @@
</div>
</div><!-- /row -->
</div><!-- /sidebar block -->
<div class="well-large sidebar-block last-item">
<div class="row-fluid">
<div class="span12 text-center">
{% trans "No account yet?" %}
</div>
</div>
<div class="row-fluid">
<div class="span12 text-center">
<a class="btn btn-success btn-trigger" href="{{ path("login_register") }}">{% trans "Register" %}</a>
</div>
</div>
</div><!-- /sidebar block -->
{% include "login/include/register-link-block.html.twig" with {"login" : login } %}
{% endblock %}

View File

@@ -1,3 +1,9 @@
{#
variable "provider_name" should be setted The current provider name
variable "recaptcha_display" should be setted Tell whether the recaptch should be displayed
variable "recaptacha" should be setted The recaptcha object
#}
{% extends "login/layout/sidebar-layout.html.twig" %}
{% import "common/macros.html.twig" as macro %}
@@ -9,7 +15,6 @@
<div class="span12">
<div class="text-title">{% trans "Connexion" %}</div>
<div class="match-hint">
{% set provider_name = "Facebook" %}
{% trans %}
Your {{ provider_name }} account matchs a Phraseanet account
{% endtrans %}
@@ -43,75 +48,26 @@
<div class="row-fluid">
<div class="span12" ng-controller="LoginFormController">
{{ auth_macro.alert() }}
<form novalidate name="loginForm" ng-submit="submit();">
{# Note this is hidden for the moment to see how submit the user login #}
<form novalidate name="{{ form.vars.name }}" ng-submit="submit();">
<div class="row-fluid hidden">
<div class="span12">
<table class="input-table" ng-class="getInputClass('email')">
<tr>
<td class="icon"><i class="icon-envelope-alt icon-white"></i></td>
<td>
<input
id="login-email"
name="email"
value=""
class="input-block-level"
type="email"
placeholder=""
required
ng-model="email"
force-model-update
>
</td>
</tr>
</table>
<div ng-show="!loginForm.email.errors.filled">
{{ auth_macro.fieldError("This field is required") }}
</div>
<div ng-show="loginForm.email.errors.filled && !loginForm.email.errors.valid">
{{ auth_macro.fieldError("This field is not valid") }}
</div>
</div>
<div class="span12">
{{ auth_macro.fieldInput(form.email, form.vars.name, 'icon-envelope') }}
</div>
</div>
<div class="row-fluid">
<div class="span12">
<label for="login-password">
{% trans "Password" %}*
</label>
<table class="input-table" ng-class="getInputClass('password')">
<tr>
<td class="icon"><i class="icon-lock icon-white"></i></td>
<td>
<input
id="login-password"
name="password"
value=""
class="input-block-level"
type="password"
placeholder=""
required
ng-model="password"
force-model-update
>
</td>
</tr>
</table>
<div ng-show="!loginForm.password.errors.filled">
{{ auth_macro.fieldError("This field is required") }}
</div>
</div>
<div class="span12">
{{ auth_macro.fieldInput(form.password, form.vars.name, 'icon-lock') }}
</div>
</div>
<div class="text-right">
<a class="forget-password-link" href="{{ path("login_forgot_password") }}">{% trans "Forgot password?" %}</a>
</div>
{% set recaptcha_display = true %}
{% if recaptcha_display %}
<div class="row-fluid">
<div class="span12">
{% set recaptcha = "" %}
{{ macro.captcha(recaptcha) }}
</div>
</div>
@@ -138,16 +94,5 @@
</div>
</div>
</div>
<div class="well-large sidebar-block last-item">
<div class="row-fluid">
<div class="span12 text-center">
{% trans "No account yet?" %}
</div>
</div>
<div class="row-fluid">
<div class="span12 text-center">
<a class="btn btn-success btn-trigger" href="{{ path("login_register") }}">{% trans "Register" %}</a>
</div>
</div>
</div>
{% include "login/include/register-link-block.html.twig" with {"login" : login } %}
{% endblock %}

View File

@@ -1,3 +1,9 @@
{#
variable "provider_name" should be setted The current provider name
variable "recaptcha_display" should be setted Tell whether the recaptch should be displayed
variable "recaptacha" should be setted The recaptcha object
#}
{% extends "login/layout/sidebar-layout.html.twig" %}
{% import "common/macros.html.twig" as macro %}
@@ -9,7 +15,6 @@
<div class="span12">
<div class="text-title">{% trans "Connexion" %}</div>
<div class="match-hint">
{% set provider_name = "Google plus" %}
{% trans %}
Your {{ provider_name }} account matchs a Phraseanet account
{% endtrans %}
@@ -31,74 +36,26 @@
<div class="row-fluid">
<div class="span12" ng-controller="LoginFormController">
{{ auth_macro.alert() }}
<form novalidate name="loginForm" ng-submit="submit();">
<form novalidate name="{{ form.vars.name }}" ng-submit="submit();">
<div class="row-fluid">
<div class="span12">
<table class="input-table" ng-class="getInputClass('email')">
<tr>
<td class="icon"><i class="icon-envelope-alt icon-white"></i></td>
<td>
<input
id="login-email"
name="email"
value=""
class="input-block-level"
type="email"
placeholder=""
required
ng-model="email"
force-model-update
>
</td>
</tr>
</table>
<div ng-show="!loginForm.email.errors.filled">
{{ auth_macro.fieldError("This field is required") }}
</div>
<div ng-show="loginForm.email.errors.filled && !loginForm.email.errors.valid">
{{ auth_macro.fieldError("This field is not valid") }}
</div>
</div>
<div class="span12">
{{ auth_macro.fieldInput(form.email, form.vars.name, 'icon-envelope') }}
</div>
</div>
<div class="row-fluid">
<div class="span12">
<label for="login-password">
{% trans "Password" %}*
</label>
<table class="input-table" ng-class="getInputClass('password')">
<tr>
<td class="icon"><i class="icon-lock icon-white"></i></td>
<td>
<input
id="login-password"
name="password"
value=""
class="input-block-level"
type="password"
placeholder=""
required
ng-model="password"
force-model-update
>
</td>
</tr>
</table>
<div ng-show="!loginForm.password.errors.filled">
{{ auth_macro.fieldError("This field is required") }}
</div>
</div>
<div class="span12">
{{ auth_macro.fieldInput(form.password, form.vars.name, 'icon-lock') }}
</div>
</div>
<div class="text-right">
<a class="forget-password-link" href="{{ path("login_forgot_password") }}">{% trans "Forgot password?" %}</a>
</div>
{% set recaptcha_display = true %}
{% if recaptcha_display %}
<div class="row-fluid">
<div class="span12">
{% set recaptcha = "" %}
{{ macro.captcha(recaptcha) }}
</div>
</div>
@@ -113,17 +70,5 @@
</div>
</div>
</div>
<div class="well-large sidebar-block last-item">
<div class="row-fluid">
<div class="span12 text-center">
{% trans "No account yet?" %}
</div>
</div>
<div class="row-fluid">
<div class="span12 text-center">
<a class="btn btn-success" href="{{ path("login_register") }}">{% trans "Register" %}</a>
</div>
</div>
</div><!-- /sidebar block -->
{% include "login/include/register-link-block.html.twig" with {"login" : login } %}
{% endblock %}

View File

@@ -18,28 +18,28 @@
<div class="row-fluid">
<div class="span12">
<form name="register" class="authentication-sidebar-form">
<div class="row-fluid">
<div class="span12">
{{ auth_macro.fieldInput("first-name","First name","first_name",null,"text","icon-user", "Your first name") }}
</div>
<div class="row-fluid">
<div class="span12">
{{ auth_macro.fieldInput(form.firstName, form.vars.name, 'icon-user') }}
</div>
</div>
<div class="row-fluid">
<div class="span12">
{{ auth_macro.fieldInput("last-name","Last name","last_name",null,"text","icon-user", "Your last name") }}
</div>
<div class="span12">
{{ auth_macro.fieldInput(form.lastName, form.vars.name, 'icon-user') }}
</div>
</div>
<div class="row-fluid">
<div class="span12">
{{ auth_macro.fieldInput("email","E-mail","email",null,"email","icon-envelope", "Your e-mail address") }}
</div>
<div class="span12">
{{ auth_macro.fieldInput(form.email, form.vars.name, 'icon-envelope') }}
</div>
</div>
<div class="row-fluid">
<div class="span12">
{{ auth_macro.fieldInput("company","Company","company",null,"text","icon-briefcase", "Your company name") }}
</div>
<div class="row-fluid">
<div class="span12">
{{ auth_macro.fieldInput(form.company, form.vars.name, 'icon-briefcase') }}
</div>
</div>
<div class="sidebar-hint">

View File

@@ -27,35 +27,34 @@
<div class="span12">
<form class="authentication-sidebar-form">
<div class="row-fluid">
<div class="span12">
{{ auth_macro.fieldInput("first-name","First name","first_name",null,"text","icon-user", "Your first name") }}
</div>
</div>
<div class="span12">
{{ auth_macro.fieldInput(form.firstName, form.vars.name, 'icon-user') }}
</div>
</div>
<div class="row-fluid">
<div class="span12">
{{ auth_macro.fieldInput("last-name","Last name","last_name",null,"text","icon-user", "Your last name") }}
</div>
</div>
<div class="span12">
{{ auth_macro.fieldInput(form.lastName, form.vars.name, 'icon-user') }}
</div>
</div>
<div class="row-fluid">
<div class="span12">
{{ auth_macro.fieldInput("email","E-mail","email",null,"email","icon-envelope", "Your e-mail address") }}
</div>
</div>
<div class="span12">
{{ auth_macro.fieldInput(form.email, form.vars.name, 'icon-envelope') }}
</div>
</div>
<div class="row-fluid">
<div class="span12">
{{ auth_macro.fieldInput("company","Company","company",null,"text","icon-briefcase", "Your company name", "error") }}
{{ auth_macro.fieldError("Sed posuere consectetur est at lobortis.") }}
</div>
</div>
<div class="span12">
{{ auth_macro.fieldInput(form.company, form.vars.name, 'icon-briefcase') }}
</div>
</div>
<div class="row-fluid">
<div class="span12">
{{ auth_macro.fieldInput("job","Job","job",null,"text","icon-briefcase", "Your job name", "success") }}
</div>
</div>
<div class="row-fluid">
<div class="span12">
{{ auth_macro.fieldInput(form.job, form.vars.name, 'icon-briefcase') }}
</div>
</div>
<div class="sidebar-hint">
* {% trans "Mandatory fields" %}

View File

@@ -50,7 +50,6 @@ angular.module('phraseanetAuthentication', ['ui'])
case 'info' :
scope.icon = 'icon-info-sign';
break;
}
}
}
@@ -62,7 +61,7 @@ angular.module('phraseanetAuthentication', ['ui'])
function LoginFormController($scope) {
$scope.$watch('loginForm', function() {
$scope.loginForm.email.errors = {'filled' : true, 'valid' : true};
$scope.loginForm.password.errors = {'filled' : true};
$scope.loginForm.password.errors = {'filled' : true, 'valid' : true};
});
$scope.submit = function() {
@@ -70,7 +69,7 @@ function LoginFormController($scope) {
if (true === $scope.loginForm.$valid) {
$scope.loginForm.email.errors = {'filled' : true, 'valid' : true};
$scope.loginForm.password.errors = {'filled' : true};
$scope.loginForm.password.errors = {'filled' : true,'valid' : true};
// submit
return;
}
@@ -119,16 +118,16 @@ function forgottenPasswordFormCtrl($scope) {
function passwordChangeFormCtrl($scope) {
$scope.$watch('passwordChangeForm', function() {
$scope.passwordChangeForm.password.errors = {'filled' : true};
$scope.passwordChangeForm.passwordConfirm.errors = {'filled' : true};
$scope.passwordChangeForm.password.errors = {'filled' : true, 'valid' : true};
$scope.passwordChangeForm.passwordConfirm.errors = {'filled' : true, 'valid' : true};
});
$scope.submit = function() {
$scope.$broadcast('event:force-model-update');
if (true === $scope.passwordChangeForm.$valid) {
$scope.passwordChangeForm.password.errors = {'filled' : true};
$scope.passwordChangeForm.passwordConfirm.errors = {'filled' : true};
$scope.passwordChangeForm.password.errors = {'filled' : true, 'valid' : true};
$scope.passwordChangeForm.passwordConfirm.errors = {'filled' : true, 'valid' : true};
// submit
return;
}