floating: true,
modal: true,
components: [
- {tag: "h2", content: "Sign Up"},
+ {tag: "h2", content: "Change Password"},
+ {name: "spinner", kind: "OldSchoolSpinner", showing: false, style: "position: absolute; top: 8px; right: 8px;"},
{kind: "onyx.Groupbox", components: [
{kind: "onyx.InputDecorator", components: [
- {name: "password1", kind: "onyx.Input", placeholder: "Username", type: "password"}
+ {name: "oldpassword", kind: "onyx.Input", placeholder: "Old Password", type: "password"}
+ ]}
+ ]},
+ {kind: "onyx.Groupbox", components: [
+ {kind: "onyx.InputDecorator", components: [
+ {name: "password1", kind: "onyx.Input", placeholder: "New Password", type: "password"}
]},
{kind: "onyx.InputDecorator", components: [
- {name: "password2", kind: "onyx.Input", placeholder: "Password", type: "password"}
+ {name: "password2", kind: "onyx.Input", placeholder: "New Password (again)", type: "password"}
]}
]},
- {kind: "onyx.Button", content: "Change", onclick: "changeClick", classes: "onyx.affirmative"},
- {kind: "onyx.Button", content: "Cancel", onclick: "cancelClick", classes: "onyx-negative"}
+ {name: "changePasswordError", tag: "p", showing: false, classes: "blerg-error", content: "I couldn't change your password. Are you sure you have the right old password?"},
+ {name: "passwordMatchError", tag: "p", showing: false, classes: "blerg-error", content: "Your new passwords don't match."},
+ {name: "changeButton", kind: "onyx.Button", content: "Change", onclick: "changeClick", classes: "onyx.affirmative"},
+ {kind: "onyx.Button", content: "Cancel", onclick: "cancelClick", classes: "onyx-negative"},
+ {name: "api", kind: "blerg.API",
+ onPasswordChangeSuccessful: "passwordChangeSuccessful",
+ onPasswordChangeFailed: "passwordChangeFailed"}
],
+ hideErrors: function() {
+ this.$.changePasswordError.hide();
+ this.$.passwordMatchError.hide();
+ },
changeClick: function() {
- // Do stuff
+ this.hideErrors();
+ if (this.$.oldpassword.getValue() == '') {
+ this.$.changePasswordError.show();
+ return;
+ }
+ if (this.$.password1.getValue() != this.$.password2.getValue()) {
+ this.$.passwordMatchError.show();
+ return;
+ }
+ this.$.changeButton.setDisabled(true);
+ this.$.spinner.show();
+ this.$.spinner.start();
+ this.$.api.changePassword(this.$.oldpassword.getValue(), this.$.password1.getValue());
},
cancelClick: function() {
this.hide();
+ },
+ passwordChangeSuccessful: function(inSender, inEvent) {
+ this.$.changeButton.setDisabled(false);
+ this.$.spinner.hide();
+ this.$.spinner.stop();
+ this.cancelClick();
+ alert("Password Changed Successfully");
+ },
+ passwordChangeFailed: function(inSender, inEvent) {
+ this.$.changeButton.setDisabled(false);
+ this.$.spinner.hide();
+ this.$.spinner.stop();
+ this.hideErrors();
+ this.$.changePasswordError.show();
}
});