90 lines
4.1 KiB
Handlebars
90 lines
4.1 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" onsubmit={{action "submit"}}>
|
|
{{gh-profile-image email=signupDetails.email setImage=(action "setImage")}}
|
|
|
|
{{#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="display-name"
|
|
name="display-name"
|
|
placeholder="Eg. John H. Watson"
|
|
autocorrect="off"
|
|
autocomplete="name"
|
|
value=(readonly signupDetails.name)
|
|
input=(action (mut signupDetails.name) value="target.value")
|
|
focus-out=(action "validate" "name")
|
|
data-test-input="name"
|
|
}}
|
|
</span>
|
|
{{gh-error-message errors=signupDetails.errors property="name"}}
|
|
{{/gh-form-group}}
|
|
|
|
{{#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
|
|
tabindex="2"
|
|
type="text"
|
|
id="username"
|
|
name="username"
|
|
placeholder="Eg. john@example.com"
|
|
autocorrect="off"
|
|
autocomplete="username email"
|
|
value=(readonly signupDetails.email)
|
|
input=(action (mut signupDetails.email) value="target.value")
|
|
focus-out=(action "validate" "email")
|
|
data-test-input="email"
|
|
}}
|
|
</span>
|
|
{{gh-error-message errors=signupDetails.errors property="email"}}
|
|
{{/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="3"
|
|
type="password"
|
|
id="password"
|
|
name="password"
|
|
placeholder="At least 10 characters"
|
|
autocorrect="off"
|
|
autocomplete="new-password"
|
|
value=(readonly signupDetails.password)
|
|
input=(action (mut signupDetails.password) value="target.value")
|
|
focus-out=(action "validate" "password")
|
|
data-test-input="password"
|
|
}}
|
|
</span>
|
|
{{gh-error-message errors=signupDetails.errors property="password"}}
|
|
{{/gh-form-group}}
|
|
</form>
|
|
|
|
{{gh-task-button "Create Account"
|
|
type="submit"
|
|
form="signup"
|
|
defaultClick=true
|
|
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}} </p>
|
|
</section>
|
|
</div>
|
|
|
|
</div>
|