Adding info for Login In

components/auth/LoginView.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react'
+import { FC, useEffect, useState, useCallback } from 'react'
 import { Logo, Modal, Button, Input } from '@components/ui'
 import useLogin from '@lib/bigcommerce/use-login'
 import { useUI } from '@components/ui/context'
@@ -39,7 +39,7 @@ const LoginView: FC<Props> = () => {
     }
   }
 
-  const handleValidation = () => {
+  const handleValidation = useCallback(() => {
     // Test for Alphanumeric password
     const validPassword = /^(?=.*[a-zA-Z])(?=.*[0-9])/.test(password)
 
@@ -47,11 +47,11 @@ const LoginView: FC<Props> = () => {
     if (dirty) {
       setDisabled(!validate(email) || password.length < 7 || !validPassword)
     }
-  }
+  }, [email, password, dirty])
 
   useEffect(() => {
     handleValidation()
-  }, [email, password, dirty])
+  }, [handleValidation])
 
   return (
     <div className="w-80 flex flex-col justify-between p-3">

components/auth/SignUpView.tsx

@@ -1,8 +1,9 @@
-import { FC, useEffect, useState } from 'react'
+import { FC, useEffect, useState, useCallback } from 'react'
+import { validate } from 'email-validator'
+import { Info } from '@components/icon'
+import { useUI } from '@components/ui/context'
 import { Logo, Button, Input } from '@components/ui'
 import useSignup from '@lib/bigcommerce/use-signup'
-import { useUI } from '@components/ui/context'
-import { validate } from 'email-validator'
 
 interface Props {}
 
@@ -43,7 +44,7 @@ const SignUpView: FC<Props> = () => {
     }
   }
 
-  const handleValidation = () => {
+  const handleValidation = useCallback(() => {
     // Test for Alphanumeric password
     const validPassword = /^(?=.*[a-zA-Z])(?=.*[0-9])/.test(password)
 
@@ -51,18 +52,18 @@ const SignUpView: FC<Props> = () => {
     if (dirty) {
       setDisabled(!validate(email) || password.length < 7 || !validPassword)
     }
-  }
+  }, [email, password, dirty])
 
   useEffect(() => {
     handleValidation()
-  }, [email, password, dirty])
+  }, [handleValidation])
 
   return (
     <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="flex flex-col space-y-4">
         {message && (
           <div className="text-red border border-red p-3">{message}</div>
         )}
@@ -70,14 +71,26 @@ const SignUpView: FC<Props> = () => {
         <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="text-accents-8">
+          <Info
+            width="20"
+            height="20"
+            className="inline-block mr-1 text-accents-8"
+          />
+          <strong>Info</strong>: Password must be longer than 7 chars and
+          include numbers.
+        </span>
+        <div className="pt-2 w-full flex flex-col">
+          <Button
+            variant="slim"
+            onClick={() => handleSignup()}
+            loading={loading}
+            disabled={disabled}
+          >
+            Sign Up
+          </Button>
+        </div>
+
         <span className="pt-3 text-center text-sm">
           <span className="text-accents-7">Do you have an account?</span>
           {` `}