Restyled forgot password pages

This commit is contained in:
Hillel Coren 2015-03-09 23:57:16 +02:00
parent e42c6b3ca2
commit e91c832cc2
13 changed files with 311 additions and 214 deletions

View File

@ -569,5 +569,13 @@ return array(
'api_tokens' => 'API Tokens', 'api_tokens' => 'API Tokens',
'users_and_tokens' => 'Users & Tokens', 'users_and_tokens' => 'Users & Tokens',
'account_login' => 'Account Login',
'recover_password' => 'Recover your password',
'forgot_password' => 'Forgot your password?',
'email_address' => 'Email address',
'lets_go' => 'Lets go',
'password_recovery' => 'Password Recovery',
'send_email' => 'Send email',
'set_password' => 'Set Password',
); );

View File

@ -560,6 +560,13 @@ return array(
'api_tokens' => 'API Tokens', 'api_tokens' => 'API Tokens',
'users_and_tokens' => 'Users & Tokens', 'users_and_tokens' => 'Users & Tokens',
'account_login' => 'Account Login',
'recover_password' => 'Recover your password',
'forgot_password' => 'Forgot your password?',
'email_address' => 'Email address',
'lets_go' => 'Lets go',
'password_recovery' => 'Password Recovery',
'send_email' => 'Send email',
'set_password' => 'Set Password',
); );

View File

@ -567,6 +567,14 @@ return array(
'api_tokens' => 'API Tokens', 'api_tokens' => 'API Tokens',
'users_and_tokens' => 'Users & Tokens', 'users_and_tokens' => 'Users & Tokens',
'account_login' => 'Account Login',
'recover_password' => 'Recover your password',
'forgot_password' => 'Forgot your password?',
'email_address' => 'Email address',
'lets_go' => 'Lets go',
'password_recovery' => 'Password Recovery',
'send_email' => 'Send email',
'set_password' => 'Set Password',
); );

View File

@ -539,6 +539,14 @@ return array(
'api_tokens' => 'API Tokens', 'api_tokens' => 'API Tokens',
'users_and_tokens' => 'Users & Tokens', 'users_and_tokens' => 'Users & Tokens',
'account_login' => 'Account Login',
'recover_password' => 'Recover your password',
'forgot_password' => 'Forgot your password?',
'email_address' => 'Email address',
'lets_go' => 'Lets go',
'password_recovery' => 'Password Recovery',
'send_email' => 'Send email',
'set_password' => 'Set Password',
); );

View File

@ -560,6 +560,13 @@ return array(
'api_tokens' => 'API Tokens', 'api_tokens' => 'API Tokens',
'users_and_tokens' => 'Users & Tokens', 'users_and_tokens' => 'Users & Tokens',
'account_login' => 'Account Login',
'recover_password' => 'Recover your password',
'forgot_password' => 'Forgot your password?',
'email_address' => 'Email address',
'lets_go' => 'Lets go',
'password_recovery' => 'Password Recovery',
'send_email' => 'Send email',
'set_password' => 'Set Password',
); );

View File

@ -562,6 +562,13 @@ return array(
'api_tokens' => 'API Tokens', 'api_tokens' => 'API Tokens',
'users_and_tokens' => 'Users & Tokens', 'users_and_tokens' => 'Users & Tokens',
'account_login' => 'Account Login',
'recover_password' => 'Recover your password',
'forgot_password' => 'Forgot your password?',
'email_address' => 'Email address',
'lets_go' => 'Lets go',
'password_recovery' => 'Password Recovery',
'send_email' => 'Send email',
'set_password' => 'Set Password',
); );

View File

@ -570,6 +570,14 @@ return array(
'api_tokens' => 'API Tokens', 'api_tokens' => 'API Tokens',
'users_and_tokens' => 'Users & Tokens', 'users_and_tokens' => 'Users & Tokens',
'account_login' => 'Account Login',
'recover_password' => 'Recover your password',
'forgot_password' => 'Forgot your password?',
'email_address' => 'Email address',
'lets_go' => 'Lets go',
'password_recovery' => 'Password Recovery',
'send_email' => 'Send email',
'set_password' => 'Set Password',
); );

View File

@ -568,6 +568,13 @@ return array(
'api_tokens' => 'API Tokens', 'api_tokens' => 'API Tokens',
'users_and_tokens' => 'Users & Tokens', 'users_and_tokens' => 'Users & Tokens',
'account_login' => 'Account Login',
'recover_password' => 'Recover your password',
'forgot_password' => 'Forgot your password?',
'email_address' => 'Email address',
'lets_go' => 'Lets go',
'password_recovery' => 'Password Recovery',
'send_email' => 'Send email',
'set_password' => 'Set Password',
); );

