fix: displayName allowed length based on bytes rather than char

_locales/en/messages.json

@@ -360,6 +360,7 @@
   "notificationPreview": "Preview",
   "recoveryPhraseEmpty": "Enter your recovery phrase",
   "displayNameEmpty": "Please enter a display name",
+  "displayNameTooLong": "Display name is too long",
   "members": "$count$ members",
   "join": "Join",
   "joinOpenGroup": "Join Community",

ts/components/dialog/EditProfileDialog.tsx

@@ -16,12 +16,12 @@ import { uploadOurAvatar } from '../../interactions/conversationInteractions';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
 import { SessionSpinner } from '../basic/SessionSpinner';
 import { SessionIconButton } from '../icon';
-import { MAX_USERNAME_LENGTH } from '../registration/RegistrationStages';
 import { SessionWrapperModal } from '../SessionWrapperModal';
 import { pickFileForAvatar } from '../../types/attachments/VisualAttachment';
 import { sanitizeSessionUsername } from '../../session/utils/String';
 import { setLastProfileUpdateTimestamp } from '../../util/storage';
 import { ConversationTypeEnum } from '../../models/conversationAttributes';
+import { MAX_USERNAME_BYTES } from '../../session/constants';
 
 interface State {
   profileName: string;
@@ -214,7 +214,7 @@ export class EditProfileDialog extends React.Component<{}, State> {
             value={this.state.profileName}
             placeholder={placeholderText}
             onChange={this.onNameEdited}
-            maxLength={MAX_USERNAME_LENGTH}
+            maxLength={MAX_USERNAME_BYTES}
             tabIndex={0}
             required={true}
             aria-required={true}
@@ -240,10 +240,18 @@ export class EditProfileDialog extends React.Component<{}, State> {
   }
 
   private onNameEdited(event: ChangeEvent<HTMLInputElement>) {
-    const newName = sanitizeSessionUsername(event.target.value);
-    this.setState({
-      profileName: newName,
-    });
+    const displayName = event.target.value;
+    try {
+      const newName = sanitizeSessionUsername(displayName);
+      this.setState({
+        profileName: newName,
+      });
+    } catch (e) {
+      this.setState({
+        profileName: displayName,
+      });
+      ToastUtils.pushToastError('nameTooLong', window.i18n('displayNameTooLong'));
+    }
   }
 
   private onKeyUp(event: any) {
@@ -266,26 +274,37 @@ export class EditProfileDialog extends React.Component<{}, State> {
    */
   private onClickOK() {
     const { newAvatarObjectUrl, profileName } = this.state;
-    const newName = profileName ? profileName.trim() : '';
+    try {
+      const newName = profileName ? profileName.trim() : '';
+
+      if (newName.length === 0 || newName.length > MAX_USERNAME_BYTES) {
+        return;
+      }
+
+      // this throw if the length in bytes is too long
+      const sanitizedName = sanitizeSessionUsername(newName);
+      const trimName = sanitizedName.trim();
+
+      this.setState(
+        {
+          profileName: trimName,
+          loading: true,
+        },
+        async () => {
+          await commitProfileEdits(newName, newAvatarObjectUrl);
+          this.setState({
+            loading: false,
+
+            mode: 'default',
+            updatedProfileName: this.state.profileName,
+          });
+        }
+      );
+    } catch (e) {
+      ToastUtils.pushToastError('nameTooLong', window.i18n('displayNameTooLong'));
 
-    if (newName.length === 0 || newName.length > MAX_USERNAME_LENGTH) {
       return;
     }
-
-    this.setState(
-      {
-        loading: true,
-      },
-      async () => {
-        await commitProfileEdits(newName, newAvatarObjectUrl);
-        this.setState({
-          loading: false,
-
-          mode: 'default',
-          updatedProfileName: this.state.profileName,
-        });
-      }
-    );
   }
 
   private closeDialog() {

ts/components/registration/RegistrationStages.tsx

@@ -17,7 +17,6 @@ import {
 import { fromHex } from '../../session/utils/String';
 import { setSignInByLinking, setSignWithRecoveryPhrase, Storage } from '../../util/storage';
 
-export const MAX_USERNAME_LENGTH = 26;
 // tslint:disable: use-simple-attributes
 
 export async function resetRegistration() {

ts/components/registration/RegistrationUserDetails.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
+import { MAX_USERNAME_BYTES } from '../../session/constants';
 import { SessionInput } from '../basic/SessionInput';
-import { MAX_USERNAME_LENGTH } from './RegistrationStages';
 
 const DisplayNameInput = (props: {
   stealAutoFocus?: boolean;
@@ -17,7 +17,7 @@ const DisplayNameInput = (props: {
       type="text"
       placeholder={window.i18n('enterDisplayName')}
       value={props.displayName}
-      maxLength={MAX_USERNAME_LENGTH}
+      maxLength={MAX_USERNAME_BYTES}
       onValueChanged={props.onDisplayNameChanged}
       onEnterPressed={props.handlePressEnter}
       inputDataTestId="display-name-input"

ts/components/registration/SignInTab.tsx

@@ -1,4 +1,5 @@
 import React, { useContext, useState } from 'react';
+import { ToastUtils } from '../../session/utils';
 import { sanitizeSessionUsername } from '../../session/utils/String';
 import { Flex } from '../basic/Flex';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
@@ -148,10 +149,16 @@ export const SignInTab = () => {
             displayName={displayName}
             handlePressEnter={continueYourSession}
             onDisplayNameChanged={(name: string) => {
-              const sanitizedName = sanitizeSessionUsername(name);
-              const trimName = sanitizedName.trim();
-              setDisplayName(sanitizedName);
-              setDisplayNameError(!trimName ? window.i18n('displayNameEmpty') : undefined);
+              try {
+                const sanitizedName = sanitizeSessionUsername(name);
+                const trimName = sanitizedName.trim();
+                setDisplayName(sanitizedName);
+                setDisplayNameError(!trimName ? window.i18n('displayNameEmpty') : undefined);
+              } catch (e) {
+                setDisplayName(name);
+                setDisplayNameError(window.i18n('displayNameTooLong'));
+                ToastUtils.pushToastError('toolong', window.i18n('displayNameTooLong'));
+              }
             }}
             onSeedChanged={(seed: string) => {
               setRecoveryPhrase(seed);

ts/components/registration/SignUpTab.tsx

@@ -1,4 +1,5 @@
 import React, { useContext, useEffect, useState } from 'react';
+import { ToastUtils } from '../../session/utils';
 import { sanitizeSessionUsername } from '../../session/utils/String';
 import { Flex } from '../basic/Flex';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
@@ -144,10 +145,16 @@ export const SignUpTab = () => {
         displayName={displayName}
         handlePressEnter={signUpWithDetails}
         onDisplayNameChanged={(name: string) => {
-          const sanitizedName = sanitizeSessionUsername(name);
-          const trimName = sanitizedName.trim();
-          setDisplayName(sanitizedName);
-          setDisplayNameError(!trimName ? window.i18n('displayNameEmpty') : undefined);
+          try {
+            const sanitizedName = sanitizeSessionUsername(name);
+            const trimName = sanitizedName.trim();
+            setDisplayName(sanitizedName);
+            setDisplayNameError(!trimName ? window.i18n('displayNameEmpty') : undefined);
+          } catch (e) {
+            setDisplayName(name);
+            setDisplayNameError(window.i18n('displayNameTooLong'));
+            ToastUtils.pushToastError('toolong', window.i18n('displayNameTooLong'));
+          }
         }}
         stealAutoFocus={true}
       />

ts/session/constants.ts

@@ -60,3 +60,5 @@ export const UI = {
 export const QUOTED_TEXT_MAX_LENGTH = 150;
 
 export const DEFAULT_RECENT_REACTS = ['😂', '🥰', '😢', '😡', '😮', '😈'];
+
+export const MAX_USERNAME_BYTES = 64;

ts/session/utils/String.ts

@@ -1,4 +1,5 @@
 import ByteBuffer from 'bytebuffer';
+import { MAX_USERNAME_BYTES } from '../constants';
 
 export type Encoding = 'base64' | 'hex' | 'binary' | 'utf8';
 export type BufferType = ByteBuffer | Buffer | ArrayBuffer | Uint8Array;
@@ -54,10 +55,19 @@ const forbiddenDisplayCharRegex = /\uFFD2*/g;
  *
  * This function removes any forbidden char from a given display name.
  * This does not trim it as otherwise, a user cannot type User A as when he hits the space, it gets trimmed right away.
- * The trimming should hence happen after calling this and on saving the display name
+ * The trimming should hence happen after calling this and on saving the display name.
+ *
+ * This functions makes sure that the MAX_USERNAME_BYTES is verified for utf8 byte length
  * @param inputName the input to sanitize
  * @returns a sanitized string, untrimmed
  */
 export const sanitizeSessionUsername = (inputName: string) => {
-  return inputName.replace(forbiddenDisplayCharRegex, '');
+  const validChars = inputName.replace(forbiddenDisplayCharRegex, '');
+
+  const lengthBytes = encode(validChars, 'utf8').byteLength;
+  if (lengthBytes > MAX_USERNAME_BYTES) {
+    throw new Error('Display name is too long');
+  }
+
+  return validChars;
 };

ts/types/LocalizerKeys.ts

@@ -491,6 +491,7 @@ export type LocalizerKeys =
   | 'trustThisContactDialogDescription'
   | 'unknownCountry'
   | 'searchFor...'
+  | 'displayNameTooLong'
   | 'joinedTheGroup'
   | 'editGroupName'
   | 'reportIssue';