fix: Add missing translation for force new password page (#1859)

* Added new missing translation

* Added changeset

* Removed un-used variable, and spacing

* Fixed changeset

Co-authored-by: Erik Hanchett <[email protected]>

Author: ErikCH

.changeset/tasty-tables-walk.md

@@ -0,0 +1,5 @@
+---
+'@aws-amplify/ui-react': patch
+---
+
+Added a translatable text for errors on the Force new password page

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: {

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: {

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: {

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"
+}

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');
 });

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');
 });

packages/e2e/features/ui/components/authenticator/sign-in-force-new-password.feature

@@ -7,6 +7,20 @@ 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"

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';
@@ -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,
   ]);
@@ -41,11 +40,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"