rewrites default private.hbs for new zelda styles

closes #5073
- changes format to match new zelda layout
- modifies the input_password helper to allow customization of class & placeholder
This commit is contained in:
Austin Burdine 2015-05-23 23:40:42 -06:00
parent e7a078a541
commit bf0e40eda1
4 changed files with 73 additions and 47 deletions

View File

@ -42,19 +42,3 @@
color: color(var(--blue) lightness(-20%));
text-decoration: none;
}
.private-login h1 {
margin-bottom: 2rem;
text-indent: 0;
}
.private-login .form-group {
margin: 0;
}
.private-login input[type="password"] {
padding: 9px 7px;
border-radius: 3px 3px 0 0;
}
.private-login-button {
padding: 9px 1.8em;
border-radius: 0 0 3px 3px;
}

View File

@ -10,12 +10,23 @@ var hbs = require('express-hbs'),
utils = require('./utils'),
input_password;
input_password = function () {
var output = utils.inputTemplate({
input_password = function (options) {
options = options || {};
options.hash = options.hash || {};
var className = (options.hash.class) ? options.hash.class : 'private-login-password',
extras = 'autofocus="autofocus"',
output;
if (options.hash.placeholder) {
extras += ' placeholder="' + options.hash.placeholder + '"';
}
output = utils.inputTemplate({
type: 'password',
name: 'password',
className: 'private-login-password',
extras: 'autofocus="autofocus"'
className: className,
extras: extras
});
return new hbs.handlebars.SafeString(output);

View File

@ -18,33 +18,36 @@
<link rel="stylesheet" type='text/css' href='//fonts.googleapis.com/css?family=Open+Sans:400,300,700'>
<link rel="stylesheet" href="{{asset "ghost.css" ghost="true" minifyInProduction="true"}}" />
</head>
<body class="ghost-setup">
<main role="main" id="main" class="viewport">
<section class="setup-box js-setup-box fade-in">
<div class="vertical">
<form id="setup" class="setup-form private-login" method="post" novalidate="novalidate">
<h1>This blog is private</h1>
<div class="form-group">
<span class="input-icon icon-lock">
{{input_password}}
</span>
<button class="btn btn-green private-login-button" type="submit">
Enter
</button>
<body>
<div class="gh-app">
<div class="gh-viewport">
<main class="gh-main" role="main">
<div class="gh-flow">
<div class="gh-flow-content-wrap">
<section class="gh-flow-content">
<header>
<h1>This blog is private</h1>
</header>
<form class="gh-signin" method="post" novalidate="novalidate">
<div class="form-group">
<span class="input-icon icon-lock">
{{input_password class="gh-input" placeholder="Password"}}
</span>
</div>
<button class="btn btn-blue btn-block" type="submit">Enter Now</button>
</form>
</section>
</div>
</form>
</div>
</section>
</main>
{{#if error}}
<aside class="notification bottom">
<div class="js-bb-notification">
<section class="js-notification notification-error">
<span class="notification-message">{{error.message}}</span>
</section>
</div>
</main>
{{#if error}}
<aside class="gh-notifications">
<article class="gh-notification gh-notification-red">
<div id="gh-notification-content">{{error.message}}</div>
</article>
</aside>
{{/if}}
</div>
</aside>
{{/if}}
</div>
</body>
</html>

View File

@ -17,11 +17,39 @@ describe('{{input_password}} helper', function () {
should.exist(handlebars.helpers.input_password);
});
it('returns the correct input', function () {
it('returns the correct input when no custom options are specified', function () {
var markup = '<input class="private-login-password" type="password" name="password" autofocus="autofocus" />',
rendered = helpers.input_password();
should.exist(rendered);
String(rendered).should.equal(markup);
});
it('returns the correct input when a custom class is specified', function () {
var markup = '<input class="test-class" type="password" name="password" autofocus="autofocus" />',
options = {
hash: {
class: 'test-class'
}
},
rendered = helpers.input_password(options);
should.exist(rendered);
String(rendered).should.equal(markup);
});
it('returns the correct input when a custom placeholder is specified', function () {
var markup = '<input class="private-login-password" type="password" name="password" autofocus="autofocus" placeholder="Test" />',
options = {
hash: {
placeholder: 'Test'
}
},
rendered = helpers.input_password(options);
should.exist(rendered);
String(rendered).should.equal(markup);
});
});