From aafec49abfb3d8c41935ca3e8e14f83191efc352 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 2 Aug 2016 18:40:12 +0100
Subject: [PATCH 1/8] WIP for deactivaing account UI

https://github.com/vector-im/vector-web/issues/1775
---
 src/component-index.js                    |  1 +
 src/components/structures/UserSettings.js | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/src/component-index.js b/src/component-index.js
index 19a016aec8..95293c2990 100644
--- a/src/component-index.js
+++ b/src/component-index.js
@@ -44,6 +44,7 @@ module.exports.components['views.avatars.RoomAvatar'] = require('./components/vi
 module.exports.components['views.create_room.CreateRoomButton'] = require('./components/views/create_room/CreateRoomButton');
 module.exports.components['views.create_room.Presets'] = require('./components/views/create_room/Presets');
 module.exports.components['views.create_room.RoomAlias'] = require('./components/views/create_room/RoomAlias');
+module.exports.components['views.dialogs.DeactivateAccountDialog'] = require('./components/views/dialogs/DeactivateAccountDialog');
 module.exports.components['views.dialogs.ErrorDialog'] = require('./components/views/dialogs/ErrorDialog');
 module.exports.components['views.dialogs.LogoutPrompt'] = require('./components/views/dialogs/LogoutPrompt');
 module.exports.components['views.dialogs.NeedToRegisterDialog'] = require('./components/views/dialogs/NeedToRegisterDialog');
diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index 6555668ff4..6714604c1d 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -262,6 +262,11 @@ module.exports = React.createClass({
         });
     },
 
