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

New user profile UI in User Settings (#12548)

Browse source 
* New user profile UI in User Settings

Using new Edit In Place component.

* Show avatar upload error

* Fix avatar upload error

* Wire up errors & feedback for display name setting

* Implement avatar upload / remove progress toast

* Add 768px breakpoint

* Fix room profile display

* Update to released compund-web with required components / fixes

* Require compound-web 4.4.0

because we do need it

* Update snapshots

Because of course all the auto-generated IDs of unrelated things
have changed.

* Fix duplicate import

* Fix CSS comment

* Update snapshot

* Run all the tests so the ids stay the same

* Start of a test for ProfileSettings

* More tests

* Test that a toast appears

* Test ToastRack

* Update snapshots

* Add the usernamee control

* Fix playwright tests

 * New compound version for editinplace fixes
 * Fix useId to not just generate a constant ID
 * Use the label in the username component
 * Fix widths of test boxes
 * Update screenshots

* Put ^ back on compound-web version

* Split CSS for room & user profile settings

and name the components correspondingly

* Fix playwright test

* Update room settings screenshot

* Use original screenshot instead

* Fix styling of unrelated buttons

Needed to be added in other places otherwise the specificity changes.

Also put the old screenshots back.

* Add copyright year

* Fix copyright year
This commit is contained in:
David Baker 2024-06-06 14:56:38 +01:00 • committed by GitHub
parent c4c1faff97
commit cfa322cd62
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
25 changed files with 919 additions and 307 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/components/views/dialogs/UserSettingsDialog.tsx
View file

@ -15,6 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { Toast } from "@vector-im/compound-web";
import React, { useState } from "react";
import TabbedView, { Tab, useActiveTabWithDefault } from "../../structures/TabbedView";
@ -38,6 +39,7 @@ import { UserTab } from "./UserTab";
import { NonEmptyArray } from "../../../@types/common";
import { SDKContext, SdkContextClass } from "../../../contexts/SDKContext";
import { useSettingValue } from "../../../hooks/useSettings";
import { ToastContext, useActiveToast } from "../../../contexts/ToastContext";
interface IProps {
initialTabId?: UserTab;
@ -215,27 +217,34 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
setShowMsc4108QrCode(false);
};
const [activeToast, toastRack] = useActiveToast();
return (
// XXX: SDKContext is provided within the LoggedInView subtree.
// Modals function outside the MatrixChat React tree, so sdkContext is reprovided here to simulate that.
// The longer term solution is to move our ModalManager into the React tree to inherit contexts properly.
<SDKContext.Provider value={props.sdkContext}>
<BaseDialog
className="mx_UserSettingsDialog"
hasCancel={true}
onFinished={props.onFinished}
title={titleForTabID(activeTabId)}
>
<div className="mx_SettingsDialog_content">
<TabbedView
tabs={getTabs()}
activeTabId={activeTabId}
screenName="UserSettings"
onChange={setActiveTabId}
responsive={true}
/>
</div>
</BaseDialog>
<ToastContext.Provider value={toastRack}>
<BaseDialog
className="mx_UserSettingsDialog"
hasCancel={true}
onFinished={props.onFinished}
title={titleForTabID(activeTabId)}
>
<div className="mx_SettingsDialog_content">
<TabbedView
tabs={getTabs()}
activeTabId={activeTabId}
screenName="UserSettings"
onChange={setActiveTabId}
responsive={true}
/>
</div>
<div className="mx_SettingsDialog_toastContainer">
{activeToast && <Toast>{activeToast}</Toast>}
</div>
</BaseDialog>
</ToastContext.Provider>
</SDKContext.Provider>
);
}

6
src/components/views/elements/CopyableText.tsx
View file

