Merge pull request #2491 from matrix-org/travis/usettings/tab/general

Implement the "General" tab of new user settings

src/components/views/dialogs/SetPasswordDialog.js

@@ -116,9 +116,8 @@ export default React.createClass({
                     <ChangePassword
                         className="mx_SetPasswordDialog_change_password"
                         rowClassName=""
-                        rowLabelClassName=""
-                        rowInputClassName=""
-                        buttonClassName="mx_Dialog_primary mx_SetPasswordDialog_change_password_button"
+                        buttonClassNames="mx_Dialog_primary mx_SetPasswordDialog_change_password_button"
+                        buttonKind="primary"
                         confirm={false}
                         autoFocusNewPasswordInput={true}
                         shouldAskForEmail={true}

src/components/views/elements/Field.js

@@ -31,6 +31,18 @@ export default class Field extends React.PureComponent {
         // To define options for a select, use <Field><option ... /></Field>
         element: PropTypes.string,
         // All other props pass through to the <input>.
+    };
+
+    get value() {
+        if (!this.refs.fieldInput) return null;
+        return this.refs.fieldInput.value;
+    }
+
+    set value(newValue) {
+        if (!this.refs.fieldInput) {
+            throw new Error("No field input reference");
+        }
+        this.refs.fieldInput.value = newValue;
     }
 
     render() {
@@ -42,6 +54,7 @@ export default class Field extends React.PureComponent {
 
         // Set some defaults for the element
         extraProps.type = extraProps.type || "text";
+        extraProps.ref = "fieldInput";
 
         const element = this.props.element || "input";
         const fieldInput = React.createElement(element, extraProps, this.props.children);

src/components/views/elements/SettingsFlag.js

@@ -18,6 +18,7 @@ import React from "react";
 import PropTypes from 'prop-types';
 import SettingsStore from "../../../settings/SettingsStore";
 import { _t } from '../../../languageHandler';
+import ToggleSwitch from "./ToggleSwitch";
 
 module.exports = React.createClass({
     displayName: 'SettingsFlag',
@@ -29,10 +30,6 @@ module.exports = React.createClass({
         onChange: PropTypes.func,
         isExplicit: PropTypes.bool,
         manualSave: PropTypes.bool,
-
-        // If group is supplied, then this will create a radio button instead.
-        group: PropTypes.string,
-        value: PropTypes.any, // the value for the radio button
     },
 
     getInitialState: function() {
@@ -46,13 +43,12 @@ module.exports = React.createClass({
         };
     },
 
-    onChange: function(e) {
-        if (this.props.group && !e.target.checked) return;
+    onChange: function(checked) {
+        if (this.props.group && !checked) return;
 
-        const newState = this.props.group ? this.props.value : e.target.checked;
-        if (!this.props.manualSave) this.save(newState);
-        else this.setState({ value: newState });
-        if (this.props.onChange) this.props.onChange(newState);
+        if (!this.props.manualSave) this.save(checked);
+        else this.setState({ value: checked });
+        if (this.props.onChange) this.props.onChange(checked);
     },
 
     save: function(val = undefined) {
@@ -78,34 +74,11 @@ module.exports = React.createClass({
         if (!label) label = SettingsStore.getDisplayName(this.props.name, this.props.level);
         else label = _t(label);
 
-        // We generate a relatively complex ID to avoid conflicts
-        const id = this.props.name + "_" + this.props.group + "_" + this.props.value + "_" + this.props.level;
-        let checkbox = (
-            <input id={id}
-                   type="checkbox"
-                   defaultChecked={value}
-                   onChange={this.onChange}
-                   disabled={!canChange}
-            />
-        );
-        if (this.props.group) {
-            checkbox = (
-                <input id={id}
-                       type="radio"
-                       name={this.props.group}
-                       value={this.props.value}
-                       checked={value === this.props.value}
-                       onChange={this.onChange}
-                       disabled={!canChange}
-                />
-            );
-        }
-
         return (
-            <label>
-                { checkbox }
-                { label }
-            </label>
+            <div className="mx_SettingsFlag">
+                <span className="mx_SettingsFlag_label">{label}</span>
+                <ToggleSwitch checked={value} onChange={this.onChange} disabled={!canChange} />
+            </div>
         );
     },
 });

src/components/views/elements/ToggleSwitch.js

@@ -0,0 +1,66 @@
+/*
+Copyright 2019 New Vector 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 PropTypes from 'prop-types';
+import classNames from "classnames";
+
+export default class ToggleSwitch extends React.Component {
+    static propTypes = {
+        // Whether or not this toggle is in the 'on' position. Default false (off).
+        checked: PropTypes.bool,
+
+        // Whether or not the user can interact with the switch
+        disabled: PropTypes.bool,
+
+        // Called when the checked state changes. First argument will be the new state.
+        onChange: PropTypes.func,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            checked: props.checked || false, // default false
+        };
+    }
+
+    _onClick = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        if (this.props.disabled) return;
+
+        const newState = !this.state.checked;
+        this.setState({checked: newState});
+        if (this.props.onChange) {
+            this.props.onChange(newState);
+        }
+    };
+
+    render() {
+        const classes = classNames({
+            "mx_ToggleSwitch": true,
+            "mx_ToggleSwitch_on": this.state.checked,
+            "mx_ToggleSwitch_enabled": !this.props.disabled,
+        });
+        return (
+            <div className={classes} onClick={this._onClick}>
+                <div className="mx_ToggleSwitch_ball" />
+            </div>
+        );
+    }
+}

src/components/views/groups/GroupUserSettings.js

@@ -68,15 +68,12 @@ export default React.createClass({
             text = _t("You're not currently a member of any communities.");
         }
 
-        return <div>
-            <h3>{ _t('Flair') }</h3>
-            <div className="mx_UserSettings_section">
-                <p>
-                    { text }
-                </p>
+        return (
+            <div>
+                <p className="mx_SettingsTab_subsectionText">{ text }</p>
                 { scrollbox }
             </div>
-        </div>;
+        );
     },
 
     render() {

src/components/views/settings/ChangePassword.js

@@ -1,6 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2018 New Vector Ltd
+Copyright 2018-2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,6 +15,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import Field from "../elements/Field";
+
 const React = require('react');
 import PropTypes from 'prop-types';
 const MatrixClientPeg = require("../../../MatrixClientPeg");
@@ -35,9 +37,8 @@ module.exports = React.createClass({
         onError: PropTypes.func,
         onCheckPassword: PropTypes.func,
         rowClassName: PropTypes.string,
-        rowLabelClassName: PropTypes.string,
-        rowInputClassName: PropTypes.string,
         buttonClassName: PropTypes.string,
+        buttonKind: PropTypes.string,
         confirm: PropTypes.bool,
         // Whether to autoFocus the new password input
         autoFocusNewPasswordInput: PropTypes.bool,
@@ -203,21 +204,18 @@ module.exports = React.createClass({
     },
 
     render: function() {
+        // TODO: Live validation on `new pw == confirm pw`
+
         const rowClassName = this.props.rowClassName;
-        const rowLabelClassName = this.props.rowLabelClassName;
-        const rowInputClassName = this.props.rowInputClassName;
         const buttonClassName = this.props.buttonClassName;
 
         let currentPassword = null;
         if (!this.state.cachedPassword) {
-            currentPassword = <div className={rowClassName}>
-                <div className={rowLabelClassName}>
-                    <label htmlFor="passwordold">{ _t('Current password') }</label>
+            currentPassword = (
+                <div className={rowClassName}>
+                    <Field id="passwordold" type="password" ref="old_input" label={_t('Current password')} />
                 </div>
-                <div className={rowInputClassName}>
-                    <input id="passwordold" type="password" ref="old_input" />
-                </div>
-            </div>;
+            );
         }
 
         switch (this.state.phase) {
@@ -228,24 +226,13 @@ module.exports = React.createClass({
                     <form className={this.props.className} onSubmit={this.onClickChange}>
                         { currentPassword }
                         <div className={rowClassName}>
-                            <div className={rowLabelClassName}>
-                                <label htmlFor="password1">{ passwordLabel }</label>
-                            </div>
-                            <div className={rowInputClassName}>
-                                <input id="password1" type="password" ref="new_input" autoFocus={this.props.autoFocusNewPasswordInput} />
-                            </div>
+                            <Field id="password1" type="password" ref="new_input" label={passwordLabel}
+                                   autoFocus={this.props.autoFocusNewPasswordInput} />
                         </div>
                         <div className={rowClassName}>
-                            <div className={rowLabelClassName}>
-                                <label htmlFor="password2">{ _t('Confirm password') }</label>
-                            </div>
-                            <div className={rowInputClassName}>
-                                <input id="password2" type="password" ref="confirm_input" />
-                            </div>
+                            <Field id="password2" type="password" ref="confirm_input" label={_t("Confirm password")} />
                         </div>
-                        <AccessibleButton className={buttonClassName}
-                                onClick={this.onClickChange}
-                                element="button">
+                        <AccessibleButton className={buttonClassName} kind={this.props.buttonKind} onClick={this.onClickChange}>
                             { _t('Change Password') }
                         </AccessibleButton>
                     </form>

src/components/views/settings/EmailAddresses.js

@@ -0,0 +1,231 @@
+/*
+Copyright 2019 New Vector 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 PropTypes from 'prop-types';
+import {_t} from "../../../languageHandler";
+import MatrixClientPeg from "../../../MatrixClientPeg";
+import Field from "../elements/Field";
+import AccessibleButton from "../elements/AccessibleButton";
+import * as Email from "../../../email";
+import AddThreepid from "../../../AddThreepid";
+const sdk = require('../../../index');
+const Modal = require("../../../Modal");
+
+/*
+TODO: Improve the UX for everything in here.
+It's very much placeholder, but it gets the job done. The old way of handling
+email addresses in user settings was to use dialogs to communicate state, however
+due to our dialog system overriding dialogs (causing unmounts) this creates problems
+for a sane UX. For instance, the user could easily end up entering an email address
+and receive a dialog to verify the address, which then causes the component here
+to forget what it was doing and ultimately fail. Dialogs are still used in some
+places to communicate errors - these should be replaced with inline validation when
+that is available.
+ */
+
+export class ExistingEmailAddress extends React.Component {
+    static propTypes = {
+        email: PropTypes.object.isRequired,
+        onRemoved: PropTypes.func.isRequired,
+    };
+
+    constructor() {
+        super();
+
+        this.state = {
+            verifyRemove: false,
+        };
+    }
+
+    _onRemove = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        this.setState({verifyRemove: true});
+    };
+
+    _onDontRemove = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        this.setState({verifyRemove: false});
+    };
+
+    _onActuallyRemove = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        MatrixClientPeg.get().deleteThreePid(this.props.email.medium, this.props.email.address).then(() => {
+            return this.props.onRemoved(this.props.email);
+        }).catch((err) => {
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            console.error("Unable to remove contact information: " + err);
+            Modal.createTrackedDialog('Remove 3pid failed', '', ErrorDialog, {
+                title: _t("Unable to remove contact information"),
+                description: ((err && err.message) ? err.message : _t("Operation failed")),
+            });
+        });
+    };
+
+    render() {
+        if (this.state.verifyRemove) {
+            return (
+                <div className="mx_ExistingEmailAddress">
+                    <span className="mx_ExistingEmailAddress_promptText">
+                        {_t("Are you sure?")}
+                    </span>
+                    <AccessibleButton onClick={this._onActuallyRemove} kind="primary_sm"
+                                      className="mx_ExistingEmailAddress_confirmBtn">
+                        {_t("Yes")}
+                    </AccessibleButton>
+                    <AccessibleButton onClick={this._onDontRemove} kind="danger_sm"
+                                      className="mx_ExistingEmailAddress_confirmBtn">
+                        {_t("No")}
+                    </AccessibleButton>
+                </div>
+            );
+        }
+
+        return (
+            <div className="mx_ExistingEmailAddress">
+                <img src={require("../../../../res/img/feather-icons/cancel.svg")} width={14} height={14}
+                     onClick={this._onRemove} className="mx_ExistingEmailAddress_delete" alt={_t("Remove")} />
+                <span className="mx_ExistingEmailAddress_email">{this.props.email.address}</span>
+            </div>
+        );
+    }
+}
+
+export default class EmailAddresses extends React.Component {
+    constructor() {
+        super();
+
+        this.state = {
+            emails: [],
+            verifying: false,
+            addTask: null,
+            continueDisabled: false,
+        };
+    }
+
+    componentWillMount(): void {
+        const client = MatrixClientPeg.get();
+
+        client.getThreePids().then((addresses) => {
+            this.setState({emails: addresses.threepids.filter((a) => a.medium === 'email')});
+        });
+    }
+
+    _onRemoved = (address) => {
+        this.setState({emails: this.state.emails.filter((e) => e !== address)});
+    };
+
+    _onAddClick = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        if (!this.refs.newEmailAddress) return;
+
+        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+        const email = this.refs.newEmailAddress.value;
+
+        // TODO: Inline field validation
+        if (!Email.looksValid(email)) {
+            Modal.createTrackedDialog('Invalid email address', '', ErrorDialog, {
+                title: _t("Invalid Email Address"),
+                description: _t("This doesn't appear to be a valid email address"),
+            });
+            return;
+        }
+
+        const task = new AddThreepid();
+        this.setState({verifying: true, continueDisabled: true, addTask: task});
+
+        task.addEmailAddress(email, true).then(() => {
+            this.setState({continueDisabled: false});
+        }).catch((err) => {
+            console.error("Unable to add email address " + email + " " + err);
+            this.setState({verifying: false, continueDisabled: false, addTask: null});
+            Modal.createTrackedDialog('Unable to add email address', '', ErrorDialog, {
+                title: _t("Unable to add email address"),
+                description: ((err && err.message) ? err.message : _t("Operation failed")),
+            });
+        });
+    };
+
+    _onContinueClick = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        this.setState({continueDisabled: true});
+        this.state.addTask.checkEmailLinkClicked().then(() => {
+            const email = this.refs.newEmailAddress.value;
+            this.setState({
+                emails: [...this.state.emails, {address: email, medium: "email"}],
+                addTask: null,
+                continueDisabled: false,
+                verifying: false,
+            });
+            this.refs.newEmailAddress.value = "";
+        }).catch((err) => {
+            this.setState({continueDisabled: false});
+            if (err.errcode !== 'M_THREEPID_AUTH_FAILED') {
+                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                console.error("Unable to verify email address: " + err);
+                Modal.createTrackedDialog('Unable to verify email address', '', ErrorDialog, {
+                    title: _t("Unable to verify email address."),
+                    description: ((err && err.message) ? err.message : _t("Operation failed")),
+                });
+            }
+        });
+    };
+
+    render() {
+        const existingEmailElements = this.state.emails.map((e) => {
+            return <ExistingEmailAddress email={e} onRemoved={this._onRemoved} key={e.address} />;
+        });
+
+        let addButton = (
+            <AccessibleButton onClick={this._onAddClick} kind="primary">
+                {_t("Add")}
+            </AccessibleButton>
+        );
+        if (this.state.verifying) {
+            addButton = (
+              <div>
+                  <div>{_t("We've sent you an email to verify your address. Please follow the instructions there and then click the button below.")}</div>
+                  <AccessibleButton onClick={this._onContinueClick} kind="primary"
+                                    disabled={this.state.continueDisabled}>
+                      {_t("Continue")}
+                  </AccessibleButton>
+              </div>
+            );
+        }
+
+        return (
+            <div className="mx_EmailAddresses">
+                {existingEmailElements}
+                <form onSubmit={this._onAddClick} autoComplete={false}
+                      noValidate={true} className="mx_EmailAddresses_new">
+                    <Field id="newEmailAddress" ref="newEmailAddress" label={_t("Email Address")}
+                           type="text" autoComplete="off" disabled={this.state.verifying} />
+                    {addButton}
+                </form>
+            </div>
+        );
+    }
+}

src/components/views/settings/PhoneNumbers.js

@@ -0,0 +1,247 @@
+/*
+Copyright 2019 New Vector 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 PropTypes from 'prop-types';
+import {_t} from "../../../languageHandler";
+import MatrixClientPeg from "../../../MatrixClientPeg";
+import Field from "../elements/Field";
+import AccessibleButton from "../elements/AccessibleButton";
+import AddThreepid from "../../../AddThreepid";
+import CountryDropdown from "../auth/CountryDropdown";
+const sdk = require('../../../index');
+const Modal = require("../../../Modal");
+
+/*
+TODO: Improve the UX for everything in here.
+This is a copy/paste of EmailAddresses, mostly.
+ */
+
+// TODO: Combine EmailAddresses and PhoneNumbers to be 3pid agnostic
+
+export class ExistingPhoneNumber extends React.Component {
+    static propTypes = {
+        msisdn: PropTypes.object.isRequired,
+        onRemoved: PropTypes.func.isRequired,
+    };
+
+    constructor() {
+        super();
+
+        this.state = {
+            verifyRemove: false,
+        };
+    }
+
+    _onRemove = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        this.setState({verifyRemove: true});
+    };
+
+    _onDontRemove = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        this.setState({verifyRemove: false});
+    };
+
+    _onActuallyRemove = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        MatrixClientPeg.get().deleteThreePid(this.props.msisdn.medium, this.props.msisdn.address).then(() => {
+            return this.props.onRemoved(this.props.msisdn);
+        }).catch((err) => {
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            console.error("Unable to remove contact information: " + err);
+            Modal.createTrackedDialog('Remove 3pid failed', '', ErrorDialog, {
+                title: _t("Unable to remove contact information"),
+                description: ((err && err.message) ? err.message : _t("Operation failed")),
+            });
+        });
+    };
+
+    render() {
+        if (this.state.verifyRemove) {
+            return (
+                <div className="mx_ExistingPhoneNumber">
+                    <span className="mx_ExistingPhoneNumber_promptText">
+                        {_t("Are you sure?")}
+                    </span>
+                    <AccessibleButton onClick={this._onActuallyRemove} kind="primary_sm"
+                                      className="mx_ExistingPhoneNumber_confirmBtn">
+                        {_t("Yes")}
+                    </AccessibleButton>
+                    <AccessibleButton onClick={this._onDontRemove} kind="danger_sm"
+                                      className="mx_ExistingPhoneNumber_confirmBtn">
+                        {_t("No")}
+                    </AccessibleButton>
+                </div>
+            );
+        }
+
+        return (
+            <div className="mx_ExistingPhoneNumber">
+                <img src={require("../../../../res/img/feather-icons/cancel.svg")} width={14} height={14}
+                     onClick={this._onRemove} className="mx_ExistingPhoneNumber_delete" alt={_t("Remove")} />
+                <span className="mx_ExistingPhoneNumber_address">+{this.props.msisdn.address}</span>
+            </div>
+        );
+    }
+}
+
+export default class PhoneNumbers extends React.Component {
+    constructor() {
+        super();
+
+        this.state = {
+            msisdns: [],
+            verifying: false,
+            verifyError: false,
+            verifyMsisdn: "",
+            addTask: null,
+            continueDisabled: false,
+            phoneCountry: "",
+        };
+    }
+
+    componentWillMount(): void {
+        const client = MatrixClientPeg.get();
+
+        client.getThreePids().then((addresses) => {
+            this.setState({msisdns: addresses.threepids.filter((a) => a.medium === 'msisdn')});
+        });
+    }
+
+    _onRemoved = (address) => {
+        this.setState({msisdns: this.state.msisdns.filter((e) => e !== address)});
+    };
+
+    _onAddClick = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        if (!this.refs.newPhoneNumber) return;
+
+        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+        const phoneNumber = this.refs.newPhoneNumber.value;
+        const phoneCountry = this.state.phoneCountry;
+
+        const task = new AddThreepid();
+        this.setState({verifying: true, continueDisabled: true, addTask: task});
+
+        task.addMsisdn(phoneCountry, phoneNumber, true).then((response) => {
+            this.setState({continueDisabled: false, verifyMsisdn: response.msisdn});
+        }).catch((err) => {
+            console.error("Unable to add phone number " + phoneNumber + " " + err);
+            this.setState({verifying: false, continueDisabled: false, addTask: null});
+            Modal.createTrackedDialog('Add Phone Number Error', '', ErrorDialog, {
+                title: _t("Error"),
+                description: ((err && err.message) ? err.message : _t("Operation failed")),
+            });
+        });
+    };
+
+    _onContinueClick = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        this.setState({continueDisabled: true});
+        const token = this.refs.newPhoneNumberCode.value;
+        this.state.addTask.haveMsisdnToken(token).then(() => {
+            this.setState({
+                msisdns: [...this.state.msisdns, {address: this.state.verifyMsisdn, medium: "msisdn"}],
+                addTask: null,
+                continueDisabled: false,
+                verifying: false,
+                verifyMsisdn: "",
+                verifyError: null,
+            });
+            this.refs.newPhoneNumber.value = "";
+        }).catch((err) => {
+            this.setState({continueDisabled: false});
+            if (err.errcode !== 'M_THREEPID_AUTH_FAILED') {
+                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                console.error("Unable to verify phone number: " + err);
+                Modal.createTrackedDialog('Unable to verify phone number', '', ErrorDialog, {
+                    title: _t("Unable to verify phone number."),
+                    description: ((err && err.message) ? err.message : _t("Operation failed")),
+                });
+            } else {
+                this.setState({verifyError: _t("Incorrect verification code")});
+            }
+        });
+    };
+
+    _onCountryChanged = (e) => {
+        this.setState({phoneCountry: e.iso2});
+    };
+
+    render() {
+        const existingPhoneElements = this.state.msisdns.map((p) => {
+            return <ExistingPhoneNumber msisdn={p} onRemoved={this._onRemoved} key={p.address} />;
+        });
+
+        let addVerifySection = (
+            <AccessibleButton onClick={this._onAddClick} kind="primary">
+                {_t("Add")}
+            </AccessibleButton>
+        );
+        if (this.state.verifying) {
+            const msisdn = this.state.verifyMsisdn;
+            addVerifySection = (
+              <div>
+                  <div>
+                      {_t("A text message has been sent to +%(msisdn)s. " +
+                          "Please enter the verification code it contains", {msisdn: msisdn})}
+                      <br />
+                      {this.state.verifyError}
+                  </div>
+                  <form onSubmit={this._onContinueClick} autoComplete={false} noValidate={true}>
+                      <Field id="newPhoneNumberCode" ref="newPhoneNumberCode" label={_t("Verification code")}
+                             type="text" autoComplete="off" disabled={this.state.continueDisabled} />
+                      <AccessibleButton onClick={this._onContinueClick} kind="primary"
+                                        disabled={this.state.continueDisabled}>
+                          {_t("Continue")}
+                      </AccessibleButton>
+                  </form>
+              </div>
+            );
+        }
+
+        return (
+            <div className="mx_PhoneNumbers">
+                {existingPhoneElements}
+                <form onSubmit={this._onAddClick} autoComplete={false}
+                      noValidate={true} className="mx_PhoneNumbers_new">
+                    <div className="mx_PhoneNumbers_input">
+                        <CountryDropdown onOptionChange={this._onCountryChanged}
+                                         className="mx_PhoneNumbers_country"
+                                         value={this.state.phoneCountry}
+                                         disabled={this.state.verifying}
+                                         isSmall={true}
+                        />
+                        <Field id="newPhoneNumber" ref="newPhoneNumber" label={_t("Phone Number")}
+                               type="text" autoComplete="off" disabled={this.state.verifying} />
+                    </div>
+                    {addVerifySection}
+                </form>
+            </div>
+        );
+    }
+}

