From 4dd841cb429a18465f018d520070fd29ef59970e Mon Sep 17 00:00:00 2001 From: lcampbell Date: Thu, 27 Jul 2023 08:32:31 -0300 Subject: [PATCH 1/6] switch 2fa input to Pin Input fields --- .../src/auth/TwoFactorAuthenticatePage.js | 69 ++++++++++++++++--- 1 file changed, 60 insertions(+), 9 deletions(-) diff --git a/frontend/src/auth/TwoFactorAuthenticatePage.js b/frontend/src/auth/TwoFactorAuthenticatePage.js index f8040ddcb..f0b0fe91f 100644 --- a/frontend/src/auth/TwoFactorAuthenticatePage.js +++ b/frontend/src/auth/TwoFactorAuthenticatePage.js @@ -1,10 +1,21 @@ import React from 'react' import { t, Trans } from '@lingui/macro' import { useLingui } from '@lingui/react' -import { Box, Button, Heading, Stack, useToast } from '@chakra-ui/react' +import { + Box, + Button, + FormControl, + FormLabel, + Heading, + HStack, + PinInput, + PinInputField, + Stack, + useToast, +} from '@chakra-ui/react' import { useHistory, useLocation, useParams } from 'react-router-dom' import { useMutation } from '@apollo/client' -import { Formik } from 'formik' +import { Formik, Field } from 'formik' import { LoadingMessage } from '../components/LoadingMessage' import { AuthenticateField } from '../components/fields/AuthenticateField' @@ -22,6 +33,7 @@ export default function TwoFactorAuthenticatePage() { const { i18n } = useLingui() const { sendMethod, authenticateToken } = useParams() const { from } = location.state || { from: { pathname: '/' } } + // const [field, meta] = useField('twoFactorCode') const [authenticate, { loading, error }] = useMutation(AUTHENTICATE, { onError() { @@ -85,6 +97,18 @@ export default function TwoFactorAuthenticatePage() { }, }) + const codeSendMessage = + sendMethod.toLowerCase() === 'email' + ? t` + We've sent you an email with an authentication code to sign into Tracker.` + : sendMethod.toLowerCase() === 'phone' + ? t` + We've sent an SMS to your registered phone number with an authentication code to sign into Tracker.` + : sendMethod.toLowerCase() === 'verifyphone' + ? t` + We've sent an SMS to your new phone number with an authentication code to confirm this change.` + : '' + if (loading) return if (error) return @@ -97,12 +121,13 @@ export default function TwoFactorAuthenticatePage() { authenticateToken: authenticateToken, }} onSubmit={async (values) => { - authenticate({ - variables: { - authenticationCode: parseInt(values.twoFactorCode), - authenticateToken: values.authenticateToken, - }, - }) + alert(JSON.stringify(values, null, 2)) + // authenticate({ + // variables: { + // authenticationCode: parseInt(values.twoFactorCode), + // authenticateToken: values.authenticateToken, + // }, + // }) }} > {({ handleSubmit, isSubmitting }) => ( @@ -111,9 +136,35 @@ export default function TwoFactorAuthenticatePage() { Two Factor Authentication - + {/* */} + + {({ field, form }) => ( + + + {codeSendMessage + ' ' + t`Please enter your two factor code below.`} + + + form.setFieldValue(field.name, val)} + > + + + + + + + + + + )} + From 96bbcfed4aa4de96e804de7b3169ab5f2705f1b2 Mon Sep 17 00:00:00 2001 From: lcampbell Date: Thu, 27 Jul 2023 08:58:14 -0300 Subject: [PATCH 2/6] move pin input to auth field component --- .../src/auth/TwoFactorAuthenticatePage.js | 69 +++---------------- .../components/fields/AuthenticateField.js | 55 ++++++++------- 2 files changed, 39 insertions(+), 85 deletions(-) diff --git a/frontend/src/auth/TwoFactorAuthenticatePage.js b/frontend/src/auth/TwoFactorAuthenticatePage.js index f0b0fe91f..42c9f986d 100644 --- a/frontend/src/auth/TwoFactorAuthenticatePage.js +++ b/frontend/src/auth/TwoFactorAuthenticatePage.js @@ -1,21 +1,10 @@ import React from 'react' import { t, Trans } from '@lingui/macro' import { useLingui } from '@lingui/react' -import { - Box, - Button, - FormControl, - FormLabel, - Heading, - HStack, - PinInput, - PinInputField, - Stack, - useToast, -} from '@chakra-ui/react' +import { Box, Button, Heading, Stack, useToast } from '@chakra-ui/react' import { useHistory, useLocation, useParams } from 'react-router-dom' import { useMutation } from '@apollo/client' -import { Formik, Field } from 'formik' +import { Formik } from 'formik' import { LoadingMessage } from '../components/LoadingMessage' import { AuthenticateField } from '../components/fields/AuthenticateField' @@ -97,18 +86,6 @@ export default function TwoFactorAuthenticatePage() { }, }) - const codeSendMessage = - sendMethod.toLowerCase() === 'email' - ? t` - We've sent you an email with an authentication code to sign into Tracker.` - : sendMethod.toLowerCase() === 'phone' - ? t` - We've sent an SMS to your registered phone number with an authentication code to sign into Tracker.` - : sendMethod.toLowerCase() === 'verifyphone' - ? t` - We've sent an SMS to your new phone number with an authentication code to confirm this change.` - : '' - if (loading) return if (error) return @@ -121,13 +98,13 @@ export default function TwoFactorAuthenticatePage() { authenticateToken: authenticateToken, }} onSubmit={async (values) => { - alert(JSON.stringify(values, null, 2)) - // authenticate({ - // variables: { - // authenticationCode: parseInt(values.twoFactorCode), - // authenticateToken: values.authenticateToken, - // }, - // }) + // alert(JSON.stringify(values, null, 2)) + authenticate({ + variables: { + authenticationCode: parseInt(values.twoFactorCode), + authenticateToken: values.authenticateToken, + }, + }) }} > {({ handleSubmit, isSubmitting }) => ( @@ -136,35 +113,9 @@ export default function TwoFactorAuthenticatePage() { Two Factor Authentication - {/* */} + - - {({ field, form }) => ( - - - {codeSendMessage + ' ' + t`Please enter your two factor code below.`} - - - form.setFieldValue(field.name, val)} - > - - - - - - - - - - )} - diff --git a/frontend/src/components/fields/AuthenticateField.js b/frontend/src/components/fields/AuthenticateField.js index 4b718634f..48034182d 100644 --- a/frontend/src/components/fields/AuthenticateField.js +++ b/frontend/src/components/fields/AuthenticateField.js @@ -2,17 +2,10 @@ import React from 'react' import { func, object, oneOfType, shape, string } from 'prop-types' import { t } from '@lingui/macro' -import { FormField } from './FormField' +import { Field } from 'formik' +import { FormControl, FormLabel, HStack, PinInput, PinInputField } from '@chakra-ui/react' -import { TwoFactorIcon } from '../../theme/Icons' - -function AuthenticateField({ - name, - forwardedRef, - sendMethod, - inputProps, - ...props -}) { +function AuthenticateField({ name = 'twoFactorCode', sendMethod }) { const codeSendMessage = sendMethod.toLowerCase() === 'email' ? t` @@ -26,22 +19,32 @@ function AuthenticateField({ : '' return ( - } - placeholder={t`Enter two factor code`} - ref={forwardedRef} - autoFocus - autoComplete="off" - inputMode="numeric" - w="auto" - align="center" - inputProps={inputProps} - {...props} - /> + + {({ field, form }) => ( + + + {codeSendMessage + ' ' + t`Please enter your two factor code below.`} + + + form.setFieldValue(field.name, val)} + > + + + + + + + + + + )} + ) } From 8e4cce1f66a4972fb44d570090312e4bca3981e0 Mon Sep 17 00:00:00 2001 From: lcampbell Date: Thu, 27 Jul 2023 08:58:55 -0300 Subject: [PATCH 3/6] remove commmented code --- frontend/src/auth/TwoFactorAuthenticatePage.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/frontend/src/auth/TwoFactorAuthenticatePage.js b/frontend/src/auth/TwoFactorAuthenticatePage.js index 42c9f986d..f8040ddcb 100644 --- a/frontend/src/auth/TwoFactorAuthenticatePage.js +++ b/frontend/src/auth/TwoFactorAuthenticatePage.js @@ -22,7 +22,6 @@ export default function TwoFactorAuthenticatePage() { const { i18n } = useLingui() const { sendMethod, authenticateToken } = useParams() const { from } = location.state || { from: { pathname: '/' } } - // const [field, meta] = useField('twoFactorCode') const [authenticate, { loading, error }] = useMutation(AUTHENTICATE, { onError() { @@ -98,7 +97,6 @@ export default function TwoFactorAuthenticatePage() { authenticateToken: authenticateToken, }} onSubmit={async (values) => { - // alert(JSON.stringify(values, null, 2)) authenticate({ variables: { authenticationCode: parseInt(values.twoFactorCode), From 64b849e364c39bd1075825af70095561f1e83338 Mon Sep 17 00:00:00 2001 From: lcampbell Date: Thu, 27 Jul 2023 10:24:20 -0300 Subject: [PATCH 4/6] autofocus email field on sign in page --- frontend/src/auth/SignInPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/auth/SignInPage.js b/frontend/src/auth/SignInPage.js index cde4d191b..21a71f31a 100644 --- a/frontend/src/auth/SignInPage.js +++ b/frontend/src/auth/SignInPage.js @@ -125,7 +125,7 @@ export default function SignInPage() { - + From 1bb828f6dbc497954522ed3f7fb0cda7a3ea68da Mon Sep 17 00:00:00 2001 From: lcampbell Date: Thu, 27 Jul 2023 13:18:04 -0300 Subject: [PATCH 5/6] fix tests --- .../src/auth/TwoFactorAuthenticatePage.js | 10 ++-- .../TwoFactorAuthenticatePage.test.js | 44 +++++---------- .../components/fields/AuthenticateField.js | 14 ++--- .../__tests__/AuthenticateField.test.js | 55 ------------------- 4 files changed, 27 insertions(+), 96 deletions(-) delete mode 100644 frontend/src/components/fields/__tests__/AuthenticateField.test.js diff --git a/frontend/src/auth/TwoFactorAuthenticatePage.js b/frontend/src/auth/TwoFactorAuthenticatePage.js index f8040ddcb..2ff79b20d 100644 --- a/frontend/src/auth/TwoFactorAuthenticatePage.js +++ b/frontend/src/auth/TwoFactorAuthenticatePage.js @@ -1,10 +1,10 @@ import React from 'react' import { t, Trans } from '@lingui/macro' import { useLingui } from '@lingui/react' -import { Box, Button, Heading, Stack, useToast } from '@chakra-ui/react' +import { Box, Button, Heading, Stack, Text, useToast } from '@chakra-ui/react' import { useHistory, useLocation, useParams } from 'react-router-dom' import { useMutation } from '@apollo/client' -import { Formik } from 'formik' +import { ErrorMessage, Formik } from 'formik' import { LoadingMessage } from '../components/LoadingMessage' import { AuthenticateField } from '../components/fields/AuthenticateField' @@ -111,9 +111,11 @@ export default function TwoFactorAuthenticatePage() { Two Factor Authentication - - + + + + diff --git a/frontend/src/auth/__tests__/TwoFactorAuthenticatePage.test.js b/frontend/src/auth/__tests__/TwoFactorAuthenticatePage.test.js index bf5941b7e..0b613a9da 100644 --- a/frontend/src/auth/__tests__/TwoFactorAuthenticatePage.test.js +++ b/frontend/src/auth/__tests__/TwoFactorAuthenticatePage.test.js @@ -28,15 +28,10 @@ describe('', () => { it('renders correctly', async () => { const { getByText } = render( - + - + @@ -47,9 +42,7 @@ describe('', () => { , ) - await waitFor(() => - expect(getByText(/Two Factor Authentication/)).toBeInTheDocument(), - ) + await waitFor(() => expect(getByText(/Two Factor Authentication/)).toBeInTheDocument()) }) describe('given no input', () => { @@ -67,12 +60,7 @@ describe('', () => { > - + @@ -86,9 +74,7 @@ describe('', () => { fireEvent.click(submitButton) await waitFor(() => { - expect( - getByText(/Code field must not be empty/i), - ).toBeInTheDocument() + expect(getByText(/Code field must not be empty/i)).toBeInTheDocument() }) }) }) @@ -126,7 +112,7 @@ describe('', () => { initialIndex: 0, }) - const { container, getByRole, queryByText } = render( + const { getAllByRole, getByRole, queryByText } = render( ', () => { , ) - const twoFactorCode = container.querySelector('#twoFactorCode') + const twoFactorCode = getAllByRole('textbox', { name: 'Please enter your pin code' })[0] const form = getByRole('form') fireEvent.change(twoFactorCode, { @@ -160,9 +146,7 @@ describe('', () => { fireEvent.submit(form) await waitFor(() => { - expect( - queryByText(/Unable to sign in to your account, please try again./i), - ) + expect(queryByText(/Unable to sign in to your account, please try again./i)) }) }) it('client-side error', async () => { @@ -202,7 +186,7 @@ describe('', () => { initialIndex: 0, }) - const { container, getByRole, queryByText } = render( + const { getAllByRole, getByRole, queryByText } = render( ', () => { , ) - const twoFactorCode = container.querySelector('#twoFactorCode') + const twoFactorCode = getAllByRole('textbox', { name: 'Please enter your pin code' })[0] const form = getByRole('form') fireEvent.change(twoFactorCode, { @@ -276,7 +260,7 @@ describe('', () => { initialIndex: 0, }) - const { container, getByRole, queryByText } = render( + const { getAllByRole, getByRole, queryByText } = render( ', () => { , ) - const twoFactorCode = container.querySelector('#twoFactorCode') + const twoFactorCode = getAllByRole('textbox', { name: 'Please enter your pin code' })[0] const form = getByRole('form') fireEvent.change(twoFactorCode, { @@ -358,7 +342,7 @@ describe('', () => { initialIndex: 0, }) - const { container, getByRole } = render( + const { getAllByRole, getByRole } = render( ', () => { , ) - const twoFactorCode = container.querySelector('#twoFactorCode') + const twoFactorCode = getAllByRole('textbox', { name: 'Please enter your pin code' })[0] const form = getByRole('form') fireEvent.change(twoFactorCode, { diff --git a/frontend/src/components/fields/AuthenticateField.js b/frontend/src/components/fields/AuthenticateField.js index 48034182d..21fcfbd0a 100644 --- a/frontend/src/components/fields/AuthenticateField.js +++ b/frontend/src/components/fields/AuthenticateField.js @@ -25,7 +25,7 @@ function AuthenticateField({ name = 'twoFactorCode', sendMethod }) { {codeSendMessage + ' ' + t`Please enter your two factor code below.`} - + form.setFieldValue(field.name, val)} > - - - - - - + + + + + + diff --git a/frontend/src/components/fields/__tests__/AuthenticateField.test.js b/frontend/src/components/fields/__tests__/AuthenticateField.test.js deleted file mode 100644 index 611b6e8ba..000000000 --- a/frontend/src/components/fields/__tests__/AuthenticateField.test.js +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react' -import { object, string } from 'yup' -import { fireEvent, render, waitFor } from '@testing-library/react' -import { theme, ChakraProvider } from '@chakra-ui/react' -import { Formik } from 'formik' -import { I18nProvider } from '@lingui/react' -import { setupI18n } from '@lingui/core' - -import { AuthenticateField } from '../AuthenticateField' - -const i18n = setupI18n({ - locale: 'en', - messages: { - en: {}, - }, - localeData: { - en: {}, - }, -}) - -describe('', () => { - describe('when validation fails', () => { - it('displays an error message', async () => { - const validationSchema = object().shape({ - twoFactorCode: string().required('sadness'), - }) - - const { getByRole, getByText } = render( - - - {}} - > - {() => } - - - , - ) - - const authenticateInput = getByRole('textbox', { - name: /Please enter your two factor code below/i, - }) - fireEvent.blur(authenticateInput) - - await waitFor(() => { - expect(getByText(/sadness/)).toBeInTheDocument() - }) - }) - }) -}) From 8d246dec5b7b345eb17118b40b4175e891f6c73e Mon Sep 17 00:00:00 2001 From: lcampbell Date: Thu, 27 Jul 2023 16:09:37 -0300 Subject: [PATCH 6/6] fix tests --- frontend/src/user/EditableUserPhoneNumber.js | 2 +- .../__tests__/EditableUserPhoneNumber.test.js | 35 ++++++++----------- 2 files changed, 15 insertions(+), 22 deletions(-) diff --git a/frontend/src/user/EditableUserPhoneNumber.js b/frontend/src/user/EditableUserPhoneNumber.js index b25b0633b..53f92b9bf 100644 --- a/frontend/src/user/EditableUserPhoneNumber.js +++ b/frontend/src/user/EditableUserPhoneNumber.js @@ -221,7 +221,7 @@ export function EditableUserPhoneNumber({ detailValue, ...props }) { }} > {({ handleSubmit, isSubmitting }) => ( -
+ Verify diff --git a/frontend/src/user/__tests__/EditableUserPhoneNumber.test.js b/frontend/src/user/__tests__/EditableUserPhoneNumber.test.js index ac8817102..41094eefc 100644 --- a/frontend/src/user/__tests__/EditableUserPhoneNumber.test.js +++ b/frontend/src/user/__tests__/EditableUserPhoneNumber.test.js @@ -116,9 +116,7 @@ describe('', () => { fireEvent.click(confirmButton) await waitFor(() => { - expect( - getByText(/Phone number field must not be empty/i), - ).toBeInTheDocument() + expect(getByText(/Phone number field must not be empty/i)).toBeInTheDocument() }) }) }) @@ -160,14 +158,13 @@ describe('', () => { { request: { query: VERIFY_PHONE_NUMBER, - variables: { twoFactorCode: 1234 }, + variables: { twoFactorCode: 123456 }, }, result: { data: { verifyPhoneNumber: { result: { - status: - 'You have successfully verified your phone number.', + status: 'You have successfully verified your phone number.', user: { id: '1234asdf', phoneNumber: '+19025555555', @@ -182,7 +179,7 @@ describe('', () => { }, }, ] - const { queryByText, getByText, getByRole, findByRole } = render( + const { queryByText, getByText, getByRole, getAllByRole } = render( ', () => { userEvent.clear(displayNameInput) userEvent.type(displayNameInput, '19025555555') - // ensure verify phone number modal is not open - expect( - queryByText(/Please enter your two factor code below/i), - ).not.toBeInTheDocument() - const confirmButton = getByRole('button', { name: 'Confirm' }) fireEvent.click(confirmButton) - const twoFactorCodeInput = await findByRole('textbox', { - name: /Please enter your two factor code below/i, + await waitFor(() => { + expect(queryByText(/Please enter your two factor code below/i)).toBeInTheDocument() }) - userEvent.type(twoFactorCodeInput, '1234') + const twoFactorCode = getAllByRole('textbox', { name: 'Please enter your pin code' })[0] + const form = getByRole('form') - const confirmVerifyPhoneNumberButton = getByRole('button', { - name: 'Confirm', + fireEvent.change(twoFactorCode, { + target: { + value: '123456', + }, }) - userEvent.click(confirmVerifyPhoneNumberButton) + fireEvent.submit(form) await waitFor(() => - expect( - queryByText(/You have successfully updated your phone number\./), - ).toBeInTheDocument(), + expect(queryByText(/You have successfully updated your phone number\./)).toBeInTheDocument(), ) }) })