enyo.kind({
    name: "blerg.PasswdForm",
    classes: "blerg-form",
    components: [
        {kind: "onyx.Groupbox", components: [
            {kind: "onyx.InputDecorator", components: [
                {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: "New Password (again)", type: "password"}
            ]}
        ]},
        {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"},
        {name: "spinner", kind: "OldSchoolSpinner", showing: false},
        {name: "api", kind: "blerg.API",
         onPasswordChangeSuccessful: "passwordChangeSuccessful",
         onPasswordChangeFailed: "passwordChangeFailed"}
    ],
    hideErrors: function() {
        this.$.changePasswordError.hide();
        this.$.passwordMatchError.hide();
    },
    changeClick: function() {
        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());
    },
    passwordChangeSuccessful: function(inSender, inEvent) {
        this.$.oldpassword.setValue('');
        this.$.password1.setValue('');
        this.$.password2.setValue('');
        this.$.changeButton.setDisabled(false);
        this.$.spinner.hide();
        this.$.spinner.stop();
        alert("Password Changed Successfully");
    },
    passwordChangeFailed: function(inSender, inEvent) {
        this.$.changeButton.setDisabled(false);
        this.$.spinner.hide();
        this.$.spinner.stop();
        this.hideErrors();
        this.$.changePasswordError.show();
    }
});