Merge branch 'develop' into reorganize-preferences

2021-04-30 10:55:29 +02:00
parent 951a807e24 d203e8f129
commit e2bee396bb
645 changed files with 23824 additions and 7486 deletions
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
@@ -18,6 +18,7 @@ limitations under the License.
 import React from 'react';
 import {_t} from "../../../../../languageHandler";
 import SdkConfig from "../../../../../SdkConfig";
+import { MatrixClientPeg } from '../../../../../MatrixClientPeg';
 import SettingsStore from "../../../../../settings/SettingsStore";
 import { enumerateThemes } from "../../../../../theme";
 import ThemeWatcher from "../../../../../settings/watchers/ThemeWatcher";
@@ -36,6 +37,7 @@ import StyledRadioGroup from "../../../elements/StyledRadioGroup";
 import { SettingLevel } from "../../../../../settings/SettingLevel";
 import {UIFeature} from "../../../../../settings/UIFeature";
 import {Layout} from "../../../../../settings/Layout";
+import {replaceableComponent} from "../../../../../utils/replaceableComponent";

 interface IProps {
 }
@@ -62,9 +64,13 @@ interface IState extends IThemeState {
    systemFont: string;
    showAdvanced: boolean;
    layout: Layout;
+    // User profile data for the message preview
+    userId: string;
+    displayName: string;
+    avatarUrl: string;
 }

-
+@replaceableComponent("views.settings.tabs.user.AppearanceUserSettingsTab")
 export default class AppearanceUserSettingsTab extends React.Component<IProps, IState> {
    private readonly MESSAGE_PREVIEW_TEXT = _t("Hey you. You're the best!");

@@ -83,9 +89,25 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
            systemFont: SettingsStore.getValue("systemFont"),
            showAdvanced: false,
            layout: SettingsStore.getValue("layout"),
+            userId: "@erim:fink.fink",
+            displayName: "Erimayas Fink",
+            avatarUrl: null,
        };
    }

