From 6c38823b504d6e7706d095b1099da9603ac46d73 Mon Sep 17 00:00:00 2001
From: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
Date: Tue, 24 Sep 2024 14:16:51 -0700
Subject: [PATCH] Update styles for verified icon

---
 _locales/en/messages.json                     |  8 +++
 stylesheets/components/AboutContactModal.scss |  4 +-
 .../components/ConversationHeader.scss        |  4 +-
 stylesheets/components/SystemMessage.scss     |  2 +-
 ts/components/ProfileEditor.tsx               | 29 ++++++++++
 ts/test-node/util/getAboutText_test.ts        | 53 +++++++++++++++++++
 ts/util/getAboutText.ts                       | 19 +++++--
 7 files changed, 111 insertions(+), 8 deletions(-)
 create mode 100644 ts/test-node/util/getAboutText_test.ts

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index d40ebc74457..bdc370751b7 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -5911,6 +5911,14 @@
     "messageformat": "Your profile could not be updated. Please try again.",
     "description": "Error message when something goes wrong updating your profile."
   },
+  "icu:ProfileEditor__invalid-about__title": {
+    "messageformat": "Invalid characters",
+    "description": "Title of the confirmation model for profile editor when about text contains invalid characters"
+  },
+  "icu:ProfileEditor__invalid-about__body": {
+    "messageformat": "One or more characters you’ve entered can’t be used. Try again.",
+    "description": "Body of the confirmation model for profile editor when about text contains invalid characters"
+  },
   "icu:AnnouncementsOnlyGroupBanner--modal": {
     "messageformat": "Message an admin",
     "description": "Modal title for the list of admins in a group"
diff --git a/stylesheets/components/AboutContactModal.scss b/stylesheets/components/AboutContactModal.scss
index 11ce8eed617..726037776bc 100644
--- a/stylesheets/components/AboutContactModal.scss
+++ b/stylesheets/components/AboutContactModal.scss
@@ -55,7 +55,9 @@
     }
 
     &--verified {
-      @include about-modal-icon('../images/icons/v3/check/check.svg');
+      @include about-modal-icon(
+        '../images/icons/v3/safety_number/safety_number.svg'
+      );
     }
 
     &--blocked {
diff --git a/stylesheets/components/ConversationHeader.scss b/stylesheets/components/ConversationHeader.scss
index f5b3f120c50..92e8f5cc90b 100644
--- a/stylesheets/components/ConversationHeader.scss
+++ b/stylesheets/components/ConversationHeader.scss
@@ -136,7 +136,9 @@
         }
 
         &__verified {
-          @include icon-element('../images/icons/v3/check/check-compact.svg');
+          @include icon-element(
+            '../images/icons/v3/safety_number/safety_number-compact.svg'
+          );
         }
       }
     }
diff --git a/stylesheets/components/SystemMessage.scss b/stylesheets/components/SystemMessage.scss
index ee26785ac7f..0ab5728b46b 100644
--- a/stylesheets/components/SystemMessage.scss
+++ b/stylesheets/components/SystemMessage.scss
@@ -198,7 +198,7 @@
 
     &--icon-verified::before {
       @include system-message-icon(
-        '../images/icons/v3/check/check-compact.svg'
+        '../images/icons/v3/safety_number/safety_number-compact.svg'
       );
     }
 
diff --git a/ts/components/ProfileEditor.tsx b/ts/components/ProfileEditor.tsx
index 25ff7b32181..89bbc34f81f 100644
--- a/ts/components/ProfileEditor.tsx
+++ b/ts/components/ProfileEditor.tsx
@@ -36,6 +36,7 @@ import type { ShowToastAction } from '../state/ducks/toast';
 import { getEmojiData, unifiedToEmoji } from './emoji/lib';
 import { assertDev } from '../util/assert';
 import { missingCaseError } from '../util/missingCaseError';
+import { sanitizeAboutText } from '../util/getAboutText';
 import { ConfirmationDialog } from './ConfirmationDialog';
 import { ContextMenu } from './ContextMenu';
 import { UsernameLinkModalBody } from './UsernameLinkModalBody';
@@ -209,6 +210,7 @@ export function ProfileEditor({
   });
   const [isResettingUsername, setIsResettingUsername] = useState(false);
   const [isResettingUsernameLink, setIsResettingUsernameLink] = useState(false);
