Merge pull request #1833 from aws-amplify/reset-password-phone-fix

Author: ErikCH

.changeset/green-terms-carry.md

@@ -0,0 +1,5 @@
+---
+'@aws-amplify/ui': patch
+---
+
+Fixed bug with reset password for phone

packages/e2e/cypress/integration/common/shared.ts

@@ -290,3 +290,30 @@ When('I see {string} as the {string} input', (custom, order) => {
 
   // cy.findByLabelText(custom).type(Cypress.env('VALID_PASSWORD'));
 });
+
+When('I type a valid code', () => {
+  /**
+   * Confirmation code differs on React/Vue vs Angular. Testing for both for
+   * now, but we can look to make them consistent on next major release.
+   */
+  const regex = new RegExp(`^(confirmation )?code( *)?`, 'i');
+  cy.findByRole('spinbutton', { name: regex }).type('1234');
+});
+
+Then('I will be redirected to the confirm forgot password page', () => {
+  cy.findInputField('New Password').should('exist');
+});
+
+When('I type my new password', () => {
+  cy.findInputField('New Password').type(Cypress.env('VALID_PASSWORD'));
+});
+
+Then('I click the submit button', () => {
+  /**
+   * Submit button text differs on React/Vue vs Angular. Testing for both for
+   * now, but we can look to make them consistent on next major release.
+   */
+  cy.findByRole('button', {
+    name: new RegExp(`^((submit)|(send code))$`, 'i'),
+  }).click();
+});

packages/e2e/cypress/integration/ui/components/authenticator/reset-password/reset-password.steps.ts

@@ -1,28 +1 @@
 import { Then, When } from 'cypress-cucumber-preprocessor/steps';
-
-Then('I will be redirected to the confirm forgot password page', () => {
-  cy.findInputField('New Password').should('exist');
-});
-
-When('I type my new password', () => {
-  cy.findInputField('New Password').type(Cypress.env('VALID_PASSWORD'));
-});
-
-Then('I click the submit button', () => {
-  /**
-   * Submit button text differs on React/Vue vs Angular. Testing for both for
-   * now, but we can look to make them consistent on next major release.
-   */
-  cy.findByRole('button', {
-    name: new RegExp(`^((submit)|(send code))$`, 'i'),
-  }).click();
-});
-
-When('I type a valid code', () => {
-  /**
-   * Confirmation code differs on React/Vue vs Angular. Testing for both for
-   * now, but we can look to make them consistent on next major release.
-   */
-  const regex = new RegExp(`^(confirmation )?code( *)?`, 'i');
-  cy.findByRole('spinbutton', { name: regex }).type('1234');
-});

packages/e2e/features/ui/components/authenticator/sign-in-with-phone.feature

@@ -10,6 +10,24 @@ Feature: Sign In with Phone Number
   Background:
     Given I'm running the example "ui/components/authenticator/sign-in-with-phone"
 
+  @angular @react @vue
+  Scenario: Reset Password with valid phone with country code
+    When I click the "Forgot your password?" button
+    When I select my country code with status "CONFIRMED"
+    And I type my "phone number" with status "CONFIRMED"
+    And I intercept '{ "headers": { "X-Amz-Target": "AWSCognitoIdentityProviderService.ForgotPassword" } }' with fixture "reset-password"
+    And I click the "Send code" button
+    And I verify the body has "+19995554444" included
+    Then I will be redirected to the confirm forgot password page
+    And I see "Code"
+    Then I type a valid code
+    And I type my new password
+    And I confirm my password
+    And I intercept '{ "headers": { "X-Amz-Target": "AWSCognitoIdentityProviderService.ConfirmForgotPassword" } }' with fixture "confirm-reset-password"
+    And I click the submit button
+    And I verify the body has "+19995554444" included
+    Then I see "Sign In"
+
   @angular @react @vue
   Scenario: Sign in and replace default dial code
     Then I see "Sign In"

packages/ui/src/machines/authenticator/actions.ts

@@ -105,7 +105,15 @@ export const setUser = assign({
 });
 
 export const setUsername = assign({
-  username: (context: ActorContextWithForms, _) => context.formValues.username,
+  username: (context: ActorContextWithForms, _) => {
+    let {
+      formValues: { username, country_code },
+    } = context;
+    if (country_code) {
+      username = `${country_code}${username}`;
+    }
+    return username;
+  },
 });
 
 export const setCodeDeliveryDetails = assign({

packages/ui/src/machines/authenticator/actors/resetPassword.ts

@@ -183,7 +183,7 @@ export function resetPasswordActor({ services }: ResetPasswordMachineOptions) {
       },
       services: {
         async resetPassword(context) {
-          const username = context.formValues?.username ?? context.username;
+          const { username } = context;
 
           return services.handleForgotPassword(username);
         },