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/pages/AccountRecoveryPage/AccountRecoveryPage.js

@@ -0,0 +1,67 @@
+import { routes, navigate } from '@redwoodjs/router'
+import { useAuth } from '@redwoodjs/auth'
+import { Form, Submit } from '@redwoodjs/forms'
+import { useFlash } from '@redwoodjs/web'
+
+import InputTextForm from 'src/components/InputTextForm'
+import MainLayout from 'src/layouts/MainLayout'
+import Seo from 'src/components/Seo/Seo'
+
+const AccountRecoveryPage = () => {
+  const { addMessage } = useFlash()
+  const { client } = useAuth()
+  const onSubmit = ({ email }) => {
+    client
+      .requestPasswordRecovery(email)
+      .then(() => {
+        addMessage('Email sent', { classes: 'rw-flash-success' })
+        setTimeout(() => {
+          navigate(routes.home())
+        }, 500)
+      })
+      .catch(() => {
+        addMessage('Problem sending email', {
+          classes: 'bg-red-300 text-red-900',
+        })
+      })
+  }
+  return (
+    <MainLayout>
+      <Seo
+        title="Account recovery"
+        description="Send recovery email"
+        lang="en-US"
+      />
+
+      <section className="max-w-md mx-auto mt-20">
+        <h2 className="text-xl text-indigo-500 pb-4">Send recovery email</h2>
+        <Form onSubmit={onSubmit}>
+          <div
+            className="grid items-center gap-2"
+            style={{ gridTemplateColumns: 'auto 1fr' }}
+          >
+            <span className="capitalize text-gray-500 text-sm align-middle my-3">
+              email:
+            </span>
+            <InputTextForm
+              className="text-xl"
+              name="email"
+              validation={{
+                required: true,
+                pattern: {
+                  value: /[^@]+@[^.]+\..+/,
+                  message: 'please enter a valid email address',
+                },
+              }}
+            />
+          </div>
+          <Submit className="bg-indigo-200 text-indigo-800 p-2 px-4 shadow hover:shadow-lg mt-4 rounded">
+            Send email
+          </Submit>
+        </Form>
+      </section>
+    </MainLayout>
+  )
+}
+
+export default AccountRecoveryPage

web/src/pages/AccountRecoveryPage/AccountRecoveryPage.stories.js

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

web/src/pages/AccountRecoveryPage/AccountRecoveryPage.test.js

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