2015-05-17 15:31:54 +03:00
|
|
|
<div class="gh-flow">
|
2014-07-30 19:04:03 +04:00
|
|
|
|
2015-05-17 15:31:54 +03:00
|
|
|
<div class="gh-flow-content-wrap">
|
|
|
|
<section class="gh-flow-content">
|
2017-09-04 22:17:04 +03:00
|
|
|
<header>
|
2022-03-08 20:30:46 +03:00
|
|
|
<div class="gh-site-icon" style={{site-icon-style}}></div>
|
|
|
|
<h1>Create your account.</h1>
|
2017-09-04 22:17:04 +03:00
|
|
|
</header>
|
2016-09-30 14:43:40 +03:00
|
|
|
|
2022-03-08 20:30:46 +03:00
|
|
|
<form id="signup" class="gh-signup" method="post" novalidate="novalidate" onsubmit={{action "submit"}}>
|
2020-01-16 18:14:03 +03:00
|
|
|
<GhFormGroup @errors={{this.signupDetails.errors}} @hasValidated={{this.signupDetails.hasValidated}} @property="name">
|
2018-09-17 18:03:58 +03:00
|
|
|
<label for="name">Full name</label>
|
2017-09-04 22:17:04 +03:00
|
|
|
<span class="gh-input-icon gh-icon-user">
|
2020-01-16 18:14:03 +03:00
|
|
|
<GhTrimFocusInput
|
|
|
|
@tabindex="1"
|
|
|
|
@type="text"
|
|
|
|
@id="display-name"
|
|
|
|
@name="display-name"
|
2022-03-08 20:30:46 +03:00
|
|
|
@placeholder="Jamie Larson"
|
2020-01-16 18:14:03 +03:00
|
|
|
@autocorrect="off"
|
|
|
|
@autocomplete="name"
|
|
|
|
@value={{readonly this.signupDetails.name}}
|
|
|
|
@input={{action (mut this.signupDetails.name) value="target.value"}}
|
|
|
|
@focus-out={{action "validate" "name"}}
|
2019-01-31 13:27:40 +03:00
|
|
|
data-test-input="name"
|
2020-01-16 18:14:03 +03:00
|
|
|
/>
|
2017-09-04 22:17:04 +03:00
|
|
|
</span>
|
2019-12-13 19:11:49 +03:00
|
|
|
<GhErrorMessage @errors={{this.signupDetails.errors}} @property="name" />
|
2020-01-16 18:14:03 +03:00
|
|
|
</GhFormGroup>
|
2016-09-30 14:43:40 +03:00
|
|
|
|
2020-01-16 18:14:03 +03:00
|
|
|
<GhFormGroup @errors={{this.signupDetails.errors}} @hasValidated={{this.signupDetails.hasValidated}} @property="email">
|
2019-02-11 14:35:27 +03:00
|
|
|
<label for="email">Email address</label>
|
|
|
|
<span class="gh-input-icon gh-icon-mail">
|
2020-01-16 18:14:03 +03:00
|
|
|
<GhTextInput
|
|
|
|
@tabindex="2"
|
|
|
|
@type="text"
|
|
|
|
@id="username"
|
|
|
|
@name="username"
|
2022-03-08 20:30:46 +03:00
|
|
|
@placeholder="jamie@example.com"
|
2020-01-16 18:14:03 +03:00
|
|
|
@autocorrect="off"
|
|
|
|
@autocomplete="username email"
|
|
|
|
@value={{readonly this.signupDetails.email}}
|
|
|
|
@input={{action (mut this.signupDetails.email) value="target.value"}}
|
|
|
|
@focus-out={{action "validate" "email"}}
|
2019-02-11 14:35:27 +03:00
|
|
|
data-test-input="email"
|
2020-01-16 18:14:03 +03:00
|
|
|
/>
|
2019-02-11 14:35:27 +03:00
|
|
|
</span>
|
2019-12-13 19:11:49 +03:00
|
|
|
<GhErrorMessage @errors={{this.signupDetails.errors}} @property="email" />
|
2020-01-16 18:14:03 +03:00
|
|
|
</GhFormGroup>
|
2019-02-11 14:35:27 +03:00
|
|
|
|
2020-01-16 18:14:03 +03:00
|
|
|
<GhFormGroup @errors={{this.signupDetails.errors}} @hasValidated={{this.signupDetails.hasValidated}} @property="password">
|
2017-09-04 22:17:04 +03:00
|
|
|
<label for="password">Password</label>
|
|
|
|
<span class="gh-input-icon gh-icon-lock">
|
2020-01-16 18:14:03 +03:00
|
|
|
<GhTextInput
|
|
|
|
@tabindex="3"
|
|
|
|
@type="password"
|
|
|
|
@id="password"
|
|
|
|
@name="password"
|
|
|
|
@placeholder="At least 10 characters"
|
|
|
|
@autocorrect="off"
|
|
|
|
@autocomplete="new-password"
|
|
|
|
@value={{readonly this.signupDetails.password}}
|
|
|
|
@input={{action (mut this.signupDetails.password) value="target.value"}}
|
|
|
|
@focus-out={{action "validate" "password"}}
|
2019-01-31 13:27:40 +03:00
|
|
|
data-test-input="password"
|
2020-01-16 18:14:03 +03:00
|
|
|
/>
|
2017-09-04 22:17:04 +03:00
|
|
|
</span>
|
2019-12-13 19:11:49 +03:00
|
|
|
<GhErrorMessage @errors={{this.signupDetails.errors}} @property="password" />
|
2020-01-16 18:14:03 +03:00
|
|
|
</GhFormGroup>
|
2016-09-30 14:43:40 +03:00
|
|
|
|
2022-03-08 20:30:46 +03:00
|
|
|
<GhTaskButton @buttonText="Create Account →" @type="submit" @form="signup" @defaultClick={{true}} @runningText="Creating"
|
2022-03-09 15:24:36 +03:00
|
|
|
@task={{this.signup}} @data-test-button="signup" @class="gh-btn gh-btn-signup gh-btn-block gh-btn-icon" @tabindex="3" style={{accent-color-background}} />
|
2020-01-21 14:14:35 +03:00
|
|
|
</form>
|
2022-03-08 20:30:46 +03:00
|
|
|
{{#if this.flowErrors}}
|
|
|
|
<p class="main-error">{{this.flowErrors}} </p>
|
|
|
|
{{/if}}
|
2015-05-17 15:31:54 +03:00
|
|
|
</section>
|
2014-07-17 15:34:40 +04:00
|
|
|
</div>
|
2015-05-17 15:31:54 +03:00
|
|
|
|
|
|
|
</div>
|