From b3716505fa12a2cde8d59bb20202926a9d26d5a3 Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Thu, 31 Jan 2019 10:27:40 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20incorrect=20username=20b?= =?UTF-8?q?eing=20saved=20by=20Safari=20when=20signing=20up=20via=20invita?= =?UTF-8?q?tion?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit refs https://github.com/TryGhost/Ghost/issues/9868 - ensure signup task is always initiated via form submit - adds `defaultClick` option to `` that allows the click event to bubble - adds `autocomplete` values to signup form fields that match up to the spec - "name/display-name": `name` - "email": `username email` - "password": `new-password` / `current-password` depending on context - 🔥 no-longer-relevant hacks for Chrome autocomplete - this still doesn't fix Chrome remembering the incorrect username unfortunately. Chrome will always select the input previous to the password that has had actual user input as the "username" - 🔥 unused `authenticate` task in signup controller --- ghost/admin/app/components/gh-task-button.js | 11 ++++ ghost/admin/app/controllers/signup.js | 57 +++---------------- ghost/admin/app/templates/setup/two.hbs | 7 +-- ghost/admin/app/templates/signin.hbs | 2 + ghost/admin/app/templates/signup.hbs | 34 +++++------ ghost/admin/app/templates/team/user.hbs | 10 ++-- ghost/admin/tests/acceptance/signup-test.js | 59 ++++++++++---------- 7 files changed, 77 insertions(+), 103 deletions(-) diff --git a/ghost/admin/app/components/gh-task-button.js b/ghost/admin/app/components/gh-task-button.js index 356d6d6d36..641aeec8c6 100644 --- a/ghost/admin/app/components/gh-task-button.js +++ b/ghost/admin/app/components/gh-task-button.js @@ -28,6 +28,7 @@ const GhTaskButton = Component.extend({ task: null, disabled: false, + defaultClick: false, buttonText: 'Save', idleClass: '', runningClass: '', @@ -99,6 +100,16 @@ const GhTaskButton = Component.extend({ }, click() { + // let the default click bubble if defaultClick===true - useful when + // you want to handle a form submit action rather than triggering a + // task directly + if (this.defaultClick) { + if (!this.isRunning) { + this.get('_restartAnimation').perform(); + } + return; + } + // do nothing if disabled externally if (this.get('disabled')) { return false; diff --git a/ghost/admin/app/controllers/signup.js b/ghost/admin/app/controllers/signup.js index d645bdbd41..d78898e0e3 100644 --- a/ghost/admin/app/controllers/signup.js +++ b/ghost/admin/app/controllers/signup.js @@ -1,11 +1,9 @@ import Controller from '@ember/controller'; -import RSVP from 'rsvp'; -import { - VersionMismatchError, - isVersionMismatchError -} from 'ghost-admin/services/ajax'; import {alias} from '@ember/object/computed'; import {isArray as isEmberArray} from '@ember/array'; +import { + isVersionMismatchError +} from 'ghost-admin/services/ajax'; import {inject as service} from '@ember/service'; import {task} from 'ember-concurrency'; @@ -29,53 +27,14 @@ export default Controller.extend({ setImage(image) { this.set('profileImage', image); + }, + + submit(event) { + event.preventDefault(); + this.signup.perform(); } }, - authenticate: task(function* (authStrategy, authentication) { - try { - let authResult = yield this.get('session') - .authenticate(authStrategy, ...authentication); - let promises = []; - - promises.pushObject(this.get('settings').fetch()); - promises.pushObject(this.get('config').fetchPrivate()); - - // fetch settings and private config for synchronous access - yield RSVP.all(promises); - - return authResult; - } catch (error) { - if (error && error.payload && error.payload.errors) { - // we don't get back an ember-data/ember-ajax error object - // back so we need to pass in a null status in order to - // test against the payload - if (isVersionMismatchError(null, error)) { - let versionMismatchError = new VersionMismatchError(error); - return this.get('notifications').showAPIError(versionMismatchError); - } - - error.payload.errors.forEach((err) => { - err.message = err.message.htmlSafe(); - }); - - this.set('flowErrors', error.payload.errors[0].message.string); - - if (error.payload.errors[0].message.string.match(/user with that email/)) { - this.get('signupDetails.errors').add('email', ''); - } - - if (error.payload.errors[0].message.string.match(/password is incorrect/)) { - this.get('signupDetails.errors').add('password', ''); - } - } else { - // Connection errors don't return proper status message, only req.body - this.get('notifications').showAlert('There was a problem on the server.', {type: 'error', key: 'session.authenticate.failed'}); - throw error; - } - } - }).drop(), - signup: task(function* () { let setupProperties = ['name', 'email', 'password', 'token']; let notifications = this.get('notifications'); diff --git a/ghost/admin/app/templates/setup/two.hbs b/ghost/admin/app/templates/setup/two.hbs index 35eccb3374..f563fda758 100644 --- a/ghost/admin/app/templates/setup/two.hbs +++ b/ghost/admin/app/templates/setup/two.hbs @@ -3,10 +3,6 @@
- {{!-- Horrible hack to prevent Chrome from incorrectly auto-filling inputs --}} - - - {{gh-profile-image email=email setImage=(action "setImage")}} {{#gh-form-group errors=errors hasValidated=hasValidated property="blogTitle"}} @@ -38,6 +34,7 @@ name="name" placeholder="Eg. John H. Watson" autocorrect="off" + autocomplete="name" value=(readonly name) input=(action (mut name) value="target.value") focus-out=(action "preValidate" "name") @@ -57,6 +54,7 @@ name="email" placeholder="Eg. john@example.com" autocorrect="off" + autocomplete="username email" value=(readonly email) input=(action (mut email) value="target.value") focus-out=(action "preValidate" "email") @@ -76,6 +74,7 @@ name="password" placeholder="At least 10 characters" autocorrect="off" + autocomplete="new-password" value=(readonly password) input=(action (mut password) value="target.value") focus-out=(action "preValidate" "password") diff --git a/ghost/admin/app/templates/signin.hbs b/ghost/admin/app/templates/signin.hbs index 946c1a0cd7..9c8f2b4831 100644 --- a/ghost/admin/app/templates/signin.hbs +++ b/ghost/admin/app/templates/signin.hbs @@ -12,6 +12,7 @@ name="identification" autocapitalize="off" autocorrect="off" + autocomplete="username" tabindex="1" value=(readonly signin.identification) input=(action (mut signin.identification) value="target.value") @@ -28,6 +29,7 @@ placeholder="Password" name="password" tabindex="2" + autocomplete="current-password" autocorrect="off" value=(readonly signin.password) input=(action (mut signin.password) value="target.value")}} diff --git a/ghost/admin/app/templates/signup.hbs b/ghost/admin/app/templates/signup.hbs index eea45300ff..440ac4a250 100644 --- a/ghost/admin/app/templates/signup.hbs +++ b/ghost/admin/app/templates/signup.hbs @@ -6,11 +6,7 @@

Create your account

- - {{!-- Hack to stop Chrome's broken auto-fills --}} - - - + {{gh-profile-image email=signupDetails.email setImage=(action "setImage")}} {{#gh-form-group errors=signupDetails.errors hasValidated=signupDetails.hasValidated property="email"}} @@ -18,14 +14,17 @@ {{svg-jar "email"}} {{gh-text-input - type="email" - id="email" - name="email" + tabindex="2" + type="text" + id="username" + name="username" placeholder="Eg. john@example.com" - disabled="disabled" autocorrect="off" + autocomplete="username email" + disabled="disabled" value=(readonly signupDetails.email) input=(action (mut signupDetails.email) value="target.value") + data-test-input="email" }} {{/gh-form-group}} @@ -37,13 +36,15 @@ {{gh-trim-focus-input tabindex="1" type="text" - id="name" - name="name" + id="display-name" + name="display-name" placeholder="Eg. John H. Watson" autocorrect="off" + autocomplete="name" value=(readonly signupDetails.name) input=(action (mut signupDetails.name) value="target.value") focus-out=(action "validate" "name") + data-test-input="name" }} {{gh-error-message errors=signupDetails.errors property="name"}} @@ -54,26 +55,27 @@ {{svg-jar "lock"}} {{gh-text-input - tabindex="2" + tabindex="3" type="password" id="password" name="password" placeholder="At least 10 characters" autocorrect="off" + autocomplete="new-password" value=(readonly signupDetails.password) input=(action (mut signupDetails.password) value="target.value") - focus-out=(action "validate" "password")}} + focus-out=(action "validate" "password") + data-test-input="password" + }} {{gh-error-message errors=signupDetails.errors property="password"}} {{/gh-form-group}} - - {{!-- include the email field again in case password managers ignore the disabled input --}} -
{{gh-task-button "Create Account" type="submit" form="signup" + defaultClick=true runningText="Creating" task=signup class="gh-btn gh-btn-green gh-btn-lg gh-btn-block gh-btn-icon" diff --git a/ghost/admin/app/templates/team/user.hbs b/ghost/admin/app/templates/team/user.hbs index 9d67af8f7e..179c97a076 100644 --- a/ghost/admin/app/templates/team/user.hbs +++ b/ghost/admin/app/templates/team/user.hbs @@ -117,10 +117,6 @@ {{/if}} - {{!-- Horrible hack to prevent Chrome from incorrectly auto-filling inputs --}} - - -
{{#gh-form-group errors=user.errors hasValidated=user.hasValidated property="name" class="first-form-group"}} @@ -288,12 +284,13 @@ {{#if canChangePassword}}