feat: updated display name

show error when display name is too long

_locales/en/messages.json

@@ -585,5 +585,6 @@
   "termsOfService": "Terms of Service",
   "privacyPolicy": "Privacy Policy",
   "displayNamePick": "Pick your display name",
-  "displayNameDescription": "It can be your real name, an alias, or anything else you like — and you can change it any time."
+  "displayNameDescription": "It can be your real name, an alias, or anything else you like — and you can change it any time.",
+  "invalidDisplayNameTooLong": "Please enter a shorter display name."
 }

ts/components/registration/stages/CreateAccount.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { MAX_USERNAME_BYTES } from '../../../session/constants';
+import { sanitizeSessionUsername } from '../../../session/utils/String';
 import { AccountCreation } from '../../../state/onboarding/ducks/registration';
 import {
   useOnboardAccountCreationStep,
@@ -8,12 +8,11 @@ import {
   useOnboardHexGeneratedPubKey,
 } from '../../../state/onboarding/selectors/registration';
 import { Flex } from '../../basic/Flex';
-import { SessionButton } from '../../basic/SessionButton';
+import { SessionButton, SessionButtonColor } from '../../basic/SessionButton';
 import { SpacerLG, SpacerSM } from '../../basic/Text';
 import { SessionInput2 } from '../../inputs';
 import { signUp } from '../RegistrationStages';
 import { BackButtonWithininContainer } from '../components/BackButton';
-import { sanitizeDisplayNameOrToast } from './RestoreAccount';
 
 const StyledContainer = styled.div`
   width: 100%;
@@ -30,13 +29,27 @@ const StyledDescription = styled.p`
   margin: 0;
 `;
 
+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('invalidDisplayNameTooLong'));
+  }
+}
+
 export const CreateAccount = () => {
   const step = useOnboardAccountCreationStep();
   const generatedRecoveryPhrase = useOnboardGeneratedRecoveryPhrase();
   const hexGeneratedPubKey = useOnboardHexGeneratedPubKey();
 
-  // const dispatch = useDispatch();
-
   const [displayName, setDisplayName] = useState('');
   const [displayNameError, setDisplayNameError] = useState<undefined | string>('');
 
@@ -46,12 +59,13 @@ export const CreateAccount = () => {
     }
   }, [step, hexGeneratedPubKey]);
 
-  // Display name is required
+  const displayNameOK = !!displayName && !displayNameError;
-  const displayNameOK = !displayNameError && !!displayName;
+  const signUpWithDetails = () => {
+    if (!displayNameOK) {
+      return;
+    }
 
-  const enableCompleteSignUp = displayNameOK;
+    void signUp({
-  const signUpWithDetails = async () => {
-    await signUp({
       displayName,
       generatedRecoveryPhrase,
     });
@@ -70,18 +84,18 @@ export const CreateAccount = () => {
             type="text"
             placeholder={window.i18n('enterDisplayName')}
             value={displayName}
-            maxLength={MAX_USERNAME_BYTES}
             onValueChanged={(name: string) => {
               sanitizeDisplayNameOrToast(name, setDisplayName, setDisplayNameError);
             }}
             onEnterPressed={signUpWithDetails}
+            error={displayNameError}
             inputDataTestId="display-name-input"
           />
           <SpacerLG />
           <SessionButton
+            buttonColor={SessionButtonColor.White}
             onClick={signUpWithDetails}
             text={window.i18n('continue')}
-            disabled={!enableCompleteSignUp}
           />
         </Flex>
       </BackButtonWithininContainer>

ts/components/registration/stages/RestoreAccount.tsx

@@ -1,6 +1,4 @@
 import { useState } from 'react';
-import { ToastUtils } from '../../../session/utils';
-import { sanitizeSessionUsername } from '../../../session/utils/String';
 import { AccountRestoration } from '../../../state/onboarding/ducks/registration';
 import { useOnboardAccountRestorationStep } from '../../../state/onboarding/selectors/registration';
 import { Flex } from '../../basic/Flex';
@@ -40,23 +38,6 @@ const SignInContinueButton = (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 RestoreAccount = () => {
   const step = useOnboardAccountRestorationStep();
 
@@ -108,7 +89,10 @@ export const RestoreAccount = () => {
             displayName={displayName}
             handlePressEnter={continueYourSession}
             onDisplayNameChanged={(name: string) => {
-              sanitizeDisplayNameOrToast(name, setDisplayName, setDisplayNameError);
+              // NOTE this is just dummy code for later
+              setDisplayName(name);
+              setDisplayNameError(name);
+              window.log.debug(`WIP: [displayName] ${displayName} `);
             }}
             onSeedChanged={(seed: string) => {
               setRecoveryPhrase(seed);

ts/session/constants.ts

@@ -68,6 +68,7 @@ export const VALIDATION = {
 export const DEFAULT_RECENT_REACTS = ['😂', '🥰', '😢', '😡', '😮', '😈'];
 export const REACT_LIMIT = 6;
 
+/** the useronfig wrapper name property character limit */
 export const MAX_USERNAME_BYTES = 64;
 
 export const FEATURE_RELEASE_TIMESTAMPS = {

ts/types/LocalizerKeys.ts

@@ -236,6 +236,7 @@ export type LocalizerKeys =
   | 'imageCaptionIconAlt'
   | 'incomingCallFrom'
   | 'incomingError'
+  | 'invalidDisplayNameTooLong'
   | 'invalidGroupNameTooLong'
   | 'invalidGroupNameTooShort'
   | 'invalidNumberError'