Ghost/core/client/app/templates/setup/two.hbs
Hannah Wolfe 9b6214b9ad Form field icons load in default 'grey' state
ref #5652

- validations can be in default, success or error state
- adds check for 'hasValidated' if the validations haven't fired yet, the field is in the default state
- hasValidated is an Ember.Array which tracks the state for each field
2015-09-01 13:02:27 +01:00

45 lines
2.5 KiB
Handlebars

<header>
<h1>Create your account</h1>
</header>
<form id="setup" class="gh-flow-create">
{{!-- Horrible hack to prevent Chrome from incorrectly auto-filling inputs --}}
<input style="display:none;" type="text" name="fakeusernameremembered"/>
<input style="display:none;" type="password" name="fakepasswordremembered"/>
{{gh-profile-image fileStorage=config.fileStorage email=validEmail setImage="setImage"}}
{{#gh-form-group errors=errors hasValidated=hasValidated property="email"}}
<label for="email-address">Email address</label>
<span class="input-icon icon-mail">
{{gh-trim-focus-input tabindex="1" type="email" name="email" placeholder="Eg. john@example.com" autocorrect="off" value=email focusOut=(action "preValidate" "email")}}
</span>
{{gh-error-message errors=errors property="email"}}
{{/gh-form-group}}
{{#gh-form-group errors=errors hasValidated=hasValidated property="name"}}
<label for="full-name">Full name</label>
<span class="input-icon icon-user">
{{gh-input tabindex="2" type="text" name="name" placeholder="Eg. John H. Watson" autocorrect="off" value=name focusOut=(action "preValidate" "name")}}
</span>
{{gh-error-message errors=errors property="name"}}
{{/gh-form-group}}
{{#gh-form-group errors=errors hasValidated=hasValidated property="password"}}
<label for="password">Password</label>
<span class="input-icon icon-lock">
{{gh-input tabindex="3" type="password" name="password" placeholder="At least 8 characters" autocorrect="off" value=password focusOut=(action "preValidate" "password")}}
</span>
{{gh-error-message errors=errors property="password"}}
{{/gh-form-group}}
{{#gh-form-group errors=errors hasValidated=hasValidated property="blogTitle"}}
<label for="blog-title">Blog title</label>
<span class="input-icon icon-content">
{{gh-input tabindex="4" type="text" name="blog-title" placeholder="Eg. The Daily Awesome" autocorrect="off" value=blogTitle focusOut=(action "preValidate" "blogTitle")}}
</span>
{{gh-error-message errors=errors property="blogTitle"}}
{{/gh-form-group}}
{{#gh-spin-button type="submit" tabindex="5" class="btn btn-green btn-lg btn-block" action="setup" submitting=submitting autoWidth="false"}}
Last step: Invite your team <i class="icon-chevron"></i>
{{/gh-spin-button}}
</form>
<p class="main-error">{{{flowErrors}}}</p>