From e09750cd352e9853eb2fb72684985e9fcc28503b Mon Sep 17 00:00:00 2001
From: Erik Hanchett <ehhanche@amazon.com>
Date: Mon, 9 May 2022 13:54:56 -0700
Subject: [PATCH 1/4] Added new missing translation

---
 .../sign-in-with-phone.component.ts              | 16 +++++++++++++---
 .../sign-in-with-phone/index.page.tsx            | 11 +++++++++--
 .../authenticator/sign-in-with-phone/index.vue   | 11 +++++++++--
 .../force-change-password-phone-failure.json     |  4 ++++
 .../e2e/cypress/integration/common/shared.ts     |  4 ++++
 .../e2e/cypress/integration/common/sign-up.ts    |  4 ++++
 .../sign-in-force-new-password.feature           | 16 ++++++++++++++++
 .../ForceNewPassword/ForceNewPassword.tsx        |  9 +++------
 8 files changed, 62 insertions(+), 13 deletions(-)
 create mode 100644 packages/e2e/cypress/fixtures/force-change-password-phone-failure.json

diff --git a/examples/angular/src/pages/ui/components/authenticator/sign-in-with-phone/sign-in-with-phone.component.ts b/examples/angular/src/pages/ui/components/authenticator/sign-in-with-phone/sign-in-with-phone.component.ts
index 710a9936343..f0d39ec228f 100644
--- a/examples/angular/src/pages/ui/components/authenticator/sign-in-with-phone/sign-in-with-phone.component.ts
+++ b/examples/angular/src/pages/ui/components/authenticator/sign-in-with-phone/sign-in-with-phone.component.ts
@@ -1,17 +1,27 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
-import { Amplify } from 'aws-amplify';
+import { Amplify, I18n } from 'aws-amplify';
+import { translations } from '@aws-amplify/ui-angular';
 import awsExports from './aws-exports';
 
 @Component({
   selector: 'sign-in-with-phone',
   templateUrl: 'sign-in-with-phone.component.html',
 })
