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
+        <span className="text-accents-8">
-          variant="slim"
+          <Info
-          onClick={() => handleSignup()}
+            width="20"
-          loading={loading}
+            height="20"
-          disabled={disabled}
+            className="inline-block mr-1 text-accents-8"
-        >
+          />
-          Sign Up
+          <strong>Info</strong>: Password must be longer than 7 chars and
-        </Button>
+          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>
           {` `}

components/core/Layout/Layout.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react'
+import { FC, useCallback, useEffect, useState } from 'react'
 import cn from 'classnames'
 import { useRouter } from 'next/router'
 import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
@@ -10,7 +10,7 @@ import { LoginView, SignUpView } from '@components/auth'
 import { useUI } from '@components/ui/context'
 import { usePreventScroll } from '@react-aria/overlays'
 import s from './Layout.module.css'
-
+import debounce from 'lodash.debounce'
 interface Props {
   pageProps: {
     pages?: Page[]
@@ -29,26 +29,26 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
   const [hasScrolled, setHasScrolled] = useState(false)
   const { locale = 'en-US' } = useRouter()
 
-  // TODO: Update code, add throttle and more.
-  // TODO: Make sure to not do any unnecessary updates as it's doing right now
-  useEffect(() => {
-    const offset = 0
-    function handleScroll() {
-      const { scrollTop } = document.documentElement
-      if (scrollTop > offset) setHasScrolled(true)
-      else setHasScrolled(false)
-    }
-    document.addEventListener('scroll', handleScroll)
-
-    return () => {
-      document.removeEventListener('scroll', handleScroll)
-    }
-  }, [])
-
   usePreventScroll({
     isDisabled: !(displaySidebar || displayModal),
   })
 
+  const handleScroll = useCallback(() => {
+    debounce(() => {
+      const offset = 0
+      const { scrollTop } = document.documentElement
+      if (scrollTop > offset) setHasScrolled(true)
+      else setHasScrolled(false)
+    }, 1)
+  }, [])
+
+  useEffect(() => {
+    document.addEventListener('scroll', handleScroll)
+    return () => {
+      document.removeEventListener('scroll', handleScroll)
+    }
+  }, [handleScroll])
+
   return (
     <CommerceProvider locale={locale}>
       <div className={cn(s.root)}>

components/icon/Info.tsx

@@ -0,0 +1,22 @@
+const Info = ({ ...props }) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      fill="none"
+      shape-rendering="geometricPrecision"
+      {...props}
+    >
+      <circle cx="12" cy="12" r="10" fill="transparent" />
+      <path d="M12 8v4" stroke="currentColor" />
+      <path d="M12 16h.01" stroke="currentColor" />
+    </svg>
+  )
+}
+
+export default Info

components/icon/index.ts

@@ -11,3 +11,4 @@ export { default as Moon } from './Moon'
 export { default as Github } from './Github'
 export { default as DoubleChevron } from './DoubleChevron'
 export { default as RightArrow } from './RightArrow'
+export { default as Info } from './Info'

components/ui/Input/Input.tsx

@@ -19,7 +19,17 @@ const Input: React.FC<Props> = (props) => {
     return null
   }
 
-  return <input className={rootClassName} onChange={handleOnChange} {...rest} />
+  return (
+    <input
+      className={rootClassName}
+      onChange={handleOnChange}
+      autoComplete="off"
+      autoCorrect="off"
+      autoCapitalize="off"
+      spellCheck="false"
+      {...rest}
+    />
+  )
 }
 
 export default Input

yarn.lock

@@ -5435,6 +5435,11 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "^3.0.0"
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+
 lodash.toarray@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"