+    _onDeactivateAccountClicked: function() {
+        const DeactivateAccountDialog = sdk.getComponent("dialogs.DeactivateAccountDialog");
+        Modal.createDialog(DeactivateAccountDialog, {});
+    },
+
     _renderUserInterfaceSettings: function() {
         var client = MatrixClientPeg.get();
 
@@ -379,6 +384,17 @@ module.exports = React.createClass({
         )
     },
 
+    _renderDeactivateAccount: function() {
+        return <div>
+            <h3>Labs</h3>
+                <div className="mx_UserSettings_section">
+                    <button className="mx_UserSettings_button danger"
+                        onClick={this._onDeactivateAccountClicked}>Deactivate my account
+                    </button>
+                </div>
+        </div>;
+    },
+
     render: function() {
         var self = this;
         var Loader = sdk.getComponent("elements.Spinner");
@@ -548,6 +564,8 @@ module.exports = React.createClass({
                     </div>
                 </div>
 
+                {this._renderDeactivateAccount()}
+
                 </GeminiScrollbar>
             </div>
         );

From 54c10a5d89b9957727d9f926cf70884dc98236ff Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 2 Aug 2016 18:42:02 +0100
Subject: [PATCH 2/8] Get name of section right

---
 src/components/structures/UserSettings.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index 6714604c1d..7fb617d690 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -386,7 +386,7 @@ module.exports = React.createClass({
 
     _renderDeactivateAccount: function() {
         return <div>
-            <h3>Labs</h3>
+            <h3>Deactivate Account</h3>
                 <div className="mx_UserSettings_section">
                     <button className="mx_UserSettings_button danger"
                         onClick={this._onDeactivateAccountClicked}>Deactivate my account

From 2f0fd6da055a010d1e1a766650703c9cabfe1254 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 3 Aug 2016 11:34:13 +0100
Subject: [PATCH 3/8] Actually commit the deactivate account dialog

---
 .../views/dialogs/DeactivateAccountDialog.js  | 139 ++++++++++++++++++
 1 file changed, 139 insertions(+)
 create mode 100644 src/components/views/dialogs/DeactivateAccountDialog.js

diff --git a/src/components/views/dialogs/DeactivateAccountDialog.js b/src/components/views/dialogs/DeactivateAccountDialog.js
new file mode 100644
index 0000000000..0470703307
--- /dev/null
+++ b/src/components/views/dialogs/DeactivateAccountDialog.js
@@ -0,0 +1,139 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+import sdk from '../../../index';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import Lifecycle from '../../../Lifecycle';
+import Velocity from 'velocity-vector';
+
+export default class DeactivateAccountDialog extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+
+        this._passwordField;
+
+        this._onOk = this._onOk.bind(this);
+        this._onCancel = this._onCancel.bind(this);
+        this._onPasswordFieldChange = this._onPasswordFieldChange.bind(this);
+
+        this.state = {
+            confirmButtonEnabled: false,
+            busy: false,
+            errStr: null,
+        };
+    }
+
+    _onPasswordFieldChange(ev) {
+        this.setState({
+            confirmButtonEnabled: Boolean(ev.target.value),
+        });
+    }
+
+    _onOk() {
+        // This assumes that the HS requires password UI auth
+        // for this endpoint. In reality it could be any UI auth.
+        this.setState({busy: true});
+        MatrixClientPeg.get().deactivateAccount({
+            type: 'm.login.password',
+            user: MatrixClientPeg.get().credentials.userId,
+            password: this._passwordField.value,
+        }).done(() => {
+
+            // XXX blocked behind PR
+        }, (err) => {
+            let errStr = 'Unknown error';
+            // https://matrix.org/jira/browse/SYN-744
+            if (err.httpStatus == 401 || err.httpStatus == 403) {
+                errStr = 'Incorrect password';
+                Velocity(this._passwordField, "callout.shake", 300);
+            }
+            this.setState({
+                busy: false,
+                errStr: errStr,
+            });
+        });
+    }
+
+    _onCancel() {
+        this.props.onFinished(false);
+    }
+
+    render() {
+        const Loader = sdk.getComponent("elements.Spinner");
+        let passwordBoxClass = '';
+
+        let error = null;
+        if (this.state.errStr) {
+            error = <div className="error">
+                {this.state.err_str}
+            </div>
+            passwordBoxClass = 'error';
+        }
+
+        // I would use a spinner here but that causes the button to be rendered
+        // slightly higher than the other one
+        const okLabel = this.state.busy ? <Loader /> : 'Deactivate Account';
+        const okEnabled = this.state.confirmButtonEnabled && !this.state.busy;
+
+        let cancelButton = null;
+        if (!this.state.busy) {
+            cancelButton = <button onClick={this._onCancel} autoFocus={true}>
+                Cancel
+            </button>
+        }
+
+        return (
+            <div className="mx_DeactivateAccountDialog">
+                <div className="mx_Dialog_title danger">
+                    Deactivate Account
+                </div>
+                <div className="mx_Dialog_content">
+                    This will make your account permanently unusable. You will not be able to re-register the same user ID.<br />
+                    <br />
+                    This action is irreversible.<br />
+                    <br />
+                    To continue, please enter your password.<br />
+                    <br />
+                    Password:<br />
+                    <input
+                        type="password"
+                        onChange={this._onPasswordFieldChange}
+                        ref={(e) => {this._passwordField = e;}}
+                        className={passwordBoxClass}
+                    />
+                    {error}
+                </div>
+                <div className="mx_Dialog_buttons">
+                    <button
+                        className="mx_Dialog_primary danger"
+                        onClick={this._onOk}
+                        disabled={!okEnabled}
+                    >
+                        {okLabel}
+                    </button>
+
+                    {cancelButton}
+                </div>
+            </div>
+        );
+    }
+}
+
+DeactivateAccountDialog.propTypes = {
+    onFinished: React.PropTypes.func.isRequired,
+};

From f47ac87775568b41334ccd503869ea7fa81a373c Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 3 Aug 2016 11:34:31 +0100
Subject: [PATCH 4/8] Don't show deactivate button for guests

---
 src/components/structures/UserSettings.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index 7fb617d690..89146229fa 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -385,6 +385,9 @@ module.exports = React.createClass({
     },
 
     _renderDeactivateAccount: function() {
+        // We can't deactivate a guest account.
+        if (MatrixClientPeg.get().isGuest()) return null;
+
         return <div>
             <h3>Deactivate Account</h3>
                 <div className="mx_UserSettings_section">

From ffa97a4095b1764c847c238998a0b0d08c9a9dc6 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 3 Aug 2016 11:47:29 +0100
Subject: [PATCH 5/8] Log out when account is deactivated

---
 src/Lifecycle.js                                       | 10 +++++-----
 .../views/dialogs/DeactivateAccountDialog.js           |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/Lifecycle.js b/src/Lifecycle.js
index 163e6e9463..b50e96b298 100644
--- a/src/Lifecycle.js
+++ b/src/Lifecycle.js
@@ -46,11 +46,11 @@ function logout() {
         // logout doesn't work for guest sessions
         // Also we sometimes want to re-log in a guest session
         // if we abort the login
-        _onLoggedOut();
+        onLoggedOut();
         return;
     }
 
-    return MatrixClientPeg.get().logout().then(_onLoggedOut,
+    return MatrixClientPeg.get().logout().then(onLoggedOut,
         (err) => {
             // Just throwing an error here is going to be very unhelpful
             // if you're trying to log out because your server's down and
@@ -60,7 +60,7 @@ function logout() {
             // tokens expire (and if you really think you've been compromised,
             // change your password).
             console.log("Failed to call logout API: token will not be invalidated");
-            _onLoggedOut();
+            onLoggedOut();
         }
     );
 }
@@ -87,7 +87,7 @@ function startMatrixClient() {
     MatrixClientPeg.get().startClient(MatrixClientPeg.opts);
 }
 
-function _onLoggedOut() {
+function onLoggedOut() {
     if (window.localStorage) {
         const hsUrl = window.localStorage.getItem("mx_hs_url");
         const isUrl = window.localStorage.getItem("mx_is_url");
@@ -114,5 +114,5 @@ function _stopMatrixClient() {
 }
 
 module.exports = {
-    setLoggedIn, logout, startMatrixClient
+    setLoggedIn, logout, startMatrixClient, onLoggedOut
 };
diff --git a/src/components/views/dialogs/DeactivateAccountDialog.js b/src/components/views/dialogs/DeactivateAccountDialog.js
index 0470703307..e60f66737c 100644
--- a/src/components/views/dialogs/DeactivateAccountDialog.js
+++ b/src/components/views/dialogs/DeactivateAccountDialog.js
@@ -53,8 +53,8 @@ export default class DeactivateAccountDialog extends React.Component {
             user: MatrixClientPeg.get().credentials.userId,
             password: this._passwordField.value,
         }).done(() => {
-
-            // XXX blocked behind PR
+            Lifecycle.onLoggedOut();
+            this.props.onFinished(false);
         }, (err) => {
             let errStr = 'Unknown error';
             // https://matrix.org/jira/browse/SYN-744

From e144da75e390b064ac95a59be29a0c318caea095 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 4 Aug 2016 10:49:34 +0100
Subject: [PATCH 6/8] Comment onLoggedOut & consistent comment style

---
 src/Lifecycle.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/Lifecycle.js b/src/Lifecycle.js
index 4393c29d37..23bf5f60a5 100644
--- a/src/Lifecycle.js
+++ b/src/Lifecycle.js
@@ -79,6 +79,10 @@ function startMatrixClient() {
     MatrixClientPeg.start();
 }
 
+/*
+ * Stops a running client and all related services, used after
+ * a session has been logged out / ended.
+ */
 function onLoggedOut() {
     if (window.localStorage) {
         const hsUrl = window.localStorage.getItem("mx_hs_url");
@@ -95,7 +99,9 @@ function onLoggedOut() {
     dis.dispatch({action: 'on_logged_out'});
 }
 
-// stop all the background processes related to the current client
+/**
+ * Stop all the background processes related to the current client
+ */
 function _stopMatrixClient() {
     Notifier.stop();
     UserActivity.stop();

From c017e8dcf4cefc40ef42432b10dff9b9b8e1096c Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 4 Aug 2016 10:51:31 +0100
Subject: [PATCH 7/8] Initialise _passwordField & delete stale comment

---
 src/components/views/dialogs/DeactivateAccountDialog.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/views/dialogs/DeactivateAccountDialog.js b/src/components/views/dialogs/DeactivateAccountDialog.js
index e60f66737c..1c6de7ab40 100644
--- a/src/components/views/dialogs/DeactivateAccountDialog.js
+++ b/src/components/views/dialogs/DeactivateAccountDialog.js
@@ -25,7 +25,7 @@ export default class DeactivateAccountDialog extends React.Component {
     constructor(props, context) {
         super(props, context);
 
-        this._passwordField;
+        this._passwordField = null;
 
         this._onOk = this._onOk.bind(this);
         this._onCancel = this._onCancel.bind(this);
@@ -85,8 +85,6 @@ export default class DeactivateAccountDialog extends React.Component {
             passwordBoxClass = 'error';
         }
 
-        // I would use a spinner here but that causes the button to be rendered
-        // slightly higher than the other one
         const okLabel = this.state.busy ? <Loader /> : 'Deactivate Account';
         const okEnabled = this.state.confirmButtonEnabled && !this.state.busy;
 

From f7fda68e26e60998dc9ed154830d893fc48d49b9 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 4 Aug 2016 10:53:07 +0100
Subject: [PATCH 8/8] Use p tags instead of brs

---
 .../views/dialogs/DeactivateAccountDialog.js       | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/views/dialogs/DeactivateAccountDialog.js b/src/components/views/dialogs/DeactivateAccountDialog.js
index 1c6de7ab40..926e4059d2 100644
--- a/src/components/views/dialogs/DeactivateAccountDialog.js
+++ b/src/components/views/dialogs/DeactivateAccountDialog.js
@@ -101,13 +101,13 @@ export default class DeactivateAccountDialog extends React.Component {
                     Deactivate Account
                 </div>
                 <div className="mx_Dialog_content">
-                    This will make your account permanently unusable. You will not be able to re-register the same user ID.<br />
-                    <br />
-                    This action is irreversible.<br />
-                    <br />
-                    To continue, please enter your password.<br />
-                    <br />
-                    Password:<br />
+                    <p>This will make your account permanently unusable. You will not be able to re-register the same user ID.</p>
+
+                    <p>This action is irreversible.</p>
+
+                    <p>To continue, please enter your password.</p>
+
+                    <p>Password:</p>
                     <input
                         type="password"
                         onChange={this._onPasswordFieldChange}