[CUTL-133] 🔄 (Login/Forgot Password) Store email so that we can sha…

…re it across both pages

--

app/pages/Login/Login.js

@@ -29,8 +29,11 @@ const Login = ({ location }) => {
   const { message: error, showMessage: showError } = useFlashMessage(null)
   const { message: redirectedMessage, showMessage: showRedirectedMessage } = useFlashMessage(null)
 
+  // State
   const [loading, setLoading] = useState(false)
+  const [email, setEmail] = useState('')
 
+  // Context
   const { setCurrentUser, setCurrentTokens } = useContext(UserStoreContext)
 
   /**
@@ -78,10 +81,11 @@ const Login = ({ location }) => {
           <FormField
             label="Email"
             name="email"
+            onChange={e => setEmail(e.target.value)}
             required
             validate={[
-              email => {
-                if (email && !isEmail(email)) return 'Please enter a valid email address'
+              e => {
+                if (e && !isEmail(e)) return 'Please enter a valid email address'
                 return undefined
               },
             ]}
@@ -115,7 +119,9 @@ const Login = ({ location }) => {
             />
           </Box>
 
-          <Link to="/password-reset-request">Forgot Password?</Link>
+          <Link to={{ pathname: '/password-reset-request', state: { email } }}>
+            Forgot Password?
+          </Link>
 
           {/* Status Messages */}
           <Box>{error && <Message message={error} isError />}</Box>

app/pages/PasswordReset/PasswordReset.js

@@ -31,11 +31,15 @@ import { RootStoreContext } from '../../stores/RootStore'
  *
  */
 const PasswordReset = observer(({ location }) => {
+  // Message
+  const { message: error, showMessage: showError } = useFlashMessage(null)
+
+  // State
   const [loading, setLoading] = useState(false)
   const [redirect, setRedirect] = useState(false)
   const [tokenError, setTokenError] = useState(false)
-  const { message: error, showMessage: showError } = useFlashMessage(null)
 
+  // Context
   const {
     clearStore,
     user: { isAuthenticated },

app/pages/PasswordResetRequest/PasswordResetRequest.js

@@ -1,6 +1,7 @@
 /* @flow */
 import React, { useEffect, useState } from 'react'
 import { isEmail } from 'validator'
+import PropTypes from 'prop-types'
 
 // Components
 import { Box } from 'components/Box'
@@ -23,12 +24,21 @@ import { forgotPassword } from '../../services/user.service'
  * PasswordResetRequest
  *
  */
-const PasswordResetRequest = () => {
+const PasswordResetRequest = ({ location }) => {
+  // Mesage
   const { message: error, showMessage: showError } = useFlashMessage(null)
 
+  // State
   const [loading, setLoading] = useState(false)
-
   const [success, setSuccess] = useState(false)
+  const [email, setEmail] = useState('')
+
+  useEffect(() => {
+    if (location && location.state && location.state.email) {
+      setEmail(location.state.email)
+    }
+  }, [])
+
   useEffect(() => {
     document.getElementById('reset-password-request-form').reset()
   }, [success])
@@ -55,13 +65,14 @@ const PasswordResetRequest = () => {
             name="email"
             required
             validate={[
-              email => {
-                if (email && !isEmail(email)) return 'Please enter a valid email address'
+              e => {
+                if (e && !isEmail(e)) return 'Please enter a valid email address'
                 return undefined
               },
             ]}
+            value={email}
           >
-            <TextInput type="email" />
+            <TextInput type="email" value={email} />
           </FormField>
 
           {/* Submit */}
@@ -78,4 +89,8 @@ const PasswordResetRequest = () => {
   )
 }
 
+PasswordResetRequest.propTypes = {
+  location: PropTypes.object.isRequired,
+}
+
 export default PasswordResetRequest