feat(settings): add sign out button to Help & About tab

apps/web/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx

@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type JSX } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { type EmptyObject } from "matrix-js-sdk/src/matrix";
+import SignOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/sign-out";
 
 import AccessibleButton from "../../../elements/AccessibleButton";
 import { _t } from "../../../../../languageHandler";
@@ -21,6 +22,9 @@ import { SettingsSection } from "../../shared/SettingsSection";
 import { SettingsSubsection, SettingsSubsectionText } from "../../shared/SettingsSubsection";
 import ExternalLink from "../../../elements/ExternalLink";
 import MatrixClientContext from "../../../../../contexts/MatrixClientContext";
+import LogoutDialog, { shouldShowLogoutDialog } from "../../../dialogs/LogoutDialog";
+import Modal from "../../../../../Modal";
+import defaultDispatcher from "../../../../../dispatcher/dispatcher";
 
 interface IState {
     appVersion: string | null;
@@ -66,6 +70,14 @@ export default class HelpUserSettingsTab extends React.Component<EmptyObject, IS
         };
     }
 
+    private onSignOut = async (): Promise<void> => {
+        if (await shouldShowLogoutDialog(this.context)) {
+            Modal.createDialog(LogoutDialog);
+        } else {
+            defaultDispatcher.dispatch({ action: "logout" });
+        }
+    };
+
     private onClearCacheAndReload = (): void => {
         if (!PlatformPeg.get()) return;
 
@@ -106,6 +118,16 @@ export default class HelpUserSettingsTab extends React.Component<EmptyObject, IS
         return (
             <SettingsTab>
                 <SettingsSection>
+                    <SettingsSubsection heading={_t("settings|account|title")}>
+                        <AccessibleButton onClick={this.onSignOut} kind="danger_outline">
+                            <SignOutIcon
+                                className="mx_UserProfileSettings_accountmanageIcon"
+                                width="24"
+                                height="24"
+                            />
+                            {_t("action|logout")}
+                        </AccessibleButton>
+                    </SettingsSubsection>
                     <SettingsSubsection heading={_t("common|faq")} description={faqText} />
                     <SettingsSubsection heading={_t("setting|help_about|versions")}>
                         <SettingsSubsectionText>