Merge pull request #2525 from Bilb/fix-displayname-use-bytes

fix: displayName allowed length based on bytes rather than char

_locales/en/messages.json

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

ts/components/SessionWrapperModal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 import classNames from 'classnames';
 
 import { SessionIconButton } from './icon/';
@@ -63,17 +63,11 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
     }
   };
 
-  useEffect(() => {
-    document.addEventListener('mousedown', handleClick);
-
-    return () => {
-      document.removeEventListener('mousedown', handleClick);
-    };
-  }, []);
-
   return (
     <div
       className={classNames('loki-dialog modal', additionalClassName ? additionalClassName : null)}
+      onClick={handleClick}
+      role="dialog"
     >
       <div className="session-confirm-wrapper">
         <div ref={modalRef} className="session-modal">

ts/components/basic/SessionToast.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 
 import { Flex } from '../basic/Flex';
 import styled from 'styled-components';
-import { noop } from 'lodash';
 import { SessionIcon, SessionIconType } from '../icon';
+import { noop } from 'lodash';
 
 export enum SessionToastType {
   Info = 'info',
@@ -44,6 +44,8 @@ const IconDiv = styled.div`
   padding-inline-end: var(--margins-xs);
 `;
 
+// tslint:disable: use-simple-attributes
+
 export const SessionToast = (props: Props) => {
   const { title, description, type, icon } = props;
 
@@ -71,14 +73,10 @@ export const SessionToast = (props: Props) => {
     }
   }
 
+  const onToastClick = props?.onToastClick || noop;
+
   return (
-    // tslint:disable-next-line: use-simple-attributes
-    <Flex
-      container={true}
-      alignItems="center"
-      onClick={props?.onToastClick || noop}
-      data-testid="session-toast"
-    >
+    <Flex container={true} alignItems="center" onClick={onToastClick} data-testid="session-toast">
       <IconDiv>
         <SessionIcon iconType={toastIcon} iconSize={toastIconSize} />
       </IconDiv>

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/leftpane/ActionsPanel.tsx

@@ -39,7 +39,6 @@ import { getSwarmPollingInstance } from '../../session/apis/snode_api';
 import { forceRefreshRandomSnodePool } from '../../session/apis/snode_api/snodePool';
 import { Avatar, AvatarSize } from '../avatar/Avatar';
 import { SessionIconButton } from '../icon';
-import { SessionToastContainer } from '../SessionToastContainer';
 import { LeftPaneSectionContainer } from './LeftPaneSectionContainer';
 import { ipcRenderer } from 'electron';
 import { UserUtils } from '../../session/utils';
@@ -277,8 +276,6 @@ export const ActionsPanel = () => {
         <Section type={SectionType.Message} />
         <Section type={SectionType.Settings} />
 
-        <SessionToastContainer />
-
         <Section type={SectionType.PathIndicator} />
         <Section type={SectionType.Moon} />
       </LeftPaneSectionContainer>

ts/components/leftpane/LeftPane.tsx

@@ -12,6 +12,7 @@ import { CallInFullScreenContainer } from '../calling/CallInFullScreenContainer'
 import { DraggableCallContainer } from '../calling/DraggableCallContainer';
 import { IncomingCallDialog } from '../calling/IncomingCallDialog';
 import { ModalContainer } from '../dialog/ModalContainer';
+import { SessionToastContainer } from '../SessionToastContainer';
 import { ActionsPanel } from './ActionsPanel';
 import { LeftPaneMessageSection } from './LeftPaneMessageSection';
 import { LeftPaneSettingSection } from './LeftPaneSettingSection';
@@ -71,6 +72,7 @@ export const LeftPane = () => {
       <div className="module-left-pane-session">
         <ModalContainer />
         <CallContainer />
+        <SessionToastContainer />
         <ActionsPanel />
 
         <StyledLeftPane className="module-left-pane">

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';
@@ -95,6 +96,23 @@ const SignInButtons = (props: {
   );
 };
 
+export function sanitizeDisplayNameOrToast(
+  displayName: string,
+  setDisplayName: (sanitized: string) => void,
+  setDisplayNameError: (error: string | undefined) => void
+) {
+  try {
+    const sanitizedName = sanitizeSessionUsername(displayName);
+    const trimName = sanitizedName.trim();
+    setDisplayName(sanitizedName);
+    setDisplayNameError(!trimName ? window.i18n('displayNameEmpty') : undefined);
+  } catch (e) {
+    setDisplayName(displayName);
+    setDisplayNameError(window.i18n('displayNameTooLong'));
+    ToastUtils.pushToastError('toolong', window.i18n('displayNameTooLong'));
+  }
+}
+
 export const SignInTab = () => {
   const { setRegistrationPhase, signInMode, setSignInMode } = useContext(RegistrationContext);
 
@@ -148,10 +166,7 @@ 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);
+              sanitizeDisplayNameOrToast(name, setDisplayName, setDisplayNameError);
             }}
             onSeedChanged={(seed: string) => {
               setRecoveryPhrase(seed);

ts/components/registration/SignUpTab.tsx

@@ -1,12 +1,11 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { sanitizeSessionUsername } from '../../session/utils/String';
 import { Flex } from '../basic/Flex';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
 import { SessionIdEditable } from '../basic/SessionIdEditable';
 import { SessionIconButton } from '../icon';
 import { RegistrationContext, RegistrationPhase, signUp } from './RegistrationStages';
 import { RegistrationUserDetails } from './RegistrationUserDetails';
-import { SignInMode } from './SignInTab';
+import { sanitizeDisplayNameOrToast, SignInMode } from './SignInTab';
 import { TermsAndConditions } from './TermsAndConditions';
 
 export enum SignUpMode {
@@ -144,10 +143,7 @@ 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);
+          sanitizeDisplayNameOrToast(name, setDisplayName, setDisplayNameError);
         }}
         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

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