Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 4 commits into from
May 9, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/tasty-tables-walk.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@aws-amplify/ui-react': patch
---

Added a translatable text for errors on the Force new password page
Original file line number Diff line number Diff line change
@@ -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: {
Expand Down
Original file line number Diff line number Diff line change
@@ -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: {
Expand Down
Original file line number Diff line number Diff line change
@@ -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: {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"__type": "InvalidPasswordException",
"message": "Password does not conform to policy: Password not long enough"
}
4 changes: 4 additions & 0 deletions packages/e2e/cypress/integration/common/shared.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
Expand Down
4 changes: 4 additions & 0 deletions packages/e2e/cypress/integration/common/sign-up.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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,
]);
Expand All @@ -41,11 +40,8 @@ export const ForceNewPassword = ({
<Heading level={3}>{translate('Change Password')}</Heading>

<FormFields />
{error && (
<Text className="forceNewPasswordErrorText" variation="error">
{error}
</Text>
)}

<RemoteErrorMessage />
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be using RemoteErrorMessage so it looks and behaves like our other error messages in other components.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice and clean!

<Button
isDisabled={isPending}
type="submit"
Expand Down