From 9f2c1a10989ef0e9609c05bae59ee34bae17e455 Mon Sep 17 00:00:00 2001 From: Hubert Chathi Date: Mon, 21 Oct 2024 16:47:58 -0400 Subject: [PATCH] use Compound and make comments into doc comments --- res/css/views/rooms/_UserIdentityWarning.pcss | 22 +-- .../views/rooms/UserIdentityWarning.tsx | 130 ++++++++++-------- 2 files changed, 87 insertions(+), 65 deletions(-) diff --git a/res/css/views/rooms/_UserIdentityWarning.pcss b/res/css/views/rooms/_UserIdentityWarning.pcss index bac0825e26..b294b3fc8c 100644 --- a/res/css/views/rooms/_UserIdentityWarning.pcss +++ b/res/css/views/rooms/_UserIdentityWarning.pcss @@ -6,18 +6,20 @@ Please see LICENSE files in the repository root for full details. */ .mx_UserIdentityWarning { - border-top: 1px solid $separator; - padding-top: 5px; + /* 42px is the padding-left of .mx_MessageComposer_wrapper in res/css/views/rooms/_MessageComposer.pcss */ margin-left: calc(-42px + var(--RoomView_MessageList-padding)); - display: flex; - align-items: center; - .mx_BaseAvatar { - margin-left: 8px; - } - .mx_UserIdentityWarning_main { - margin-left: 24px; - flex-grow: 1; + .mx_UserIdentityWarning_row { + display: flex; + align-items: center; + + .mx_BaseAvatar { + margin-left: var(--cpd-space-2x); + } + .mx_UserIdentityWarning_main { + margin-left: var(--cpd-space-6x); + flex-grow: 1; + } } } diff --git a/src/components/views/rooms/UserIdentityWarning.tsx b/src/components/views/rooms/UserIdentityWarning.tsx index d9624276a6..05af72f115 100644 --- a/src/components/views/rooms/UserIdentityWarning.tsx +++ b/src/components/views/rooms/UserIdentityWarning.tsx @@ -16,25 +16,31 @@ import { RoomMember, } from "matrix-js-sdk/src/matrix"; import { logger } from "matrix-js-sdk/src/logger"; +import { Button, Separator } from "@vector-im/compound-web"; import type { CryptoApi, UserVerificationStatus } from "matrix-js-sdk/src/crypto-api"; import { _t } from "../../../languageHandler"; -import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton"; import MemberAvatar from "../avatars/MemberAvatar"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; import { SDKContext } from "../../../contexts/SDKContext"; -interface IProps { - // The current room being viewed. +interface UserIdentityWarningProps { + /** + * The current room being viewed. + */ room: Room; } -interface IState { - // The current room member that we are prompting the user to approve. +interface UserIdentityWarningState { + /** + * The current room member that we are prompting the user to approve. + */ currentPrompt: RoomMember | undefined; } -// Does the given user's identity need to be approved? +/** + * Does the given user's identity need to be approved? + */ async function userNeedsApproval(crypto: CryptoApi, userId: string): Promise { const verificationStatus = await crypto.getUserVerificationStatus(userId); return verificationStatus.needsUserApproval; @@ -46,26 +52,30 @@ async function userNeedsApproval(crypto: CryptoApi, userId: string): Promise { - // Which room members need their identity approved. +export default class UserIdentityWarning extends React.Component { + /** + * Which room members need their identity approved. + */ private membersNeedingApproval: Map; - // Whether we got a verification status update while we were fetching a - // user's verification status. - // - // We set the entry for a user to `false` when we fetch a user's - // verification status, and remove the user's entry when we are done - // fetching. When we receive a verification status update, if the entry for - // the user is `false`, we set it to `true`. After we have finished - // fetching the user's verification status, if the entry for the user is - // `true`, rather than `false`, we know that we got an update, and so we - // discard the value that we fetched. We always use the value from the - // update and consider it as the most up-to-date version. If the fetched - // value is more up-to-date, then we should be getting a new update soon - // with the newer value, so it will fix itself in the end. + /** + * Whether we got a verification status update while we were fetching a + * user's verification status. + * + * We set the entry for a user to `false` when we fetch a user's + * verification status, and remove the user's entry when we are done + * fetching. When we receive a verification status update, if the entry for + * the user is `false`, we set it to `true`. After we have finished + * fetching the user's verification status, if the entry for the user is + * `true`, rather than `false`, we know that we got an update, and so we + * discard the value that we fetched. We always use the value from the + * update and consider it as the most up-to-date version. If the fetched + * value is more up-to-date, then we should be getting a new update soon + * with the newer value, so it will fix itself in the end. + */ private gotVerificationStatusUpdate: Map; private mounted: boolean; private initialised: boolean; - public constructor(props: IProps, context: React.ContextType) { + public constructor(props: UserIdentityWarningProps, context: React.ContextType) { super(props, context); this.state = { currentPrompt: undefined, @@ -91,8 +101,10 @@ export default class UserIdentityWarning extends React.Component this.removeListeners(); } - // Select a new user to display a warning for. This is called after the - // current prompted user no longer needs their identity approved. + /** + * Select a new user to display a warning for. This is called after the + * current prompted user no longer needs their identity approved. + */ private selectCurrentPrompt(): void { if (this.membersNeedingApproval.size === 0) { this.setState({ @@ -107,8 +119,10 @@ export default class UserIdentityWarning extends React.Component }); } - // Initialise the component. Get the room members, check which ones need - // their identity approved, and pick one to display. + /** + * Initialise the component. Get the room members, check which ones need + * their identity approved, and pick one to display. + */ public async initialise(): Promise { if (!this.mounted || this.initialised) { return; @@ -186,11 +200,12 @@ export default class UserIdentityWarning extends React.Component } } + /** + * Handle a change in user trust. If the user's identity now needs + * approval, make sure that a warning is shown. If the user's identity + * doesn't need approval, remove the warning (if any). + */ private onUserTrustStatusChanged = (userId: string, verificationStatus: UserVerificationStatus): void => { - // Handle a change in user trust. If the user's identity now needs - // approval, make sure that a warning is shown. If the user's identity - // doesn't need approval, remove the warning (if any). - if (!this.initialised) { return; } @@ -258,8 +273,10 @@ export default class UserIdentityWarning extends React.Component } }; - // Callback for when the user hits the "OK" button - public confirmIdentity = async (ev: ButtonEvent): Promise => { + /** + * Callback for when the user hits the "OK" button. + */ + public confirmIdentity = async (): Promise => { if (this.state.currentPrompt) { await MatrixClientPeg.safeGet().getCrypto()!.pinCurrentUserIdentity(this.state.currentPrompt.userId); } @@ -276,29 +293,32 @@ export default class UserIdentityWarning extends React.Component const substituteBTag = (sub: string): React.ReactNode => {sub}; return (
- - - {currentPrompt.rawDisplayName === currentPrompt.userId - ? _t( - "encryption|pinned_identity_changed_no_displayname", - { userId: currentPrompt.userId }, - { - a: substituteATag, - b: substituteBTag, - }, - ) - : _t( - "encryption|pinned_identity_changed", - { displayName: currentPrompt.rawDisplayName, userId: currentPrompt.userId }, - { - a: substituteATag, - b: substituteBTag, - }, - )} - - - {_t("action|ok")} - + +
+ + + {currentPrompt.rawDisplayName === currentPrompt.userId + ? _t( + "encryption|pinned_identity_changed_no_displayname", + { userId: currentPrompt.userId }, + { + a: substituteATag, + b: substituteBTag, + }, + ) + : _t( + "encryption|pinned_identity_changed", + { displayName: currentPrompt.rawDisplayName, userId: currentPrompt.userId }, + { + a: substituteATag, + b: substituteBTag, + }, + )} + + +
); } else {