Merge pull request #15397 from mozilla/FXA-7149-reset-pwd-link-not-ex…

…pired fix(fxa-settings): Expired reset password link should always redirect
mozilla · Jun 2, 2023 · 0612880 · 0612880
2 parents e52ab76 + f543288
commit 0612880
Show file tree

Hide file tree

Showing 17 changed files with 452 additions and 417 deletions.
diff --git a/packages/functional-tests/tests/react-conversion/recoveryKey.spec.ts b/packages/functional-tests/tests/react-conversion/recoveryKey.spec.ts
@@ -11,7 +11,7 @@ const NEW_PASSWORD = 'notYourAveragePassW0Rd';
 function getReactFeatureFlagUrl(
   target: BaseTarget,
   path: string,
-  showReactApp: boolean = true
+  showReactApp = true
 ) {
   return `${target.contentServerUrl}${path}?showReactApp=${showReactApp}`;
 }

diff --git a/packages/fxa-settings/src/components/App/index.tsx b/packages/fxa-settings/src/components/App/index.tsx
@@ -143,7 +143,7 @@ export const App = ({
               <LinkValidator
                 path="/complete_reset_password/*"
                 linkType={LinkType['reset-password']}
-                viewName={'complete-reset-password'}
+                viewName="complete-reset-password"
                 getParamsFromModel={() => {
                   return CreateCompleteResetPasswordLink();
                 }}
@@ -158,7 +158,24 @@ export const App = ({
                 )}
               </LinkValidator>
 
-              <AccountRecoveryConfirmKey path="/account_recovery_confirm_key/*" />
+              <LinkValidator
+                path="/account_recovery_confirm_key/*"
+                linkType={LinkType['reset-password']}
+                viewName="account-recovery-confirm-key"
+                getParamsFromModel={() => {
+                  return CreateCompleteResetPasswordLink();
+                }}
+              >
+                {({ setLinkStatus, params }) => (
+                  <AccountRecoveryConfirmKey
+                    {...{
+                      setLinkStatus,
+                      params,
+                    }}
+                  />
+                )}
+              </LinkValidator>
+
               <AccountRecoveryResetPassword path="/account_recovery_reset_password/*" />
 
               <SigninReported path="/signin_reported/*" />

diff --git a/packages/fxa-settings/src/components/LinkDamaged/index.tsx b/packages/fxa-settings/src/components/LinkDamaged/index.tsx
@@ -28,6 +28,7 @@ const LinkDamaged = ({ headingText, headingTextFtlId }: LinkDamagedProps) => {
 };
 
 export const ResetPasswordLinkDamaged = () => {
+  // TODO in FXA-7630 add metrics event and associated tests for users hitting the LinkDamaged page
   return (
     <LinkDamaged
       headingText="Reset password link damaged"

diff --git a/packages/fxa-settings/src/components/LinkExpired/index.tsx b/packages/fxa-settings/src/components/LinkExpired/index.tsx
@@ -34,11 +34,10 @@ export const LinkExpired = ({
       {resendStatus === ResendStatus['error'] && <ResendLinkErrorBanner />}
 
       <FtlMsg id={messageFtlId}>
-        <p className="mt-4 text-sm">{messageText}</p>
+        <p className="text-sm my-4">{messageText}</p>
       </FtlMsg>
-      {/* TODO Extract for reuse into ButtonResendResetPasswordLink */}
       <FtlMsg id="reset-pwd-resend-link">
-        <button onClick={resendLinkHandler} className="link-blue mt-4">
+        <button onClick={resendLinkHandler} className="link-blue text-sm">
           Receive new link
         </button>
       </FtlMsg>

diff --git a/packages/fxa-settings/src/components/LinkExpiredResetPassword/index.tsx b/packages/fxa-settings/src/components/LinkExpiredResetPassword/index.tsx
@@ -18,6 +18,7 @@ export const LinkExpiredResetPassword = ({
   email,
   viewName,
 }: LinkExpiredResetPasswordProps) => {
+  // TODO in FXA-7630 add metrics event and associated tests for users hitting the LinkExpired page
   const account = useAccount();
 
   const [resendStatus, setResendStatus] = useState<ResendStatus>(

diff --git a/packages/fxa-settings/src/lib/hooks/useLinkStatus/index.tsx b/packages/fxa-settings/src/lib/hooks/useLinkStatus/index.tsx
diff --git a/packages/fxa-settings/src/lib/test-utils.ts b/packages/fxa-settings/src/lib/test-utils.ts
@@ -21,28 +21,3 @@ export const typeByLabelText = (labelText: string) => async (x: string) => {
     target: { value: x },
   });
 };
-
-type LinkParamValue = string | null;
-
-export const getSearchWithParams = ({
-  mockToken,
-  mockCode,
-  mockEmail,
-  mockPasswordHash,
-  mockUid,
-}: {
-  mockToken: LinkParamValue;
-  mockCode: LinkParamValue;
-  mockEmail: LinkParamValue;
-  mockPasswordHash?: LinkParamValue;
-  mockUid?: LinkParamValue;
-}) => {
-  const tokenParam = mockToken !== null ? `token=${mockToken}&` : '';
-  const codeParam = mockCode !== null ? `code=${mockCode}&` : '';
-  const emailParam = mockEmail !== null ? `email=${mockEmail}&` : '';
-  const passwordHashParam = mockPasswordHash
-    ? `emailToHashWith=${mockPasswordHash}`
-    : '';
-  const uidParam = mockUid ? `uid=${mockUid}` : '';
-  return `?${tokenParam}${codeParam}${emailParam}${passwordHashParam}${uidParam}`;
-};
diff --git a/packages/fxa-settings/src/models/reset-password/verification/complete-reset-password-link.ts b/packages/fxa-settings/src/models/reset-password/verification/complete-reset-password-link.ts
@@ -23,4 +23,7 @@ export class CompleteResetPasswordLink extends ModelDataProvider {
 
   @bind([V.isHex, V.isRequired])
   token: string = '';
+
+  @bind([V.isHex, V.isRequired])
+  uid: string = '';
 }
diff --git a/packages/fxa-settings/src/pages/ResetPassword/AccountRecoveryConfirmKey/index.stories.tsx b/packages/fxa-settings/src/pages/ResetPassword/AccountRecoveryConfirmKey/index.stories.tsx
@@ -2,72 +2,66 @@
  * 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 { createHistory, createMemorySource, History } from '@reach/router';
 import React from 'react';
 import { Account } from '../../../models';
 import AccountRecoveryConfirmKey from '.';
 import { Meta } from '@storybook/react';
-import { AuthUiErrors } from '../../../lib/auth-errors/auth-errors';
-import { Subject } from './mocks';
+import {
+  mockCompleteResetPasswordParams,
+  paramsWithMissingEmail,
+  Subject,
+} from './mocks';
 
 export default {
   title: 'Pages/ResetPassword/AccountRecoveryConfirmKey',
   component: AccountRecoveryConfirmKey,
 } as Meta;
 
-const source = createMemorySource('/fake-memories');
-
-const storyWithAccountAndHistory = (
+const storyWithSubject = (
   account: Account,
-  history: History,
+  params: Record<string, string>,
   storyName?: string
 ) => {
-  const story = () => <Subject {...{ account, history }} />;
+  const story = () => <Subject {...{ account, params }} />;
   story.storyName = storyName;
   return story;
 };
 
-const historyWithParams = createHistory(source);
-historyWithParams.location.href =
-  'http://localhost.com/?&token=token&code=code&email=email@email&uid=uid';
-
-const historyWithoutParams = createHistory(source);
-historyWithoutParams.location.href = 'http://localhost.com/?';
-
 const accountValid = {
+  resetPasswordStatus: () => Promise.resolve(true),
   getRecoveryKeyBundle: () => Promise.resolve(true),
   verifyPasswordForgotToken: () => Promise.resolve(false),
 } as unknown as Account;
 
-const accountWithTokenError = {
-  verifyPasswordForgotToken: () => {
-    throw AuthUiErrors.INVALID_TOKEN;
-  },
+const accountWithExpiredLink = {
+  resetPasswordStatus: () => Promise.resolve(false),
 } as unknown as Account;
 
 const accountWithInvalidRecoveryKey = {
+  resetPasswordStatus: () => Promise.resolve(true),
   getRecoveryKeyBundle: () => {
     throw Error('boop');
   },
+  verifyPasswordForgotToken: () => Promise.resolve(true),
 } as unknown as Account;
 
-export const OnConfirmValidKey = storyWithAccountAndHistory(
+export const OnConfirmValidKey = storyWithSubject(
   accountValid,
-  historyWithParams,
+  mockCompleteResetPasswordParams,
   'Valid recovery key. Users will be redirected to AccountRecoveryResetPassword on confirm'
 );
 
-export const OnConfirmInvalidKey = storyWithAccountAndHistory(
+export const OnConfirmInvalidKey = storyWithSubject(
   accountWithInvalidRecoveryKey,
-  historyWithParams
+  mockCompleteResetPasswordParams
 );
 
-export const OnConfirmLinkExpired = storyWithAccountAndHistory(
-  accountWithTokenError,
-  historyWithParams
+export const OnConfirmLinkExpired = storyWithSubject(
+  accountWithExpiredLink,
+  mockCompleteResetPasswordParams
 );
 
-export const WithDamagedLink = storyWithAccountAndHistory(
+export const WithDamagedLink = storyWithSubject(
   accountValid,
-  historyWithoutParams
+  paramsWithMissingEmail
 );