Refactored Form system to get simple error handling and a clearer

interface
This commit is contained in:
franck
2013-07-16 16:34:47 +02:00
parent d250e0c660
commit e8bf47b929
26 changed files with 626 additions and 220 deletions

View File

@@ -235,4 +235,162 @@ hr {
border: 1px solid #e5e5e5;
.border-radius;
.box-shadow;
}
// -- Allow inline forms validation states ------------------------------------
.form-inline .warning .control-label,
.form-inline .warning .help-block,
.form-inline .warning .help-inline {
color: #c09853;
}
.form-inline .warning .checkbox,
.form-inline .warning .radio,
.form-inline .warning input,
.form-inline .warning select,
.form-inline .warning textarea {
color: #c09853;
}
.form-inline .warning input,
.form-inline .warning select,
.form-inline .warning textarea {
border-color: #c09853;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.form-inline .warning input:focus,
.form-inline .warning select:focus,
.form-inline .warning textarea:focus {
border-color: #a47e3c;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
}
.form-inline .warning .input-prepend .add-on,
.form-inline .warning .input-append .add-on {
color: #c09853;
background-color: #fcf8e3;
border-color: #c09853;
}
.form-inline .error .control-label,
.form-inline .error .help-block,
.form-inline .error .help-inline {
color: #b94a48;
}
.form-inline .error .checkbox,
.form-inline .error .radio,
.form-inline .error input,
.form-inline .error select,
.form-inline .error textarea {
color: #b94a48;
}
.form-inline .error input,
.form-inline .error select,
.form-inline .error textarea {
border-color: #b94a48;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.form-inline .error input:focus,
.form-inline .error select:focus,
.form-inline .error textarea:focus {
border-color: #953b39;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
}
.form-inline .error .input-prepend .add-on,
.form-inline .error .input-append .add-on {
color: #b94a48;
background-color: #f2dede;
border-color: #b94a48;
}
.form-inline .success .control-label,
.form-inline .success .help-block,
.form-inline .success .help-inline {
color: #468847;
}
.form-inline .success .checkbox,
.form-inline .success .radio,
.form-inline .success input,
.form-inline .success select,
.form-inline .success textarea {
color: #468847;
}
.form-inline .success input,
.form-inline .success select,
.form-inline .success textarea {
border-color: #468847;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.form-inline .success input:focus,
.form-inline .success select:focus,
.form-inline .success textarea:focus {
border-color: #356635;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
}
.form-inline .success .input-prepend .add-on,
.form-inline .success .input-append .add-on {
color: #468847;
background-color: #dff0d8;
border-color: #468847;
}
.form-inline .info .control-label,
.form-inline .info .help-block,
.form-inline .info .help-inline {
color: #3a87ad;
}
.form-inline .info .checkbox,
.form-inline .info .radio,
.form-inline .info input,
.form-inline .info select,
.form-inline .info textarea {
color: #3a87ad;
}
.form-inline .info input,
.form-inline .info select,
.form-inline .info textarea {
border-color: #3a87ad;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.form-inline .info input:focus,
.form-inline .info select:focus,
.form-inline .info textarea:focus {
border-color: #2d6987;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
}
.form-inline .info .input-prepend .add-on,
.form-inline .info .input-append .add-on {
color: #3a87ad;
background-color: #d9edf7;
border-color: #3a87ad;
}

View File

@@ -1,4 +1,4 @@
{check_auth context="admin" roles="ADMIN"}
{check_auth context="admin" roles="ADMIN" login_url="login"}
{$page_title={intl l='Home'}}
{include file='includes/header.inc.html'}

View File

@@ -13,28 +13,36 @@
<div class="hero-unit">
<h1>{intl l='Thelia Back Office'}</h1>
{form name="thelia.admin.login" success_url="home" error_url="login"}
<form action="checklogin" method="post" class="well form-inline" {form_enctype form=$form}>
{if isset($message)}<div class="alert alert-error">{$message}</div>{/if}
{form_field_hidden form=$form}
{form_hidden_fields form=$form}
{form_field form=$form.username}
{form_error form=$form.username}{$message}{/form_error}
<input type="text" class="input" placeholder="{intl l='E-mail address'}" name="{$name}" />
{form_field form=$form field='success_url'}
<input type="hidden" name="{$name}" value="{url path='admin'}" /> {* redirect to /admin *}
{/form_field}
{form_field form=$form field='username'}
<span {if $error}class="error"{/if}>
<input type="text" class="input" placeholder="{intl l='User name'}" name="{$name}" value="{$value}" {$attr} />
</span>
{/form_field}
{form_field form=$form.password}
{form_error form=$form.password}{$message}{/form_error}
<input type="password" class="input" placeholder="{intl l='Password'}" name="{$name}" />
{form_field form=$form field='password'}
<span {if $error}class="error"{/if}>
<input type="password" class="input" placeholder="{intl l='Password'}" name="{$name}" {$attr} />
</span>
{/form_field}
{form_field form=$form.remember_me}
<label class="checkbox"> <input type="checkbox" name="remember" value="yes" /> {intl l='Remember me'}</label>
{form_field form=$form field='remember_me'}
<label class="checkbox"> <input type="checkbox" name="{$name}" value="{$value}" {$attr} {if $options.checked}checked="checked"{/if}/> {intl l='Remember me'}</label>
{/form_field}
<span class="pull-right"><button type="submit" class="btn btn-primary">{intl l='Login'} <i class="icon-play icon-white"></i></button></span>
</form>
{/form}
</div>
{module_include location='index_middle'}