OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 Reorder fields in blog setup form (#808)

Browse Source 
closes https://github.com/TryGhost/Ghost/issues/8622 by inadvertent knock-on effect.

People were having trouble with automatically entering password verification in blog title field. This re-orders the form to a more "normal" flow where password field is the last item on the page, so no risk of double-typing it.
This commit is contained in:
John O'Nolan 2017-07-31 17:06:25 +04:00 committed by Kevin Ansfield
parent a445cd41a5
commit 86759067ea
2 changed files with 31 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
ghost/admin/app/templates/setup/two.hbs
View File

@ -71,21 +71,21 @@
{{gh-profile-image email=email setImage=(action "setImage")}}
{{#gh-form-group errors=errors hasValidated=hasValidated property="email"}}
<label for="email">Email address</label>
<span class="gh-input-icon gh-icon-mail">
{{inline-svg "email"}}
{{gh-trim-focus-input email
{{#gh-form-group errors=errors hasValidated=hasValidated property="blogTitle"}}
<label for="blog-title">Blog title</label>
<span class="gh-input-icon gh-icon-content">
{{inline-svg "content"}}
{{gh-trim-focus-input blogTitle
tabindex="1"
type="email"
name="email"
placeholder="Eg. john@example.com"
type="text"
name="blog-title"
placeholder="Eg. The Daily Awesome"
autocorrect="off"
focusOut=(action "preValidate" "email")
update=(action (mut email))
data-test-email-input=true}}
focusOut=(action "preValidate" "blogTitle")
update=(action (mut blogTitle))
data-test-blog-title-input=true}}
</span>
{{gh-error-message errors=errors property="email"}}
{{gh-error-message errors=errors property="blogTitle"}}
{{/gh-form-group}}
{{#gh-form-group errors=errors hasValidated=hasValidated property="name"}}
@ -105,12 +105,29 @@
{{gh-error-message errors=errors property="name"}}
{{/gh-form-group}}
{{#gh-form-group errors=errors hasValidated=hasValidated property="email"}}
<label for="email">Email address</label>
<span class="gh-input-icon gh-icon-mail">
{{inline-svg "email"}}
{{gh-input email
tabindex="3"
type="email"
name="email"
placeholder="Eg. john@example.com"
autocorrect="off"
focusOut=(action "preValidate" "email")
update=(action (mut email))
data-test-email-input=true}}
</span>
{{gh-error-message errors=errors property="email"}}
{{/gh-form-group}}
{{#gh-form-group errors=errors hasValidated=hasValidated property="password"}}
<label for="password">Password</label>
<span class="gh-input-icon gh-icon-lock">
{{inline-svg "lock"}}
{{gh-input password
tabindex="3"
tabindex="4"
type="password"
name="password"
placeholder="At least 8 characters"
@ -122,23 +139,6 @@
{{gh-error-message errors=errors property="password"}}
{{/gh-form-group}}
{{#gh-form-group errors=errors hasValidated=hasValidated property="blogTitle"}}
<label for="blog-title">Blog title</label>
<span class="gh-input-icon gh-icon-content">
{{inline-svg "content"}}
{{gh-input blogTitle
tabindex="4"
type="text"
name="blog-title"
placeholder="Eg. The Daily Awesome"
autocorrect="off"
focusOut=(action "preValidate" "blogTitle")
update=(action (mut blogTitle))
data-test-blog-title-input=true}}
</span>
{{gh-error-message errors=errors property="blogTitle"}}
{{/gh-form-group}}
{{#gh-task-button
task=setup
type="submit"

2
ghost/admin/tests/acceptance/setup-test.js
View File

@ -99,7 +99,7 @@ describe('Acceptance: Setup', function () {
// email field is focused by default
// NOTE: $('x').is(':focus') doesn't work in phantomjs CLI runner
// https://github.com/ariya/phantomjs/issues/10427
expect(find(testSelector('email-input')).get(0) === document.activeElement, 'email field has focus')
expect(find(testSelector('blog-title-input')).get(0) === document.activeElement, 'blog title has focus')
.to.be.true;
await click('.gh-btn-green');