imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add sign out button to settings profile section (#12666)

Browse source 
* Add sign out button to settings profile section

And move the logic for displaying the dialog out of the user menu
to somewhere it can be re-used.

Also close any open dialog on logout, because otherwise, well... you
can guess.

* Missing import

* Update screenshot

* This button doesn't need to be an anchor

* Use Flex component

* Use new force-close function

* More tests
This commit is contained in:
David Baker 2024-07-29 13:53:44 +01:00 • committed by GitHub
parent 844da7a656
commit c2c108957e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 86 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/components/views/settings/UserProfileSettings.tsx
View file

@ -18,6 +18,7 @@ import React, { ChangeEvent, useCallback, useEffect, useMemo, useState } from "r
import { logger } from "matrix-js-sdk/src/logger";
import { EditInPlace, Alert, ErrorMessage } from "@vector-im/compound-web";
import { Icon as PopOutIcon } from "@vector-im/compound-design-tokens/icons/pop-out.svg";
import { Icon as SignOutIcon } from "@vector-im/compound-design-tokens/icons/sign-out.svg";
import { _t } from "../../../languageHandler";
import { OwnProfileStore } from "../../../stores/OwnProfileStore";
@ -31,6 +32,10 @@ import { useId } from "../../../utils/useId";
import CopyableText from "../elements/CopyableText";
import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
import AccessibleButton from "../elements/AccessibleButton";
import LogoutDialog, { shouldShowLogoutDialog } from "../dialogs/LogoutDialog";
import Modal from "../../../Modal";
import defaultDispatcher from "../../../dispatcher/dispatcher";
import { Flex } from "../../utils/Flex";
const SpinnerToast: React.FC = ({ children }) => (
<>
@ -76,6 +81,25 @@ const ManageAccountButton: React.FC<ManageAccountButtonProps> = ({ externalAccou
</AccessibleButton>
);
const SignOutButton: React.FC = () => {
const client = useMatrixClientContext();
const onClick = useCallback(async () => {
if (await shouldShowLogoutDialog(client)) {
Modal.createDialog(LogoutDialog);
} else {
defaultDispatcher.dispatch({ action: "logout" });
}
}, [client]);
return (
<AccessibleButton onClick={onClick} kind="danger_outline">
<SignOutIcon className="mx_UserProfileSettings_accountmanageIcon" width="24" height="24" />
{_t("action|sign_out")}
</AccessibleButton>
);
};
interface UserProfileSettingsProps {
// The URL to redirect the user to in order to manage their account.
externalAccountManagementUrl?: string;
@ -219,11 +243,12 @@ const UserProfileSettings: React.FC<UserProfileSettingsProps> = ({
</Alert>
)}
{userIdentifier && <UsernameBox username={userIdentifier} />}
{externalAccountManagementUrl && (
<div className="mx_UserProfileSettings_profile_buttons">
<Flex gap="var(--cpd-space-4x)" className="mx_UserProfileSettings_profile_buttons">
{externalAccountManagementUrl && (
<ManageAccountButton externalAccountManagementUrl={externalAccountManagementUrl} />
</div>
)}
)}
<SignOutButton />
</Flex>
</div>
);
};