Revert "Revert "Removed client-side username regex so as not to duplicate the server-side one""

This reverts commit 3ef18b4b92.

packages/web/components/Setup/SetupUsername.tsx

@@ -3,9 +3,7 @@ import { FlexContainer } from 'components/Container';
 import { useSetupFlow } from 'contexts/SetupContext';
 import { useUpdatePlayerUsernameMutation } from 'graphql/autogen/types';
 import { useUser } from 'lib/hooks';
-import React, { useEffect, useState } from 'react';
-
-const USERNAME_REGEX = /^[a-z0-9](_(?!(\.|_))|\.(?!(_|\.))|[a-z0-9]){2,18}[a-z0-9]$/;
+import React from 'react';
 
 export type SetupUsernameProps = {
   username: string;
@@ -17,14 +15,9 @@ export const SetupUsername: React.FC<SetupUsernameProps> = ({username, setUserna
     onNextPress,
     nextButtonLabel
   } = useSetupFlow();
-  const [invalid, setInvalid] = useState(false);
   const { user } = useUser({ redirectTo: '/' });
   const toast = useToast();
 
-  useEffect(() => {
-    setInvalid(!USERNAME_REGEX.test(username));
-  }, [username]);
-
   const [updateUsernameRes, updateUsername] = useUpdatePlayerUsernameMutation();
 
   const handleNextPress = async () => {
@@ -36,12 +29,15 @@ export const SetupUsername: React.FC<SetupUsernameProps> = ({username, setUserna
     });
 
     if (error) {
-      const errorDescription = error.message.includes('Uniqueness violation')
-        ? 'Username already taken 😢'
-        : 'The octo is sad 😢';
+      let errorDetail = 'The octo is sad 😢';
+      if (error.message.includes('Uniqueness violation')) {
+        errorDetail = 'This username is already taken 😢';
+      } else if (error.message.includes('username_is_valid')) {
+        errorDetail = 'A username can only contain letters, numbers, and dashes.';
+      }
       toast({
         title: 'Error',
-        description: `Unable to update Player Username. ${errorDescription}`,
+        description: `Unable to update Player Username. ${errorDetail}`,
         status: 'error',
         isClosable: true,
       });
@@ -63,13 +59,11 @@ export const SetupUsername: React.FC<SetupUsernameProps> = ({username, setUserna
         onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
           setUsername(e.target.value)
         }
-        isInvalid={invalid}
       />
 
       <MetaButton
         onClick={handleNextPress}
         mt={10}
-        isDisabled={invalid}
         isLoading={updateUsernameRes.fetching}
         loadingText="Saving"
       >