-export class SignInWithPhoneComponent {
+export class SignInWithPhoneComponent implements OnInit {
   constructor() {
     Amplify.configure(awsExports);
   }
 
+  ngOnInit(): void {
+    I18n.putVocabularies(translations);
+    I18n.setLanguage('en');
+    I18n.putVocabulariesForLanguage('en', {
+      'Password does not conform to policy: Password not long enough':
+        'Your password is too short! Try a longer password!',
+    });
+  }
+
   public formFields = {
     signIn: {
       username: {
diff --git a/examples/next/pages/ui/components/authenticator/sign-in-with-phone/index.page.tsx b/examples/next/pages/ui/components/authenticator/sign-in-with-phone/index.page.tsx
index 5d33af3f373..cb0bd8ba1db 100644
--- a/examples/next/pages/ui/components/authenticator/sign-in-with-phone/index.page.tsx
+++ b/examples/next/pages/ui/components/authenticator/sign-in-with-phone/index.page.tsx
@@ -1,11 +1,18 @@
-import { Amplify } from 'aws-amplify';
+import { Amplify, I18n } from 'aws-amplify';
 
-import { withAuthenticator } from '@aws-amplify/ui-react';
+import { withAuthenticator, translations } from '@aws-amplify/ui-react';
 import '@aws-amplify/ui-react/styles.css';
 
 import awsExports from './aws-exports';
 Amplify.configure(awsExports);
 
+I18n.putVocabularies(translations);
+I18n.setLanguage('en');
+I18n.putVocabulariesForLanguage('en', {
+  'Password does not conform to policy: Password not long enough':
+    'Your password is too short! Try a longer password!',
+});
+
 const formFields = {
   signIn: {
     username: {
diff --git a/examples/vue/src/pages/ui/components/authenticator/sign-in-with-phone/index.vue b/examples/vue/src/pages/ui/components/authenticator/sign-in-with-phone/index.vue
index 2d4a22e9b12..96f1b5cd8bd 100644
--- a/examples/vue/src/pages/ui/components/authenticator/sign-in-with-phone/index.vue
+++ b/examples/vue/src/pages/ui/components/authenticator/sign-in-with-phone/index.vue
@@ -1,11 +1,18 @@
 <script setup lang="ts">
-import Amplify from 'aws-amplify';
-import { Authenticator } from '@aws-amplify/ui-vue';
+import { Amplify, I18n } from 'aws-amplify';
+import { Authenticator, translations } from '@aws-amplify/ui-vue';
 import '@aws-amplify/ui-vue/styles.css';
 import aws_exports from './aws-exports';
 
 Amplify.configure(aws_exports);
 
+I18n.putVocabularies(translations);
+I18n.setLanguage('en');
+I18n.putVocabulariesForLanguage('en', {
+  'Password does not conform to policy: Password not long enough':
+    'Your password is too short! Try a longer password!',
+});
+
 const formFields = {
   signIn: {
     username: {
diff --git a/packages/e2e/cypress/fixtures/force-change-password-phone-failure.json b/packages/e2e/cypress/fixtures/force-change-password-phone-failure.json
new file mode 100644
index 00000000000..954f43a6cbd
--- /dev/null
+++ b/packages/e2e/cypress/fixtures/force-change-password-phone-failure.json
@@ -0,0 +1,4 @@
+{
+  "__type": "InvalidPasswordException",
+  "message": "Password does not conform to policy: Password not long enough"
+}
diff --git a/packages/e2e/cypress/integration/common/shared.ts b/packages/e2e/cypress/integration/common/shared.ts
index 3d9e38b7cd3..39b55f874e7 100644
--- a/packages/e2e/cypress/integration/common/shared.ts
+++ b/packages/e2e/cypress/integration/common/shared.ts
@@ -114,6 +114,10 @@ When('I type an invalid password', () => {
   cy.findInputField('Password').type('invalidpass');
 });
 
+When('I type a short password', () => {
+  cy.findInputField('Password').type('inv');
+});
+
 When('I type an invalid wrong complexity password', () => {
   cy.findInputField('Password').type('inv');
 });
diff --git a/packages/e2e/cypress/integration/common/sign-up.ts b/packages/e2e/cypress/integration/common/sign-up.ts
index 6f39176ad2c..dd66bb455ab 100644
--- a/packages/e2e/cypress/integration/common/sign-up.ts
+++ b/packages/e2e/cypress/integration/common/sign-up.ts
@@ -13,6 +13,10 @@ When('I confirm my password', () => {
     .wait(100);
 });
 
+When('I confirm my short password', () => {
+  cy.findInputField('Confirm Password').type('inv').blur().wait(100);
+});
+
 Then('I see {string} as an input field', (name: string) => {
   cy.findByRole('textbox', { name }).should('exist');
 });
diff --git a/packages/e2e/features/ui/components/authenticator/sign-in-force-new-password.feature b/packages/e2e/features/ui/components/authenticator/sign-in-force-new-password.feature
index d17b8b94376..6dd816d65df 100644
--- a/packages/e2e/features/ui/components/authenticator/sign-in-force-new-password.feature
+++ b/packages/e2e/features/ui/components/authenticator/sign-in-force-new-password.feature
@@ -7,6 +7,21 @@ Feature: Sign In with Force New Password flow
     Given I'm running the example "ui/components/authenticator/sign-in-with-phone"
     Given I intercept '{ "headers": { "X-Amz-Target": "AWSCognitoIdentityProviderService.RespondToAuthChallenge" } }' with fixture "force-change-password"
 
+
+  @angular @react @vue 
+  Scenario: User is in a FORCE_CHANGE_PASSWORD state and gets an error that's translated
+    When I select my country code with status "FORCE_CHANGE_PASSWORD"
+    And I type my "phone number" with status "FORCE_CHANGE_PASSWORD"
+    And I type my password
+    And I click the "Sign in" button
+    Then I should see the Force Change Password screen
+    And I type a short password
+    And I confirm my short password
+    Given I intercept '{ "headers": { "X-Amz-Target": "AWSCognitoIdentityProviderService.RespondToAuthChallenge" } }' with error fixture "force-change-password-phone-failure"
+    Then I click the "Change Password" button
+    Then I see "Your password is too short! Try a longer password!"
+
+
   @angular @react @vue 
   Scenario: Back to Sign In works in the FORCE_CHANGE_PASSWORD state
     When I select my country code with status "FORCE_CHANGE_PASSWORD"
@@ -31,6 +46,7 @@ Feature: Sign In with Force New Password flow
     Then I click the "Change Password" button
     Then I see "+17755551212"
 
+
   @angular @react @vue 
   Scenario: User is in a FORCE_CHANGE_PASSWORD state and then enters an invalid new password
     When I select my country code with status "FORCE_CHANGE_PASSWORD"
diff --git a/packages/react/src/components/Authenticator/ForceNewPassword/ForceNewPassword.tsx b/packages/react/src/components/Authenticator/ForceNewPassword/ForceNewPassword.tsx
index aadd2196c44..0c65eea3e99 100644
--- a/packages/react/src/components/Authenticator/ForceNewPassword/ForceNewPassword.tsx
+++ b/packages/react/src/components/Authenticator/ForceNewPassword/ForceNewPassword.tsx
@@ -3,7 +3,7 @@ import { translate } from '@aws-amplify/ui';
 import { Button } from '../../../primitives/Button';
 import { Flex } from '../../../primitives/Flex';
 import { Heading } from '../../../primitives/Heading';
-import { Text } from '../../../primitives/Text';
+import { RemoteErrorMessage } from '../shared/RemoteErrorMessage';
 import { useAuthenticator } from '../hooks/useAuthenticator';
 import { useCustomComponents } from '../hooks/useCustomComponents';
 import { useFormHandlers } from '../hooks/useFormHandlers';
@@ -41,11 +41,8 @@ export const ForceNewPassword = ({
           <Heading level={3}>{translate('Change Password')}</Heading>
 
           <FormFields />
-          {error && (
-            <Text className="forceNewPasswordErrorText" variation="error">
-              {error}
-            </Text>
-          )}
+
+          <RemoteErrorMessage />
           <Button
             isDisabled={isPending}
             type="submit"

From f4569f80e81838d18fde5fbe3107d92d6c06b1f9 Mon Sep 17 00:00:00 2001
From: Erik Hanchett <ehhanche@amazon.com>
Date: Mon, 9 May 2022 13:56:41 -0700
Subject: [PATCH 2/4] Added changeset

---
 .changeset/tasty-tables-walk.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/tasty-tables-walk.md

diff --git a/.changeset/tasty-tables-walk.md b/.changeset/tasty-tables-walk.md
new file mode 100644
index 00000000000..00dddea0e63
--- /dev/null
+++ b/.changeset/tasty-tables-walk.md
@@ -0,0 +1,5 @@
+---
+'@aws-amplify/ui-react': patch
+---
+
+Added a translatable text for React on the Force new password change

From 7f5ec33d4d6bb546a7cb7a0c84515d96d03a2ba0 Mon Sep 17 00:00:00 2001
From: Erik Hanchett <ehhanche@amazon.com>
Date: Mon, 9 May 2022 14:00:41 -0700
Subject: [PATCH 3/4] Removed un-used variable, and spacing

---
 .../authenticator/sign-in-force-new-password.feature           | 2 --
 .../Authenticator/ForceNewPassword/ForceNewPassword.tsx        | 3 +--
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/e2e/features/ui/components/authenticator/sign-in-force-new-password.feature b/packages/e2e/features/ui/components/authenticator/sign-in-force-new-password.feature
index 6dd816d65df..bd5a0a7eb84 100644
--- a/packages/e2e/features/ui/components/authenticator/sign-in-force-new-password.feature
+++ b/packages/e2e/features/ui/components/authenticator/sign-in-force-new-password.feature
@@ -21,7 +21,6 @@ Feature: Sign In with Force New Password flow
     Then I click the "Change Password" button
     Then I see "Your password is too short! Try a longer password!"
 
-
   @angular @react @vue 
   Scenario: Back to Sign In works in the FORCE_CHANGE_PASSWORD state
     When I select my country code with status "FORCE_CHANGE_PASSWORD"
@@ -46,7 +45,6 @@ Feature: Sign In with Force New Password flow
     Then I click the "Change Password" button
     Then I see "+17755551212"
 
-
   @angular @react @vue 
   Scenario: User is in a FORCE_CHANGE_PASSWORD state and then enters an invalid new password
     When I select my country code with status "FORCE_CHANGE_PASSWORD"
diff --git a/packages/react/src/components/Authenticator/ForceNewPassword/ForceNewPassword.tsx b/packages/react/src/components/Authenticator/ForceNewPassword/ForceNewPassword.tsx
index 0c65eea3e99..2b27b8d0c85 100644
--- a/packages/react/src/components/Authenticator/ForceNewPassword/ForceNewPassword.tsx
+++ b/packages/react/src/components/Authenticator/ForceNewPassword/ForceNewPassword.tsx
@@ -14,8 +14,7 @@ export const ForceNewPassword = ({
   className,
   variation,
 }: RouteProps): JSX.Element => {
-  const { error, isPending, toSignIn } = useAuthenticator((context) => [
-    context.error,
+  const { isPending, toSignIn } = useAuthenticator((context) => [
     context.isPending,
     context.toSignIn,
   ]);

From f9962cfb3ccdf6f23e75b54f503f2a3e39777987 Mon Sep 17 00:00:00 2001
From: Erik Hanchett <ehhanche@amazon.com>
Date: Mon, 9 May 2022 14:02:00 -0700
Subject: [PATCH 4/4] Fixed changeset

---
 .changeset/tasty-tables-walk.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/tasty-tables-walk.md b/.changeset/tasty-tables-walk.md
index 00dddea0e63..6d7a5b753b4 100644
--- a/.changeset/tasty-tables-walk.md
+++ b/.changeset/tasty-tables-walk.md
@@ -2,4 +2,4 @@
 '@aws-amplify/ui-react': patch
 ---
 
-Added a translatable text for React on the Force new password change
+Added a translatable text for errors on the Force new password page