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/layouts/MainLayout/MainLayout.js

@@ -1,12 +1,12 @@
 import { useState, useEffect } from 'react'
-import { Link, routes } from '@redwoodjs/router'
+import { Link, routes, navigate } from '@redwoodjs/router'
 import { useAuth } from '@redwoodjs/auth'
-import { Flash } from '@redwoodjs/web'
+import { Flash, useQuery, useFlash } from '@redwoodjs/web'
 import Tooltip from '@material-ui/core/Tooltip'
-import { useQuery } from '@redwoodjs/web'
 import Popover from '@material-ui/core/Popover'
 import { getActiveClasses } from 'get-active-classes'
 import { useLocation } from '@redwoodjs/router'
+import LoginModal from 'src/components/LoginModal'
 import ReactGA from 'react-ga'
 
 export const QUERY = gql`
@@ -26,11 +26,13 @@ let previousSubmission = ''
 let previousUserID = ''
 
 const MainLayout = ({ children }) => {
-  const { logIn, logOut, isAuthenticated, currentUser } = useAuth()
+  const { logOut, isAuthenticated, currentUser, client } = useAuth()
+  const { addMessage } = useFlash()
   const { data, loading } = useQuery(QUERY, {
     skip: !currentUser?.sub,
     variables: { id: currentUser?.sub },
   })
+  const [isLoginModalOpen, setIsLoginModalOpen] = useState(false)
   const [isOpen, setIsOpen] = useState(false)
   const [anchorEl, setAnchorEl] = useState(null)
   const [popoverId, setPopoverId] = useState(undefined)
@@ -59,7 +61,7 @@ const MainLayout = ({ children }) => {
       category: 'login',
       action: 'navbar login',
     })
-    logIn()
+    setIsLoginModalOpen(true)
   }
 
   const { pathname, params } = useLocation()
@@ -85,6 +87,34 @@ const MainLayout = ({ children }) => {
       previousUserID = currentUser
     }
   }, [data, currentUser, isAuthenticated])
+  const hash = window.location.hash
+  useEffect(() => {
+    const [key, token] = hash.slice(1).split('=')
+    if (key === 'confirmation_token') {
+      console.log('confirming with', token)
+      client
+        .confirm(token, true)
+        .then(() => {
+          addMessage('Email confirmed', { classes: 'rw-flash-success' })
+        })
+        .catch(() => {
+          addMessage('Problem confirming email', {
+            classes: 'bg-red-300 text-red-900',
+          })
+        })
+    } else if (key === 'recovery_token') {
+      client
+        .recover(token, true)
+        .then(() => {
+          navigate(routes.updatePassword())
+        })
+        .catch(() => {
+          addMessage('Problem recovering account', {
+            classes: 'bg-red-300 text-red-900',
+          })
+        })
+    }
+  }, [hash, client]) // complaining about not having addMessage, however adding it puts useEffect into a loop
   return (
     <>
       <header id="cadhub-main-header">
@@ -198,7 +228,11 @@ const MainLayout = ({ children }) => {
           )}
         </nav>
       </header>
-      <Flash timeout={1000} />
+      <Flash timeout={1500} />
+      <LoginModal
+        open={isLoginModalOpen}
+        onClose={() => setIsLoginModalOpen(false)}
+      />
       <main>{children}</main>
     </>
   )