Ghost/ghost/admin/app/templates/signup.hbs
Kevin Ansfield 525fb2a720 Fixed submit-on-enter and password manager issues on signup
closes https://github.com/TryGhost/Ghost/issues/9868
- moved submit action to the `<form>` which allowed removal of the per-input enter key handlers
- changed submit button to trigger the form submit
- improved markup for password managers
  - linked labels with inputs
  - changed button to a "submit" type and linked it with the form
  - added hidden email input at the bottom of the form in case password managers do not take disabled inputs into account
2018-09-17 16:03:58 +01:00

87 lines
4.0 KiB
Handlebars

<div class="gh-flow">
<div class="gh-flow-content-wrap">
<section class="gh-flow-content">
<header>
<h1>Create your account</h1>
</header>
<form id="signup" class="gh-flow-create" method="post" novalidate="novalidate" {{action (perform submit) on="submit"}}>
{{!-- Hack to stop Chrome's broken auto-fills --}}
<input style="display:none;" type="text" name="fakeusernameremembered"/>
<input style="display:none;" type="password" name="fakepasswordremembered"/>
{{gh-profile-image email=signupDetails.email setImage=(action "setImage")}}
{{#gh-form-group errors=signupDetails.errors hasValidated=signupDetails.hasValidated property="email"}}
<label for="email">Email address</label>
<span class="gh-input-icon gh-icon-mail">
{{svg-jar "email"}}
{{gh-text-input
type="email"
id="email"
name="email"
placeholder="Eg. john@example.com"
disabled="disabled"
autocorrect="off"
value=(readonly signupDetails.email)
input=(action (mut signupDetails.email) value="target.value")
}}
</span>
{{/gh-form-group}}
{{#gh-form-group errors=signupDetails.errors hasValidated=signupDetails.hasValidated property="name"}}
<label for="name">Full name</label>
<span class="gh-input-icon gh-icon-user">
{{svg-jar "user-circle"}}
{{gh-trim-focus-input
tabindex="1"
type="text"
id="name"
name="name"
placeholder="Eg. John H. Watson"
autocorrect="off"
value=(readonly signupDetails.name)
input=(action (mut signupDetails.name) value="target.value")
focus-out=(action "validate" "name")
}}
</span>
{{gh-error-message errors=signupDetails.errors property="name"}}
{{/gh-form-group}}
{{#gh-form-group errors=signupDetails.errors hasValidated=signupDetails.hasValidated property="password"}}
<label for="password">Password</label>
<span class="gh-input-icon gh-icon-lock">
{{svg-jar "lock"}}
{{gh-text-input
tabindex="2"
type="password"
id="password"
name="password"
placeholder="At least 10 characters"
autocorrect="off"
value=(readonly signupDetails.password)
input=(action (mut signupDetails.password) value="target.value")
focus-out=(action "validate" "password")}}
</span>
{{gh-error-message errors=signupDetails.errors property="password"}}
{{/gh-form-group}}
{{!-- include the email field again in case password managers ignore the disabled input --}}
<input type="hidden" name="email" value={{signupDetails.email}} />
</form>
{{gh-task-button "Create Account"
type="submit"
form="signup"
runningText="Creating"
task=signup
class="gh-btn gh-btn-green gh-btn-lg gh-btn-block gh-btn-icon"
tabindex="3"}}
<p class="main-error">{{if flowErrors flowErrors}}&nbsp;</p>
</section>
</div>
</div>