From 53a11842a52a0cc85c6a937a59e0b93be0456d58 Mon Sep 17 00:00:00 2001 From: "marc.sirisak" Date: Thu, 24 Oct 2024 12:04:25 +0200 Subject: [PATCH 1/3] feat(verify_device): add help on modal verify device after login --- .../structures/auth/SetupEncryptionBody.tsx | 26 +++++++++++++++++-- .../tchap_translations.json | 8 ++++++ patches/subtree-modifications.json | 4 +++ src/tchap/util/TchapUrls.ts | 3 +++ 4 files changed, 39 insertions(+), 2 deletions(-) diff --git a/linked-dependencies/matrix-react-sdk/src/components/structures/auth/SetupEncryptionBody.tsx b/linked-dependencies/matrix-react-sdk/src/components/structures/auth/SetupEncryptionBody.tsx index 94ebfdb8cc..a18df32a59 100644 --- a/linked-dependencies/matrix-react-sdk/src/components/structures/auth/SetupEncryptionBody.tsx +++ b/linked-dependencies/matrix-react-sdk/src/components/structures/auth/SetupEncryptionBody.tsx @@ -23,6 +23,7 @@ import defaultDispatcher from "../../../dispatcher/dispatcher"; import { Action } from "matrix-react-sdk/src/dispatcher/actions"; import { UserTab } from "matrix-react-sdk/src/components/views/dialogs/UserTab"; import { OpenToTabPayload } from "matrix-react-sdk/src/dispatcher/payloads/OpenToTabPayload"; +import TchapUrls from "../../../../../../src/tchap/util/TchapUrls"; // :TCHAP: help-access-verify-device function keyHasPassphrase(keyInfo: SecretStorageKeyDescription): boolean { return Boolean(keyInfo.passphrase && keyInfo.passphrase.salt && keyInfo.passphrase.iterations); @@ -201,13 +202,34 @@ export default class SetupEncryptionBody extends React.Component ); } + // :TCHAP: + const translationHelpLink = (sub) => ( + { + window.open(TchapUrls.helpVerifyDevicesPage,"_blank") + }}> + {sub} + + ) + const tchapHelpButton = ( + { window.open(TchapUrls.helpVerifyDevicesPage,"_blank") }}> + {_t("common|help")} + + ) + // end :TCHAP: return (
-

{_t("encryption|verification|verification_description")}

- + {/*:TCHAP: help-access-verify-device -

{_t("encryption|verification|verification_description")} */} +

{_t("encryption|verification|verification_description")} {_t("encryption|verification|help_link", {}, { + a: translationHelpLink, + })} +