+    async componentDidMount() {
+        // Fetch the current user profile for the message preview
+        const client = MatrixClientPeg.get();
+        const userId = client.getUserId();
+        const profileInfo = await client.getProfileInfo(userId);
+
+        this.setState({
+            userId,
+            displayName: profileInfo.displayname,
+            avatarUrl: profileInfo.avatar_url,
+        });
+    }
+
    private calculateThemeState(): IThemeState {
        // We have to mirror the logic from ThemeWatcher.getEffectiveTheme so we
        // show the right values for things.
@@ -306,6 +328,9 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                className="mx_AppearanceUserSettingsTab_fontSlider_preview"
                message={this.MESSAGE_PREVIEW_TEXT}
                layout={this.state.layout}
+                userId={this.state.userId}
+                displayName={this.state.displayName}
+                avatarUrl={this.state.avatarUrl}
            />
            <div className="mx_AppearanceUserSettingsTab_fontSlider">
                <div className="mx_AppearanceUserSettingsTab_fontSlider_smallText">Aa</div>
--- a/src/components/views/settings/tabs/user/FlairUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/FlairUserSettingsTab.js
@@ -17,7 +17,9 @@ limitations under the License.
 import React from 'react';
 import {_t} from "../../../../../languageHandler";
 import GroupUserSettings from "../../../groups/GroupUserSettings";
+import {replaceableComponent} from "../../../../../utils/replaceableComponent";

+@replaceableComponent("views.settings.tabs.user.FlairUserSettingsTab")
 export default class FlairUserSettingsTab extends React.Component {
    render() {
        return (
--- a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
@@ -32,14 +32,16 @@ import * as sdk from "../../../../..";
 import Modal from "../../../../../Modal";
 import dis from "../../../../../dispatcher/dispatcher";
 import {Service, startTermsFlow} from "../../../../../Terms";
-import {SERVICE_TYPES} from "matrix-js-sdk";
+import {SERVICE_TYPES} from "matrix-js-sdk/src/service-types";
 import IdentityAuthClient from "../../../../../IdentityAuthClient";
 import {abbreviateUrl} from "../../../../../utils/UrlUtils";
 import { getThreepidsWithBindStatus } from '../../../../../boundThreepids';
 import Spinner from "../../../elements/Spinner";
 import {SettingLevel} from "../../../../../settings/SettingLevel";
 import {UIFeature} from "../../../../../settings/UIFeature";
+import {replaceableComponent} from "../../../../../utils/replaceableComponent";

+@replaceableComponent("views.settings.tabs.user.GeneralUserSettingsTab")
 export default class GeneralUserSettingsTab extends React.Component {
    static propTypes = {
        closeSettingsFn: PropTypes.func.isRequired,
@@ -190,7 +192,11 @@ export default class GeneralUserSettingsTab extends React.Component {

        SettingsStore.setValue("language", null, SettingLevel.DEVICE, newLanguage);
        this.setState({language: newLanguage});
-        PlatformPeg.get().reload();
+        const platform = PlatformPeg.get();
+        if (platform) {
+            platform.setLanguage(newLanguage);
+            platform.reload();
+        }
    };

    _onSpellCheckLanguagesChange = (languages) => {
@@ -204,10 +210,10 @@ export default class GeneralUserSettingsTab extends React.Component {

    _onPasswordChangeError = (err) => {
        // TODO: Figure out a design that doesn't involve replacing the current dialog
-        let errMsg = err.error || "";
+        let errMsg = err.error || err.message || "";
        if (err.httpStatus === 403) {
            errMsg = _t("Failed to change password. Is your password correct?");
-        } else if (err.httpStatus) {
+        } else if (!errMsg) {
            errMsg += ` (HTTP status ${err.httpStatus})`;
        }
        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
--- a/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx
@@ -1,6 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2019-2021 The Matrix.org Foundation C.I.C.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,25 +15,31 @@ limitations under the License.
 */

 import React from 'react';
-import PropTypes from 'prop-types';
 import {_t, getCurrentLanguage} from "../../../../../languageHandler";
 import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import SdkConfig from "../../../../../SdkConfig";
 import createRoom from "../../../../../createRoom";
 import Modal from "../../../../../Modal";
-import * as sdk from "../../../../../";
+import * as sdk from "../../../../..";
 import PlatformPeg from "../../../../../PlatformPeg";
 import * as KeyboardShortcuts from "../../../../../accessibility/KeyboardShortcuts";
 import UpdateCheckButton from "../../UpdateCheckButton";
+import { replaceableComponent } from "../../../../../utils/replaceableComponent";

-export default class HelpUserSettingsTab extends React.Component {
-    static propTypes = {
-        closeSettingsFn: PropTypes.func.isRequired,
-    };
+interface IProps {
+    closeSettingsFn: () => {};
+}

-    constructor() {
-        super();
+interface IState {
+    appVersion: string;
+    canUpdate: boolean;
+}
+
+@replaceableComponent("views.settings.tabs.user.HelpUserSettingsTab")
+export default class HelpUserSettingsTab extends React.Component<IProps, IState> {
+    constructor(props) {
+        super(props);

        this.state = {
            appVersion: null,
@@ -51,7 +56,7 @@ export default class HelpUserSettingsTab extends React.Component {
        });
    }

-    _onClearCacheAndReload = (e) => {
+    private onClearCacheAndReload = (e) => {
        if (!PlatformPeg.get()) return;

        // Dev note: please keep this log line, it's useful when troubleshooting a MatrixClient suddenly
@@ -63,7 +68,7 @@ export default class HelpUserSettingsTab extends React.Component {
        });
    };

-    _onBugReport = (e) => {
+    private onBugReport = (e) => {
        const BugReportDialog = sdk.getComponent("dialogs.BugReportDialog");
        if (!BugReportDialog) {
            return;
@@ -71,7 +76,7 @@ export default class HelpUserSettingsTab extends React.Component {
        Modal.createTrackedDialog('Bug Report Dialog', '', BugReportDialog, {});
    };

-    _onStartBotChat = (e) => {
+    private onStartBotChat = (e) => {
        this.props.closeSettingsFn();
        createRoom({
            dmUserId: SdkConfig.get().welcomeUserId,
@@ -79,7 +84,7 @@ export default class HelpUserSettingsTab extends React.Component {
        });
    };

-    _showSpoiler = (event) => {
+    private showSpoiler = (event) => {
        const target = event.target;
        target.innerHTML = target.getAttribute('data-spoiler');

@@ -91,7 +96,7 @@ export default class HelpUserSettingsTab extends React.Component {
        selection.addRange(range);
    };

-    _renderLegal() {
+    private renderLegal() {
        const tocLinks = SdkConfig.get().terms_and_conditions_links;
        if (!tocLinks) return null;

@@ -112,7 +117,7 @@ export default class HelpUserSettingsTab extends React.Component {
        );
    }

-    _renderCredits() {
+    private renderCredits() {
        // Note: This is not translated because it is legal text.
        // Also, &nbsp; is ugly but necessary.
        return (
@@ -120,28 +125,28 @@ export default class HelpUserSettingsTab extends React.Component {
                <span className='mx_SettingsTab_subheading'>{_t("Credits")}</span>
                <ul>
                    <li>
-                        The <a href="themes/element/img/backgrounds/lake.jpg" rel="noreferrer noopener" target="_blank">
-                        default cover photo</a> is ©&nbsp;
-                        <a href="https://www.flickr.com/golan" rel="noreferrer noopener" target="_blank">Jesús Roncero</a>{' '}
-                        used under the terms of&nbsp;
-                        <a href="https://creativecommons.org/licenses/by-sa/4.0/" rel="noreferrer noopener" target="_blank">
-                        CC-BY-SA 4.0</a>.
+                        The <a href="themes/element/img/backgrounds/lake.jpg" rel="noreferrer noopener"
+                            target="_blank">default cover photo</a> is ©&nbsp;
+                        <a href="https://www.flickr.com/golan" rel="noreferrer noopener"
+                            target="_blank">Jesús Roncero</a> used under the terms of&nbsp;
+                        <a href="https://creativecommons.org/licenses/by-sa/4.0/" rel="noreferrer noopener"
+                            target="_blank">CC-BY-SA 4.0</a>.
                    </li>
                    <li>
                        The <a href="https://github.com/matrix-org/twemoji-colr" rel="noreferrer noopener"
-                               target="_blank"> twemoji-colr</a> font is ©&nbsp;
-                        <a href="https://mozilla.org" rel="noreferrer noopener" target="_blank">Mozilla Foundation</a>{' '}
-                        used under the terms of&nbsp;
-                        <a href="http://www.apache.org/licenses/LICENSE-2.0" rel="noreferrer noopener" target="_blank">
-                        Apache 2.0</a>.
+                            target="_blank">twemoji-colr</a> font is ©&nbsp;
+                        <a href="https://mozilla.org" rel="noreferrer noopener"
+                            target="_blank">Mozilla Foundation</a> used under the terms of&nbsp;
+                        <a href="http://www.apache.org/licenses/LICENSE-2.0" rel="noreferrer noopener"
+                            target="_blank">Apache 2.0</a>.
                    </li>
                    <li>
-                        The <a href="https://twemoji.twitter.com/" rel="noreferrer noopener" target="_blank">
-                        Twemoji</a> emoji art is ©&nbsp;
-                        <a href="https://twemoji.twitter.com/" rel="noreferrer noopener" target="_blank">Twitter, Inc and other
-                        contributors</a> used under the terms of&nbsp;
-                        <a href="https://creativecommons.org/licenses/by/4.0/" rel="noreferrer noopener" target="_blank">
-                        CC-BY 4.0</a>.
+                        The <a href="https://twemoji.twitter.com/" rel="noreferrer noopener"
+                            target="_blank">Twemoji</a> emoji art is ©&nbsp;
+                        <a href="https://twemoji.twitter.com/" rel="noreferrer noopener"
+                            target="_blank">Twitter, Inc and other contributors</a> used under the terms of&nbsp;
+                        <a href="https://creativecommons.org/licenses/by/4.0/" rel="noreferrer noopener"
+                            target="_blank">CC-BY 4.0</a>.
                    </li>
                </ul>
            </div>
@@ -186,7 +191,7 @@ export default class HelpUserSettingsTab extends React.Component {
                        },
                    )}
                    <div>
-                        <AccessibleButton onClick={this._onStartBotChat} kind='primary'>
+                        <AccessibleButton onClick={this.onStartBotChat} kind='primary'>
                            {_t("Chat with %(brand)s Bot", { brand })}
                        </AccessibleButton>
                    </div>
@@ -210,28 +215,27 @@ export default class HelpUserSettingsTab extends React.Component {
                <div className="mx_SettingsTab_section">
                    <span className='mx_SettingsTab_subheading'>{_t('Bug reporting')}</span>
                    <div className='mx_SettingsTab_subsectionText'>
-                        {
-                            _t( "If you've submitted a bug via GitHub, debug logs can help " +
-                                "us track down the problem. Debug logs contain application " +
-                                "usage data including your username, the IDs or aliases of " +
-                                "the rooms or groups you have visited and the usernames of " +
-                                "other users. They do not contain messages.",
-                            )
-                        }
+                        {_t(
+                            "If you've submitted a bug via GitHub, debug logs can help " +
+                            "us track down the problem. Debug logs contain application " +
+                            "usage data including your username, the IDs or aliases of " +
+                            "the rooms or groups you have visited and the usernames of " +
+                            "other users. They do not contain messages.",
+                        )}
                        <div className='mx_HelpUserSettingsTab_debugButton'>
-                            <AccessibleButton onClick={this._onBugReport} kind='primary'>
+                            <AccessibleButton onClick={this.onBugReport} kind='primary'>
                                {_t("Submit debug logs")}
                            </AccessibleButton>
                        </div>
-                        {
-                            _t( "To report a Matrix-related security issue, please read the Matrix.org " +
-                                "<a>Security Disclosure Policy</a>.", {},
-                                {
-                                    'a': (sub) =>
-                                        <a href="https://matrix.org/security-disclosure-policy/"
-                                           rel="noreferrer noopener" target="_blank">{sub}</a>,
-                                })
-                        }
+                        {_t(
+                            "To report a Matrix-related security issue, please read the Matrix.org " +
+                            "<a>Security Disclosure Policy</a>.", {},
+                            {
+                                a: sub => <a href="https://matrix.org/security-disclosure-policy/"
+                                    rel="noreferrer noopener" target="_blank"
+                                >{sub}</a>,
+                            },
+                        )}
                    </div>
                </div>
            );
@@ -258,20 +262,21 @@ export default class HelpUserSettingsTab extends React.Component {
                        {updateButton}
                    </div>
                </div>
-                {this._renderLegal()}
-                {this._renderCredits()}
+                {this.renderLegal()}
+                {this.renderCredits()}
                <div className='mx_SettingsTab_section mx_HelpUserSettingsTab_versions'>
                    <span className='mx_SettingsTab_subheading'>{_t("Advanced")}</span>
                    <div className='mx_SettingsTab_subsectionText'>
                        {_t("Homeserver is")} <code>{MatrixClientPeg.get().getHomeserverUrl()}</code><br />
                        {_t("Identity Server is")} <code>{MatrixClientPeg.get().getIdentityServerUrl()}</code><br />
                        {_t("Access Token:") + ' '}
-                        <AccessibleButton element="span" onClick={this._showSpoiler}
-                                          data-spoiler={MatrixClientPeg.get().getAccessToken()}>
+                        <AccessibleButton element="span" onClick={this.showSpoiler}
+                            data-spoiler={MatrixClientPeg.get().getAccessToken()}
+                        >
                            &lt;{ _t("click to reveal") }&gt;
                        </AccessibleButton>
                        <div className='mx_HelpUserSettingsTab_debugButton'>
-                            <AccessibleButton onClick={this._onClearCacheAndReload} kind='danger'>
+                            <AccessibleButton onClick={this.onClearCacheAndReload} kind='danger'>
                                {_t("Clear cache and reload")}
                            </AccessibleButton>
                        </div>
--- a/src/components/views/settings/tabs/user/LabsUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/LabsUserSettingsTab.js
@@ -21,6 +21,7 @@ import SettingsStore from "../../../../../settings/SettingsStore";
 import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
 import * as sdk from "../../../../../index";
 import {SettingLevel} from "../../../../../settings/SettingLevel";
+import {replaceableComponent} from "../../../../../utils/replaceableComponent";

 export class LabsSettingToggle extends React.Component {
    static propTypes = {
@@ -40,6 +41,7 @@ export class LabsSettingToggle extends React.Component {
    }
 }

+@replaceableComponent("views.settings.tabs.user.LabsUserSettingsTab")
 export default class LabsUserSettingsTab extends React.Component {
    constructor() {
        super();
--- a/src/components/views/settings/tabs/user/MjolnirUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/MjolnirUserSettingsTab.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2019-2021 The Matrix.org Foundation C.I.C.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -23,10 +23,18 @@ import {BanList, RULE_SERVER, RULE_USER} from "../../../../../mjolnir/BanList";
 import Modal from "../../../../../Modal";
 import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
 import * as sdk from "../../../../../index";
+import {replaceableComponent} from "../../../../../utils/replaceableComponent";

-export default class MjolnirUserSettingsTab extends React.Component {
-    constructor() {
-        super();
+interface IState {
+    busy: boolean;
+    newPersonalRule: string;
+    newList: string;
+}
+
+@replaceableComponent("views.settings.tabs.user.MjolnirUserSettingsTab")
+export default class MjolnirUserSettingsTab extends React.Component<{}, IState> {
+    constructor(props) {
+        super(props);

        this.state = {
            busy: false,
@@ -35,15 +43,15 @@ export default class MjolnirUserSettingsTab extends React.Component {
        };
    }

-    _onPersonalRuleChanged = (e) => {
+    private onPersonalRuleChanged = (e) => {
        this.setState({newPersonalRule: e.target.value});
    };

-    _onNewListChanged = (e) => {
+    private onNewListChanged = (e) => {
        this.setState({newList: e.target.value});
    };

-    _onAddPersonalRule = async (e) => {
+    private onAddPersonalRule = async (e) => {
        e.preventDefault();
        e.stopPropagation();

@@ -70,7 +78,7 @@ export default class MjolnirUserSettingsTab extends React.Component {
        }
    };

-    _onSubscribeList = async (e) => {
+    private onSubscribeList = async (e) => {
        e.preventDefault();
        e.stopPropagation();

@@ -92,7 +100,7 @@ export default class MjolnirUserSettingsTab extends React.Component {
        }
    };

-    async _removePersonalRule(rule: ListRule) {
+    private async removePersonalRule(rule: ListRule) {
        this.setState({busy: true});
        try {
            const list = Mjolnir.sharedInstance().getPersonalList();
@@ -110,7 +118,7 @@ export default class MjolnirUserSettingsTab extends React.Component {
        }
    }

-    async _unsubscribeFromList(list: BanList) {
+    private async unsubscribeFromList(list: BanList) {
        this.setState({busy: true});
        try {
            await Mjolnir.sharedInstance().unsubscribeFromList(list.roomId);
@@ -128,7 +136,7 @@ export default class MjolnirUserSettingsTab extends React.Component {
        }
    }

-    _viewListRules(list: BanList) {
+    private viewListRules(list: BanList) {
        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");

        const room = MatrixClientPeg.get().getRoom(list.roomId);
@@ -159,7 +167,7 @@ export default class MjolnirUserSettingsTab extends React.Component {
        });
    }

-    _renderPersonalBanListRules() {
+    private renderPersonalBanListRules() {
        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');

        const list = Mjolnir.sharedInstance().getPersonalList();
@@ -172,7 +180,7 @@ export default class MjolnirUserSettingsTab extends React.Component {
                <li key={rule.entity} className="mx_MjolnirUserSettingsTab_listItem">
                    <AccessibleButton
                        kind="danger_sm"
-                        onClick={() => this._removePersonalRule(rule)}
+                        onClick={() => this.removePersonalRule(rule)}
                        disabled={this.state.busy}
                    >
                        {_t("Remove")}
@@ -190,7 +198,7 @@ export default class MjolnirUserSettingsTab extends React.Component {
        );
    }

-    _renderSubscribedBanLists() {
+    private renderSubscribedBanLists() {
        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');

        const personalList = Mjolnir.sharedInstance().getPersonalList();
@@ -207,14 +215,14 @@ export default class MjolnirUserSettingsTab extends React.Component {
                <li key={list.roomId} className="mx_MjolnirUserSettingsTab_listItem">
                    <AccessibleButton
                        kind="danger_sm"
-                        onClick={() => this._unsubscribeFromList(list)}
+                        onClick={() => this.unsubscribeFromList(list)}
                        disabled={this.state.busy}
                    >
                        {_t("Unsubscribe")}
                    </AccessibleButton>&nbsp;
                    <AccessibleButton
                        kind="primary_sm"
-                        onClick={() => this._viewListRules(list)}
+                        onClick={() => this.viewListRules(list)}
                        disabled={this.state.busy}
                    >
                        {_t("View rules")}
@@ -269,21 +277,21 @@ export default class MjolnirUserSettingsTab extends React.Component {
                        )}
                    </div>
                    <div>
-                        {this._renderPersonalBanListRules()}
+                        {this.renderPersonalBanListRules()}
                    </div>
                    <div>
-                        <form onSubmit={this._onAddPersonalRule} autoComplete="off">
+                        <form onSubmit={this.onAddPersonalRule} autoComplete="off">
                            <Field
                                type="text"
                                label={_t("Server or user ID to ignore")}
                                placeholder={_t("eg: @bot:* or example.org")}
                                value={this.state.newPersonalRule}
-                                onChange={this._onPersonalRuleChanged}
+                                onChange={this.onPersonalRuleChanged}
                            />
                            <AccessibleButton
                                type="submit"
                                kind="primary"
-                                onClick={this._onAddPersonalRule}
+                                onClick={this.onAddPersonalRule}
                                disabled={this.state.busy}
                            >
                                {_t("Ignore")}
@@ -301,20 +309,20 @@ export default class MjolnirUserSettingsTab extends React.Component {
                        )}</span>
                    </div>
                    <div>
-                        {this._renderSubscribedBanLists()}
+                        {this.renderSubscribedBanLists()}
                    </div>
                    <div>
-                        <form onSubmit={this._onSubscribeList} autoComplete="off">
+                        <form onSubmit={this.onSubscribeList} autoComplete="off">
                            <Field
                                type="text"
                                label={_t("Room ID or address of ban list")}
                                value={this.state.newList}
-                                onChange={this._onNewListChanged}
+                                onChange={this.onNewListChanged}
                            />
                            <AccessibleButton
                                type="submit"
                                kind="primary"
-                                onClick={this._onSubscribeList}
+                                onClick={this.onSubscribeList}
                                disabled={this.state.busy}
                            >
                                {_t("Subscribe")}
--- a/src/components/views/settings/tabs/user/NotificationUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/NotificationUserSettingsTab.js
@@ -17,7 +17,9 @@ limitations under the License.
 import React from 'react';
 import {_t} from "../../../../../languageHandler";
 import * as sdk from "../../../../../index";
+import {replaceableComponent} from "../../../../../utils/replaceableComponent";

+@replaceableComponent("views.settings.tabs.user.NotificationUserSettingsTab")
 export default class NotificationUserSettingsTab extends React.Component {
    constructor() {
        super();
--- a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019-2021 The Matrix.org Foundation C.I.C.
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>

 Licensed under the Apache License, Version 2.0 (the "License");
@@ -23,8 +23,24 @@ import Field from "../../../elements/Field";
 import * as sdk from "../../../../..";
 import PlatformPeg from "../../../../../PlatformPeg";
 import {SettingLevel} from "../../../../../settings/SettingLevel";
+import { replaceableComponent } from "../../../../../utils/replaceableComponent";

-export default class PreferencesUserSettingsTab extends React.Component {
+interface IState {
+    autoLaunch: boolean;
+    autoLaunchSupported: boolean;
+    warnBeforeExit: boolean;
+    warnBeforeExitSupported: boolean;
+    alwaysShowMenuBarSupported: boolean;
+    alwaysShowMenuBar: boolean;
+    minimizeToTraySupported: boolean;
+    minimizeToTray: boolean;
+    autocompleteDelay: string;
+    readMarkerInViewThresholdMs: string;
+    readMarkerOutOfViewThresholdMs: string;
+}
+
+@replaceableComponent("views.settings.tabs.user.PreferencesUserSettingsTab")
+export default class PreferencesUserSettingsTab extends React.Component<{}, IState> {
    static ROOM_LIST_SETTINGS = [
        'breadcrumbs',
    ];
@@ -78,12 +94,14 @@ export default class PreferencesUserSettingsTab extends React.Component {
        // Autocomplete delay (niche text box)
    ];

-    constructor() {
-        super();
+    constructor(props) {
+        super(props);

        this.state = {
            autoLaunch: false,
            autoLaunchSupported: false,
+            warnBeforeExit: true,
+            warnBeforeExitSupported: false,
            alwaysShowMenuBar: true,
            alwaysShowMenuBarSupported: false,
            minimizeToTray: true,
@@ -97,7 +115,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
        };
    }

-    async componentDidMount(): void {
+    async componentDidMount() {
        const platform = PlatformPeg.get();

        const autoLaunchSupported = await platform.supportsAutoLaunch();
@@ -106,6 +124,12 @@ export default class PreferencesUserSettingsTab extends React.Component {
            autoLaunch = await platform.getAutoLaunchEnabled();
        }

+        const warnBeforeExitSupported = await platform.supportsWarnBeforeExit();
+        let warnBeforeExit = false;
+        if (warnBeforeExitSupported) {
+            warnBeforeExit = await platform.shouldWarnBeforeExit();
+        }
+
        const alwaysShowMenuBarSupported = await platform.supportsAutoHideMenuBar();
        let alwaysShowMenuBar = true;
        if (alwaysShowMenuBarSupported) {
@@ -121,6 +145,8 @@ export default class PreferencesUserSettingsTab extends React.Component {
        this.setState({
            autoLaunch,
            autoLaunchSupported,
+            warnBeforeExit,
+            warnBeforeExitSupported,
            alwaysShowMenuBarSupported,
            alwaysShowMenuBar,
            minimizeToTraySupported,
@@ -128,34 +154,38 @@ export default class PreferencesUserSettingsTab extends React.Component {
        });
    }

-    _onAutoLaunchChange = (checked) => {
+    private onAutoLaunchChange = (checked: boolean) => {
        PlatformPeg.get().setAutoLaunchEnabled(checked).then(() => this.setState({autoLaunch: checked}));
    };

-    _onAlwaysShowMenuBarChange = (checked) => {
+    private onWarnBeforeExitChange = (checked: boolean) => {
+        PlatformPeg.get().setWarnBeforeExit(checked).then(() => this.setState({warnBeforeExit: checked}));
+    }
+
+    private onAlwaysShowMenuBarChange = (checked: boolean) => {
        PlatformPeg.get().setAutoHideMenuBarEnabled(!checked).then(() => this.setState({alwaysShowMenuBar: checked}));
    };

-    _onMinimizeToTrayChange = (checked) => {
+    private onMinimizeToTrayChange = (checked: boolean) => {
        PlatformPeg.get().setMinimizeToTrayEnabled(checked).then(() => this.setState({minimizeToTray: checked}));
    };

-    _onAutocompleteDelayChange = (e) => {
+    private onAutocompleteDelayChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        this.setState({autocompleteDelay: e.target.value});
        SettingsStore.setValue("autocompleteDelay", null, SettingLevel.DEVICE, e.target.value);
    };

-    _onReadMarkerInViewThresholdMs = (e) => {
+    private onReadMarkerInViewThresholdMs = (e: React.ChangeEvent<HTMLInputElement>) => {
        this.setState({readMarkerInViewThresholdMs: e.target.value});
        SettingsStore.setValue("readMarkerInViewThresholdMs", null, SettingLevel.DEVICE, e.target.value);
    };

-    _onReadMarkerOutOfViewThresholdMs = (e) => {
+    private onReadMarkerOutOfViewThresholdMs = (e: React.ChangeEvent<HTMLInputElement>) => {
        this.setState({readMarkerOutOfViewThresholdMs: e.target.value});
        SettingsStore.setValue("readMarkerOutOfViewThresholdMs", null, SettingLevel.DEVICE, e.target.value);
    };

-    _renderGroup(settingIds) {
+    private renderGroup(settingIds: string[]): React.ReactNodeArray {
        const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
        return settingIds.filter(SettingsStore.isEnabled).map(i => {
            return <SettingsFlag key={i} name={i} level={SettingLevel.ACCOUNT} />;
@@ -167,15 +197,23 @@ export default class PreferencesUserSettingsTab extends React.Component {
        if (this.state.autoLaunchSupported) {
            autoLaunchOption = <LabelledToggleSwitch
                value={this.state.autoLaunch}
-                onChange={this._onAutoLaunchChange}
+                onChange={this.onAutoLaunchChange}
                label={_t('Start automatically after system login')} />;
        }

+        let warnBeforeExitOption = null;
+        if (this.state.warnBeforeExitSupported) {
+            warnBeforeExitOption = <LabelledToggleSwitch
+                value={this.state.warnBeforeExit}
+                onChange={this.onWarnBeforeExitChange}
+                label={_t('Warn before quitting')} />;
+        }
+
        let autoHideMenuOption = null;
        if (this.state.alwaysShowMenuBarSupported) {
            autoHideMenuOption = <LabelledToggleSwitch
                value={this.state.alwaysShowMenuBar}
-                onChange={this._onAlwaysShowMenuBarChange}
+                onChange={this.onAlwaysShowMenuBarChange}
                label={_t('Always show the window menu bar')} />;
        }

@@ -183,7 +221,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
        if (this.state.minimizeToTraySupported) {
            minimizeToTrayOption = <LabelledToggleSwitch
                value={this.state.minimizeToTray}
-                onChange={this._onMinimizeToTrayChange}
+                onChange={this.onMinimizeToTrayChange}
                label={_t('Show tray icon and minimize window to it on close')} />;
        }

@@ -193,7 +231,7 @@ export default class PreferencesUserSettingsTab extends React.Component {

                <div className="mx_SettingsTab_section">
                    <span className="mx_SettingsTab_subheading">{_t("Room list")}</span>
-                    {this._renderGroup(PreferencesUserSettingsTab.ROOM_LIST_SETTINGS)}
+                    {this.renderGroup(PreferencesUserSettingsTab.ROOM_LIST_SETTINGS)}
                </div>

                <div className="mx_SettingsTab_section">
@@ -208,7 +246,7 @@ export default class PreferencesUserSettingsTab extends React.Component {

                <div className="mx_SettingsTab_section">
                    <span className="mx_SettingsTab_subheading">{_t("Composer")}</span>
-                    {this._renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS)}
+                    {this.renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS)}
                </div>

                <div className="mx_SettingsTab_section">
@@ -228,30 +266,31 @@ export default class PreferencesUserSettingsTab extends React.Component {

                <div className="mx_SettingsTab_section">
                    <span className="mx_SettingsTab_subheading">{_t("Timeline")}</span>
-                    {this._renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)}
+                    {this.renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)}
                </div>

                <div className="mx_SettingsTab_section">
                    <span className="mx_SettingsTab_subheading">{_t("General")}</span>
-                    {this._renderGroup(PreferencesUserSettingsTab.GENERAL_SETTINGS)}
+                    {this.renderGroup(PreferencesUserSettingsTab.GENERAL_SETTINGS)}
                    {minimizeToTrayOption}
                    {autoHideMenuOption}
                    {autoLaunchOption}
+                    {warnBeforeExitOption}
                    <Field
                        label={_t('Autocomplete delay (ms)')}
                        type='number'
                        value={this.state.autocompleteDelay}
-                        onChange={this._onAutocompleteDelayChange} />
+                        onChange={this.onAutocompleteDelayChange} />
                    <Field
                        label={_t('Read Marker lifetime (ms)')}
                        type='number'
                        value={this.state.readMarkerInViewThresholdMs}
-                        onChange={this._onReadMarkerInViewThresholdMs} />
+                        onChange={this.onReadMarkerInViewThresholdMs} />
                    <Field
                        label={_t('Read Marker off-screen lifetime (ms)')}
                        type='number'
                        value={this.state.readMarkerOutOfViewThresholdMs}
-                        onChange={this._onReadMarkerOutOfViewThresholdMs} />
+                        onChange={this.onReadMarkerOutOfViewThresholdMs} />
                </div>
            </div>
        );
--- a/src/components/views/settings/tabs/user/SecurityUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/SecurityUserSettingsTab.js
@@ -34,6 +34,7 @@ import SettingsStore from "../../../../../settings/SettingsStore";
 import {UIFeature} from "../../../../../settings/UIFeature";
 import {isE2eAdvancedPanelPossible} from "../../E2eAdvancedPanel";
 import CountlyAnalytics from "../../../../../CountlyAnalytics";
+import {replaceableComponent} from "../../../../../utils/replaceableComponent";

 export class IgnoredUser extends React.Component {
    static propTypes = {
@@ -59,6 +60,7 @@ export class IgnoredUser extends React.Component {
    }
 }

+@replaceableComponent("views.settings.tabs.user.SecurityUserSettingsTab")
 export default class SecurityUserSettingsTab extends React.Component {
    static propTypes = {
        closeSettingsFn: PropTypes.func.isRequired,
@@ -253,10 +255,9 @@ export default class SecurityUserSettingsTab extends React.Component {
    _renderIgnoredUsers() {
        const {waitingUnignored, ignoredUserIds} = this.state;

-        if (!ignoredUserIds || ignoredUserIds.length === 0) return null;
-
-        const userIds = ignoredUserIds
-            .map((u) => <IgnoredUser
+        const userIds = !ignoredUserIds?.length
+            ? _t('You have no ignored users.')
+            : ignoredUserIds.map((u) => <IgnoredUser
             userId={u}
             onUnignored={this._onUserUnignored}
             key={u}
--- a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js
@@ -25,7 +25,9 @@ import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
 import * as sdk from "../../../../../index";
 import Modal from "../../../../../Modal";
 import {SettingLevel} from "../../../../../settings/SettingLevel";
+import {replaceableComponent} from "../../../../../utils/replaceableComponent";

+@replaceableComponent("views.settings.tabs.user.VoiceUserSettingsTab")
 export default class VoiceUserSettingsTab extends React.Component {
    constructor() {
        super();
@@ -82,6 +84,7 @@ export default class VoiceUserSettingsTab extends React.Component {
            }
        }
        if (error) {
+            console.log("Failed to list userMedia devices", error);
            const brand = SdkConfig.get().brand;
            const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
            Modal.createTrackedDialog('No media permissions', '', ErrorDialog, {