Added New Translations Confirm Sign Up (aws-amplify#1357)

* Added new translations for confirm sign up page * Added changeset * Added docs for translations * Fixed some strings based on PR Co-authored-by: Erik Hanchett <[email protected]>
dpilch · Feb 18, 2022 · 65ed535 · 65ed535
1 parent 29da178
commit 65ed535
Show file tree

Hide file tree

Showing 9 changed files with 203 additions and 117 deletions.
diff --git a/.changeset/purple-avocados-taste.md b/.changeset/purple-avocados-taste.md
@@ -0,0 +1,7 @@
+---
+'@aws-amplify/ui-angular': patch
+'@aws-amplify/ui-react': patch
+'@aws-amplify/ui-vue': patch
+---
+
+Added new translations for confirm sign up page
diff --git a/docs/src/pages/components/authenticator/index.page.mdx b/docs/src/pages/components/authenticator/index.page.mdx
@@ -449,6 +449,21 @@ These [translations](https://github.com/aws-amplify/amplify-ui/blob/main/package
 
 The list of available keys are available [here](https://github.com/aws-amplify/amplify-ui/blob/main/packages/ui/src/i18n/translations.ts).
 
+#### Confirm Sign Up Page Translations
+
+The confirm sign up page has a few specialized strings that can be translated.
+These include:
+
+```
+Your code is on the way. To log in, enter the code we emailed to
+
+Your code is on the way. To log in, enter the code we texted to
+
+Your code is on the way. To log in, enter the code we sent you. It may take a minute to arrive.
+
+It may take a minute to arrive.
+```
+
 <Alert variation="info" heading="Translations Needed 📖">
   If you see any missing translations or would like to contribute a new
   language, we greatly appreciate contributions to translations we have
@@ -460,86 +475,86 @@ The list of available keys are available [here](https://github.com/aws-amplify/a
 Using the same techniques as [Internationalization (I18n)](#internationalization-i18n), you can customize the labels and text of the components:
 
 <Tabs>
-  <TabItem title="Default Values">
-    Compare the default labels below to those in the customized screens via the tabs above.
+<TabItem title="Default Values">
+  Compare the default labels below to those in the customized screens via the tabs above.
 
-    Because `I18n` manages global translations, customizing these will affect all translations of these strings (including those on this page!).
+Because `I18n` manages global translations, customizing these will affect all translations of these strings (including those on this page!).
 
-    <Example>
-      <Authenticator />
-    </Example>
-
-  </TabItem>
-  <TabItem title="Sign In">
+<Example>
+  <Authenticator />
+</Example>
 
-    ```js
-    I18n.putVocabulariesForLanguage('en', {
-      'Sign In': 'Login', // Tab header
-      'Sign in': 'Log in', // Button label
-      'Sign in to your account': 'Welcome Back!',
-      Username: 'Enter your username', // Username label
-      Password: 'Enter your password', // Password label
-      'Forgot your password?': 'Reset Password',
-    });
-    ```
+</TabItem>
+<TabItem title="Sign In">
+
+```js
+I18n.putVocabulariesForLanguage('en', {
+  'Sign In': 'Login', // Tab header
+  'Sign in': 'Log in', // Button label
+  'Sign in to your account': 'Welcome Back!',
+  Username: 'Enter your username', // Username label
+  Password: 'Enter your password', // Password label
+  'Forgot your password?': 'Reset Password',
+});
+```
 
-    <Example>
-      <LabelsAndTextDemo Component={Authenticator.SignIn} />
-    </Example>
+<Example>
+  <LabelsAndTextDemo Component={Authenticator.SignIn} />
+</Example>
 
-  </TabItem>
+</TabItem>
 
-  <TabItem title="Sign Up">
+<TabItem title="Sign Up">
 
-    ```js
-    I18n.putVocabulariesForLanguage('en', {
-      'Create Account': 'Register', // Tab header
-      'Create a new account': 'New User', // Header text
-      'Confirm Password': 'Confirm your password', // Confirm Password label
-      Email: 'Enter your email',
-      'Phone Number': 'Enter your phone number',
-    });
-    ```
+```js
+I18n.putVocabulariesForLanguage('en', {
+  'Create Account': 'Register', // Tab header
+  'Create a new account': 'New User', // Header text
+  'Confirm Password': 'Confirm your password', // Confirm Password label
+  Email: 'Enter your email',
+  'Phone Number': 'Enter your phone number',
+});
+```
 
-    <Example>
-      <LabelsAndTextDemo Component={Authenticator.SignUp} />
-    </Example>
+<Example>
+  <LabelsAndTextDemo Component={Authenticator.SignUp} />
+</Example>
 
-  </TabItem>
+</TabItem>
 
-  <TabItem title="Reset Password">
+<TabItem title="Reset Password">
 
-    ```js
-    I18n.putVocabulariesForLanguage('en', {
-      'Reset your password': 'Forgot your password?',
-      'Enter your username': 'Username or Email',
-      'Send code': 'Reset my password',
-      'Back to Sign In': 'Back to Login',
-    });
-    ```
+```js
+I18n.putVocabulariesForLanguage('en', {
+  'Reset your password': 'Forgot your password?',
+  'Enter your username': 'Username or Email',
+  'Send code': 'Reset my password',
+  'Back to Sign In': 'Back to Login',
+});
+```
 
-    <Example>
-      <LabelsAndTextDemo Component={Authenticator.ResetPassword} />
-    </Example>
+<Example>
+  <LabelsAndTextDemo Component={Authenticator.ResetPassword} />
+</Example>
 
-  </TabItem>
+</TabItem>
 
-  <TabItem title="Setup TOTP">
+<TabItem title="Setup TOTP">
 
-    ```js
-    I18n.putVocabulariesForLanguage('en', {
-      Loading: 'QR code would show here',
-      Code: '2FA Code',
-      Confirm: 'Confirm 2FA',
-      'Back to Sign In': 'Back to Login',
-    });
-    ```
+```js
+I18n.putVocabulariesForLanguage('en', {
+  Loading: 'QR code would show here',
+  Code: '2FA Code',
+  Confirm: 'Confirm 2FA',
+  'Back to Sign In': 'Back to Login',
+});
+```
 
-    <Example>
-      <LabelsAndTextDemo Component={Authenticator.SetupTOTP} />
-    </Example>
+<Example>
+  <LabelsAndTextDemo Component={Authenticator.SetupTOTP} />
+</Example>
 
-  </TabItem>
+</TabItem>
 </Tabs>
 
 ### Sign Up Fields
@@ -554,39 +569,40 @@ The following example customizes the Sign Up screen by:
 </Fragment>
 
 <Example>
-  <Authenticator
-    initialState="signUp"
-    loginMechanisms={['email']}
-    signUpAttributes={['preferred_username']}
-    components={{
-      SignUp: {
-        FormFields() {
-          const { validationErrors } = useAuthenticator();
-          return (
-            <>
-              <Authenticator.SignUp.FormFields />
-
-              <CheckboxField
-                errorMessage={validationErrors.acknowledgement}
-                hasError={!!validationErrors.acknowledgement}
-                name="acknowledgement"
-                value="yes"
-                label="I agree with the Terms & Conditions"
-              />
-            </>
-          );
-        },
-      },
-    }}
-    services={{
-      async validateCustomSignUp(formData) {
-        if (!formData.acknowledgement) {
-          return {
-            acknowledgement: 'You must agree to the Terms & Conditions',
-          };
-        }
+<Authenticator
+  initialState="signUp"
+  loginMechanisms={['email']}
+  signUpAttributes={['preferred_username']}
+  components={{
+    SignUp: {
+      FormFields() {
+        const { validationErrors } = useAuthenticator();
+        return (
+          <>
+            <Authenticator.SignUp.FormFields />
+
+            <CheckboxField
+              errorMessage={validationErrors.acknowledgement}
+              hasError={!!validationErrors.acknowledgement}
+              name="acknowledgement"
+              value="yes"
+              label="I agree with the Terms & Conditions"
+            />
+          </>
+        );
       },
-    }}
+    },
+
+}}
+services={{
+    async validateCustomSignUp(formData) {
+      if (!formData.acknowledgement) {
+        return {
+          acknowledgement: 'You must agree to the Terms & Conditions',
+        };
+      }
+    },
+  }}
 
 />
 

diff --git a/.../src/pages/ui/components/authenticator/sign-up-with-email/sign-up-with-email.component.ts b/.../src/pages/ui/components/authenticator/sign-up-with-email/sign-up-with-email.component.ts
@@ -1,16 +1,28 @@
-import { Component } from '@angular/core';
-import { Amplify, Auth } from 'aws-amplify';
+import { Component, OnInit } from '@angular/core';
+import { Amplify, Auth, I18n } from 'aws-amplify';
 import awsExports from './aws-exports';
+import { translations } from '@aws-amplify/ui-angular';
 
 @Component({
   selector: 'sign-up-with-email',
   templateUrl: 'sign-up-with-email.component.html',
 })
-export class SignUpWithEmailComponent {
+export class SignUpWithEmailComponent implements OnInit {
   constructor() {
     Amplify.configure(awsExports);
   }
 
+  ngOnInit() {
+    I18n.putVocabularies(translations);
+    I18n.setLanguage('en');
+    I18n.putVocabulariesForLanguage('en', {
+      'Your code is on the way. To log in, enter the code we emailed to':
+        'Enter this code:',
+      'It may take a minute to arrive.':
+        'It will take several minutes to arrive.',
+    });
+  }
+
   services = {
     async handleSignUp(formData: Record<string, any>) {
       let { username, password, attributes } = formData;

diff --git a/examples/next/pages/ui/components/authenticator/sign-up-with-email/index.page.tsx b/examples/next/pages/ui/components/authenticator/sign-up-with-email/index.page.tsx
@@ -1,11 +1,19 @@
-import { Amplify, Auth } from 'aws-amplify';
+import { Amplify, Auth, I18n } from 'aws-amplify';
 
-import { Authenticator } from '@aws-amplify/ui-react';
+import { Authenticator, 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', {
+  'Your code is on the way. To log in, enter the code we emailed to':
+    'Enter this code:',
+  'It may take a minute to arrive.': 'It will take several minutes to arrive.',
+});
+
 export default function AuthenticatorWithEmail() {
   const services = {
     async handleSignUp(formData) {

diff --git a/examples/vue/src/pages/ui/components/authenticator/sign-up-with-email/index.vue b/examples/vue/src/pages/ui/components/authenticator/sign-up-with-email/index.vue
@@ -1,11 +1,19 @@
 <script setup lang="ts">
-import Amplify, { Auth } from 'aws-amplify';
-import { Authenticator } from '@aws-amplify/ui-vue';
+import Amplify, { Auth, 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', {
+  'Your code is on the way. To log in, enter the code we emailed to':
+    'Enter this code:',
+  'It may take a minute to arrive.': 'It will take several minutes to arrive.',
+});
+
 const services = {
   async handleSignUp(formData) {
     let { username, password, attributes } = formData;

diff --git a/.../src/lib/components/authenticator/components/confirm-sign-up/confirm-sign-up.component.ts b/.../src/lib/components/authenticator/components/confirm-sign-up/confirm-sign-up.component.ts
@@ -13,6 +13,16 @@ export class ConfirmSignUpComponent {
   // translated texts
   public resendCodeText = translate('Resend Code');
   public confirmText = translate('Confirm');
+  public emailMessage = translate(
+    'Your code is on the way. To log in, enter the code we emailed to'
+  );
+  public textedMessage = translate(
+    'Your code is on the way. To log in, enter the code we texted to'
+  );
+  public defaultMessage = translate(
+    'Your code is on the way. To log in, enter the code we sent you. It may take a minute to arrive.'
+  );
+  public minutesMessage = translate('It may take a minute to arrive.');
 
   constructor(public authenticator: AuthenticatorService) {}
 
@@ -33,12 +43,10 @@ export class ConfirmSignUpComponent {
     const { codeDeliveryDetails: { DeliveryMedium, Destination } = {} } =
       this.authenticator;
     return DeliveryMedium === 'EMAIL'
-      ? `Your code is on the way. To log in, enter the code we emailed to ${Destination}. It may take a minute to arrive.`
+      ? `${this.emailMessage} ${Destination}. ${this.minutesMessage}`
       : DeliveryMedium === 'SMS'
-      ? `Your code is on the way. To log in, enter the code we texted to ${Destination}. It may take a minute to arrive.`
-      : translate(
-          `Your code is on the way. To log in, enter the code we sent you. It may take a minute to arrive.`
-        );
+      ? `${this.textedMessage} ${Destination}. ${this.minutesMessage}`
+      : translate(`${this.defaultMessage}`);
   }
 
   onInput(event: Event) {

diff --git a/packages/e2e/features/ui/components/authenticator/confirm-sign-up.feature b/packages/e2e/features/ui/components/authenticator/confirm-sign-up.feature
@@ -8,6 +8,16 @@ Feature: Confirm Sign Up
     Given I'm running the example "ui/components/authenticator/sign-up-with-email"
     And I intercept '{ "headers": { "X-Amz-Target": "AWSCognitoIdentityProviderService.SignUp" } }' with fixture "sign-up-with-email"
 
+  @angular @react @vue
+  Scenario: Confirm  new password page has correct translations
+    When I type a new "email"
+    And I type my password
+    And I confirm my password
+    And I click the "Create Account" button
+    And I see "Confirmation Code"
+    Then I see "Enter this code:"
+    Then I see "It will take several minutes to arrive."
+
   @angular @react @vue
   Scenario: Confirm a new username & password with an invalid code
     When I type a new "email"