+  const [isInvalidAboutText, setIsInvalidAboutText] = useState(false);
 
   // Reset username edit state when leaving
   useEffect(() => {
@@ -495,6 +497,14 @@ export function ProfileEditor({
           <Button
             disabled={shouldDisableSave}
             onClick={() => {
+              if (
+                sanitizeAboutText(stagedProfile.aboutText) !==
+                stagedProfile.aboutText
+              ) {
+                setIsInvalidAboutText(true);
+                return;
+              }
+
               setFullBio({
                 aboutEmoji: stagedProfile.aboutEmoji,
                 aboutText: stagedProfile.aboutText,
@@ -768,6 +778,25 @@ export function ProfileEditor({
         />
       )}
 
+      {isInvalidAboutText && (
+        <ConfirmationDialog
+          dialogName="ProfileEditorModal.invalidAboutText"
+          title={i18n('icu:ProfileEditor__invalid-about__title')}
+          cancelButtonVariant={ButtonVariant.Primary}
+          cancelText={i18n('icu:Confirmation--confirm')}
+          i18n={i18n}
+          onClose={() => {
+            setStagedProfile(profileData => ({
+              ...profileData,
+              aboutText: sanitizeAboutText(profileData?.aboutText),
+            }));
+            setIsInvalidAboutText(false);
+          }}
+        >
+          {i18n('icu:ProfileEditor__invalid-about__body')}
+        </ConfirmationDialog>
+      )}
+
       {isResettingUsernameLink && (
         <ConfirmationDialog
           i18n={i18n}
diff --git a/ts/test-node/util/getAboutText_test.ts b/ts/test-node/util/getAboutText_test.ts
new file mode 100644
index 00000000000..850a143ff7a
--- /dev/null
+++ b/ts/test-node/util/getAboutText_test.ts
@@ -0,0 +1,53 @@
+// Copyright 2024 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { assert } from 'chai';
+
+import enMessages from '../../../_locales/en/messages.json';
+import { getAboutText } from '../../util/getAboutText';
+import { setupI18n } from '../../util/setupI18n';
+
+const i18n = setupI18n('en', enMessages);
+
+describe('getAboutText', () => {
+  it('returns undefined when there is no text', () => {
+    assert.isUndefined(getAboutText({}, i18n));
+  });
+
+  it('returns text when there is text, but not emoji', () => {
+    assert.strictEqual(
+      getAboutText(
+        {
+          about: 'hello',
+        },
+        i18n
+      ),
+      'hello'
+    );
+  });
+
+  it('returns text and emoji', () => {
+    assert.strictEqual(
+      getAboutText(
+        {
+          about: 'hello',
+          aboutEmoji: '😁',
+        },
+        i18n
+      ),
+      '😁 hello'
+    );
+  });
+
+  it('simplifies text', () => {
+    assert.strictEqual(
+      getAboutText(
+        {
+          about: '✓✔☑√⛉⛊⛛hello',
+        },
+        i18n
+      ),
+      'hello'
+    );
+  });
+});
diff --git a/ts/util/getAboutText.ts b/ts/util/getAboutText.ts
index 01f5e6597d4..eb7f6e5e9fc 100644
--- a/ts/util/getAboutText.ts
+++ b/ts/util/getAboutText.ts
@@ -1,23 +1,32 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+import type { LocalizerType } from '../types/Util';
 import type { ConversationAttributesType } from '../model-types';
 
-export function getAboutText(
-  attributes: ConversationAttributesType
+export function sanitizeAboutText(
+  text: string | undefined
 ): string | undefined {
-  if (!attributes.about) {
+  return text?.replace(/[✓✔☑√⛉⛊⛛]/g, '');
+}
+
+export function getAboutText(
+  attributes: Pick<ConversationAttributesType, 'about' | 'aboutEmoji'>,
+  i18n: LocalizerType = window.i18n
+): string | undefined {
+  const text = sanitizeAboutText(attributes.about);
+
+  if (!text) {
     return undefined;
   }
 
   const emoji = attributes.aboutEmoji;
-  const text = attributes.about;
 
   if (!emoji) {
     return text;
   }
 
-  return window.i18n('icu:message--getNotificationText--text-with-emoji', {
+  return i18n('icu:message--getNotificationText--text-with-emoji', {
     text,
     emoji,
   });