Sign Up Working

components/auth/SignUpView.tsx

@@ -1,77 +1,78 @@
 import { FC, useEffect, useState } from 'react'
-import { Logo, Modal, Button, Input } from '@components/ui'
+import { Logo, Button, Input } from '@components/ui'
 import useSignup from '@lib/bigcommerce/use-signup'
-import useLogin from '@lib/bigcommerce/use-login'
 import { useUI } from '@components/ui/context'
+import { validate } from 'email-validator'
 
 interface Props {}
 
+interface Error {
+  code: string
+  message: string
+}
+
 const LoginView: FC<Props> = () => {
+  // Form State
   const [email, setEmail] = useState('')
-  const [pass, setPass] = useState('')
+  const [password, setPassword] = useState('')
+  const [firstName, setFirstName] = useState('')
+  const [lastName, setLastName] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [disabled, setDisabled] = useState(true)
+  const [message, setMessage] = useState('')
 
   const signup = useSignup()
-  const login = useLogin()
-  const { setModalView } = useUI()
-  // // Data about the currently logged in customer, it will update
-  // // automatically after a signup/login/logout
-  // const { data } = useCustomer()
-  // TODO: use this method. It can take more than 5 seconds to do a signup
+  const { setModalView, closeModal } = useUI()
+
   const handleSignup = async () => {
-    // TODO: validate the password and email before calling the signup
-    // Passwords must be at least 7 characters and contain both alphabetic
-    // and numeric characters.
     try {
+      setLoading(true)
+      setMessage('')
       await signup({
-        // This account already exists, so it will throw the "duplicated_email" error
-        email: 'luis@vercel.com',
-        firstName: 'Luis',
-        lastName: 'Alvarez',
-        password: 'luis123',
+        email,
+        firstName,
+        lastName,
+        password,
       })
-    } catch (error) {
-      if (error.code === 'duplicated_email') {
-        // TODO: handle duplicated email
-      }
-      // Show a generic error saying that something bad happened, try again later
+      setLoading(false)
+      closeModal()
+    } catch ({ errors }) {
+      setMessage(errors[0].message)
+      setLoading(false)
     }
   }
 
-  const handleLogin = async () => {
-    // TODO: validate the password and email before calling the signup
-    // Passwords must be at least 7 characters and contain both alphabetic
-    // and numeric characters.
-    try {
-      await login({
-        email: 'luis@vercel.com',
-        // This is an invalid password so it will throw the "invalid_credentials" error
-        password: 'luis1234', // will work with `luis123`
-      })
-    } catch (error) {
-      if (error.code === 'invalid_credentials') {
-        // The email and password didn't match an existing account
-      }
-      // Show a generic error saying that something bad happened, try again later
-    }
-  }
+  useEffect(() => {
+    // Test for Alphanumeric password
+    const validPassword = /^(?=.*[a-zA-Z])(?=.*[0-9])/.test(password)
+
+    // Unable to send form unless fields are valid.
+    setDisabled(!validate(email) || password.length < 7 || !validPassword)
+  }, [email, password])
 
   return (
-    <div className="h-80 w-80 flex flex-col justify-between py-3 px-3">
+    <div className="w-80 flex flex-col justify-between p-3">
       <div className="flex justify-center pb-12 ">
         <Logo width="64px" height="64px" />
       </div>
       <div className="flex flex-col space-y-3">
-        <div className="border border-accents-3 text-accents-6">
-          <Input placeholder="Email" onChange={setEmail} />
-        </div>
-        <div className="border border-accents-3 text-accents-6">
-          <Input placeholder="Password" onChange={setEmail} />
-        </div>
-        <Button variant="slim" onClick={handleSignup}>
+        {message && (
+          <div className="text-red border border-red p-3">{message}</div>
+        )}
+        <Input placeholder="First Name" onChange={setFirstName} />
+        <Input placeholder="Last Name" onChange={setLastName} />
+        <Input placeholder="Email" onChange={setEmail} />
+        <Input placeholder="Password" onChange={setPassword} />
+        <Button
+          variant="slim"
+          onClick={() => handleSignup()}
+          loading={loading}
+          disabled={disabled}
+        >
           Sign Up
         </Button>
         <span className="pt-3 text-center text-sm">
-          <span className="text-accents-7">Don't have an account?</span>
+          <span className="text-accents-7">Do you have an account?</span>
           {` `}
           <a
             className="text-accent-9 font-bold hover:underline cursor-pointer"

components/ui/Button/Button.module.css

@@ -24,3 +24,12 @@
 .slim {
   @apply py-2 transform-none normal-case;
 }
+
+.disabled,
+.disabled:hover {
+  @apply text-accents-4 border-accents-2 bg-accents-1 cursor-not-allowed;
+  filter: grayscale(1);
+  -webkit-transform: translateZ(0);
+  -webkit-perspective: 1000;
+  -webkit-backface-visibility: hidden;
+}

components/ui/Button/Button.tsx

@@ -19,6 +19,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   Component?: string | JSXElementConstructor<any>
   width?: string | number
   loading?: boolean
+  disabled?: boolean
 }
 
 const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
@@ -28,10 +29,10 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
     children,
     active,
     onClick,
-    disabled,
     width,
     Component = 'button',
     loading = false,
+    disabled = false,
     style = {},
     ...rest
   } = props
@@ -52,6 +53,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
     {
       [s.slim]: variant === 'slim',
       [s.loading]: loading,
+      [s.disabled]: disabled,
     },
     className
   )
@@ -64,6 +66,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
       {...buttonProps}
       data-active={isPressed ? '' : undefined}
       className={rootClassName}
+      disabled={disabled}
       style={{
         width,
         ...style,

components/ui/Input/Input.module.css

@@ -1,4 +1,5 @@
 .root {
-  @apply focus:outline-none bg-primary focus:shadow-outline-gray border-none py-2 
-  px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10;
+  @apply focus:outline-none bg-primary focus:shadow-outline-gray py-2 
+  px-6 w-full appearance-none transition duration-150 ease-in-out 
+  placeholder-accents-5 pr-10 border border-accents-3 text-accents-6;
 }

package.json

@@ -25,6 +25,7 @@
     "bowser": "^2.11.0",
     "classnames": "^2.2.6",
     "cookie": "^0.4.1",
+    "email-validator": "^2.0.4",
     "intersection-observer": "^0.11.0",
     "js-cookie": "^2.2.1",
     "keen-slider": "^5.2.4",

yarn.lock

@@ -3907,6 +3907,11 @@ elliptic@^6.5.3:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
+email-validator@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/email-validator/-/email-validator-2.0.4.tgz#b8dfaa5d0dae28f1b03c95881d904d4e40bfe7ed"
+  integrity sha512-gYCwo7kh5S3IDyZPLZf6hSS0MnZT8QmJFqYvbqlDZSbwdZlY6QZWxJ4i/6UhITOJ4XzyI647Bm2MXKCLqnJ4nQ==
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"