Copied over changes, nuked old Signup page

Author: kevin-pierce

frontend/src/components/auth/Signup.tsx

@@ -1,6 +1,14 @@
 import React, { useContext } from "react";
 import { Redirect, useHistory } from "react-router-dom";
-import { Box, Button, Flex, Input, Text } from "@chakra-ui/react";
+import { 
+  Box, 
+  Button, 
+  Flex, 
+  FormControl, 
+  FormErrorMessage,
+  Input, 
+  Text 
+} from "@chakra-ui/react";
 import authAPIClient from "../../APIClients/AuthAPIClient";
 import { HOME_PAGE, LOGIN_PAGE } from "../../constants/Routes";
 import AuthContext from "../../contexts/AuthContext";
@@ -18,6 +26,8 @@ type SignupProps = {
   setPassword: (password: string) => void;
   toggle: boolean;
   setToggle: (toggle: boolean) => void;
+  emailError: boolean;
+  setEmailError: (emailError: boolean) => void;
 };
 
 const Signup = ({
@@ -31,10 +41,28 @@ const Signup = ({
   setPassword,
   toggle,
   setToggle,
+  emailError,
+  setEmailError
 }: SignupProps): React.ReactElement => {
   const { authenticatedUser, setAuthenticatedUser } = useContext(AuthContext);
   const history = useHistory();
 
+  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const inputValue = e.target.value as string;
+    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+    if (emailRegex.test(inputValue)) {
+      setEmailError(false)
+    } else {
+      setEmailError(true)
+    }
+    setEmail(inputValue)
+  };
+
+  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const inputValue = e.target.value as string;
+    setPassword(inputValue)
+  }
+
   const onSignupClick = async () => {
     const isInvited = await commonApiClient.isUserInvited(email);
     if (isInvited) {
@@ -56,14 +84,11 @@ const Signup = ({
           setAuthenticatedUser(authUser);
         }
       }
-    } else {
-      // TODO: make this alert better and also differentiate between
-      // when a user is not invited and when a user's account already exists
-      // eslint-disable-next-line no-alert
-      window.alert("user not invited");
     }
   };
 
+  const isCreateAccountBtnDisabled = () => emailError || email === '' || password === '' || firstName === '' || lastName === ''
+
   const onLogInClick = () => {
     history.push(LOGIN_PAGE);
   };
@@ -76,74 +101,54 @@ const Signup = ({
     return (
       <Flex h="100vh">
         <Box w="47%">
-          <Flex
-            display="flex"
-            alignItems="flex-start"
-            position="absolute"
-            top="17.5%"
-            left="6%"
-            w="100%"
-          >
-            <Text variant="login" position="absolute">
-              Sign Up
-            </Text>
-          </Flex>
-          <Flex
-            h="40%"
-            w="36%"
-            top="28%"
-            left="6%"
-            direction="column"
-            position="absolute"
-            justifyContent="space-between"
+          <Flex 
+            marginTop="172px" 
+            display="flex" 
+            align="center" 
+            justify="center"
           >
-            <Box>
+            <Flex
+              width="76%"
+              align="flex-start"
+              direction="column"
+              gap="28px"
+            >
+              <Text variant="login" paddingBottom="12px">
+                Sign Up
+              </Text>
               <Input
                 variant="login"
-                position="absolute"
                 placeholder="Your first name"
                 value={firstName}
                 onChange={(event) => setFirstName(event.target.value)}
               />
-            </Box>
-            <Box>
               <Input
                 variant="login"
-                position="absolute"
                 placeholder="Your last name"
                 value={lastName}
                 onChange={(event) => setLastName(event.target.value)}
               />
-            </Box>
-            <Box>
-              <Input
-                variant="login"
-                position="absolute"
-                placeholder="Your email"
-                value={email}
-                onChange={(event) => setEmail(event.target.value)}
-              />
-            </Box>
-            <Box>
-              <Input
-                variant="login"
-                type="password"
-                position="absolute"
-                placeholder="Your password"
-                value={password}
-                onChange={(event) => setPassword(event.target.value)}
-              />
-            </Box>
-            <Box>
+              <FormControl isRequired isInvalid={emailError}>
+                <Input
+                  variant="login"
+                  placeholder="Your email"
+                  value={email}
+                  onChange={handleEmailChange}
+                />
+                <FormErrorMessage>Please enter a valid email.</FormErrorMessage>
+              </FormControl>
+              <FormControl isRequired>
+                <Input
+                  variant="login"
+                  type="password"
+                  placeholder="Your password"
+                  value={password}
+                  onChange={handlePasswordChange}
+                />
+              </FormControl>
               <Button
                 variant="login"
-                position="absolute"
-                disabled={
-                  email === "" ||
-                  password === "" ||
-                  firstName === "" ||
-                  lastName === ""
-                }
+                disabled={isCreateAccountBtnDisabled()}
                 _hover={
                   email && password && firstName && lastName
                     ? {
@@ -157,22 +162,18 @@ const Signup = ({
               >
                 Create Account
               </Button>
-            </Box>
-          </Flex>
-          <Flex
-            top="80%"
-            left="6%"
-            width="100%"
-            direction="row"
-            position="absolute"
-            alignContent="center"
-          >
-            <Text variant="loginSecondary" paddingRight="1.1%">
-              Already have an account?
-            </Text>
-            <Text variant="loginTertiary" onClick={onLogInClick}>
-              Log In Now
-            </Text>
+              <Flex
+                paddingTop="29px"
+                alignContent="center"
+              >
+                <Text variant="loginSecondary" paddingRight="17px">
+                  Already have an account?
+                </Text>
+                <Text variant="loginTertiary" onClick={onLogInClick}>
+                  Log In Now
+                </Text>
+              </Flex>
+            </Flex>
           </Flex>
         </Box>
         <Box flex="1" bg="teal.400">

frontend/src/components/forms/Signup.tsx

@@ -8,6 +8,7 @@ const SignupPage = (): React.ReactElement => {
   const [lastName, setLastName] = useState("");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [emailError, setEmailError] = useState(false);
 
   return (
     <>
@@ -22,6 +23,8 @@ const SignupPage = (): React.ReactElement => {
         setPassword={setPassword}
         toggle={toggle}
         setToggle={setToggle}
+        emailError={emailError}
+        setEmailError={setEmailError}
       />
       <Authy email={email} password={password} token="" toggle={!toggle} />
     </>