From 3ef18b4b92da64cf918d3392a0f4ef68bb666caa Mon Sep 17 00:00:00 2001
From: Alec LaLonde <alec@convergencelabs.com>
Date: Thu, 4 Mar 2021 16:37:59 -0700
Subject: [PATCH] Revert "Removed client-side username regex so as not to
 duplicate the server-side one"

This reverts commit 3e249faf9399e82fe278a857b472b4d919019a63.
---
 .../web/components/Setup/SetupUsername.tsx    | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/web/components/Setup/SetupUsername.tsx b/packages/web/components/Setup/SetupUsername.tsx
index 3669f66a..bf96af88 100644
--- a/packages/web/components/Setup/SetupUsername.tsx
+++ b/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"
       >