View File

@ -563,7 +563,14 @@ return array(
'api_tokens' => 'API Tokens', 'api_tokens' => 'API Tokens',
'users_and_tokens' => 'Users & Tokens', 'users_and_tokens' => 'Users & Tokens',
'account_login' => 'Account Login',
'recover_password' => 'Recover your password',
'forgot_password' => 'Forgot your password?',
'email_address' => 'Email address',
'lets_go' => 'Lets go',
'password_recovery' => 'Password Recovery',
'send_email' => 'Send email',
'set_password' => 'Set Password',
); );

View File

@ -551,6 +551,13 @@ return array(
'api_tokens' => 'API Tokens', 'api_tokens' => 'API Tokens',
'users_and_tokens' => 'Users & Tokens', 'users_and_tokens' => 'Users & Tokens',
'account_login' => 'Account Login',
'recover_password' => 'Recover your password',
'forgot_password' => 'Forgot your password?',
'email_address' => 'Email address',
'lets_go' => 'Lets go',
'password_recovery' => 'Password Recovery',
'send_email' => 'Send email',
'set_password' => 'Set Password',
); );

View File

@ -2,77 +2,85 @@
@section('head') @section('head')
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css"/> <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ asset('css/style.css') }}" rel="stylesheet" type="text/css"/>
<style type="text/css"> <style type="text/css">
body { body {
padding-top: 40px; padding-top: 40px;
padding-bottom: 40px; padding-bottom: 40px;
background-color: #eee !important; }
} .modal-header {
border-top-left-radius: 3px;
.form-signin { border-top-right-radius: 3px;
max-width: 330px; }
padding: 15px; .modal-header h4 {
margin: 0 auto; margin:0;
} }
.form-signin .form-signin-heading, .modal-header img {
.form-signin .checkbox { float: left;
margin-bottom: 10px; margin-right: 20px;
} }
.form-signin .checkbox { .form-signin {
font-weight: normal; max-width: 400px;
} margin: 0 auto;
.form-signin .form-control { background: #fff;
position: relative; }
font-size: 16px; p.link a {
height: auto; font-size: 11px;
padding: 10px; }
-webkit-box-sizing: border-box; .form-signin .inner {
-moz-box-sizing: border-box; padding: 20px;
box-sizing: border-box; border-bottom-right-radius: 3px;
} border-bottom-left-radius: 3px;
.form-signin .form-control:focus { border-left: 1px solid #ddd;
z-index: 2; border-right: 1px solid #ddd;
} border-bottom: 1px solid #ddd;
.form-signin input[type="text"] { }
margin-bottom: -1px; .form-signin .checkbox {
border-bottom-left-radius: 0; font-weight: normal;
border-bottom-right-radius: 0; }
} .form-signin .form-control {
.form-signin input[type="password"] { margin-bottom: 17px !important;
margin-bottom: 10px; }
border-top-left-radius: 0; .form-signin .form-control:focus {
border-top-right-radius: 0; z-index: 2;
} }
</style> </style>
@stop @stop
@section('body') @section('body')
<div class="container"> <div class="container">
{{ Former::open('forgot_password')->addClass('form-signin') }} {{ Former::open('forgot_password')->rules(['email' => 'required|email'])->addClass('form-signin') }}
<h2 class="form-signin-heading">Password Recovery</h2> <div class="modal-header">
<img src="{{ asset('images/icon-login.png') }}" />
<h4>Invoice Ninja | {{ trans('texts.password_recovery') }}</h4></div>
<div class="inner">
<p> <p>
{{ Form::text('email', Input::old('email'), array('placeholder' => 'Email address')) }} {{ Former::text('email')->placeholder(trans('texts.email_address'))->raw() }}
</p> </p>
<p>{{ Button::primary_submit('Send email', array('class' => 'btn-lg'))->block() }}</p> <p>{{ Button::success_submit(trans('texts.send_email'), array('class' => 'btn-lg'))->block() }}</p>
<!-- if there are login errors, show them here --> <!-- if there are login errors, show them here -->
@if ( Session::get('error') ) @if (Session::has('warning'))
<div class="alert alert-error">{{{ Session::get('error') }}}</div> <div class="alert alert-warning">{{ Session::get('warning') }}</div>
@endif @endif
@if ( Session::get('notice') ) @if (Session::has('message'))
<div class="alert">{{{ Session::get('notice') }}}</div> <div class="alert alert-info">{{ Session::get('message') }}</div>
@endif @endif
@if (Session::has('error'))
<div class="alert alert-danger">{{ Session::get('error') }}</div>
@endif
{{ Former::close() }} {{ Former::close() }}
</div> </div>
</div>
@stop @stop

View File

@ -2,101 +2,106 @@
@section('head') @section('head')
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css"/> <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ asset('css/style.css') }}" rel="stylesheet" type="text/css"/> <link href="{{ asset('css/style.css') }}" rel="stylesheet" type="text/css"/>
<style type="text/css"> <style type="text/css">
body { body {
padding-top: 40px; padding-top: 40px;
padding-bottom: 40px; padding-bottom: 40px;
} }
.modal-header { .modal-header {
border-top-left-radius: 3px; border-top-left-radius: 3px;
border-top-right-radius: 3px; border-top-right-radius: 3px;
} }
.modal-header h4 { .modal-header h4 {
margin:0; margin:0;
} }
.modal-header img { .modal-header img {
float: left; float: left;
margin-right: 20px; margin-right: 20px;
} }
.form-signin { .form-signin {
max-width: 400px; max-width: 400px;
margin: 0 auto; margin: 0 auto;
background: #fff; background: #fff;
} }
p.link a { p.link a {
font-size: 11px; font-size: 11px;
} }
.form-signin .inner { .form-signin .inner {
padding: 20px; padding: 20px;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
border-left: 1px solid #ddd; border-left: 1px solid #ddd;
border-right: 1px solid #ddd; border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
.form-signin .checkbox { .form-signin .checkbox {
font-weight: normal; font-weight: normal;
} }
.form-signin .form-control { .form-signin .form-control {
margin-bottom: 17px !important; margin-bottom: 17px !important;
} }
.form-signin .form-control:focus { .form-signin .form-control:focus {
z-index: 2; z-index: 2;
} }
</style> </style>
@stop @stop
@section('body') @section('body')
<div class="container"> <div class="container">
{{ Former::open('login')->addClass('form-signin') }}
<div class="modal-header">
<img src="{{ asset('images/icon-login.png') }}" />
<h4>Invoice Ninja Account Login</h4></div>
<div class="inner">
<p>
{{ $errors->first('login_email') }}
{{ $errors->first('login_password') }}
</p>
<p> {{ Former::open('login')->rules(['login_email' => 'required|email', 'login_password' => 'required'])->addClass('form-signin') }}
{{ Form::text('login_email', Input::old('login_email'), array('placeholder' => 'Email address')) }} <div class="modal-header">
{{ Form::password('login_password', array('placeholder' => 'Password')) }} <img src="{{ asset('images/icon-login.png') }}" />
</p> <h4>Invoice Ninja | {{ trans('texts.account_login') }}</h4></div>
<div class="inner">
<p>
{{ $errors->first('login_email') }}
{{ $errors->first('login_password') }}
</p>
<p>{{ Button::success_submit('Lets go', array('class' => 'btn-lg'))->block() }}</p> <p>
{{ Former::text('login_email')->placeholder(trans('texts.email_address'))->raw() }}
{{ Former::password('login_password')->placeholder(trans('texts.password'))->raw() }}
</p>
<p>{{ Button::success_submit(trans('texts.lets_go'), array('class' => 'btn-lg'))->block() }}</p>
<p class="link"> <p class="link">
{{ link_to('forgot_password', 'Forgot your password?') }} {{ link_to('forgot_password', trans('texts.forgot_password')) }}
</p> </p>
<!-- if there are login errors, show them here --> @if (Session::has('warning'))
@if ( Session::get('error') ) <div class="alert alert-warning">{{ Session::get('warning') }}</div>
<div class="alert alert-error">{{{ Session::get('error') }}}</div> @endif
@endif
@if ( Session::get('notice') ) @if (Session::has('message'))
<div class="alert">{{{ Session::get('notice') }}}</div> <div class="alert alert-info">{{ Session::get('message') }}</div>
@endif @endif
</div>
{{ Former::close() }} @if (Session::has('error'))
<div class="alert alert-danger">{{ Session::get('error') }}</div>
@endif
</div>
{{ Former::close() }}
@if (!Utils::isNinja()) @if (!Utils::isNinja())
<p/> <p/>
<center> <center>
<div id="fb-root"></div> <div id="fb-root"></div>
<script>(function(d, s, id) { <script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0]; var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id; js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=635126583203143"; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=635126583203143";
fjs.parentNode.insertBefore(js, fjs); fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script> }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-follow" data-href="https://www.facebook.com/invoiceninja" data-colorscheme="light" data-layout="button" data-show-faces="false"></div>&nbsp;&nbsp; <div class="fb-follow" data-href="https://www.facebook.com/invoiceninja" data-colorscheme="light" data-layout="button" data-show-faces="false"></div>&nbsp;&nbsp;
@ -105,9 +110,9 @@
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<iframe src="https://ghbtns.com/github-btn.html?user=hillelcoren&repo=invoice-ninja&type=star&count=false" frameborder="0" scrolling="0" width="50px" height="20px"></iframe> <iframe src="https://ghbtns.com/github-btn.html?user=hillelcoren&repo=invoice-ninja&type=star&count=false" frameborder="0" scrolling="0" width="50px" height="20px"></iframe>
</center> </center>
@endif @endif
</div> </div>
@stop @stop

View File

@ -2,84 +2,94 @@
@section('head') @section('head')
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css"/> <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ asset('css/style.css') }}" rel="stylesheet" type="text/css"/>
<style type="text/css"> <style type="text/css">
body { body {
padding-top: 40px; padding-top: 40px;
padding-bottom: 40px; padding-bottom: 40px;
background-color: #eee !important; }
} .modal-header {
border-top-left-radius: 3px;
.form-signin { border-top-right-radius: 3px;
max-width: 450px; }
padding: 15px; .modal-header h4 {
margin: 0 auto; margin:0;
} }
.form-signin .form-signin-heading, .modal-header img {
.form-signin .checkbox { float: left;
margin-bottom: 10px; margin-right: 20px;
} }
.form-signin .checkbox { .form-signin {
font-weight: normal; max-width: 400px;
} margin: 0 auto;
.form-signin .form-control { background: #fff;
position: relative; }
font-size: 16px; p.link a {
height: auto; font-size: 11px;
padding: 10px; }
-webkit-box-sizing: border-box; .form-signin .inner {
-moz-box-sizing: border-box; padding: 20px;
box-sizing: border-box; border-bottom-right-radius: 3px;
} border-bottom-left-radius: 3px;
.form-signin .form-control:focus { border-left: 1px solid #ddd;
z-index: 2; border-right: 1px solid #ddd;
} border-bottom: 1px solid #ddd;
.form-signin input[type="text"] { }
margin-bottom: -1px; .form-signin .checkbox {
border-bottom-left-radius: 0; font-weight: normal;
border-bottom-right-radius: 0; }
} .form-signin .form-control {
.form-signin input[type="password"] { margin-bottom: 17px !important;
margin-bottom: 10px; }
border-top-left-radius: 0; .form-signin .form-control:focus {
border-top-right-radius: 0; z-index: 2;
} }
</style> </style>
@stop @stop
@section('body') @section('body')
<div class="container"> <div class="container">
{{ Former::open('user/reset')->addClass('form-signin')->rules(array( {{ Former::open('user/reset')->addClass('form-signin')->rules(array(
'password' => 'required', 'password' => 'required',
'password_confirmation' => 'required', 'password_confirmation' => 'required',
)); }} )); }}
<h2 class="form-signin-heading">Set Password</h2><p/>&nbsp; <div class="modal-header">
<input type="hidden" name="token" value="{{{ $token }}}"> <img src="{{ asset('images/icon-login.png') }}" />
<h4>Invoice Ninja | {{ trans('texts.set_password') }}</h4></div>
<div class="inner">
<p> <input type="hidden" name="token" value="{{{ $token }}}">
{{ Former::password('password') }}
{{ Former::password('password_confirmation')->label('Confirm') }}
</p> <p>
{{ Former::password('password')->placeholder(trans('texts.password'))->raw() }}
{{ Former::password('password_confirmation')->placeholder(trans('texts.confirm_password'))->raw() }}
<p>{{ Button::primary_submit('Save', array('class' => 'btn-lg'))->block() }}</p> </p>
<!-- if there are login errors, show them here --> <p>{{ Button::success_submit(trans('texts.save'), array('class' => 'btn-lg'))->block() }}</p>
@if ( Session::get('error') )
<div class="alert alert-error">{{{ Session::get('error') }}}</div>
@endif
@if ( Session::get('notice') ) <!-- if there are login errors, show them here -->
<div class="alert">{{{ Session::get('notice') }}}</div> @if (Session::has('warning'))
@endif <div class="alert alert-warning">{{ Session::get('warning') }}</div>
@endif
@if (Session::has('message'))
<div class="alert alert-info">{{ Session::get('message') }}</div>
@endif
@if (Session::has('error'))
<div class="alert alert-danger">{{ Session::get('error') }}</div>
@endif
{{ Former::close() }} {{ Former::close() }}
</div>
</div> </div>
@stop @stop