refactor user password change
This commit is contained in:
Matthew Dillon
parent
1dd0910ed1
commit
45703e67ee
5 changed files with 107 additions and 45 deletions
|
|
@ -1,33 +1,30 @@
|
|||
import Ember from 'ember';
|
||||
import ajaxRequest from '../../../../utils/ajax-request';
|
||||
|
||||
export default Ember.Controller.extend({
|
||||
session: Ember.inject.service('session'),
|
||||
currentUser: Ember.inject.service('session-account'),
|
||||
const { Controller, inject: { service } } = Ember;
|
||||
|
||||
passwordConfirm: null,
|
||||
export default Controller.extend({
|
||||
session: service(),
|
||||
currentUser: service('session-account'),
|
||||
|
||||
actions: {
|
||||
save: function() {
|
||||
if (this.get('password') !== this.get('passwordConfirm')) {
|
||||
this.get('flashMessages').clearMessages();
|
||||
this.get('flashMessages').error("Password fields don't match");
|
||||
return;
|
||||
}
|
||||
|
||||
let url = `${this.get('globals.apiURL')}/api/${this.get('globals.genus')}/users/password`;
|
||||
let options = {
|
||||
save: function(password) {
|
||||
const url = `${this.get('globals.apiURL')}/api/${this.get('globals.genus')}/users/password`;
|
||||
const id = this.get('currentUser.account.id');
|
||||
const options = {
|
||||
method: 'POST',
|
||||
data: {
|
||||
id: this.get('currentUser.account.id'),
|
||||
password: this.get('password'),
|
||||
id: id,
|
||||
password: password,
|
||||
},
|
||||
};
|
||||
ajaxRequest(url, options, this.get('session'));
|
||||
this.transitionToRoute('protected.users.index');
|
||||
this.transitionToRoute('protected.users.show', id);
|
||||
this.get('flashMessages').information('Your password has been changed.');
|
||||
},
|
||||
|
||||
cancel: function() {
|
||||
this.transitionToRoute('protected.users.show', this.get('currentUser.account.id'));
|
||||
},
|
||||
},
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
import Ember from 'ember';
|
||||
|
||||
const { Component } = Ember;
|
||||
|
||||
export default Component.extend({
|
||||
password: null,
|
||||
passwordConfirm: null,
|
||||
matches: false,
|
||||
|
||||
// Actions
|
||||
"on-save": null,
|
||||
"on-cancel": null,
|
||||
|
||||
updateField: function(property, value) {
|
||||
this.set(property, value);
|
||||
this.verifyPassword(this.get('password'), this.get('passwordConfirm'));
|
||||
},
|
||||
|
||||
verifyPassword: function(password, passwordConfirm) {
|
||||
if (password && passwordConfirm) {
|
||||
if (password !== passwordConfirm) {
|
||||
this.get('flashMessages').clearMessages();
|
||||
this.get('flashMessages').error("Password fields don't match");
|
||||
this.set('matches', false);
|
||||
} else {
|
||||
this.get('flashMessages').clearMessages();
|
||||
this.set('matches', true);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
actions: {
|
||||
save: function() {
|
||||
this.verifyPassword(this.get('password'), this.get('passwordConfirm'));
|
||||
if (this.get('matches')) {
|
||||
return this.attrs['on-save'](this.get('password'));
|
||||
}
|
||||
},
|
||||
|
||||
cancel: function() {
|
||||
return this.attrs['on-cancel']();
|
||||
},
|
||||
|
||||
passwordDidChange: function(value) {
|
||||
this.updateField('password', value);
|
||||
},
|
||||
|
||||
passwordConfirmDidChange: function(value) {
|
||||
this.updateField('passwordConfirm', value);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<div class="grid-1">
|
||||
<div class="span-1">
|
||||
<fieldset>
|
||||
<legend>Change password</legend>
|
||||
<form {{action 'save' on='submit'}}>
|
||||
<ul>
|
||||
<li>
|
||||
<label>New Password</label>
|
||||
{{one-way-input type="password" class="password" value=password update=(action "passwordDidChange")}}
|
||||
</li>
|
||||
<li>
|
||||
<label>New Password (confirm)</label>
|
||||
{{one-way-input type="password" class="password-confirm" value=passwordConfirm update=(action "passwordConfirmDidChange")}}
|
||||
</li>
|
||||
<li>
|
||||
<a class="button-red smaller" {{action 'cancel'}}>
|
||||
Cancel
|
||||
</a>
|
||||
{{#if matches}}
|
||||
<button type="submit" class="button-green smaller submit-password">
|
||||
Submit
|
||||
</button>
|
||||
{{/if}}
|
||||
</li>
|
||||
</ul>
|
||||
</form>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,16 +1,19 @@
|
|||
import Ember from 'ember';
|
||||
|
||||
export default Ember.Route.extend({
|
||||
currentUser: Ember.inject.service('session-account'),
|
||||
const { Route, inject: { service } } = Ember;
|
||||
|
||||
export default Route.extend({
|
||||
currentUser: service('session-account'),
|
||||
|
||||
beforeModel: function(transition) {
|
||||
this._super(transition);
|
||||
|
||||
let user_id = transition.params['protected.users.changepassword'].user_id;
|
||||
// Only the logged in user can change their password
|
||||
const user_id = transition.params['protected.users.changepassword'].user_id;
|
||||
|
||||
this.get('currentUser.account').then((user) => {
|
||||
if (user.get('id') !== user_id) {
|
||||
this.transitionTo('protected.users.index');
|
||||
this.transitionTo('protected.users.show', user.get('id'));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,5 @@
|
|||
<div class="grid-1">
|
||||
<div class="span-1">
|
||||
<fieldset>
|
||||
<legend>Change password</legend>
|
||||
<form {{action 'save' on='submit'}}>
|
||||
<ul>
|
||||
<li>
|
||||
<label>New Password</label>
|
||||
{{input type="password" value=password}}
|
||||
</li>
|
||||
<li>
|
||||
<label>New Password (confirm)</label>
|
||||
{{input type="password" value=passwordConfirm}}
|
||||
</li>
|
||||
<li>
|
||||
<button type="submit" class="button-green smaller">
|
||||
Submit
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</form>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
{{
|
||||
protected/users/changepassword/password-form
|
||||
on-save=(action "save")
|
||||
on-cancel=(action "cancel")
|
||||
}}
|
||||
|
|
|
|||
Reference in a new issue