src/components/views/settings/ProfileSettings.js

@@ -0,0 +1,155 @@
+/*
+Copyright 2019 New Vector 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 {_t} from "../../../languageHandler";
+import MatrixClientPeg from "../../../MatrixClientPeg";
+import Field from "../elements/Field";
+import AccessibleButton from "../elements/AccessibleButton";
+import classNames from 'classnames';
+
+export default class ProfileSettings extends React.Component {
+    constructor() {
+        super();
+
+        const client = MatrixClientPeg.get();
+        const user = client.getUser(client.getUserId());
+        let avatarUrl = user.avatarUrl;
+        if (avatarUrl) avatarUrl = client.mxcUrlToHttp(avatarUrl, 96, 96, 'crop', false);
+        this.state = {
+            userId: user.userId,
+            originalDisplayName: user.displayName,
+            displayName: user.displayName,
+            originalAvatarUrl: avatarUrl,
+            avatarUrl: avatarUrl,
+            avatarFile: null,
+            enableProfileSave: false,
+        };
+    }
+
+    _uploadAvatar = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        this.refs.avatarUpload.click();
+    };
+
+    _saveProfile = async (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        if (!this.state.enableProfileSave) return;
+        this.setState({enableProfileSave: false});
+
+        const client = MatrixClientPeg.get();
+        const newState = {};
+
+        // TODO: What do we do about errors?
+
+        if (this.state.originalDisplayName !== this.state.displayName) {
+            await client.setDisplayName(this.state.displayName);
+            newState.originalDisplayName = this.state.displayName;
+        }
+
+        if (this.state.avatarFile) {
+            const uri = await client.uploadContent(this.state.avatarFile);
+            await client.setAvatarUrl(uri);
+            newState.avatarUrl = client.mxcUrlToHttp(uri, 96, 96, 'crop', false);
+            newState.originalAvatarUrl = newState.avatarUrl;
+            newState.avatarFile = null;
+        }
+
+        newState.enableProfileSave = true;
+        this.setState(newState);
+    };
+
+    _onDisplayNameChanged = (e) => {
+        this.setState({
+            displayName: e.target.value,
+            enableProfileSave: true,
+        });
+    };
+
+    _onAvatarChanged = (e) => {
+        if (!e.target.files || !e.target.files.length) {
+            this.setState({
+                avatarUrl: this.state.originalAvatarUrl,
+                avatarFile: null,
+                enableProfileSave: false,
+            });
+            return;
+        }
+
+        const file = e.target.files[0];
+        const reader = new FileReader();
+        reader.onload = (ev) => {
+            this.setState({
+                avatarUrl: ev.target.result,
+                avatarFile: file,
+                enableProfileSave: true,
+            });
+        };
+        reader.readAsDataURL(file);
+    };
+
+    render() {
+        // TODO: Why is rendering a box with an overlay so complicated? Can the DOM be reduced?
+
+        let showOverlayAnyways = true;
+        let avatarElement = <div className="mx_ProfileSettings_avatarPlaceholder" />;
+        if (this.state.avatarUrl) {
+            showOverlayAnyways = false;
+            avatarElement = <img src={this.state.avatarUrl}
+                                 alt={_t("Profile picture")} />;
+        }
+
+        const avatarOverlayClasses = classNames({
+            "mx_ProfileSettings_avatarOverlay": true,
+            "mx_ProfileSettings_avatarOverlay_show": showOverlayAnyways,
+        });
+        const avatarHoverElement = (
+            <div className={avatarOverlayClasses} onClick={this._uploadAvatar}>
+                <span className="mx_ProfileSettings_avatarOverlayText">{_t("Upload profile picture")}</span>
+                <div className="mx_ProfileSettings_avatarOverlayImgContainer">
+                    <div className="mx_ProfileSettings_avatarOverlayImg" />
+                </div>
+            </div>
+        );
+
+        return (
+            <form onSubmit={this._saveProfile} autoComplete={false} noValidate={true}>
+                <input type="file" ref="avatarUpload" className="mx_ProfileSettings_avatarUpload"
+                       onChange={this._onAvatarChanged} accept="image/*" />
+                <div className="mx_ProfileSettings_profile">
+                    <div className="mx_ProfileSettings_controls">
+                        <p>{this.state.userId}</p>
+                        <Field id="profileDisplayName" label={_t("Display Name")}
+                               type="text" value={this.state.displayName} autoComplete="off"
+                               onChange={this._onDisplayNameChanged} />
+                    </div>
+                    <div className="mx_ProfileSettings_avatar">
+                        {avatarElement}
+                        {avatarHoverElement}
+                    </div>
+                </div>
+                <AccessibleButton onClick={this._saveProfile} kind="primary"
+                                  disabled={!this.state.enableProfileSave}>
+                    {_t("Save")}
+                </AccessibleButton>
+            </form>
+        );
+    }
+}

src/components/views/settings/tabs/GeneralSettingsTab.js

@@ -17,69 +17,176 @@ limitations under the License.
 import React from 'react';
 import {_t} from "../../../../languageHandler";
 import MatrixClientPeg from "../../../../MatrixClientPeg";
+import GroupUserSettings from "../../groups/GroupUserSettings";
+import PropTypes from "prop-types";
+import {MatrixClient} from "matrix-js-sdk";
+import { DragDropContext } from 'react-beautiful-dnd';
+import ProfileSettings from "../ProfileSettings";
+import EmailAddresses from "../EmailAddresses";
+import PhoneNumbers from "../PhoneNumbers";
 import Field from "../../elements/Field";
+import * as languageHandler from "../../../../languageHandler";
+import {SettingLevel} from "../../../../settings/SettingsStore";
+import SettingsStore from "../../../../settings/SettingsStore";
+import LanguageDropdown from "../../elements/LanguageDropdown";
 import AccessibleButton from "../../elements/AccessibleButton";
+import DeactivateAccountDialog from "../../dialogs/DeactivateAccountDialog";
+const PlatformPeg = require("../../../../PlatformPeg");
+const sdk = require('../../../../index');
+const Modal = require("../../../../Modal");
+const dis = require("../../../../dispatcher");
 
 export default class GeneralSettingsTab extends React.Component {
+    static childContextTypes = {
+        matrixClient: PropTypes.instanceOf(MatrixClient),
+    };
+
     constructor() {
         super();
 
-        const client = MatrixClientPeg.get();
         this.state = {
-            userId: client.getUserId(),
-            displayName: client.getUser(client.getUserId()).displayName,
-            enableProfileSave: false,
+            language: languageHandler.getCurrentLanguage(),
+            theme: SettingsStore.getValueAt(SettingLevel.ACCOUNT, "theme"),
         };
     }
 
-    _saveProfile = async (e) => {
-        e.stopPropagation();
-        e.preventDefault();
+    getChildContext() {
+        return {
+            matrixClient: MatrixClientPeg.get(),
+        };
+    }
 
-        if (!this.state.enableProfileSave) return;
-        this.setState({enableProfileSave: false});
+    _onLanguageChange = (newLanguage) => {
+        if (this.state.language === newLanguage) return;
 
-        // TODO: What do we do about errors?
-        await MatrixClientPeg.get().setDisplayName(this.state.displayName);
-
-        // TODO: Support avatars
-
-        this.setState({enableProfileSave: true});
+        SettingsStore.setValue("language", null, SettingLevel.DEVICE, newLanguage);
+        this.setState({language: newLanguage});
+        PlatformPeg.get().reload();
     };
 
-    _onDisplayNameChanged = (e) => {
-        this.setState({
-            displayName: e.target.value,
-            enableProfileSave: true,
+    _onThemeChange = (e) => {
+        const newTheme = e.target.value;
+        if (this.state.theme === newTheme) return;
+
+        SettingsStore.setValue("theme", null, SettingLevel.ACCOUNT, newTheme);
+        dis.dispatch({action: 'set_theme', value: newTheme});
+    };
+
+    _onPasswordChangeError = (err) => {
+        // TODO: Figure out a design that doesn't involve replacing the current dialog
+        let errMsg = err.error || "";
+        if (err.httpStatus === 403) {
+            errMsg = _t("Failed to change password. Is your password correct?");
+        } else if (err.httpStatus) {
+            errMsg += ` (HTTP status ${err.httpStatus})`;
+        }
+        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+        console.error("Failed to change password: " + errMsg);
+        Modal.createTrackedDialog('Failed to change password', '', ErrorDialog, {
+            title: _t("Error"),
+            description: errMsg,
         });
     };
 
-    _renderProfileSection() {
-        // TODO: Ditch avatar placeholder and use the real thing
-        const form = (
-            <form onSubmit={this._saveProfile} autoComplete={false} noValidate={true}>
-                <div className="mx_GeneralSettingsTab_profile">
-                    <div className="mx_GeneralSettingsTab_profileControls">
-                        <p className="mx_GeneralSettingsTab_profileUsername">{this.state.userId}</p>
-                        <Field id="profileDisplayName" label={_t("Display Name")}
-                               type="text" value={this.state.displayName} autocomplete="off"
-                               onChange={this._onDisplayNameChanged} />
-                    </div>
-                    <div className="mx_GeneralSettingsTab_profileAvatar">
-                        <div />
-                    </div>
-                </div>
-                <AccessibleButton onClick={this._saveProfile} kind="primary"
-                                  disabled={!this.state.enableProfileSave}>
-                    {_t("Save")}
-                </AccessibleButton>
-            </form>
-        );
+    _onPasswordChanged = () => {
+        // TODO: Figure out a design that doesn't involve replacing the current dialog
+        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+        Modal.createTrackedDialog('Password changed', '', ErrorDialog, {
+            title: _t("Success"),
+            description: _t(
+                "Your password was successfully changed. You will not receive " +
+                "push notifications on other devices until you log back in to them",
+            ) + ".",
+        });
+    };
 
+    _onDeactivateClicked = () => {
+        Modal.createTrackedDialog('Deactivate Account', '', DeactivateAccountDialog, {});
+    };
+
+    _renderProfileSection() {
+        // HACK/TODO: Using DragDropContext feels wrong, but we need it.
         return (
             <div className="mx_SettingsTab_section">
                 <span className="mx_SettingsTab_subheading">{_t("Profile")}</span>
-                {form}
+                <ProfileSettings />
+
+                <span className="mx_SettingsTab_subheading">{_t("Flair")}</span>
+                <DragDropContext>
+                    <GroupUserSettings />
+                </DragDropContext>
+            </div>
+        );
+    }
+
+    _renderAccountSection() {
+        const ChangePassword = sdk.getComponent("views.settings.ChangePassword");
+        const passwordChangeForm = (
+            <ChangePassword
+                className="mx_GeneralSettingsTab_changePassword"
+                rowClassName=""
+                buttonKind="primary"
+                onError={this._onPasswordChangeError}
+                onFinished={this._onPasswordChanged} />
+        );
+
+        return (
+            <div className="mx_SettingsTab_section mx_GeneralSettingsTab_accountSection">
+                <span className="mx_SettingsTab_subheading">{_t("Account")}</span>
+                <p className="mx_SettingsTab_subsectionText">
+                    {_t("Set a new account password...")}
+                </p>
+                {passwordChangeForm}
+
+                <span className="mx_SettingsTab_subheading">{_t("Email addresses")}</span>
+                <EmailAddresses />
+
+                <span className="mx_SettingsTab_subheading">{_t("Phone numbers")}</span>
+                <PhoneNumbers />
+            </div>
+        );
+    }
+
+    _renderLanguageSection() {
+        // TODO: Convert to new-styled Field
+        return (
+            <div className="mx_SettingsTab_section">
+                <span className="mx_SettingsTab_subheading">{_t("Language and region")}</span>
+                <LanguageDropdown className="mx_GeneralSettingsTab_languageInput"
+                                  onOptionChange={this._onLanguageChange} value={this.state.language} />
+            </div>
+        );
+    }
+
+    _renderThemeSection() {
+        // TODO: Re-enable theme selection once the themes actually work
+        const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
+        return (
+            <div className="mx_SettingsTab_section mx_GeneralSettingsTab_themeSection">
+                <span className="mx_SettingsTab_subheading">{_t("Theme")}</span>
+                <Field id="theme" label={_t("Theme")} element="select" disabled={true}
+                       value={this.state.theme} onChange={this._onThemeChange}>
+                    <option value="light">{_t("Light theme")}</option>
+                    <option value="dark">{_t("Dark theme")}</option>
+                    <option value="dharma">{_t("2018 theme")}</option>
+                    <option value="status">{_t("Status.im theme")}</option>
+                </Field>
+                <SettingsFlag name="useCompactLayout" level={SettingLevel.ACCOUNT} />
+            </div>
+        );
+    }
+
+    _renderManagementSection() {
+        // TODO: Improve warning text for account deactivation
+        return (
+            <div className="mx_SettingsTab_section">
+                <span className="mx_SettingsTab_subheading">{_t("Account management")}</span>
+                <span className="mx_SettingsTab_subsectionText">
+                    {_t("Deactivating your account is a permanent action - be careful!")}
+                </span>
+                <AccessibleButton onClick={this._onDeactivateClicked} kind="danger">
+                    {_t("Close Account")}
+                </AccessibleButton>
             </div>
         );
     }
@@ -89,6 +196,10 @@ export default class GeneralSettingsTab extends React.Component {
             <div className="mx_SettingsTab">
                 <div className="mx_SettingsTab_heading">{_t("General")}</div>
                 {this._renderProfileSection()}
+                {this._renderAccountSection()}
+                {this._renderLanguageSection()}
+                {this._renderThemeSection()}
+                {this._renderManagementSection()}
             </div>
         );
     }