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

This reverts commit 3e249faf93.

packages/web/components/Setup/SetupUsername.tsx

@@ -3,7 +3,9 @@ import { FlexContainer } from 'components/Container';
 import { useSetupFlow } from 'contexts/SetupContext';
 import { useUpdatePlayerUsernameMutation } from 'graphql/autogen/types';
 import { useUser } from 'lib/hooks';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+
+const USERNAME_REGEX = /^[a-z0-9](_(?!(\.|_))|\.(?!(_|\.))|[a-z0-9]){2,18}[a-z0-9]$/;
 
 export type SetupUsernameProps = {
   username: string;
@@ -15,9 +17,14 @@ 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 () => {
@@ -29,15 +36,12 @@ export const SetupUsername: React.FC<SetupUsernameProps> = ({username, setUserna
     });
 
     if (error) {
-      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.';
-      }
+      const errorDescription = error.message.includes('Uniqueness violation')
+        ? 'Username already taken 😢'
+        : 'The octo is sad 😢';
       toast({
         title: 'Error',
-        description: `Unable to update Player Username. ${errorDetail}`,
+        description: `Unable to update Player Username. ${errorDescription}`,
         status: 'error',
         isClosable: true,
       });
@@ -59,11 +63,13 @@ 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"
       >