+ {/* end :TCHAP: */}
{verifyButton} {useRecoveryKeyButton} + {/* :TCHAP: help-access-verify-device */} + {tchapHelpButton} + {/* end :TCHAP: */}
{_t("encryption|reset_all_button", undefined, { diff --git a/modules/tchap-translations/tchap_translations.json b/modules/tchap-translations/tchap_translations.json index f2778d11f4..fa936aecd9 100644 --- a/modules/tchap-translations/tchap_translations.json +++ b/modules/tchap-translations/tchap_translations.json @@ -893,5 +893,13 @@ "settings|general|redlist": { "en": "Red List", "fr": "Liste rouge" + }, + "encryption|verification|help_link": { + "en": "Learn more and get help", + "fr": "En savoir plus et obtenir de l'aide " + }, + "encryption|verification|help_button": { + "en": "Help", + "fr": "Aide " } } diff --git a/patches/subtree-modifications.json b/patches/subtree-modifications.json index 5801e3fbba..b0f59b823a 100644 --- a/patches/subtree-modifications.json +++ b/patches/subtree-modifications.json @@ -100,5 +100,9 @@ "files": [ "src/components/views/settings/tabs/user/AccountUserSettingsTab.tsx" ] + }, + "help-access-verify-device": { + "issue": "https://github.com/tchapgouv/tchap-web-v4/issues/1140", + "files": ["src/components/structures/auth/SetupEncryptionBody.tsx"] } } \ No newline at end of file diff --git a/src/tchap/util/TchapUrls.ts b/src/tchap/util/TchapUrls.ts index 221e729c4c..90aa32e159 100644 --- a/src/tchap/util/TchapUrls.ts +++ b/src/tchap/util/TchapUrls.ts @@ -10,4 +10,7 @@ export default class TchapUrls { //tchap FAQ page on locked messages. Should redirect to the appropriate crisp page on https://aide.tchap.beta.gouv.fr public static lockedMessagesPage = "https://tchap.beta.gouv.fr/faq/messages-verrouilles"; + + // help page to verify decices, used + public static helpVerifyDevicesPage = "https://aide.tchap.beta.gouv.fr/fr/article/comment-verifier-un-nouvel-appareil-sur-tchap-xm0b0y/"; } From 9c08d0d5de3b43abf585c8a0fb0492fdbc063ffa Mon Sep 17 00:00:00 2001 From: "marc.sirisak" Date: Thu, 24 Oct 2024 12:26:33 +0200 Subject: [PATCH 2/3] chore(urls): use tchap urls for links --- .../src/components/views/settings/Notifications.tsx | 3 ++- .../src/components/views/spaces/SpaceCreateMenu.tsx | 3 ++- .../src/hooks/useUserOnboardingTasks.ts | 3 ++- .../security/TchapExportE2eKeysSuccessDialog.tsx | 3 ++- src/tchap/components/views/common/QuickFaq.tsx | 3 ++- src/tchap/util/TchapUrls.ts | 12 ++++++++++++ 6 files changed, 22 insertions(+), 5 deletions(-) diff --git a/linked-dependencies/matrix-react-sdk/src/components/views/settings/Notifications.tsx b/linked-dependencies/matrix-react-sdk/src/components/views/settings/Notifications.tsx index e1b5e2bbee..1c12dc41a1 100644 --- a/linked-dependencies/matrix-react-sdk/src/components/views/settings/Notifications.tsx +++ b/linked-dependencies/matrix-react-sdk/src/components/views/settings/Notifications.tsx @@ -53,6 +53,7 @@ import { doesRoomHaveUnreadMessages } from "../../../Unread"; import SettingsFlag from "../elements/SettingsFlag"; import TchapUIFeature from "../../../../../../src/tchap/util/TchapUIFeature"; // :tchap: tchap-features-from-config +import TchapUrls from "../../../../../../src/tchap/util/TchapUrls"; //:TCHAP: email-notification-setting-caption // TODO: this "view" component still has far too much application logic in it, // which should be factored out to other files. @@ -701,7 +702,7 @@ export default class Notifications extends React.PureComponent { {}, { a: (sub) => ( - {window.open("https://aide.tchap.beta.gouv.fr/fr/article/notification-par-email-draft-6k7k89/","_blank")}}> + {window.open(TchapUrls.helpEmailNotification, "_blank")}}> {sub} ), diff --git a/linked-dependencies/matrix-react-sdk/src/components/views/spaces/SpaceCreateMenu.tsx b/linked-dependencies/matrix-react-sdk/src/components/views/spaces/SpaceCreateMenu.tsx index ab08cc0ef1..854ff38c7e 100644 --- a/linked-dependencies/matrix-react-sdk/src/components/views/spaces/SpaceCreateMenu.tsx +++ b/linked-dependencies/matrix-react-sdk/src/components/views/spaces/SpaceCreateMenu.tsx @@ -43,6 +43,7 @@ import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts"; import defaultDispatcher from "../../../dispatcher/dispatcher"; import { Action } from "../../../dispatcher/actions"; import { Filter } from "../dialogs/spotlight/Filter"; +import TchapUrls from "../../../../../../src/tchap/util/TchapUrls"; // :TCHAP: space-remove-public-and-subspace export const createSpace = async ( client: MatrixClient, @@ -348,7 +349,7 @@ const SpaceCreateMenu: React.FC<{ {_t("create_space|add_details_prompt")} {_t("create_space|add_details_prompt_2", {}, { a: (sub) => ( { - window.open("https://aide.tchap.beta.gouv.fr/fr/article/comment-creer-un-espace-sur-tchap-1wmlenx","_blank") + window.open(TchapUrls.helpCreateSpace, "_blank") }}> {sub} diff --git a/linked-dependencies/matrix-react-sdk/src/hooks/useUserOnboardingTasks.ts b/linked-dependencies/matrix-react-sdk/src/hooks/useUserOnboardingTasks.ts index a7b52bd6ff..49d2e76479 100644 --- a/linked-dependencies/matrix-react-sdk/src/hooks/useUserOnboardingTasks.ts +++ b/linked-dependencies/matrix-react-sdk/src/hooks/useUserOnboardingTasks.ts @@ -22,6 +22,7 @@ import { UseCase } from "../settings/enums/UseCase"; import { useSettingValue } from "./useSettings"; import { UserOnboardingContext } from "./useUserOnboardingContext"; import { accessSecretStorage } from "../SecurityManager"; // :TCHAP: onboarding-add-secure-backup +import TchapUrls from "../../../../src/tchap/util/TchapUrls"; // :TCHAP: onboarding-add-tchap-guide interface UserOnboardingTask { id: string; @@ -153,7 +154,7 @@ const tasks: UserOnboardingTask[] = [ label: _t("onboarding|check_user_guide_action"), onClick: (ev: ButtonEvent) => { window.localStorage.setItem('tchap_user_guide_checked', 'true'); - window.open("https://aide.tchap.beta.gouv.fr/fr/article/guide-de-prise-en-main-de-tchap-oswyn1/", "_blank"); + window.open( TchapUrls.helpUserOnboarding, "_blank"); }, }, }, /** end :TCHAP: onboarding-add-tchap-guide */ diff --git a/src/tchap/async-components/views/dialogs/security/TchapExportE2eKeysSuccessDialog.tsx b/src/tchap/async-components/views/dialogs/security/TchapExportE2eKeysSuccessDialog.tsx index 2153b0fedc..8c7a06fedb 100644 --- a/src/tchap/async-components/views/dialogs/security/TchapExportE2eKeysSuccessDialog.tsx +++ b/src/tchap/async-components/views/dialogs/security/TchapExportE2eKeysSuccessDialog.tsx @@ -22,6 +22,7 @@ import { _t } from "matrix-react-sdk/src/languageHandler"; import { TchapAnchor } from "../../../../components/views/common/TchapAnchor"; import KeySavedImage from "../../../../../../res/img/tchap/key-saved.svg"; import "../../../../../../res/css/views/dialogs/_TchapExportE2eKeysSuccessDialog.pcss"; +import TchapUrls from "../../../../util/TchapUrls"; interface IProps { allowLogout: boolean; @@ -65,7 +66,7 @@ export default class TchapExportE2eKeysSuccessDialog extends React.Component ( {sub} diff --git a/src/tchap/components/views/common/QuickFaq.tsx b/src/tchap/components/views/common/QuickFaq.tsx index cd1b783f9d..9c557ebd2e 100644 --- a/src/tchap/components/views/common/QuickFaq.tsx +++ b/src/tchap/components/views/common/QuickFaq.tsx @@ -7,6 +7,7 @@ import classNames from 'classnames'; import { _t } from '../../../../languageHandler'; import "../../../../../res/css/common/_TchapLeftPanel.pcss"; import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOptionList } from 'matrix-react-sdk/src/components/views/context_menus/IconizedContextMenu'; +import TchapUrls from '../../../util/TchapUrls'; const QuickFaqButton: React.FC<{ isPanelCollapsed: boolean; @@ -43,7 +44,7 @@ const QuickFaqButton: React.FC<{ iconClassName="mx_UserMenu_iconHome" label={_t("quick_faq|guides")} onClick={(e) => { - window.open("https://aide.tchap.beta.gouv.fr/fr/article/guide-de-prise-en-main-de-tchap-oswyn1/", '_blank') + window.open(TchapUrls.helpUserOnboarding, '_blank') }} /> diff --git a/src/tchap/util/TchapUrls.ts b/src/tchap/util/TchapUrls.ts index 90aa32e159..c8a173c65f 100644 --- a/src/tchap/util/TchapUrls.ts +++ b/src/tchap/util/TchapUrls.ts @@ -13,4 +13,16 @@ export default class TchapUrls { // help page to verify decices, used public static helpVerifyDevicesPage = "https://aide.tchap.beta.gouv.fr/fr/article/comment-verifier-un-nouvel-appareil-sur-tchap-xm0b0y/"; + + // help page for notification by email + public static helpEmailNotification = "https://aide.tchap.beta.gouv.fr/fr/article/notification-par-email-draft-6k7k89/"; + + // help create space + public static helpCreateSpace = "https://aide.tchap.beta.gouv.fr/fr/article/comment-creer-un-espace-sur-tchap-1wmlenx"; + + // help user onboarding + public static helpUserOnboarding = "https://aide.tchap.beta.gouv.fr/fr/article/guide-de-prise-en-main-de-tchap-oswyn1/"; + + // help manually import tchap keys + public static helpManuallyImportKeys= "https://aide.tchap.beta.gouv.fr/fr/article/comment-importer-manuellement-mes-cles-tchap-cles-de-chiffrement-web-xh376r" } From cf4922f649d6178ac1e16b38a9bbf00338222d13 Mon Sep 17 00:00:00 2001 From: "marc.sirisak" Date: Thu, 24 Oct 2024 12:48:28 +0200 Subject: [PATCH 3/3] feat(css): wider verification modale, move to tchap custom instead of react-sdk css --- .../res/css/views/auth/_CompleteSecurityBody.pcss | 6 ------ modules/tchap-translations/tchap_translations.json | 8 ++------ res/themes/tchap-common/css/_tchap_custom.pcss | 5 +++++ 3 files changed, 7 insertions(+), 12 deletions(-) diff --git a/linked-dependencies/matrix-react-sdk/res/css/views/auth/_CompleteSecurityBody.pcss b/linked-dependencies/matrix-react-sdk/res/css/views/auth/_CompleteSecurityBody.pcss index 404a06d695..fd187c89f0 100644 --- a/linked-dependencies/matrix-react-sdk/res/css/views/auth/_CompleteSecurityBody.pcss +++ b/linked-dependencies/matrix-react-sdk/res/css/views/auth/_CompleteSecurityBody.pcss @@ -8,12 +8,6 @@ Please see LICENSE files in the repository root for full details. */ .mx_CompleteSecurityBody { - /* :TCHAP: cross-signing-ui - width: 600px; - */ - width: 660px; - /* end :TCHAP: */ - color: $authpage-primary-color; background-color: $background; border-radius: 4px; diff --git a/modules/tchap-translations/tchap_translations.json b/modules/tchap-translations/tchap_translations.json index fa936aecd9..227a18549e 100644 --- a/modules/tchap-translations/tchap_translations.json +++ b/modules/tchap-translations/tchap_translations.json @@ -895,11 +895,7 @@ "fr": "Liste rouge" }, "encryption|verification|help_link": { - "en": "Learn more and get help", - "fr": "En savoir plus et obtenir de l'aide " - }, - "encryption|verification|help_button": { - "en": "Help", - "fr": "Aide " + "en": "Learn more and get help", + "fr": "En savoir plus et obtenir de l'aide " } } diff --git a/res/themes/tchap-common/css/_tchap_custom.pcss b/res/themes/tchap-common/css/_tchap_custom.pcss index 83a982748e..a5d64a18a7 100644 --- a/res/themes/tchap-common/css/_tchap_custom.pcss +++ b/res/themes/tchap-common/css/_tchap_custom.pcss @@ -72,4 +72,9 @@ .mx_AuthBody_text .mx_ErrorMessage { margin-top: 10px; font-weight: bold; +} + +/* help-access-verify-device added help button, so need to have wider width to avoid double line text in other buttons */ +.mx_CompleteSecurityBody { + width: 726px; } \ No newline at end of file