From 72b8cf1be20e13188f98dc3b4c0d931efdd0e90e Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Wed, 23 Dec 2015 15:38:28 +0000
Subject: [PATCH] Refactor ChangePassword to get it working. Add 'Account'
 section because trying to make ChangePassword divs part of the same table as
 the display name is nigh impossible. Feels okay though

---
 src/components/structures/UserSettings.js     |  64 ++++++----
 .../views/settings/ChangePassword.js          | 113 +++++++++++-------
 2 files changed, 109 insertions(+), 68 deletions(-)

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index e2f183d92a..23b28e0a0a 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -21,7 +21,6 @@ var dis = require("../../dispatcher");
 var q = require('q');
 var version = require('../../../package.json').version;
 var UserSettingsStore = require('../../UserSettingsStore');
-var ChangeDisplayName = require("../views/settings/ChangeDisplayName");
 
 module.exports = React.createClass({
     displayName: 'UserSettings',
@@ -152,6 +151,31 @@ module.exports = React.createClass({
         );
     },
 
+    onPasswordChangeError: function(err) {
+        var errMsg = err.error || "";
+        if (err.httpStatus === 403) {
+            errMsg = "Failed to change password. Is your password correct?";
+        }
+        else if (err.httpStatus) {
+            errMsg += ` (HTTP status ${err.httpStatus})`;
+        }
+        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+        Modal.createDialog(ErrorDialog, {
+            title: "Error",
+            description: errMsg
+        });
+    },
+
+    onPasswordChanged: function() {
+        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+        Modal.createDialog(ErrorDialog, {
+            title: "Success",
+            description: `Your password was successfully changed. You will not
+                          receive push notifications on other devices until you
+                          log back in to them.`
+        });
+    },
+
     onLogoutPromptCancel: function() {
         this.logoutModal.closeDialog();
     },
@@ -180,6 +204,9 @@ module.exports = React.createClass({
         }
         // can only get here if phase is UserSettings.DISPLAY
         var RoomHeader = sdk.getComponent('rooms.RoomHeader');
+        var ChangeDisplayName = sdk.getComponent("views.settings.ChangeDisplayName");
+        var ChangePassword = sdk.getComponent("views.settings.ChangePassword");
+
         return (
             <div className="mx_UserSettings">
                 <RoomHeader simpleHeader="Settings" onCancelClick={ this.props.onClose } />
@@ -210,27 +237,7 @@ module.exports = React.createClass({
                                 </div>
                             );
                         })}
-
-                        <div className="mx_UserSettings_profileTableRow">
-                            <div className="mx_UserSettings_profileLabelCell">
-                                <label htmlFor="password1">New password</label>
-                            </div>
-                            <div className="mx_UserSettings_profileInputCell">
-                                <input id="password1" ref="password1"
-                                    value={ this.state.password1 } />
-                            </div>
-                        </div>
-                        <div className="mx_UserSettings_profileTableRow">
-                            <div className="mx_UserSettings_profileLabelCell">
-                                <label htmlFor="password2">Confirm new password</label>
-                            </div>
-                            <div className="mx_UserSettings_profileInputCell">
-                                <input id="password2" ref="password2"
-                                    value={ this.state.password2 } />
-                            </div>
-                        </div>
-
-                    </div>                        
+                    </div>
 
                     <div className="mx_UserSettings_avatarPicker">
                         <div className="mx_UserSettings_avatarPicker_edit"
@@ -239,6 +246,19 @@ module.exports = React.createClass({
                     </div>
                 </div>
 
+                <h2>Account</h2>
+
+                <div className="mx_UserSettings_section">
+                    <ChangePassword
+                        className="mx_UserSettings_profileTable"
+                        rowClassName="mx_UserSettings_profileTableRow"
+                        rowLabelClassName="mx_UserSettings_profileLabelCell"
+                        rowInputClassName="mx_UserSettings_profileInputCell"
+                        buttonClassName="mx_UserSettings_button"
+                        onError={this.onPasswordChangeError}
+                        onFinished={this.onPasswordChanged} />                   
+                </div>
+
                 <div className="mx_UserSettings_logout">
                     <div className="mx_UserSettings_button" onClick={this.onLogoutClicked}>
                         Log out
diff --git a/src/components/views/settings/ChangePassword.js b/src/components/views/settings/ChangePassword.js
index a6666b7ed1..2f097387e9 100644
--- a/src/components/views/settings/ChangePassword.js
+++ b/src/components/views/settings/ChangePassword.js
@@ -18,23 +18,41 @@ limitations under the License.
 
 var React = require('react');
 var MatrixClientPeg = require("../../../MatrixClientPeg");
+var sdk = require("../../../index");
 
 module.exports = React.createClass({
     displayName: 'ChangePassword',
     propTypes: {
         onFinished: React.PropTypes.func,
+        onError: React.PropTypes.func,
+        onCheckPassword: React.PropTypes.func,
+        rowClassName: React.PropTypes.string,
+        rowLabelClassName: React.PropTypes.string,
+        rowInputClassName: React.PropTypes.string,
+        buttonClassName: React.PropTypes.string
     },
 
     Phases: {
         Edit: "edit",
         Uploading: "uploading",
-        Error: "error",
-        Success: "Success"
+        Error: "error"
     },
 
     getDefaultProps: function() {
         return {
             onFinished: function() {},
+            onError: function() {},
+            onCheckPassword: function(oldPass, newPass, confirmPass) {
+                if (newPass !== confirmPass) {
+                    return {
+                        error: "New passwords don't match."
+                    };
+                } else if (!newPass || newPass.length === 0) {
+                    return {
+                        error: "Passwords can't be empty"
+                    };
+                }
+            }
         };
     },
 
@@ -57,58 +75,72 @@ module.exports = React.createClass({
         this.setState({
             phase: this.Phases.Uploading,
             errorString: '',
-        })
-
-        var d = cli.setPassword(authDict, new_password);
+        });
 
         var self = this;
-        d.then(function() {
-            self.setState({
-                phase: self.Phases.Success,
-                errorString: '',
-            })
+        cli.setPassword(authDict, new_password).then(function() {
+            self.props.onFinished();
         }, function(err) {
+            self.props.onError(err);
+        }).finally(function() {
             self.setState({
-                phase: self.Phases.Error,
-                errorString: err.toString()
-            })
-        });
+                phase: self.Phases.Edit,
+                errorString: ""
+            });
+        }).done();
     },
 
     onClickChange: function() {
         var old_password = this.refs.old_input.value;
         var new_password = this.refs.new_input.value;
         var confirm_password = this.refs.confirm_input.value;
-        if (new_password != confirm_password) {
-            this.setState({
-                state: this.Phases.Error,
-                errorString: "Passwords don't match"
-            });
-        } else if (new_password == '' || old_password == '') {
-            this.setState({
-                state: this.Phases.Error,
-                errorString: "Passwords can't be empty"
-            });
-        } else {
+        var err = this.props.onCheckPassword(
+            old_password, new_password, confirm_password
+        );
+        if (err) {
+            this.props.onError(err);
+        }
+        else {
             this.changePassword(old_password, new_password);
         }
     },
 
     render: function() {
+        var rowClassName = this.props.rowClassName;
+        var rowLabelClassName = this.props.rowLabelClassName;
+        var rowInputClassName = this.props.rowInputClassName
+        var buttonClassName = this.props.buttonClassName;
+
         switch (this.state.phase) {
             case this.Phases.Edit:
-            case this.Phases.Error:
                 return (
-                    <div>
-                        <div className="mx_Dialog_content">
-                            <div>{this.state.errorString}</div>
-                            <div><label>Old password <input type="password" ref="old_input"/></label></div>
-                            <div><label>New password <input type="password" ref="new_input"/></label></div>
-                            <div><label>Confirm password <input type="password" ref="confirm_input"/></label></div>
+                    <div className={this.props.className}>
+                        <div className={rowClassName}>
+                            <div className={rowLabelClassName}>
+                                <label htmlFor="passwordold">Old password</label>
+                            </div>
+                            <div className={rowInputClassName}>
+                                <input id="passwordold" type="password" ref="old_input" />
+                            </div>
                         </div>
-                        <div className="mx_Dialog_buttons">
-                            <button onClick={this.onClickChange}>Change Password</button>
-                            <button onClick={this.props.onFinished}>Cancel</button>
+                        <div className={rowClassName}>
+                            <div className={rowLabelClassName}>
+                                <label htmlFor="password1">New password</label>
+                            </div>
+                            <div className={rowInputClassName}>
+                                <input id="password1" type="password" ref="new_input" />
+                            </div>
+                        </div>
+                        <div className={rowClassName}>
+                            <div className={rowLabelClassName}>
+                                <label htmlFor="password2">Confirm password</label>
+                            </div>
+                            <div className={rowInputClassName}>
+                                <input id="password2" type="password" ref="confirm_input" />
+                            </div>
+                        </div>
+                        <div className={buttonClassName} onClick={this.onClickChange}>
+                            Change Password
                         </div>
                     </div>
                 );
@@ -119,17 +151,6 @@ module.exports = React.createClass({
                         <Loader />
                     </div>
                 );
-            case this.Phases.Success:
-                return (
-                    <div>
-                        <div className="mx_Dialog_content">
-                            Success!
-                        </div>
-                        <div className="mx_Dialog_buttons">
-                            <button onClick={this.props.onFinished}>Ok</button>
-                        </div>
-                    </div>
-                )
         }
     }
 });