feat: validate display names correctly when creating an account

if you use an empty name or just a space it will flag it with the correct error message

ts/components/registration/stages/CreateAccount.tsx

@@ -1,6 +1,7 @@
 import { isEmpty } from 'lodash';
 import { useDispatch } from 'react-redux';
 import useMount from 'react-use/lib/useMount';
+import { useState } from 'react';
 import { SettingsKey } from '../../../data/settings-key';
 import { mnDecode } from '../../../session/crypto/mnemonic';
 import { ProfileManager } from '../../../session/profile_manager/ProfileManager';
@@ -32,22 +33,21 @@ import { SessionInput } from '../../inputs';
 import { resetRegistration } from '../RegistrationStages';
 import { ContinueButton, OnboardDescription, OnboardHeading } from '../components';
 import { BackButtonWithinContainer } from '../components/BackButton';
-import { displayNameIsValid, sanitizeDisplayNameOrToast } from '../utils';
-import { RetrieveDisplayNameError } from '../../../session/utils/errors';
+import { sanitizeDisplayNameOrToast } from '../utils';
+import { EmptyDisplayNameError, RetrieveDisplayNameError } from '../../../session/utils/errors';
 import { localize } from '../../../localization/localeTools';
 
-export type AccountDetails = {
+type AccountCreateDetails = {
   recoveryPassword: string;
-  displayName?: string;
+  displayName: string;
 };
 
-async function signUp(signUpDetails: AccountDetails) {
+async function signUp(signUpDetails: AccountCreateDetails) {
   const { displayName, recoveryPassword } = signUpDetails;
 
   try {
-    const validDisplayName = displayNameIsValid(displayName);
     await resetRegistration();
-    await registerSingleDevice(recoveryPassword, 'english', validDisplayName);
+    await registerSingleDevice(recoveryPassword, 'english', displayName);
     await Storage.put(SettingsKey.hasSyncedInitialConfigurationItem, Date.now());
     await setSignWithRecoveryPhrase(false);
     trigger('openInbox');
@@ -64,6 +64,8 @@ export const CreateAccount = () => {
 
   const dispatch = useDispatch();
 
+  const [cannotContinue, setCannotContinue] = useState(true);
+
   const generateMnemonicAndKeyPair = async () => {
     if (recoveryPassword === '') {
       const mnemonic = await generateMnemonic();
@@ -89,13 +91,16 @@ export const CreateAccount = () => {
   });
 
   const signUpWithDetails = async () => {
-    if (isEmpty(displayName) || !isEmpty(displayNameError)) {
+    try {
+      const sanitizedName = sanitizeDisplayNameOrToast(displayName);
+
+      // this should never happen, but just in case
+      if (isEmpty(sanitizedName)) {
         return;
       }
 
-    try {
       // this throws if the display name is too long
-      const validName = await ProfileManager.updateOurProfileDisplayNameOnboarding(displayName);
+      const validName = await ProfileManager.updateOurProfileDisplayNameOnboarding(sanitizedName);
 
       await signUp({
         displayName: validName,
@@ -107,17 +112,18 @@ export const CreateAccount = () => {
       window.log.error(
         `[onboarding] create account: signUpWithDetails failed! Error: ${err.message || String(err)}`
       );
+
+      setCannotContinue(true);
       dispatch(setAccountCreationStep(AccountCreation.DisplayName));
 
-      if (err instanceof RetrieveDisplayNameError) {
+      if (err instanceof EmptyDisplayNameError || err instanceof RetrieveDisplayNameError) {
         dispatch(setDisplayNameError(localize('displayNameErrorDescription').toString()));
-        return;
-      }
-
+      } else {
         // Note: we have to assume here that libsession threw an error because the name was too long since we covered the other cases.
         // The error reported by libsession is not localized
         dispatch(setDisplayNameError(localize('displayNameErrorDescriptionShorter').toString()));
       }
+    }
   };
 
   return (
@@ -150,18 +156,15 @@ export const CreateAccount = () => {
           placeholder={window.i18n('displayNameEnter')}
           value={displayName}
           onValueChanged={(name: string) => {
-            const sanitizedName = sanitizeDisplayNameOrToast(name, setDisplayNameError, dispatch);
-            dispatch(setDisplayName(sanitizedName));
+            dispatch(setDisplayName(name));
+            setCannotContinue(false);
           }}
           onEnterPressed={signUpWithDetails}
           error={displayNameError}
           inputDataTestId="display-name-input"
         />
         <SpacerLG />
-        <ContinueButton
-          onClick={signUpWithDetails}
-          disabled={isEmpty(displayName) || !isEmpty(displayNameError)}
-        />
+        <ContinueButton onClick={signUpWithDetails} disabled={cannotContinue} />
       </Flex>
     </BackButtonWithinContainer>
   );