mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-28 22:43:30 +03:00
3ae3e8142a
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>
96 lines
4.6 KiB
Handlebars
96 lines
4.6 KiB
Handlebars
<section class="gh-flow gh-setup">
|
||
<div class="gh-flow-content">
|
||
<header>
|
||
{{svg-jar "ghost-orb" alt="Ghost"}}
|
||
<h1>Welcome to Ghost.</h1>
|
||
<p>All over the world, people have started 3,000,000+ incredible sites with Ghost. Today, we’re starting yours.</p>
|
||
</header>
|
||
|
||
<form id="setup" class="gh-flow-form">
|
||
<GhFormGroup @errors={{this.errors}} @hasValidated={{this.hasValidated}} @property="blogTitle">
|
||
<label for="blog-title">Site title</label>
|
||
<span class="gh-input-icon gh-icon-content">
|
||
<GhTrimFocusInput
|
||
@tabindex="1"
|
||
@type="text"
|
||
@id="blog-title"
|
||
@name="blog-title"
|
||
@placeholder="The Daily Awesome"
|
||
@autocorrect="off"
|
||
@value={{readonly this.blogTitle}}
|
||
@input={{action (mut this.blogTitle) value="target.value"}}
|
||
@focus-out={{action "preValidate" "blogTitle"}}
|
||
data-test-blog-title-input={{true}} />
|
||
</span>
|
||
<GhErrorMessage @errors={{this.errors}} @property="blogTitle" />
|
||
</GhFormGroup>
|
||
|
||
<GhFormGroup @errors={{this.errors}} @hasValidated={{this.hasValidated}} @property="name">
|
||
<label for="name">Full name</label>
|
||
<span class="gh-input-icon gh-icon-user">
|
||
<GhTextInput
|
||
@tabindex="2"
|
||
@id="name"
|
||
@name="name"
|
||
@placeholder="Jamie Larson"
|
||
@autocorrect="off"
|
||
@autocomplete="name"
|
||
@value={{readonly this.name}}
|
||
@input={{action (mut this.name) value="target.value"}}
|
||
@focus-out={{action "preValidate" "name"}}
|
||
data-test-name-input={{true}} />
|
||
</span>
|
||
<GhErrorMessage @errors={{this.errors}} @property="name" />
|
||
</GhFormGroup>
|
||
|
||
<GhFormGroup @errors={{this.errors}} @hasValidated={{this.hasValidated}} @property="email">
|
||
<label for="email">Email address</label>
|
||
<span class="gh-input-icon gh-icon-mail">
|
||
<GhTextInput
|
||
@tabindex="3"
|
||
@type="email"
|
||
@id="email"
|
||
@name="email"
|
||
@placeholder="jamie@example.com"
|
||
@autocorrect="off"
|
||
@autocomplete="username email"
|
||
@value={{readonly this.email}}
|
||
@input={{action (mut this.email) value="target.value"}}
|
||
@focus-out={{action "preValidate" "email"}}
|
||
data-test-email-input={{true}} />
|
||
</span>
|
||
<GhErrorMessage @errors={{this.errors}} @property="email" />
|
||
</GhFormGroup>
|
||
|
||
<GhFormGroup @errors={{this.errors}} @hasValidated={{this.hasValidated}} @property="password">
|
||
<label for="password">Password</label>
|
||
<span class="gh-input-icon gh-icon-lock">
|
||
<GhTextInput
|
||
@tabindex="4"
|
||
@type="password"
|
||
@id="password"
|
||
@name="password"
|
||
@placeholder="At least 10 characters"
|
||
@autocorrect="off"
|
||
@autocomplete="new-password"
|
||
@value={{readonly this.password}}
|
||
@input={{action (mut this.password) value="target.value"}}
|
||
@focus-out={{action "preValidate" "password"}}
|
||
data-test-password-input={{true}} />
|
||
</span>
|
||
<GhErrorMessage @errors={{this.errors}} @property="password" />
|
||
</GhFormGroup>
|
||
|
||
<GhTaskButton @task={{this.setupTask}} @type="submit" @tabindex="5" @data-test-button="setup" @class="gh-btn gh-btn-black gh-btn-signup gh-btn-block gh-btn-icon" as |task|>
|
||
{{#if task.isRunning}}
|
||
<span>{{svg-jar "spinner" class="gh-icon-spinner gh-btn-icon-no-margin"}}</span>
|
||
{{else}}
|
||
<span>Create account & start publishing →</span>
|
||
{{/if}}
|
||
</GhTaskButton>
|
||
</form>
|
||
{{#if this.flowErrors}}
|
||
<p class="main-error">{{this.flowErrors}} </p>
|
||
{{/if}}
|
||
</div>
|
||
</section> |