issue-129 Update signin/up ui-ux

Getting rid of the netlify widgit and rolling our own, gives us the
flexibility to also add the username into the signup process as well
as allow the user to opt into the newsletter at the same time.

Auth is still netlify, via their "gotrue", we're just handling the more
of it.

web/src/components/InputTextForm/InputTextForm.js

@@ -0,0 +1,34 @@
+import { getActiveClasses } from 'get-active-classes'
+import { TextField, FieldError } from '@redwoodjs/forms'
+import { useFormContext } from 'react-hook-form'
+
+const InputText = ({ type = 'text', className, name, validation }) => {
+  const { errors } = useFormContext()
+  return (
+    <>
+      <div className={getActiveClasses('relative inline-block', className)}>
+        <FieldError
+          className="absolute -my-4 text-sm text-red-500 font-ropa-sans"
+          name={name}
+        />
+        <div
+          className={getActiveClasses(
+            'absolute inset-0 mb-2 rounded bg-gray-200 shadow-inner',
+            { 'border border-red-500': errors[name] }
+          )}
+        />
+        <TextField
+          className={getActiveClasses(
+            'pl-2 pt-1 text-indigo-800 font-medium mb-px pb-px bg-transparent relative w-full'
+          )}
+          name={name}
+          readOnly={false}
+          type={type}
+          validation={validation}
+        />
+      </div>
+    </>
+  )
+}
+
+export default InputText

web/src/components/InputTextForm/InputTextForm.stories.js

@@ -0,0 +1,7 @@
+import InputTextForm from './InputTextForm'
+
+export const generated = () => {
+  return <InputTextForm />
+}
+
+export default { title: 'Components/InputTextForm' }

web/src/components/InputTextForm/InputTextForm.test.js

@@ -0,0 +1,11 @@
+import { render } from '@redwoodjs/testing'
+
+import InputTextForm from './InputTextForm'
+
+describe('InputTextForm', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<InputTextForm />)
+    }).not.toThrow()
+  })
+})

web/src/components/LandingSection/LandingSection.js

@@ -7,17 +7,18 @@ import {
 } from './mockEditorParts'
 import Svg from 'src/components/Svg'
 import OutBound from 'src/components/OutBound'
-import { useAuth } from '@redwoodjs/auth'
 import ReactGA from 'react-ga'
