From 633a813f4cb15027be362b3b4bb0516509491753 Mon Sep 17 00:00:00 2001 From: Marisa Gomez Date: Mon, 16 Nov 2020 11:56:55 -0500 Subject: [PATCH 1/2] =?UTF-8?q?[CUTL-133]=20=F0=9F=94=84=20(Login/Forgot?= =?UTF-8?q?=20Password)=20Store=20`email`=20so=20that=20we=20can=20share?= =?UTF-8?q?=20it=20across=20both=20pages?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit -- --- app/pages/Login/Login.js | 12 ++++++--- app/pages/PasswordReset/PasswordReset.js | 6 ++++- .../PasswordResetRequest.js | 25 +++++++++++++++---- 3 files changed, 34 insertions(+), 9 deletions(-) diff --git a/app/pages/Login/Login.js b/app/pages/Login/Login.js index 3babccf..87a2900 100644 --- a/app/pages/Login/Login.js +++ b/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 }) => { 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 }) => { /> - Forgot Password? + + Forgot Password? + {/* Status Messages */} {error && } diff --git a/app/pages/PasswordReset/PasswordReset.js b/app/pages/PasswordReset/PasswordReset.js index f3001fa..b73ad26 100644 --- a/app/pages/PasswordReset/PasswordReset.js +++ b/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 }, diff --git a/app/pages/PasswordResetRequest/PasswordResetRequest.js b/app/pages/PasswordResetRequest/PasswordResetRequest.js index 3b6b2f2..1927a68 100644 --- a/app/pages/PasswordResetRequest/PasswordResetRequest.js +++ b/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} > - + {/* Submit */} @@ -78,4 +89,8 @@ const PasswordResetRequest = () => { ) } +PasswordResetRequest.propTypes = { + location: PropTypes.object.isRequired, +} + export default PasswordResetRequest From eba0990d5e8c46acb030702cde8e5179e86c47fa Mon Sep 17 00:00:00 2001 From: Marisa Gomez Date: Wed, 23 Feb 2022 13:41:58 -0500 Subject: [PATCH 2/2] =?UTF-8?q?[CUTL-140]=20=F0=9F=94=84=20(Base)=20Update?= =?UTF-8?q?=20implementation=20for=20passing=20`email`=20field=20through?= =?UTF-8?q?=20various=20forms?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Clean up code a bit - Switch out `Link`s for regular `Button`s so that we can pass refs through route state - Add reference to the login email field so that we can pass the value through to the forgot password and sign up pages --- .../__snapshots__/PublicRoute.test.js.snap | 32 +++++++---- app/components/TextInput/README.md | 2 +- app/components/TextInput/TextInput.js | 8 +-- app/pages/Login/Login.js | 55 ++++++++++++++----- .../PasswordResetRequest.js | 32 ++++++----- app/pages/Register/Register.js | 46 ++++++++++++---- 6 files changed, 121 insertions(+), 54 deletions(-) diff --git a/app/components/PublicRoute/__snapshots__/PublicRoute.test.js.snap b/app/components/PublicRoute/__snapshots__/PublicRoute.test.js.snap index c59367f..6b28353 100644 --- a/app/components/PublicRoute/__snapshots__/PublicRoute.test.js.snap +++ b/app/components/PublicRoute/__snapshots__/PublicRoute.test.js.snap @@ -36,13 +36,17 @@ exports[` renders Login if user is not authenticated 1`] = ` > Login - - or Create An Account - + + or Create An Account + +
renders Login if user is not authenticated 1`] = ` Login - - Forgot Password? - + + Forgot Password? + +
diff --git a/app/components/TextInput/README.md b/app/components/TextInput/README.md index a73e93e..03bcc97 100644 --- a/app/components/TextInput/README.md +++ b/app/components/TextInput/README.md @@ -1,5 +1,5 @@ -## TextInput +## undefined A control to input a single line of text, with optional suggestions. ## Usage diff --git a/app/components/TextInput/TextInput.js b/app/components/TextInput/TextInput.js index f1d2b6f..1d7ff1c 100644 --- a/app/components/TextInput/TextInput.js +++ b/app/components/TextInput/TextInput.js @@ -1,5 +1,5 @@ /* eslint-disable react/prop-types */ -import React from 'react' +import React, { forwardRef } from 'react' // Components import { TextInput as GrommetTextInput } from 'grommet' @@ -13,9 +13,9 @@ import { createWithDoc } from '../../utils/helpers' * TextInput * */ -const TextInput = ({ name, type, ...rest }) => ( - -) +const TextInput = forwardRef(({ name, type, ...rest }, ref) => ( + +)) export default createWithDoc({ envName: process.env.NODE_ENV, diff --git a/app/pages/Login/Login.js b/app/pages/Login/Login.js index 87a2900..5176447 100644 --- a/app/pages/Login/Login.js +++ b/app/pages/Login/Login.js @@ -1,7 +1,8 @@ /* @flow */ -import React, { useContext, useEffect, useState } from 'react' +import React, { useContext, useEffect, useRef, useState } from 'react' import { isEmail } from 'validator' import PropTypes from 'prop-types' +import { useHistory } from 'react-router-dom' // Components import { Box } from 'components/Box' @@ -10,31 +11,42 @@ import { Form, FormField } from 'components/Form' import { FormContainer } from 'components/FormContainer' import { Heading } from 'components/Heading' import { Message } from 'components/Message' -import { Link } from 'components/Link' import { LogoHeader } from 'components/LogoHeader' import { PasswordInput } from 'components/PasswordInput' +import { Text } from 'components/Text' import { TextInput } from 'components/TextInput' -// Utils and messages -import useFlashMessage from '../../hooks/FlashMessage' +// Service import { login } from '../../services/user.service' + +// Store import { UserStoreContext } from '../../stores/UserStore' +// Style +import { baseColors } from '../../utils/colors' + +// Utils +import useFlashMessage from '../../hooks/FlashMessage' + /** * * Login * */ const Login = ({ location }) => { + // Messages const { message: error, showMessage: showError } = useFlashMessage(null) const { message: redirectedMessage, showMessage: showRedirectedMessage } = useFlashMessage(null) + // Context + const history = useHistory() + const { setCurrentUser, setCurrentTokens } = useContext(UserStoreContext) + // State const [loading, setLoading] = useState(false) - const [email, setEmail] = useState('') - // Context - const { setCurrentUser, setCurrentTokens } = useContext(UserStoreContext) + // Ref + const emailRef = useRef() /** * Check if the user has been redirected to this page with a URL parameter @@ -59,7 +71,16 @@ const Login = ({ location }) => { Login - or Create An Account +