Ghost/ghost/admin/app/templates/signup.hbs
Sanne de Vries 3ae3e8142a 🎨 Redesigned user authentication pages (#2286)
Refs https://www.notion.so/ghost/Invite-staff-users-steps-in-setup-guide-367737e13d97450a98a0f39ec6b68181

* Simplified the selfhoster setup flow to one setup page only
* Redesigned the reset password pages and the signup page for new staff members

Co-authored-by: Daniel Lockyer <hi@daniellockyer.com>
2022-03-08 17:30:46 +00:00

81 lines
4.1 KiB
Handlebars

<div class="gh-flow">
<div class="gh-flow-content-wrap">
<section class="gh-flow-content">
<header>
<div class="gh-site-icon" style={{site-icon-style}}></div>
<h1>Create your account.</h1>
</header>
<form id="signup" class="gh-signup" method="post" novalidate="novalidate" onsubmit={{action "submit"}}>
<GhFormGroup @errors={{this.signupDetails.errors}} @hasValidated={{this.signupDetails.hasValidated}} @property="name">
<label for="name">Full name</label>
<span class="gh-input-icon gh-icon-user">
<GhTrimFocusInput
@tabindex="1"
@type="text"
@id="display-name"
@name="display-name"
@placeholder="Jamie Larson"
@autocorrect="off"
@autocomplete="name"
@value={{readonly this.signupDetails.name}}
@input={{action (mut this.signupDetails.name) value="target.value"}}
@focus-out={{action "validate" "name"}}
data-test-input="name"
/>
</span>
<GhErrorMessage @errors={{this.signupDetails.errors}} @property="name" />
</GhFormGroup>
<GhFormGroup @errors={{this.signupDetails.errors}} @hasValidated={{this.signupDetails.hasValidated}} @property="email">
<label for="email">Email address</label>
<span class="gh-input-icon gh-icon-mail">
<GhTextInput
@tabindex="2"
@type="text"
@id="username"
@name="username"
@placeholder="jamie@example.com"
@autocorrect="off"
@autocomplete="username email"
@value={{readonly this.signupDetails.email}}
@input={{action (mut this.signupDetails.email) value="target.value"}}
@focus-out={{action "validate" "email"}}
data-test-input="email"
/>
</span>
<GhErrorMessage @errors={{this.signupDetails.errors}} @property="email" />
</GhFormGroup>
<GhFormGroup @errors={{this.signupDetails.errors}} @hasValidated={{this.signupDetails.hasValidated}} @property="password">
<label for="password">Password</label>
<span class="gh-input-icon gh-icon-lock">
<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"}}
data-test-input="password"
/>
</span>
<GhErrorMessage @errors={{this.signupDetails.errors}} @property="password" />
</GhFormGroup>
<GhTaskButton @buttonText="Create Account &rarr;" @type="submit" @form="signup" @defaultClick={{true}} @runningText="Creating"
@task={{this.signup}} @data-test-button="signup" @class="gh-btn gh-btn-black gh-btn-signup gh-btn-block gh-btn-icon" @tabindex="3" />
</form>
{{#if this.flowErrors}}
<p class="main-error">{{this.flowErrors}}&nbsp;</p>
{{/if}}
</section>
</div>
</div>