Skip to content
This repository has been archived by the owner on Nov 28, 2022. It is now read-only.

Commit

Permalink
🐛 fix chrome autofill on setup/two (#670)
Browse files Browse the repository at this point in the history 
no issue
- connect email and name labels to inputs
- change name of hidden inputs so that chrome doesn't incorrect fill fields
  • Loading branch information
@novaugust @kevinansfield
novaugust authored and kevinansfield committed Apr 25, 2017
1 parent 955e8cc commit 9eda16e
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 26 deletions.
22 changes: 13 additions & 9 deletions app/templates/setup/two.hbs
View file
Expand Up @@ -66,29 +66,30 @@

<form id="setup" class="gh-flow-create">
{{!-- Horrible hack to prevent Chrome from incorrectly auto-filling inputs --}}
<input style="display:none;" type="text" name="fakeusernameremembered"/>
<input style="display:none;" type="password" name="fakepasswordremembered"/>
<input style="display:none;" type="text" name="username"/>
<input style="display:none;" type="password" name="password"/>

{{gh-profile-image email=email setImage=(action "setImage")}}

{{#gh-form-group errors=errors hasValidated=hasValidated property="email"}}
<label for="email-address">Email address</label>
<label for="email">Email address</label>
<span class="gh-input-icon gh-icon-mail">
{{inline-svg "email"}}
{{gh-trim-focus-input email
tabindex="1"
ype="email"
type="email"
name="email"
placeholder="Eg. john@example.com"
autocorrect="off"
focusOut=(action "preValidate" "email")
update=(action (mut 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="name"}}
<label for="full-name">Full name</label>
<label for="name">Full name</label>
<span class="gh-input-icon gh-icon-user">
{{inline-svg "user-circle"}}
{{gh-input name
Expand All @@ -98,7 +99,8 @@
placeholder="Eg. John H. Watson"
autocorrect="off"
focusOut=(action "preValidate" "name")
update=(action (mut name))}}
update=(action (mut name))
data-test-name-input=true}}
</span>
{{gh-error-message errors=errors property="name"}}
{{/gh-form-group}}
Expand All @@ -114,7 +116,8 @@
placeholder="At least 8 characters"
autocorrect="off"
focusOut=(action "preValidate" "password")
update=(action (mut password))}}
update=(action (mut password))
data-test-password-input=true}}
</span>
{{gh-error-message errors=errors property="password"}}
{{/gh-form-group}}
Expand All @@ -130,7 +133,8 @@
placeholder="Eg. The Daily Awesome"
autocorrect="off"
focusOut=(action "preValidate" "blogTitle")
update=(action (mut blogTitle))}}
update=(action (mut blogTitle))
data-test-blog-title-input=true}}
</span>
{{gh-error-message errors=errors property="blogTitle"}}
{{/gh-form-group}}
Expand Down
34 changes: 17 additions & 17 deletions tests/acceptance/setup-test.js
View file
Expand Up @@ -104,7 +104,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('[name="email"]').get(0) === document.activeElement, 'email field has focus')
expect(find(testSelector('email-input')).get(0) === document.activeElement, 'email field has focus')
.to.be.true;

await click('.gh-btn-green');
Expand All @@ -122,10 +122,10 @@ describe('Acceptance: Setup', function () {
.to.equal(1);

// enter valid details and submit
await fillIn('[name="email"]', 'test@example.com');
await fillIn('[name="name"]', 'Test User');
await fillIn('[name="password"]', 'password');
await fillIn('[name="blog-title"]', 'Blog Title');
await fillIn(testSelector('email-input'), 'test@example.com');
await fillIn(testSelector('name-input'), 'Test User');
await fillIn(testSelector('password-input'), 'password');
await fillIn(testSelector('blog-title-input'), 'Blog Title');
await click('.gh-btn-green');

// it transitions to step 3
Expand Down Expand Up @@ -189,10 +189,10 @@ describe('Acceptance: Setup', function () {
expect(find('.main-error').text().trim(), 'error text')
.to.not.be.blank;

await fillIn('[name="email"]', 'test@example.com');
await fillIn('[name="name"]', 'Test User');
await fillIn('[name="password"]', 'password');
await fillIn('[name="blog-title"]', 'Blog Title');
await fillIn(testSelector('email-input'), 'test@example.com');
await fillIn(testSelector('name-input'), 'Test User');
await fillIn(testSelector('password-input'), 'password');
await fillIn(testSelector('blog-title-input'), 'Blog Title');

// first post - simulated validation error
await click('.gh-btn-green');
Expand Down Expand Up @@ -227,10 +227,10 @@ describe('Acceptance: Setup', function () {
server.loadFixtures('roles');

await visit('/setup/two');
await fillIn('[name="email"]', 'test@example.com');
await fillIn('[name="name"]', 'Test User');
await fillIn('[name="password"]', 'password');
await fillIn('[name="blog-title"]', 'Blog Title');
await fillIn(testSelector('email-input'), 'test@example.com');
await fillIn(testSelector('name-input'), 'Test User');
await fillIn(testSelector('password-input'), 'password');
await fillIn(testSelector('blog-title-input'), 'Blog Title');
await click('.gh-btn-green');

// button should not be spinning
Expand Down Expand Up @@ -282,10 +282,10 @@ describe('Acceptance: Setup', function () {

// complete step 2 so we can access step 3
await visit('/setup/two');
await fillIn('[name="email"]', 'test@example.com');
await fillIn('[name="name"]', 'Test User');
await fillIn('[name="password"]', 'password');
await fillIn('[name="blog-title"]', 'Blog Title');
await fillIn(testSelector('email-input'), 'test@example.com');
await fillIn(testSelector('name-input'), 'Test User');
await fillIn(testSelector('password-input'), 'password');
await fillIn(testSelector('blog-title-input'), 'Blog Title');
await click('.gh-btn-green');

// default field/button state
Expand Down

0 comments on commit 9eda16e

Please sign in to comment.