feat(settings): Create frontend components for recovery phone setup from Settings#18159
feat(settings): Create frontend components for recovery phone setup from Settings#18159vpomerleau merged 1 commit intomainfrom
Conversation
vpomerleau
force-pushed
the
FXA-10237
branch
5 times, most recently
from
7ea797e to
159c664
Compare
LZoog
left a comment
LZoog
left a comment
There was a problem hiding this comment.
LGTM with a few comments. 👍
| </LinkExternal> | ||
| </span> | ||
| role={type === 'error' ? 'alert' : 'status'} | ||
| aria-live={type === 'error' ? 'assertive' : 'polite'} |
There was a problem hiding this comment.
-chef's kiss- Yep, just tried this out and I love that it's immediately read while not moving focus back up to the error.
I think in that follow up issue, one thing we could also add, is that we should be focusing input back to the form field that caused the problem. Thankfully our forms are very tiny and I think we can do this pretty easily by always putting focus on the first form field.
| animation?: Animation; | ||
| dismissButton?: DismissButtonProps; | ||
| link?: BannerLinkProps; | ||
| isFancy?: boolean; |
| } as Meta; | ||
|
|
||
| const mockSubmit = async (phoneNumber: string) => { | ||
| action('submitPhoneNumber')(phoneNumber); |
There was a problem hiding this comment.
But really - I haven't played with this enough, seems cool!
| <FtlMsg id="tfa-row-enabled-info-link"> | ||
| <LinkExternal | ||
| href="https://support.mozilla.org/kb/secure-firefox-account-two-step-authentication" | ||
| className="link-blue text-sm " |
There was a problem hiding this comment.
Nit: extra space
Should we have a TODO here to updating the heading to the proper link when it's created?
There was a problem hiding this comment.
I think in this case the link is correct as is - this is a link to general information about two-step authentication. Where we use a similar link name specifically for backup recovery phone we could update the link to the section that directly covers that method.
|
|
||
| type PageRecoveryPhoneSetupProps = { | ||
| testPhoneNumber?: string; | ||
| testStep?: 1 | 2; |
There was a problem hiding this comment.
Might add a comment that these prop names are temporary until implementation?
| title={localizedPageTitle} | ||
| onBackButtonClick={navigateBackward} | ||
| > | ||
| <ProgressBar currentStep={1} numberOfSteps={2} /> |
There was a problem hiding this comment.
Feels like maybe you could lift/share that numberOfSteps const you set with this somehow, since if that changes this also will change.
| const clearBanners = async () => { | ||
| return new Promise<void>((resolve) => { | ||
| setLocalizedErrorBannerMessage(''); // Clear the banner message | ||
| setTimeout(() => resolve(), 0); // Wait for DOM update |
There was a problem hiding this comment.
Hm why do we need a setTimeout? I think this isn't great for performance. In other places, we simply clear it with ''.
There was a problem hiding this comment.
I was attempting to fix an issue with the banner message not always being announced or getting interrupted - unfortunately this wasn't 100% reliable so I will remove.
| </FtlMsg> | ||
| <FtlMsg | ||
| id="flow-setup-phone-confirm-code-instruction" | ||
| elems={{ span: <span dir="ltr" className="font-bold"></span> }} |
| )} | ||
| {localizedErrorBannerMessage && ( | ||
| <Banner | ||
| ref={(el) => el && el.focus()} |
There was a problem hiding this comment.
Same question here as in another comment about this getting focus.
| }; | ||
|
|
||
| // Format the phone number as the user types - for easier review by the user | ||
| const formatPhoneNumber = (input: string): string => { |
vpomerleau
force-pushed
the
FXA-10237
branch
3 times, most recently
from
c15f5e6 to
302ee0f
Compare
…n settings Because: * We are adding a new recovery phone feature This commit: * Create FlowSetupRecoveryPhoneSubmitPhone component w/ l10n, stories, unit tests * Create FlowSetupRecoveryPhoneConfirmCode component w/ l10n, stories, unit tests * Create PageRecoveryPhoneSetup component w/ l10n, stories, unit tests * Update Banner component to improve a11y (applied to new components) and add "fancy" info message style Closes #FXA-10237
3 participants
Because
This pull request
Issue that this pull request solves
Closes: #FXA-10236, #FXA-10237, #FXA-10245
Checklist
Put an
xin the boxes that applyScreenshots (Optional)
Will add storybook links when ready
Other information (Optional)
Draft for storybook review and self-review