+import LoginModal from 'src/components/LoginModal'
+import { useState } from 'react'
 
 const LandingSection = () => {
-  const { logIn } = useAuth()
-  const recordedLogin = () => {
+  const [isLoginModalOpen, setIsLoginModalOpen] = useState(false)
+  const recordedLogin = async () => {
     ReactGA.event({
       category: 'login',
       action: 'landing section CTA',
     })
-    logIn()
+    setIsLoginModalOpen(true)
   }
   return (
     <div className="mt-16">
@@ -181,6 +182,11 @@ const LandingSection = () => {
           />
         </div>
       </div>
+      <LoginModal
+        open={isLoginModalOpen}
+        onClose={() => setIsLoginModalOpen(false)}
+        shouldStartWithSignup
+      />
     </div>
   )
 }

web/src/components/LoginModal/LoginModal.js

@@ -0,0 +1,189 @@
+import { useState } from 'react'
+import Dialog from '@material-ui/core/Dialog'
+import Tab from '@material-ui/core/Tab'
+import Tabs from '@material-ui/core/Tabs'
+import InputTextForm from 'src/components/InputTextForm'
+import OutBound from 'src/components/OutBound'
+import { Form, Submit } from '@redwoodjs/forms'
+import { useAuth } from '@redwoodjs/auth'
+import { useFlash } from '@redwoodjs/web'
+import { Link, routes } from '@redwoodjs/router'
+import { subscribe } from 'src/helpers/subscribe'
+
+const LoginModal = ({ open, onClose, shouldStartWithSignup = false }) => {
+  const { logIn, signUp } = useAuth()
+  const { addMessage } = useFlash()
+
+  const [tab, setTab] = useState(shouldStartWithSignup ? 0 : 1)
+  const onTabChange = (_, newValue) => {
+    setTab(newValue)
+    setError('')
+  }
+  const [checkBox, setCheckBox] = useState(true)
+  const [error, setError] = useState('')
+
+  const onSubmitSignUp = async ({ email, password, name, userName }) => {
+    try {
+      setError('')
+      if (checkBox) {
+        subscribe({ email, addMessage })
+      }
+      await signUp({
+        email,
+        password,
+        remember: { full_name: name, userName },
+      })
+      onClose()
+    } catch (errorEvent) {
+      setError(errorEvent?.json?.error_description)
+    }
+  }
+  const onSubmitSignIn = async ({ email, password }) => {
+    try {
+      setError('')
+      await logIn({ email, password, remember: true })
+      onClose()
+    } catch (errorEvent) {
+      setError(errorEvent?.json?.error_description)
+    }
+  }
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <div className="bg-gray-100 max-w-2xl rounded-lg shadow-lg">
+        <Tabs
+          value={tab}
+          onChange={onTabChange}
+          centered
+          textColor="primary"
+          indicatorColor="primary"
+        >
+          <Tab label="Sign Up" />
+          <Tab label="Sign In" />
+        </Tabs>
+        {error && (
+          <div className="text-sm text-red-500 font-ropa-sans pt-4 text-center">
+            {error}
+          </div>
+        )}
+        {tab === 0 ? (
+          <SignUpForm
+            onSubmitSignUp={onSubmitSignUp}
+            checkBox={checkBox}
+            setCheckBox={setCheckBox}
+          />
+        ) : (
+          <SignInForm onSubmitSignIn={onSubmitSignIn} />
+        )}
+      </div>
+    </Dialog>
+  )
+}
+
+const Field = ({ name, type = 'text', validation }) => (
+  <>
+    <span className="capitalize text-gray-500 text-sm align-middle my-3">
+      {name}:
+    </span>
+    <InputTextForm
+      type={type}
+      className="text-xl"
+      name={name}
+      validation={validation}
+    />
+  </>
+)
+
+const HeroButton = ({ text }) => (
+  <Submit className="bg-texture bg-purple-800 py-6 w-full flex items-center justify-center rounded-b border border-indigo-300 border-opacity-0 hover:border-opacity-100 hover:shadow-xl">
+    <span className="font-bold text-2xl text-indigo-200">{text}</span>
+  </Submit>
+)
+
+const SignInForm = ({ onSubmitSignIn }) => (
+  <Form className="w-full" onSubmit={onSubmitSignIn}>
+    <div className="p-8">
+      <div
+        className="grid items-center gap-2"
+        style={{ gridTemplateColumns: 'auto 1fr' }}
+      >
+        <Field
+          name="email"
+          validation={{
+            required: true,
+            pattern: {
+              value: /[^@]+@[^.]+\..+/,
+              message: 'please enter a valid email address',
+            },
+          }}
+        />
+        <Field
+          name="password"
+          type="password"
+          validation={{ required: true }}
+        />
+      </div>
+      <Link
+        to={routes.accountRecovery()}
+        className="underline text-sm text-gray-500 block text-center"
+      >
+        forgot your password?
+      </Link>
+    </div>
+    <HeroButton text="Sign In" />
+  </Form>
+)
+
+const SignUpForm = ({ onSubmitSignUp, checkBox, setCheckBox }) => (
+  <Form className="w-full" onSubmit={onSubmitSignUp}>
+    <div className="p-8">
+      <div
+        className="grid items-center gap-2"
+        style={{ gridTemplateColumns: 'auto 1fr' }}
+      >
+        <Field name="name" validation={{ required: true }} />
+        <Field
+          name="userName"
+          validation={{
+            required: true,
+            pattern: {
+              value: /^[a-zA-Z0-9-_]+$/,
+              message: 'Only alphanumeric and dash characters allowed',
+            },
+          }}
+        />
+        <Field
+          name="email"
+          validation={{
+            required: true,
+            pattern: {
+              value: /[^@]+@[^.]+\..+/,
+              message: 'please enter a valid email address',
+            },
+          }}
+        />
+        <Field
+          name="password"
+          type="password"
+          validation={{ required: true }}
+        />
+      </div>
+      <div className="flex pt-4">
+        <input
+          type="checkbox"
+          checked={checkBox}
+          onChange={() => setCheckBox(!checkBox)}
+        />{' '}
+        <span className="pl-4 text-gray-500 text-sm max-w-sm">
+          Stay up-to-date with CadHub's progress with the founder's (
+          <OutBound className="underline" to="https://twitter.com/IrevDev">
+            Kurt's
+          </OutBound>
+          ) newsletter
+        </span>
+      </div>
+    </div>
+    <HeroButton text="Sign Up" />
+  </Form>
+)
+
+export default LoginModal

web/src/components/LoginModal/LoginModal.stories.js

@@ -0,0 +1,7 @@
+import LoginModal from './LoginModal'
+
+export const generated = () => {
+  return <LoginModal open={true} />
+}
+
+export default { title: 'Components/LoginModal' }

web/src/components/LoginModal/LoginModal.test.js

@@ -0,0 +1,11 @@
+import { render } from '@redwoodjs/testing'
+
+import LoginModal from './LoginModal'
+
+describe('LoginModal', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<LoginModal />)
+    }).not.toThrow()
+  })
+})