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/UpdatePasswordPage/UpdatePasswordPage.js

@@ -0,0 +1,78 @@
+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 UpdatePasswordPage = () => {
+  const { addMessage } = useFlash()
+  const { client } = useAuth()
+  const onSubmit = ({ password, confirm }) => {
+    if (password !== confirm || !password) {
+      addMessage("Passwords don't match, try again", {
+        classes: 'bg-red-300 text-red-900',
+      })
+      return
+    }
+    client
+      .currentUser()
+      .update({ password })
+      .then(() => {
+        addMessage('Password updated', { classes: 'rw-flash-success' })
+        setTimeout(() => {
+          navigate(routes.home())
+        }, 500)
+      })
+      .catch(() => {
+        addMessage('Problem updating password', {
+          classes: 'bg-red-300 text-red-900',
+        })
+      })
+  }
+  return (
+    <MainLayout>
+      <Seo title="Update Password" description="Update Password" lang="en-US" />
+
+      <section className="max-w-md mx-auto mt-20">
+        <h2 className="text-xl text-indigo-500 pb-4">Reset Password</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">
+              password:
+            </span>
+            <InputTextForm
+              className="text-xl"
+              name="password"
+              type="password"
+              validation={{
+                required: true,
+              }}
+            />
+            <span className="capitalize text-gray-500 text-sm align-middle my-3">
+              confirm:
+            </span>
+            <InputTextForm
+              className="text-xl"
+              name="confirm"
+              type="password"
+              validation={{
+                required: true,
+              }}
+            />
+          </div>
+          <Submit className="bg-indigo-200 text-indigo-800 p-2 px-4 shadow hover:shadow-lg mt-4 rounded">
+            Update
+          </Submit>
+        </Form>
+      </section>
+    </MainLayout>
+  )
+}
+
+export default UpdatePasswordPage

web/src/pages/UpdatePasswordPage/UpdatePasswordPage.stories.js

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

web/src/pages/UpdatePasswordPage/UpdatePasswordPage.test.js

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