diff --git a/packages/web/components/Setup/SetupUsername.tsx b/packages/web/components/Setup/SetupUsername.tsx index bf96af88..3669f66a 100644 --- a/packages/web/components/Setup/SetupUsername.tsx +++ b/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 = ({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 = ({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 = ({username, setUserna onChange={(e: React.ChangeEvent) => setUsername(e.target.value) } - isInvalid={invalid} />