mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05:00
💄 refactor signup to use ember-concurrency
refs https://github.com/TryGhost/Ghost/issues/7865 - moves authentication actions from `signup` route to controller - refactors authentication and signup logic into EC tasks - replaces use of `gh-spin-button` with `gh-task-button` in signup template
This commit is contained in:
Kevin Ansfield
Austin Burdine
parent
5534678f02
commit
775417432f
3 changed files with 190 additions and 142 deletions
|
|
@ -2,94 +2,179 @@ import Controller from 'ember-controller';
|
|||
import RSVP from 'rsvp';
|
||||
import injectService from 'ember-service/inject';
|
||||
import {isEmberArray} from 'ember-array/utils';
|
||||
|
||||
import {task} from 'ember-concurrency';
|
||||
import ValidationEngine from 'ghost-admin/mixins/validation-engine';
|
||||
import {isVersionMismatchError} from 'ghost-admin/services/ajax';
|
||||
import {
|
||||
VersionMismatchError,
|
||||
isVersionMismatchError
|
||||
} from 'ghost-admin/services/ajax';
|
||||
import {assign} from 'ember-platform';
|
||||
|
||||
const {Promise} = RSVP;
|
||||
|
||||
export default Controller.extend(ValidationEngine, {
|
||||
ajax: injectService(),
|
||||
config: injectService(),
|
||||
ghostPaths: injectService(),
|
||||
notifications: injectService(),
|
||||
session: injectService(),
|
||||
settings: injectService(),
|
||||
torii: injectService(),
|
||||
|
||||
// ValidationEngine settings
|
||||
validationType: 'signup',
|
||||
|
||||
submitting: false,
|
||||
flowErrors: '',
|
||||
image: null,
|
||||
|
||||
ghostPaths: injectService(),
|
||||
config: injectService(),
|
||||
notifications: injectService(),
|
||||
session: injectService(),
|
||||
ajax: injectService(),
|
||||
authenticate: task(function* (authStrategy, authentication) {
|
||||
try {
|
||||
let authResult = yield this.get('session')
|
||||
.authenticate(authStrategy, ...authentication);
|
||||
|
||||
sendImage() {
|
||||
// fetch settings for synchronous access
|
||||
yield this.get('settings').fetch();
|
||||
|
||||
return authResult;
|
||||
|
||||
} catch (error) {
|
||||
if (error && error.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.errors.forEach((err) => {
|
||||
err.message = err.message.htmlSafe();
|
||||
});
|
||||
|
||||
this.set('flowErrors', error.errors[0].message.string);
|
||||
|
||||
if (error.errors[0].message.string.match(/user with that email/)) {
|
||||
this.get('model.errors').add('identification', '');
|
||||
}
|
||||
|
||||
if (error.errors[0].message.string.match(/password is incorrect/)) {
|
||||
this.get('model.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(),
|
||||
|
||||
authenticateWithGhostOrg: task(function* () {
|
||||
let authStrategy = 'authenticator:oauth2-ghost';
|
||||
let inviteToken = this.get('model.token');
|
||||
let email = this.get('model.email');
|
||||
|
||||
this.set('flowErrors', '');
|
||||
|
||||
try {
|
||||
let authentication = yield this.get('torii')
|
||||
.open('ghost-oauth2', {email, type: 'invite'});
|
||||
|
||||
authentication = assign(authentication, {inviteToken});
|
||||
|
||||
return yield this.get('authenticate').perform(authStrategy, [authentication]);
|
||||
|
||||
} catch (error) {
|
||||
this.set('flowErrors', 'Authentication with Ghost.org denied or failed');
|
||||
throw error;
|
||||
}
|
||||
}).drop(),
|
||||
|
||||
signup: task(function* () {
|
||||
let setupProperties = ['name', 'email', 'password', 'token'];
|
||||
let notifications = this.get('notifications');
|
||||
|
||||
this.set('flowErrors', '');
|
||||
this.get('hasValidated').addObjects(setupProperties);
|
||||
|
||||
try {
|
||||
yield this.validate();
|
||||
yield this._completeInvitation();
|
||||
|
||||
try {
|
||||
yield this._authenticateWithPassword();
|
||||
yield this._sendImage();
|
||||
} catch (error) {
|
||||
notifications.showAPIError(error, {key: 'signup.complete'});
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
// ValidationEngine throws undefined
|
||||
if (!error) {
|
||||
this.set('flowErrors', 'Please fill out the form to complete your sign-up');
|
||||
}
|
||||
|
||||
if (error && error.errors && isEmberArray(error.errors)) {
|
||||
if (isVersionMismatchError(error)) {
|
||||
notifications.showAPIError(error);
|
||||
}
|
||||
this.set('flowErrors', error.errors[0].message);
|
||||
} else {
|
||||
notifications.showAPIError(error, {key: 'signup.complete'});
|
||||
}
|
||||
}
|
||||
}),
|
||||
|
||||
_completeInvitation() {
|
||||
let authUrl = this.get('ghostPaths.url').api('authentication', 'invitation');
|
||||
let model = this.get('model');
|
||||
|
||||
return this.get('ajax').post(authUrl, {
|
||||
dataType: 'json',
|
||||
data: {
|
||||
invitation: [{
|
||||
name: model.get('name'),
|
||||
email: model.get('email'),
|
||||
password: model.get('password'),
|
||||
token: model.get('token')
|
||||
}]
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
_authenticateWithPassword() {
|
||||
let email = this.get('model.email');
|
||||
let password = this.get('model.password');
|
||||
|
||||
return this.get('session')
|
||||
.authenticate('authenticator:oauth2', email, password);
|
||||
},
|
||||
|
||||
_sendImage() {
|
||||
let image = this.get('image');
|
||||
|
||||
this.get('session.user').then((user) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
image.formData = {};
|
||||
image.submit()
|
||||
.success((response) => {
|
||||
let usersUrl = this.get('ghostPaths.url').api('users', user.id.toString());
|
||||
user.image = response;
|
||||
this.get('ajax').put(usersUrl, {
|
||||
data: {
|
||||
users: [user]
|
||||
}
|
||||
}).then(resolve).catch(reject);
|
||||
})
|
||||
.error(reject);
|
||||
if (image) {
|
||||
return this.get('session.user').then((user) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
image.formData = {};
|
||||
image.submit()
|
||||
.success((response) => {
|
||||
let usersUrl = this.get('ghostPaths.url').api('users', user.id.toString());
|
||||
user.image = response;
|
||||
this.get('ajax').put(usersUrl, {
|
||||
data: {
|
||||
users: [user]
|
||||
}
|
||||
}).then(resolve).catch(reject);
|
||||
})
|
||||
.error(reject);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
actions: {
|
||||
signup() {
|
||||
let model = this.get('model');
|
||||
let setupProperties = ['name', 'email', 'password', 'token'];
|
||||
let data = model.getProperties(setupProperties);
|
||||
let image = this.get('image');
|
||||
let notifications = this.get('notifications');
|
||||
|
||||
this.set('flowErrors', '');
|
||||
|
||||
this.get('hasValidated').addObjects(setupProperties);
|
||||
return this.validate().then(() => {
|
||||
let authUrl = this.get('ghostPaths.url').api('authentication', 'invitation');
|
||||
this.toggleProperty('submitting');
|
||||
return this.get('ajax').post(authUrl, {
|
||||
dataType: 'json',
|
||||
data: {
|
||||
invitation: [{
|
||||
name: data.name,
|
||||
email: data.email,
|
||||
password: data.password,
|
||||
token: data.token
|
||||
}]
|
||||
}
|
||||
}).then(() => {
|
||||
return this.get('session').authenticate('authenticator:oauth2', this.get('model.email'), this.get('model.password')).then(() => {
|
||||
if (image) {
|
||||
this.sendImage();
|
||||
}
|
||||
}).catch((resp) => {
|
||||
notifications.showAPIError(resp, {key: 'signup.complete'});
|
||||
});
|
||||
}).catch((error) => {
|
||||
this.toggleProperty('submitting');
|
||||
|
||||
if (error && error.errors && isEmberArray(error.errors)) {
|
||||
if (isVersionMismatchError(error)) {
|
||||
notifications.showAPIError(error);
|
||||
}
|
||||
this.set('flowErrors', error.errors[0].message);
|
||||
} else {
|
||||
notifications.showAPIError(error, {key: 'signup.complete'});
|
||||
}
|
||||
});
|
||||
}).catch(() => {
|
||||
this.set('flowErrors', 'Please fill out the form to complete your sign-up');
|
||||
});
|
||||
this.get('signup').perform();
|
||||
},
|
||||
|
||||
setImage(image) {
|
||||
|
|
|
|||
|
|
@ -2,12 +2,6 @@ import Route from 'ember-route';
|
|||
import RSVP from 'rsvp';
|
||||
import injectService from 'ember-service/inject';
|
||||
import EmberObject from 'ember-object';
|
||||
import {assign} from 'ember-platform';
|
||||
import {
|
||||
VersionMismatchError,
|
||||
isVersionMismatchError
|
||||
} from 'ghost-admin/services/ajax';
|
||||
|
||||
import DS from 'ember-data';
|
||||
import UnauthenticatedRouteMixin from 'ghost-admin/mixins/unauthenticated-route-mixin';
|
||||
import styleBody from 'ghost-admin/mixins/style-body';
|
||||
|
|
@ -79,64 +73,5 @@ export default Route.extend(styleBody, UnauthenticatedRouteMixin, {
|
|||
|
||||
// clear the properties that hold the sensitive data from the controller
|
||||
this.controllerFor('signup').setProperties({email: '', password: '', token: ''});
|
||||
},
|
||||
|
||||
actions: {
|
||||
authenticateWithGhostOrg() {
|
||||
let authStrategy = 'authenticator:oauth2-ghost';
|
||||
let inviteToken = this.get('controller.model.token');
|
||||
let email = this.get('controller.model.email');
|
||||
|
||||
this.toggleProperty('controller.loggingIn');
|
||||
this.set('controller.flowErrors', '');
|
||||
|
||||
this.get('torii')
|
||||
.open('ghost-oauth2', {email, type: 'invite'})
|
||||
.then((authentication) => {
|
||||
let _authentication = assign({}, authentication, {inviteToken});
|
||||
this.send('authenticate', authStrategy, [_authentication]);
|
||||
})
|
||||
.catch(() => {
|
||||
this.toggleProperty('controller.loggingIn');
|
||||
this.set('controller.flowErrors', 'Authentication with Ghost.org denied or failed');
|
||||
});
|
||||
},
|
||||
|
||||
// TODO: this is duplicated with the signin route - maybe extract into a mixin?
|
||||
authenticate(strategy, authentication) {
|
||||
// Authentication transitions to posts.index, we can leave spinner running unless there is an error
|
||||
this.get('session')
|
||||
.authenticate(strategy, ...authentication)
|
||||
.catch((error) => {
|
||||
this.toggleProperty('controller.loggingIn');
|
||||
|
||||
if (error && error.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.errors.forEach((err) => {
|
||||
err.message = err.message.htmlSafe();
|
||||
});
|
||||
|
||||
this.set('controller.flowErrors', error.errors[0].message.string);
|
||||
|
||||
if (error.errors[0].message.string.match(/user with that email/)) {
|
||||
this.get('controller.model.errors').add('identification', '');
|
||||
}
|
||||
|
||||
if (error.errors[0].message.string.match(/password is incorrect/)) {
|
||||
this.get('controller.model.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'});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -12,10 +12,13 @@
|
|||
</header>
|
||||
|
||||
<form id="signup" class="gh-signin" method="post" novalidate="novalidate">
|
||||
{{#gh-spin-button class="login gh-btn gh-btn-blue gh-btn-block" type="submit" action="authenticateWithGhostOrg" tabindex="3" submitting=loggingIn autoWidth="false"}}
|
||||
<span>Sign in with Ghost to accept</span>
|
||||
{{/gh-spin-button}}
|
||||
{{gh-task-button "Sign in with Ghost to accept"
|
||||
task=authenticateWithGhostOrg
|
||||
type="submit"
|
||||
class="login gh-btn gh-btn-blue gh-btn-block gh-btn-icon"
|
||||
tabindex="3"}}
|
||||
</form>
|
||||
|
||||
{{else}}
|
||||
<header>
|
||||
<h1>Create your account</h1>
|
||||
|
|
@ -26,13 +29,18 @@
|
|||
<input style="display:none;" type="text" name="fakeusernameremembered"/>
|
||||
<input style="display:none;" type="password" name="fakepasswordremembered"/>
|
||||
|
||||
{{gh-profile-image email=model.email setImage="setImage"}}
|
||||
{{gh-profile-image email=model.email setImage=(action "setImage")}}
|
||||
|
||||
{{#gh-form-group}}
|
||||
<label for="email-address">Email address</label>
|
||||
<span class="gh-input-icon gh-icon-mail">
|
||||
{{inline-svg "email"}}
|
||||
{{gh-input model.email type="email" name="email" placeholder="Eg. john@example.com" disabled="disabled" autocorrect="off"}}
|
||||
{{gh-input model.email
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="Eg. john@example.com"
|
||||
disabled="disabled"
|
||||
autocorrect="off"}}
|
||||
</span>
|
||||
{{/gh-form-group}}
|
||||
|
||||
|
|
@ -40,7 +48,15 @@
|
|||
<label for="full-name">Full name</label>
|
||||
<span class="gh-input-icon gh-icon-user">
|
||||
{{inline-svg "user-circle"}}
|
||||
{{gh-trim-focus-input model.name tabindex="1" type="text" name="name" placeholder="Eg. John H. Watson" onenter=(action "signup") autocorrect="off" focusOut=(action "validate" "name") update=(action (mut model.name))}}
|
||||
{{gh-trim-focus-input model.name
|
||||
tabindex="1"
|
||||
type="text"
|
||||
name="name"
|
||||
placeholder="Eg. John H. Watson"
|
||||
autocorrect="off"
|
||||
onenter=(action "signup")
|
||||
focusOut=(action "validate" "name")
|
||||
update=(action (mut model.name))}}
|
||||
</span>
|
||||
{{gh-error-message errors=model.errors property="name"}}
|
||||
{{/gh-form-group}}
|
||||
|
|
@ -49,13 +65,25 @@
|
|||
<label for="password">Password</label>
|
||||
<span class="gh-input-icon gh-icon-lock">
|
||||
{{inline-svg "lock"}}
|
||||
{{gh-input model.password tabindex="2" type="password" name="password" placeholder="At least 8 characters" onenter=(action "signup") autocorrect="off" focusOut=(action "validate" "password") update=(action (mut model.password))}}
|
||||
{{gh-input model.password
|
||||
tabindex="2"
|
||||
type="password"
|
||||
name="password"
|
||||
placeholder="At least 8 characters"
|
||||
onenter=(action "signup")
|
||||
autocorrect="off"
|
||||
focusOut=(action "validate" "password")
|
||||
update=(action (mut model.password))}}
|
||||
</span>
|
||||
{{gh-error-message errors=model.errors property="password"}}
|
||||
{{/gh-form-group}}
|
||||
</form>
|
||||
|
||||
{{#gh-spin-button tabindex="3" type="submit" class="gh-btn gh-btn-green gh-btn-lg gh-btn-block" action="signup" submitting=submitting autoWidth="false"}}<span>Create Account</span>{{/gh-spin-button}}
|
||||
{{gh-task-button "Create Account"
|
||||
runningText="Creating"
|
||||
task=signup
|
||||
class="gh-btn gh-btn-green gh-btn-lg gh-btn-block gh-btn-icon"
|
||||
tabindex="3"}}
|
||||
{{/if}}
|
||||
|
||||
<p class="main-error">{{{flowErrors}}}</p>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue