mirror of
https://github.com/Novaloop-AG/healthchat-web.git
synced 2026-11-04 20:01:58 +00:00
Add new verification section to user profile (#29200)
* Create new verification section * Remove old code and use new VerificationSection * Add styling and translation * Fix tests * Remove dead code * Fix broken test * Remove imports * Remove console.log * Update snapshots * Fix broken tests * Fix lint * Make badge expand with content * Remove unused code
This commit is contained in:
R Midhun Suresh
GitHub
+293
-143
@@ -1,74 +1,5 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<DeviceItem /> ambiguous display name 1`] = `
|
||||
<div>
|
||||
<div
|
||||
aria-label="my display name (deviceId)"
|
||||
class="mx_AccessibleButton mx_UserInfo_device mx_UserInfo_device_unverified"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="mx_E2EIcon mx_E2EIcon_normal"
|
||||
/>
|
||||
<div
|
||||
class="mx_UserInfo_device_name"
|
||||
>
|
||||
my display name (deviceId)
|
||||
</div>
|
||||
<div
|
||||
class="mx_UserInfo_device_trusted"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<DeviceItem /> with display name 1`] = `
|
||||
<div>
|
||||
<div
|
||||
aria-label="deviceName"
|
||||
class="mx_AccessibleButton mx_UserInfo_device mx_UserInfo_device_unverified"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="mx_E2EIcon mx_E2EIcon_normal"
|
||||
/>
|
||||
<div
|
||||
class="mx_UserInfo_device_name"
|
||||
>
|
||||
deviceName
|
||||
</div>
|
||||
<div
|
||||
class="mx_UserInfo_device_trusted"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<DeviceItem /> without display name 1`] = `
|
||||
<div>
|
||||
<div
|
||||
aria-label="deviceId"
|
||||
class="mx_AccessibleButton mx_UserInfo_device mx_UserInfo_device_unverified"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="mx_E2EIcon mx_E2EIcon_normal"
|
||||
/>
|
||||
<div
|
||||
class="mx_UserInfo_device_name"
|
||||
>
|
||||
deviceId
|
||||
</div>
|
||||
<div
|
||||
class="mx_UserInfo_device_trusted"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
|
||||
<div>
|
||||
<div
|
||||
@@ -88,7 +19,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
aria-labelledby=":r74:"
|
||||
aria-labelledby=":r6m:"
|
||||
class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
|
||||
data-testid="base-card-close-button"
|
||||
role="button"
|
||||
@@ -180,45 +111,17 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_UserInfo_container"
|
||||
>
|
||||
<h2>
|
||||
Security
|
||||
</h2>
|
||||
<p>
|
||||
Messages in this room are not end-to-end encrypted.
|
||||
</p>
|
||||
<div
|
||||
class="mx_UserInfo_container_verifyButton"
|
||||
class="mx_Flex mx_UserInfo_verification"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0;"
|
||||
>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_UserInfo_field mx_UserInfo_verifyButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
<p
|
||||
class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 mx_UserInfo_verification_unavailable"
|
||||
>
|
||||
Verify
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_UserInfo_devices"
|
||||
>
|
||||
<div />
|
||||
<div>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_UserInfo_expand mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="mx_E2EIcon mx_E2EIcon_normal"
|
||||
/>
|
||||
<div>
|
||||
1 session
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
(
|
||||
User verification unavailable
|
||||
)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@@ -402,7 +305,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
aria-labelledby=":r9a:"
|
||||
aria-labelledby=":r70:"
|
||||
class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
|
||||
data-testid="base-card-close-button"
|
||||
role="button"
|
||||
@@ -494,45 +397,25 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_UserInfo_container"
|
||||
>
|
||||
<h2>
|
||||
Security
|
||||
</h2>
|
||||
<p>
|
||||
Messages in this room are not end-to-end encrypted.
|
||||
</p>
|
||||
<div
|
||||
class="mx_UserInfo_container_verifyButton"
|
||||
class="mx_Flex mx_UserInfo_verification"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0;"
|
||||
>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_UserInfo_field mx_UserInfo_verifyButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
<svg
|
||||
class="_icon_1ye7b_27"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
style="width: 24px; height: 24px;"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
Verify
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_UserInfo_devices"
|
||||
>
|
||||
<div />
|
||||
<div>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_UserInfo_expand mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="mx_E2EIcon mx_E2EIcon_normal"
|
||||
/>
|
||||
<div>
|
||||
1 session
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M12 4.031a8 8 0 1 0 8 8 1 1 0 0 1 2 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10a1 1 0 1 1 0 2Z"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@@ -737,3 +620,270 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<UserInfoHeader /> renders verification unavailable message 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mx_UserInfo_avatar"
|
||||
>
|
||||
<div
|
||||
class="mx_UserInfo_avatar_transition"
|
||||
>
|
||||
<div
|
||||
class="mx_UserInfo_avatar_transition_child"
|
||||
>
|
||||
<button
|
||||
aria-label="Profile picture"
|
||||
aria-live="off"
|
||||
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
|
||||
data-color="3"
|
||||
data-testid="avatar-img"
|
||||
data-type="round"
|
||||
role="button"
|
||||
style="--cpd-avatar-size: 120px;"
|
||||
title="customUserIdentifier"
|
||||
>
|
||||
u
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_UserInfo_container mx_UserInfo_header"
|
||||
>
|
||||
<div
|
||||
class="mx_Flex mx_UserInfo_profile"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
|
||||
>
|
||||
<h1
|
||||
class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102"
|
||||
dir="auto"
|
||||
>
|
||||
<div
|
||||
class="mx_Flex mx_UserInfo_profile_name"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
|
||||
>
|
||||
@user:example.com
|
||||
</div>
|
||||
</h1>
|
||||
<div
|
||||
class="mx_PresenceLabel mx_UserInfo_profileStatus"
|
||||
>
|
||||
Unknown
|
||||
</div>
|
||||
<p
|
||||
class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 mx_UserInfo_profile_mxid"
|
||||
>
|
||||
<div
|
||||
class="mx_CopyableText"
|
||||
>
|
||||
customUserIdentifier
|
||||
<div
|
||||
aria-label="Copy"
|
||||
class="mx_AccessibleButton mx_CopyableText_copyButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="mx_Flex mx_UserInfo_verification"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0;"
|
||||
>
|
||||
<p
|
||||
class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 mx_UserInfo_verification_unavailable"
|
||||
>
|
||||
(
|
||||
User verification unavailable
|
||||
)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<UserInfoHeader /> renders verified badge when user is verified 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mx_UserInfo_avatar"
|
||||
>
|
||||
<div
|
||||
class="mx_UserInfo_avatar_transition"
|
||||
>
|
||||
<div
|
||||
class="mx_UserInfo_avatar_transition_child"
|
||||
>
|
||||
<button
|
||||
aria-label="Profile picture"
|
||||
aria-live="off"
|
||||
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
|
||||
data-color="3"
|
||||
data-testid="avatar-img"
|
||||
data-type="round"
|
||||
role="button"
|
||||
style="--cpd-avatar-size: 120px;"
|
||||
title="customUserIdentifier"
|
||||
>
|
||||
u
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_UserInfo_container mx_UserInfo_header"
|
||||
>
|
||||
<div
|
||||
class="mx_Flex mx_UserInfo_profile"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
|
||||
>
|
||||
<h1
|
||||
class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102"
|
||||
dir="auto"
|
||||
>
|
||||
<div
|
||||
class="mx_Flex mx_UserInfo_profile_name"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
|
||||
>
|
||||
@user:example.com
|
||||
</div>
|
||||
</h1>
|
||||
<div
|
||||
class="mx_PresenceLabel mx_UserInfo_profileStatus"
|
||||
>
|
||||
Unknown
|
||||
</div>
|
||||
<p
|
||||
class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 mx_UserInfo_profile_mxid"
|
||||
>
|
||||
<div
|
||||
class="mx_CopyableText"
|
||||
>
|
||||
customUserIdentifier
|
||||
<div
|
||||
aria-label="Copy"
|
||||
class="mx_AccessibleButton mx_CopyableText_copyButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="mx_Flex mx_UserInfo_verification"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0;"
|
||||
>
|
||||
<span
|
||||
class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50 _badge_1171v_17 mx_UserInfo_verified_badge"
|
||||
data-kind="green"
|
||||
>
|
||||
<svg
|
||||
class="mx_UserInfo_verified_icon"
|
||||
fill="currentColor"
|
||||
height="16px"
|
||||
viewBox="0 0 24 24"
|
||||
width="16px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8.15 21.75 6.7 19.3l-2.75-.6a.943.943 0 0 1-.6-.387.928.928 0 0 1-.175-.688L3.45 14.8l-1.875-2.15a.934.934 0 0 1-.25-.65c0-.25.083-.467.25-.65L3.45 9.2l-.275-2.825a.928.928 0 0 1 .175-.688.943.943 0 0 1 .6-.387l2.75-.6 1.45-2.45a.983.983 0 0 1 .55-.438.97.97 0 0 1 .7.038l2.6 1.1 2.6-1.1a.97.97 0 0 1 .7-.038.983.983 0 0 1 .55.438L17.3 4.7l2.75.6c.25.05.45.18.6.388.15.208.208.437.175.687L20.55 9.2l1.875 2.15c.167.183.25.4.25.65s-.083.467-.25.65L20.55 14.8l.275 2.825a.928.928 0 0 1-.175.688.943.943 0 0 1-.6.387l-2.75.6-1.45 2.45a.983.983 0 0 1-.55.438.97.97 0 0 1-.7-.038l-2.6-1.1-2.6 1.1a.97.97 0 0 1-.7.038.983.983 0 0 1-.55-.438Zm2.8-9.05L9.5 11.275A.933.933 0 0 0 8.813 11c-.275 0-.513.1-.713.3a.948.948 0 0 0-.275.7.95.95 0 0 0 .275.7l2.15 2.15c.2.2.433.3.7.3.267 0 .5-.1.7-.3l4.25-4.25c.2-.2.296-.433.287-.7a1.055 1.055 0 0 0-.287-.7 1.02 1.02 0 0 0-.713-.313.93.93 0 0 0-.712.288L10.95 12.7Z"
|
||||
/>
|
||||
</svg>
|
||||
<p
|
||||
class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50 mx_UserInfo_verified_label"
|
||||
>
|
||||
Verified
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<UserInfoHeader /> renders verify button 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mx_UserInfo_avatar"
|
||||
>
|
||||
<div
|
||||
class="mx_UserInfo_avatar_transition"
|
||||
>
|
||||
<div
|
||||
class="mx_UserInfo_avatar_transition_child"
|
||||
>
|
||||
<button
|
||||
aria-label="Profile picture"
|
||||
aria-live="off"
|
||||
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
|
||||
data-color="3"
|
||||
data-testid="avatar-img"
|
||||
data-type="round"
|
||||
role="button"
|
||||
style="--cpd-avatar-size: 120px;"
|
||||
title="customUserIdentifier"
|
||||
>
|
||||
u
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_UserInfo_container mx_UserInfo_header"
|
||||
>
|
||||
<div
|
||||
class="mx_Flex mx_UserInfo_profile"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
|
||||
>
|
||||
<h1
|
||||
class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102"
|
||||
dir="auto"
|
||||
>
|
||||
<div
|
||||
class="mx_Flex mx_UserInfo_profile_name"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
|
||||
>
|
||||
@user:example.com
|
||||
</div>
|
||||
</h1>
|
||||
<div
|
||||
class="mx_PresenceLabel mx_UserInfo_profileStatus"
|
||||
>
|
||||
Unknown
|
||||
</div>
|
||||
<p
|
||||
class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 mx_UserInfo_profile_mxid"
|
||||
>
|
||||
<div
|
||||
class="mx_CopyableText"
|
||||
>
|
||||
customUserIdentifier
|
||||
<div
|
||||
aria-label="Copy"
|
||||
class="mx_AccessibleButton mx_CopyableText_copyButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="mx_Flex mx_UserInfo_verification"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0;"
|
||||
>
|
||||
<div
|
||||
class="mx_UserInfo_container_verifyButton"
|
||||
>
|
||||
<button
|
||||
class="_button_i91xf_17 mx_UserInfo_verify_button"
|
||||
data-kind="tertiary"
|
||||
data-size="sm"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Verify User
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user