-
Notifications
You must be signed in to change notification settings - Fork 213
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(react): Convert third party auth 'Set password' page to React
Because: * There are data-sharing problems with this page currently being on Backbone while other pages in the flow are in React, causing a double sign-in for all 'Set password' flows, plus the inability to sign into Sync and maintain CWTS choices for desktop oauth * We want to move completely over from Backbone to React This commit: * Creates 'post_verify/third_party_auth/set_password' page in React with container component * Sends web channel messages up to Sync after password create success * Shares form logic with Signup, includes useSyncEngine hook for DRYness * Changes InlineRecoveryKeySetup to check local storage instead of location state, which prevents needing to prop drill as users should always be signed in and these values available in local storage on this page * Returns authPW and unwrapBKey from create password in auth-client closes FXA-6651
- Loading branch information
Showing
36 changed files
with
1,210 additions
and
304 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Empty file.
139 changes: 139 additions & 0 deletions
139
packages/fxa-settings/src/components/FormSetupAccount/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,139 @@ | ||
| /* This Source Code Form is subject to the terms of the Mozilla Public | ||
| * License, v. 2.0. If a copy of the MPL was not distributed with this | ||
| * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | ||
|
|
||
| import React from 'react'; | ||
| import { FtlMsg } from 'fxa-react/lib/utils'; | ||
| import FormPasswordWithBalloons from '../FormPasswordWithBalloons'; | ||
| import InputText from '../InputText'; | ||
| import LinkExternal from 'fxa-react/components/LinkExternal'; | ||
| import GleanMetrics from '../../lib/glean'; | ||
| import ChooseNewsletters from '../ChooseNewsletters'; | ||
| import ChooseWhatToSync from '../ChooseWhatToSync'; | ||
| import LoadingSpinner from 'fxa-react/components/LoadingSpinner'; | ||
| import { FormSetupAccountProps } from './interfaces'; | ||
| import { newsletters } from '../ChooseNewsletters/newsletters'; | ||
|
|
||
| export const FormSetupAccount = ({ | ||
| formState, | ||
| errors, | ||
| trigger, | ||
| register, | ||
| getValues, | ||
| onFocus, | ||
| email, | ||
| onFocusMetricsEvent, | ||
| onSubmit, | ||
| loading, | ||
| isSync, | ||
| offeredSyncEngineConfigs, | ||
| setDeclinedSyncEngines, | ||
| isDesktopRelay, | ||
| setSelectedNewsletterSlugs, | ||
| ageCheckErrorText, | ||
| setAgeCheckErrorText, | ||
| onFocusAgeInput, | ||
| onBlurAgeInput, | ||
| submitButtonGleanId | ||
| }: FormSetupAccountProps) => { | ||
| const showCWTS = () => { | ||
| if (isSync) { | ||
| if (offeredSyncEngineConfigs) { | ||
| return ( | ||
| <ChooseWhatToSync | ||
| {...{ | ||
| offeredSyncEngineConfigs, | ||
| setDeclinedSyncEngines, | ||
| }} | ||
| /> | ||
| ); | ||
| } else { | ||
| // Waiting to receive webchannel message from browser | ||
| return <LoadingSpinner className="flex justify-center mb-4" />; | ||
| } | ||
| } else { | ||
| // Display nothing if Sync flow that does not support webchannels | ||
| // or if CWTS is disabled | ||
| return <></>; | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <FormPasswordWithBalloons | ||
| {...{ | ||
| formState, | ||
| errors, | ||
| trigger, | ||
| register, | ||
| getValues, | ||
| email, | ||
| onFocusMetricsEvent, | ||
| disableButtonUntilValid: true, | ||
| onSubmit, | ||
| loading, | ||
| submitButtonGleanId | ||
| }} | ||
| passwordFormType="signup" | ||
| > | ||
| {setAgeCheckErrorText && | ||
| setAgeCheckErrorText && | ||
| onFocusAgeInput && | ||
| onBlurAgeInput && ( | ||
| <> | ||
| {/* TODO: original component had a SR-only label that is not straightforward to implement with existing InputText component | ||
| SR-only text: "How old are you? To learn why we ask for your age, follow the “why do we ask” link below. */} | ||
| <FtlMsg id="signup-age-check-label" attrs={{ label: true }}> | ||
| <InputText | ||
| name="age" | ||
| label="How old are you?" | ||
| inputMode="numeric" | ||
| className="mb-4" | ||
| pattern="[0-9]*" | ||
| maxLength={3} | ||
| onChange={() => { | ||
| // clear error tooltip if user types in the field | ||
| if (ageCheckErrorText) { | ||
| setAgeCheckErrorText(''); | ||
| } | ||
| }} | ||
| inputRef={register({ | ||
| pattern: /^[0-9]*$/, | ||
| maxLength: 3, | ||
| required: true, | ||
| })} | ||
| onFocusCb={onFocusAgeInput} | ||
| onBlurCb={onBlurAgeInput} | ||
| errorText={ageCheckErrorText} | ||
| tooltipPosition="bottom" | ||
| anchorPosition="end" | ||
| prefixDataTestId="age" | ||
| /> | ||
| </FtlMsg> | ||
| <FtlMsg id="signup-coppa-check-explanation-link"> | ||
| <LinkExternal | ||
| href="https://www.ftc.gov/business-guidance/resources/childrens-online-privacy-protection-rule-not-just-kids-sites" | ||
| className={`link-blue text-sm py-1 -mt-2 self-start ${ | ||
| isDesktopRelay ? 'mb-8' : 'mb-4' | ||
| }`} | ||
| onClick={() => GleanMetrics.registration.whyWeAsk()} | ||
| > | ||
| Why do we ask? | ||
| </LinkExternal> | ||
| </FtlMsg> | ||
| </> | ||
| )} | ||
|
|
||
| {isSync | ||
| ? showCWTS() | ||
| : !isDesktopRelay && | ||
| setSelectedNewsletterSlugs && ( | ||
| <ChooseNewsletters | ||
| {...{ | ||
| newsletters, | ||
| setSelectedNewsletterSlugs, | ||
| }} | ||
| /> | ||
| )} | ||
| </FormPasswordWithBalloons> | ||
| ); | ||
| }; |
34 changes: 34 additions & 0 deletions
34
packages/fxa-settings/src/components/FormSetupAccount/interfaces.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| /* This Source Code Form is subject to the terms of the Mozilla Public | ||
| * License, v. 2.0. If a copy of the MPL was not distributed with this | ||
| * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | ||
|
|
||
| import { UseFormMethods } from 'react-hook-form'; | ||
| import { SetPasswordFormData } from '../../pages/PostVerify/SetPassword/interfaces'; | ||
| import { SignupFormData } from '../../pages/Signup/interfaces'; | ||
| import { syncEngineConfigs } from '../ChooseWhatToSync/sync-engines'; | ||
|
|
||
| export type FormSetupAccountData = SignupFormData | SetPasswordFormData; | ||
|
|
||
| export type FormSetupAccountProps = { | ||
| formState: UseFormMethods['formState']; | ||
| errors: UseFormMethods['errors']; | ||
| trigger: UseFormMethods['trigger']; | ||
| register: UseFormMethods['register']; | ||
| getValues: UseFormMethods['getValues']; | ||
| onFocus?: () => void; | ||
| email: string; | ||
| onFocusMetricsEvent?: () => void; | ||
| onSubmit: (e?: React.BaseSyntheticEvent) => Promise<void>; | ||
| loading: boolean; | ||
| isSync: boolean; | ||
| offeredSyncEngineConfigs?: typeof syncEngineConfigs; | ||
| setDeclinedSyncEngines: React.Dispatch<React.SetStateAction<string[]>>; | ||
| isDesktopRelay: boolean; | ||
| setSelectedNewsletterSlugs?: React.Dispatch<React.SetStateAction<string[]>>; | ||
| // Age check props, if not provided it will not be rendered | ||
| ageCheckErrorText?: string; | ||
| setAgeCheckErrorText?: React.Dispatch<React.SetStateAction<string>>; | ||
| onFocusAgeInput?: () => void; | ||
| onBlurAgeInput?: () => void; | ||
| submitButtonGleanId?: string; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.