@ -22,14 +22,14 @@ import { _t } from "../../../languageHandler";
import { copyPlaintext } from "../../../utils/strings";
import AccessibleButton, { ButtonEvent } from "./AccessibleButton";
interface IProps {
interface IProps extends React.HTMLAttributes<HTMLDivElement> {
children?: React.ReactNode;
getTextToCopy: () => string | null;
border?: boolean;
className?: string;
}
const CopyableText: React.FC<IProps> = ({ children, getTextToCopy, border = true, className }) => {
const CopyableText: React.FC<IProps> = ({ children, getTextToCopy, border = true, className, ...props }) => {
const [tooltip, setTooltip] = useState<string | undefined>(undefined);
const onCopyClickInternal = async (e: ButtonEvent): Promise<void> => {
@ -50,7 +50,7 @@ const CopyableText: React.FC<IProps> = ({ children, getTextToCopy, border = true
});
return (
<div className={combinedClassName}>
<div className={combinedClassName} {...props}>
{children}
<AccessibleButton
title={tooltip ?? _t("action|copy")}

12
src/components/views/room_settings/RoomProfileSettings.tsx
View file

@ -202,7 +202,7 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
let profileSettingsButtons;
if (this.state.canSetName || this.state.canSetTopic || this.state.canSetAvatar) {
profileSettingsButtons = (
<div className="mx_ProfileSettings_buttons">
<div className="mx_RoomProfileSettings_buttons">
<AccessibleButton
onClick={this.cancelProfileChanges}
kind="primary_outline"
@ -218,9 +218,9 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
}
return (
<form onSubmit={this.saveProfile} autoComplete="off" noValidate={true} className="mx_ProfileSettings">
<div className="mx_ProfileSettings_profile">
<div className="mx_ProfileSettings_profile_controls">
<form onSubmit={this.saveProfile} autoComplete="off" noValidate={true} className="mx_RoomProfileSettings">
<div className="mx_RoomProfileSettings_profile">
<div className="mx_RoomProfileSettings_profile_controls">
<Field
label={_t("room_settings|general|name_field_label")}
type="text"
@ -231,8 +231,8 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
/>
<Field
className={classNames(
"mx_ProfileSettings_profile_controls_topic",
"mx_ProfileSettings_profile_controls_topic--room",
"mx_RoomProfileSettings_profile_controls_topic",
"mx_RoomProfileSettings_profile_controls_topic--room",
)}
id="profileTopic" // See: NewRoomIntro.tsx
label={_t("room_settings|general|topic_field_label")}

12
src/components/views/settings/AvatarSetting.tsx
View file

@ -14,12 +14,13 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { createRef, useCallback, useEffect, useRef, useState } from "react";
import React, { createRef, useCallback, useEffect, useState } from "react";
import { _t } from "../../../languageHandler";
import AccessibleButton from "../elements/AccessibleButton";
import { mediaFromMxc } from "../../../customisations/Media";
import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
import { useId } from "../../../utils/useId";
interface IProps {
/**
@ -75,9 +76,8 @@ const AvatarSetting: React.FC<IProps> = ({ avatar, avatarAltText, onChange, remo
}
}, [avatar]);
// TODO: Use useId() as soon as we're using React 18.
// Prevents ID collisions when this component is used more than once on the same page.
const a11yId = useRef(`hover-text-${Math.random()}`);
const a11yId = useId();
const onFileChanged = useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => {
@ -95,7 +95,7 @@ const AvatarSetting: React.FC<IProps> = ({ avatar, avatarAltText, onChange, remo
element="div"
onClick={uploadAvatar}
className="mx_AvatarSetting_avatarPlaceholder mx_AvatarSetting_avatarDisplay"
aria-labelledby={disabled ? undefined : a11yId.current}
aria-labelledby={disabled ? undefined : a11yId}
// Inhibit tab stop as we have explicit upload/remove buttons
tabIndex={-1}
/>
@ -122,7 +122,7 @@ const AvatarSetting: React.FC<IProps> = ({ avatar, avatarAltText, onChange, remo
<AccessibleButton
onClick={uploadAvatar}
className="mx_AvatarSetting_uploadButton"
aria-labelledby={a11yId.current}
aria-labelledby={a11yId}
/>
<input
type="file"
@ -151,7 +151,7 @@ const AvatarSetting: React.FC<IProps> = ({ avatar, avatarAltText, onChange, remo
{avatarElement}
<div className="mx_AvatarSetting_hover" aria-hidden="true">
<div className="mx_AvatarSetting_hoverBg" />
{!disabled && <span id={a11yId.current}>{_t("action|upload")}</span>}
{!disabled && <span id={a11yId}>{_t("action|upload")}</span>}
</div>
{uploadAvatarBtn}
{removeAvatarBtn}

198
src/components/views/settings/ProfileSettings.tsx
View file

@ -1,198 +0,0 @@
/*
Copyright 2019 - 2024 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.
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, { createRef } from "react";
import { logger } from "matrix-js-sdk/src/logger";
import { _t } from "../../../languageHandler";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import Field from "../elements/Field";
import { OwnProfileStore } from "../../../stores/OwnProfileStore";
import Modal from "../../../Modal";
import ErrorDialog from "../dialogs/ErrorDialog";
import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
import AvatarSetting from "./AvatarSetting";
import UserIdentifierCustomisations from "../../../customisations/UserIdentifier";
import PosthogTrackers from "../../../PosthogTrackers";
import { SettingsSubsectionHeading } from "./shared/SettingsSubsectionHeading";
interface IState {
originalDisplayName: string;
displayName: string;
originalAvatarUrl: string | null;
avatarFile?: File | null;
// If true, the user has indicated that they wish to remove the avatar and this should happen on save.
avatarRemovalPending: boolean;
enableProfileSave?: boolean;
}
export default class ProfileSettings extends React.Component<{}, IState> {
private readonly userId: string;
private avatarUpload: React.RefObject<HTMLInputElement> = createRef();
public constructor(props: {}) {
super(props);
this.userId = MatrixClientPeg.safeGet().getSafeUserId();
const avatarUrl = OwnProfileStore.instance.avatarMxc;
this.state = {
originalDisplayName: OwnProfileStore.instance.displayName ?? "",
displayName: OwnProfileStore.instance.displayName ?? "",
originalAvatarUrl: avatarUrl,
avatarFile: null,
avatarRemovalPending: false,
enableProfileSave: false,
};
}
private onChange = (file: File): void => {
PosthogTrackers.trackInteraction("WebProfileSettingsAvatarUploadButton");
this.setState({
avatarFile: file,
avatarRemovalPending: false,
enableProfileSave: true,
});
};
private removeAvatar = (): void => {
// clear file upload field so same file can be selected
if (this.avatarUpload.current) {
this.avatarUpload.current.value = "";
}
this.setState({
avatarFile: null,
avatarRemovalPending: true,
enableProfileSave: true,
});
};
private cancelProfileChanges = async (e: ButtonEvent): Promise<void> => {
e.stopPropagation();
e.preventDefault();
if (!this.state.enableProfileSave) return;
this.setState({
enableProfileSave: false,
displayName: this.state.originalDisplayName,
avatarFile: null,
avatarRemovalPending: false,
});
};
private saveProfile = async (e: ButtonEvent): Promise<void> => {
e.stopPropagation();
e.preventDefault();
if (!this.state.enableProfileSave) return;
this.setState({ enableProfileSave: false });
const newState: Partial<IState> = {};
const displayName = this.state.displayName.trim();
try {
const client = MatrixClientPeg.safeGet();
if (this.state.originalDisplayName !== this.state.displayName) {
await client.setDisplayName(displayName);
newState.originalDisplayName = displayName;
newState.displayName = displayName;
}
if (this.state.avatarFile) {
logger.log(
`Uploading new avatar, ${this.state.avatarFile.name} of type ${this.state.avatarFile.type},` +
` (${this.state.avatarFile.size}) bytes`,
);
const { content_uri: uri } = await client.uploadContent(this.state.avatarFile);
await client.setAvatarUrl(uri);
newState.originalAvatarUrl = uri;
newState.avatarFile = null;
} else if (this.state.avatarRemovalPending) {
await client.setAvatarUrl(""); // use empty string as Synapse 500s on undefined
newState.originalAvatarUrl = null;
newState.avatarRemovalPending = false;
}
} catch (err) {
logger.log("Failed to save profile", err);
Modal.createDialog(ErrorDialog, {
title: _t("settings|general|error_saving_profile_title"),
description: err instanceof Error ? err.message : _t("settings|general|error_saving_profile"),
});
}
this.setState<any>(newState);
};
private onDisplayNameChanged = (e: React.ChangeEvent<HTMLInputElement>): void => {
this.setState({
displayName: e.target.value,
enableProfileSave: true,
});
};
public render(): React.ReactNode {
const userIdentifier = UserIdentifierCustomisations.getDisplayUserIdentifier(this.userId, {
withDisplayName: true,
});
return (
<form onSubmit={this.saveProfile} autoComplete="off" noValidate={true} className="mx_ProfileSettings">
<div className="mx_ProfileSettings_profile">
<div className="mx_ProfileSettings_profile_controls">
<SettingsSubsectionHeading heading={_t("common|profile")} />
<Field
label={_t("common|display_name")}
type="text"
value={this.state.displayName}
autoComplete="off"
onChange={this.onDisplayNameChanged}
/>
<p>
{userIdentifier && (
<span className="mx_ProfileSettings_profile_controls_userId">{userIdentifier}</span>
)}
</p>
</div>
<AvatarSetting
avatar={
this.state.avatarRemovalPending
? undefined
: this.state.avatarFile ?? this.state.originalAvatarUrl ?? undefined
}
avatarAltText={_t("common|user_avatar")}
onChange={this.onChange}
removeAvatar={this.removeAvatar}
/>
</div>
<div className="mx_ProfileSettings_buttons">
<AccessibleButton
onClick={this.cancelProfileChanges}
kind="primary_outline"
disabled={!this.state.enableProfileSave}
>
{_t("action|cancel")}
</AccessibleButton>
<AccessibleButton
onClick={this.saveProfile}
kind="primary"
disabled={!this.state.enableProfileSave}
>
{_t("action|save")}
</AccessibleButton>
</div>
</form>
);
}
}

181
src/components/views/settings/UserProfileSettings.tsx Normal file
View file

@ -0,0 +1,181 @@
/*
Copyright 2019 - 2024 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.
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, { ChangeEvent, useCallback, useEffect, useMemo, useState } from "react";
import { logger } from "matrix-js-sdk/src/logger";
import { EditInPlace, Alert } from "@vector-im/compound-web";
import { _t } from "../../../languageHandler";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import { OwnProfileStore } from "../../../stores/OwnProfileStore";
import AvatarSetting from "./AvatarSetting";
import PosthogTrackers from "../../../PosthogTrackers";
import { formatBytes } from "../../../utils/FormattingUtils";
import { useToastContext } from "../../../contexts/ToastContext";
import InlineSpinner from "../elements/InlineSpinner";
import UserIdentifierCustomisations from "../../../customisations/UserIdentifier";
import { useId } from "../../../utils/useId";
import CopyableText from "../elements/CopyableText";
const SpinnerToast: React.FC = ({ children }) => (
<>
<InlineSpinner />
{children}
</>
);
interface UsernameBoxProps {
username: string;
}
const UsernameBox: React.FC<UsernameBoxProps> = ({ username }) => {
const labelId = useId();
return (
<div className="mx_UserProfileSettings_profile_controls_userId">
<div className="mx_UserProfileSettings_profile_controls_userId_label" id={labelId}>
{_t("settings|general|username")}
</div>
<CopyableText getTextToCopy={() => username} aria-labelledby={labelId}>
{username}
</CopyableText>
</div>
);
};
/**
* A group of settings views to allow the user to set their profile information.
*/
const UserProfileSettings: React.FC = () => {
const [avatarURL, setAvatarURL] = useState(OwnProfileStore.instance.avatarMxc);
const [displayName, setDisplayName] = useState(OwnProfileStore.instance.displayName ?? "");
const [initialDisplayName, setInitialDisplayName] = useState(OwnProfileStore.instance.displayName ?? "");
const [avatarError, setAvatarError] = useState<boolean>(false);
const [maxUploadSize, setMaxUploadSize] = useState<number | undefined>();
const [displayNameError, setDisplayNameError] = useState<boolean>(false);
const toastRack = useToastContext();
useEffect(() => {
(async () => {
try {
const mediaConfig = await MatrixClientPeg.safeGet().getMediaConfig();
setMaxUploadSize(mediaConfig["m.upload.size"]);
} catch (e) {
logger.warn("Failed to get media config", e);
}
})();
}, []);
const onAvatarRemove = useCallback(async () => {
const removeToast = toastRack.displayToast(
<SpinnerToast>{_t("settings|general|avatar_remove_progress")}</SpinnerToast>,
);
try {
await MatrixClientPeg.safeGet().setAvatarUrl(""); // use empty string as Synapse 500s on undefined
setAvatarURL("");
} finally {
removeToast();
}
}, [toastRack]);
const onAvatarChange = useCallback(
async (avatarFile: File) => {
PosthogTrackers.trackInteraction("WebProfileSettingsAvatarUploadButton");
logger.log(
`Uploading new avatar, ${avatarFile.name} of type ${avatarFile.type}, (${avatarFile.size}) bytes`,
);
const removeToast = toastRack.displayToast(
<SpinnerToast>{_t("settings|general|avatar_save_progress")}</SpinnerToast>,
);
try {
setAvatarError(false);
const client = MatrixClientPeg.safeGet();
const { content_uri: uri } = await client.uploadContent(avatarFile);
await client.setAvatarUrl(uri);
setAvatarURL(uri);
} catch (e) {
setAvatarError(true);
} finally {
removeToast();
}
},
[toastRack],
);
const onDisplayNameChanged = useCallback((e: ChangeEvent<HTMLInputElement>) => {
setDisplayName(e.target.value);
}, []);
const onDisplayNameCancel = useCallback(() => {
setDisplayName(OwnProfileStore.instance.displayName ?? "");
}, []);
const onDisplayNameSave = useCallback(async (): Promise<void> => {
try {
setDisplayNameError(false);
await MatrixClientPeg.safeGet().setDisplayName(displayName);
setInitialDisplayName(displayName);
} catch (e) {
setDisplayNameError(true);
}
}, [displayName]);
const userIdentifier = useMemo(
() =>
UserIdentifierCustomisations.getDisplayUserIdentifier(MatrixClientPeg.safeGet().getSafeUserId(), {
withDisplayName: true,
}),
[],
);
return (
<div className="mx_UserProfileSettings">
<h2>{_t("common|profile")}</h2>
<div>{_t("settings|general|profile_subtitle")}</div>
<div className="mx_UserProfileSettings_profile">
<AvatarSetting
avatar={avatarURL ?? undefined}
avatarAltText={_t("common|user_avatar")}
onChange={onAvatarChange}
removeAvatar={onAvatarRemove}
/>
<EditInPlace
className="mx_UserProfileSettings_profile_displayName"
label={_t("settings|general|display_name")}
value={displayName}
disableSaveButton={displayName === initialDisplayName}
saveButtonLabel={_t("common|save")}
cancelButtonLabel={_t("common|cancel")}
savedLabel={_t("common|saved")}
onChange={onDisplayNameChanged}
onCancel={onDisplayNameCancel}
onSave={onDisplayNameSave}
error={displayNameError ? _t("settings|general|display_name_error") : undefined}
/>
</div>
{avatarError && (
<Alert title={_t("settings|general|avatar_upload_error_title")} type="critical">
{maxUploadSize === undefined
? _t("settings|general|avatar_upload_error_text_generic")
: _t("settings|general|avatar_upload_error_text", { size: formatBytes(maxUploadSize) })}
</Alert>
)}
{userIdentifier && <UsernameBox username={userIdentifier} />}
</div>
);
};
export default UserProfileSettings;

4
src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
View file

@ -22,7 +22,7 @@ import { logger } from "matrix-js-sdk/src/logger";
import { Icon as WarningIcon } from "../../../../../../res/img/feather-customised/warning-triangle.svg";
import { UserFriendlyError, _t } from "../../../../../languageHandler";
import ProfileSettings from "../../ProfileSettings";
import UserProfileSettings from "../../UserProfileSettings";
import * as languageHandler from "../../../../../languageHandler";
import SettingsStore from "../../../../../settings/SettingsStore";
import LanguageDropdown from "../../../elements/LanguageDropdown";
@ -561,7 +561,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
return (
<SettingsTab data-testid="mx_GeneralUserSettingsTab">
<SettingsSection>
<ProfileSettings />
<UserProfileSettings />
{this.renderAccountSection()}
{this.renderLanguageSection()}
{supportsMultiLanguageSpellCheck ? this.renderSpellCheckSection() : null}

93
src/contexts/ToastContext.tsx Normal file
View file

@ -0,0 +1,93 @@
/*
Copyright 2024 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.
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 { ReactNode, createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
/**
* A ToastContext helps components display any kind of toast message and can be provided
* by a parent component such that their children can display toasts, eg. a settings dialog
* can provide a ToastContext such that controls within it can display toasts at the bottom
* of the dialog.
*
* It is not (at time of writing) used by the *other* toasts that appear in the top right
* corner of the app, however the name 'toast' as used in this class refers to the component
* of the same name in compound that it is written to manage.
*/
export const ToastContext = createContext(null as any);
ToastContext.displayName = "ToastContext";
/**
* Returns the ToastRack in context in order to display toasts
*/
export function useToastContext(): ToastRack {
return useContext(ToastContext);
}
/**
* For components that wish to display toasts, return the currently active toast and
* the ToastRack object that should be provided to the context
*/
export function useActiveToast(): [ReactNode | undefined, ToastRack] {
const toastRack = useRef(new ToastRack());
const [activeToast, setActiveToast] = useState<ReactNode | undefined>(toastRack.current.getActiveToast());
const updateCallback = useCallback(() => {
setActiveToast(toastRack.current.getActiveToast());
}, [setActiveToast, toastRack]);
useEffect(() => {
toastRack.current.setCallback(updateCallback);
}, [toastRack, updateCallback]);
return [activeToast, toastRack.current];
}
interface DisplayedToast {
id: number;
contents: ReactNode;
}
type RemoveCallback = () => void;
export class ToastRack {
private currentToast: DisplayedToast | undefined;
private updateCallback?: () => void;
private idSeq = 0;
public setCallback(cb: () => void): void {
this.updateCallback = cb;
}
public displayToast(contents: ReactNode): RemoveCallback {
const newToastId = ++this.idSeq;
this.currentToast = { id: newToastId, contents: contents };
this.updateCallback?.();
const removeFn = (): void => {
if (this.currentToast?.id === newToastId) {
this.currentToast = undefined;
this.updateCallback?.();
}
};
return removeFn;
}
public getActiveToast(): ReactNode | undefined {
return this.currentToast?.contents;
}
}

17
src/i18n/strings/en_EN.json
View file

@ -457,6 +457,7 @@
"beta": "Beta",
"camera": "Camera",
"cameras": "Cameras",
"cancel": "Cancel",
"capabilities": "Capabilities",
"copied": "Copied!",
"credits": "Credits",
@ -465,7 +466,6 @@
"description": "Description",
"deselect_all": "Deselect all",
"device": "Device",
"display_name": "Display Name",
"edited": "edited",
"email_address": "Email address",
"emoji": "Emoji",
@ -540,6 +540,8 @@
"room": "Room",
"room_name": "Room name",
"rooms": "Rooms",
"save": "Save",
"saved": "Saved",
"saving": "Saving…",
"secure_backup": "Secure Backup",
"security": "Security",
@ -2458,6 +2460,11 @@
"add_msisdn_dialog_title": "Add Phone Number",
"add_msisdn_instructions": "A text message has been sent to +%(msisdn)s. Please enter the verification code it contains.",
"add_msisdn_misconfigured": "The add / bind with MSISDN flow is misconfigured",
"avatar_remove_progress": "Removing image...",
"avatar_save_progress": "Uploading image...",
"avatar_upload_error_text": "The file format is not supported or the image is larger than %(size)s.",
"avatar_upload_error_text_generic": "The file format may not be supported.",
"avatar_upload_error_title": "Avatar image could not be uploaded",
"confirm_adding_email_body": "Click the button below to confirm adding this email address.",
"confirm_adding_email_title": "Confirm adding email",
"deactivate_confirm_body": "Are you sure you want to deactivate your account? This is irreversible.",
@ -2480,6 +2487,8 @@
"discovery_msisdn_empty": "Discovery options will appear once you have added a phone number above.",
"discovery_needs_terms": "Agree to the identity server (%(serverName)s) Terms of Service to allow yourself to be discoverable by email address or phone number.",
"discovery_section": "Discovery",
"display_name": "Display Name",
"display_name_error": "Unable to set display name",
"email_address_in_use": "This email address is already in use",
"email_address_label": "Email Address",
"email_not_verified": "Your email address hasn't been verified yet",
@ -2500,8 +2509,6 @@
"error_remove_3pid": "Unable to remove contact information",
"error_revoke_email_discovery": "Unable to revoke sharing for email address",
"error_revoke_msisdn_discovery": "Unable to revoke sharing for phone number",
"error_saving_profile": "The operation could not be completed",
"error_saving_profile_title": "Failed to save your profile",
"error_share_email_discovery": "Unable to share email address",
"error_share_msisdn_discovery": "Unable to share phone number",
"external_account_management": "Your account details are managed separately at <code>%(hostname)s</code>.",
@ -2518,10 +2525,12 @@
"oidc_manage_button": "Manage account",
"password_change_section": "Set a new account password…",
"password_change_success": "Your password was successfully changed.",
"profile_subtitle": "This is how you appear to others on the app.",
"remove_email_prompt": "Remove %(email)s?",
"remove_msisdn_prompt": "Remove %(phone)s?",
"spell_check_locale_placeholder": "Choose a locale",
"spell_check_section": "Spell check"
"spell_check_section": "Spell check",
"username": "Username"
},
"image_thumbnails": "Show previews/thumbnails for images",
"inline_url_previews_default": "Enable inline URL previews by default",

24
src/utils/useId.ts Normal file
View file

@ -0,0 +1,24 @@
/*
Copyright 2024 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.
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";
const getUniqueId = (() => {
return () => `:r${Math.random()}:`;
})();
// Replace this with React's own useId once we switch to React 18
export const useId = (): string => React.useMemo(getUniqueId, []);