Clean up of Sign In and Sign Up Pages (#690)

* First commit cleanup * Fixed Vue and Angular * translate as Phrase -> translate<string> * Remove Phrase from import * Fixed types on strings Co-authored-by: Erik Hanchett <ehhanche@amazon.com> Co-authored-by: wlee221 <wlee221@live.unc.edu>
aws-amplify · Nov 12, 2021 · 6a40c1f · 6a40c1f
1 parent 5482edc
commit 6a40c1f
Show file tree

Hide file tree

Showing 23 changed files with 180 additions and 152 deletions.
diff --git a/examples/vue/src/styles.scss b/examples/vue/src/styles.scss
@@ -24,11 +24,6 @@ body {
   align-items: center;
 }
 
-.amplify-divider {
-  display: block !important; /* because of all: unset */
-  margin: 1rem 0 !important; /* margin doesn't work in React for divider */
-}
-
 .amplify-placeholder {
   display: block;
 }

diff --git a/...mponents/amplify-federated-sign-in-button/amplify-federated-sign-in-button.component.html b/...mponents/amplify-federated-sign-in-button/amplify-federated-sign-in-button.component.html
@@ -8,7 +8,7 @@
 >
   <div
     class="amplify-flex federated-sign-in-button-row"
-    style="flex-direction: row; justify-content: center"
+    style="flex-direction: row; justify-content: center; align-items: center"
   >
     <ng-content></ng-content>
   </div>

diff --git a/...thenticator/components/amplify-federated-sign-in/amplify-federated-sign-in.component.html b/...thenticator/components/amplify-federated-sign-in/amplify-federated-sign-in.component.html
@@ -1,17 +1,10 @@
 <div
   class="amplify-flex federated-sign-in-container"
-  style="flex-direction: column"
+  style="flex-direction: column; padding: 0 0 1rem 0"
   *ngIf="shouldShowFederatedSignIn"
   data-orientation="horizontal"
   data-size="small"
 >
-  <hr
-    class="amplify-divider"
-    aria-orientation="horizontal"
-    data-size="small"
-    style="margin: '1rem 0'"
-  />
-
   <amplify-federated-sign-in-button
     *ngIf="includeAmazon"
     [text]="signInAmazonText"
@@ -108,4 +101,13 @@
       {{ signInGoogleText }}
     </p>
   </amplify-federated-sign-in-button>
+
+  <div class="amplify-flex" data-or-container>
+    <div data-or-line>or</div>
+    <hr
+      class="amplify-divider"
+      aria-orientation="horizontal"
+      data-size="small"
+    />
+  </div>
 </div>
diff --git a/...authenticator/components/amplify-federated-sign-in/amplify-federated-sign-in.component.ts b/...authenticator/components/amplify-federated-sign-in/amplify-federated-sign-in.component.ts
@@ -16,16 +16,17 @@ export class AmplifyFederatedSignInComponent implements OnInit {
   public shouldShowFederatedSignIn = false;
 
   // translated texts
-  public signInAmazonText = translate('Sign In with Amazon');
-  public signInAppleText = translate('Sign In with Apple');
-  public signInFacebookText = translate('Sign In with Facebook');
-  public signInGoogleText = translate('Sign In with Google');
+  public signInAmazonText: string;
+  public signInAppleText: string;
+  public signInFacebookText: string;
+  public signInGoogleText: string;
 
   constructor(private authenticator: AuthenticatorService) {}
 
   ngOnInit(): void {
     const { socialProviders } = this.authenticator.context?.config;
 
+    this.setFederatedTexts();
     this.includeAmazon = socialProviders?.includes('amazon');
     this.includeApple = socialProviders?.includes('apple');
     this.includeGoogle = socialProviders?.includes('google');
@@ -37,4 +38,21 @@ export class AmplifyFederatedSignInComponent implements OnInit {
       this.includeFacebook ||
       this.includeGoogle;
   }
+
+  private setFederatedTexts() {
+    const { route } = this.authenticator;
+    const federatedText = route === 'signUp' ? 'Up' : 'In';
+    this.signInAmazonText = translate<string>(
+      `Sign ${federatedText} with Amazon`
+    );
+    this.signInAppleText = translate<string>(
+      `Sign ${federatedText} with Apple`
+    );
+    this.signInFacebookText = translate<string>(
+      `Sign ${federatedText} with Facebook`
+    );
+    this.signInGoogleText = translate<string>(
+      `Sign ${federatedText} with Google`
+    );
+  }
 }
diff --git a/...rc/lib/components/authenticator/components/amplify-sign-in/amplify-sign-in.component.html b/...rc/lib/components/authenticator/components/amplify-sign-in/amplify-sign-in.component.html
@@ -1,14 +1,13 @@
 <div data-amplify-container>
   <form data-amplify-form (submit)="onSubmit($event)" (input)="onInput($event)">
+    <amplify-federated-sign-in></amplify-federated-sign-in>
     <fieldset
       class="amplify-flex"
       style="flex-direction: column"
       data-amplify-fieldset
       [disabled]="authenticator.isPending"
     >
-      <amplify-slot name="sign-in-header">
-        <h3 class="amplify-heading">{{ this.headerText }}</h3>
-      </amplify-slot>
+      <amplify-slot name="sign-in-header"></amplify-slot>
       <amplify-user-name-alias></amplify-user-name-alias>
       <amplify-form-field
         data-amplify-password
@@ -32,7 +31,6 @@ <h3 class="amplify-heading">{{ this.headerText }}</h3>
         {{ authenticator.error }}
       </amplify-error>
     </fieldset>
-    <amplify-federated-sign-in></amplify-federated-sign-in>
     <amplify-slot name="sign-in-footer"> </amplify-slot>
   </form>
 </div>
diff --git a/.../src/lib/components/authenticator/components/amplify-sign-in/amplify-sign-in.component.ts b/.../src/lib/components/authenticator/components/amplify-sign-in/amplify-sign-in.component.ts
@@ -14,7 +14,6 @@ import { translate } from '@aws-amplify/ui';
 })
 export class AmplifySignInComponent {
   @HostBinding('attr.data-amplify-authenticator-signin') dataAttr = '';
-  @Input() public headerText = translate('Sign in to your account');
 
   // translated phrases
   public forgotPasswordText = translate('Forgot your password? ');

diff --git a/...rc/lib/components/authenticator/components/amplify-sign-up/amplify-sign-up.component.html b/...rc/lib/components/authenticator/components/amplify-sign-up/amplify-sign-up.component.html
@@ -1,8 +1,7 @@
 <form data-amplify-form (submit)="onSubmit($event)" (input)="onInput($event)">
+  <amplify-federated-sign-in></amplify-federated-sign-in>
   <div class="amplify-flex" style="flex-direction: column">
-    <amplify-slot name="sign-up-header">
-      <h3 class="amplify-heading">{{ this.headerText }}</h3>
-    </amplify-slot>
+    <amplify-slot name="sign-up-header"></amplify-slot>
     <div class="amplify-flex" style="flex-direction: column">
       <amplify-slot name="sign-up-form-fields" [context]="context">
         <amplify-sign-up-form-fields></amplify-sign-up-form-fields>
@@ -26,7 +25,6 @@ <h3 class="amplify-heading">{{ this.headerText }}</h3>
         {{ createAccountText }}
       </button>
     </amplify-slot>
-    <amplify-federated-sign-in></amplify-federated-sign-in>
     <amplify-slot name="sign-up-footer"> </amplify-slot>
   </div>
 </form>
diff --git a/.../src/lib/components/authenticator/components/amplify-sign-up/amplify-sign-up.component.ts b/.../src/lib/components/authenticator/components/amplify-sign-up/amplify-sign-up.component.ts
@@ -7,8 +7,6 @@ import { translate } from '@aws-amplify/ui';
   templateUrl: './amplify-sign-up.component.html',
 })
 export class AmplifySignUpComponent {
-  @Input() headerText = translate('Create a new account');
-
   @HostBinding('attr.data-amplify-authenticator-signup') dataAttr = '';
 
   // translated texts

diff --git a/packages/e2e/features/ui/components/authenticator/i18n.feature b/packages/e2e/features/ui/components/authenticator/i18n.feature
@@ -7,7 +7,6 @@ Feature: Internationalization (I18n)
 
   @angular @react @vue
   Scenario: Authenticator reflects `I18n.setLanguage('ja')`
-    Then the "Create a new account" header is in "ja"
     And the "Email" input is in "ja"
     And the "Password" input is in "ja"
     And the "Confirm Password" input is in "ja"

diff --git a/packages/e2e/features/ui/components/authenticator/sign-in-sms-mfa.feature b/packages/e2e/features/ui/components/authenticator/sign-in-sms-mfa.feature
@@ -22,7 +22,7 @@ Feature: Sign In with SMS MFA
     And I type my password
     And I click the "Sign in" button
     And I click the "Back to Sign In" button
-    Then I see "Sign in to your account"
+    Then I see "Sign in"
 
   @angular @react @vue
   Scenario: Incorrect SMS code

diff --git a/packages/e2e/features/ui/components/authenticator/sign-in-totp-mfa.feature b/packages/e2e/features/ui/components/authenticator/sign-in-totp-mfa.feature
@@ -20,7 +20,7 @@ Feature: Sign In with TOTP MFA
     And I type my password
     And I click the "Sign in" button
     And I click the "Back to Sign In" button
-    Then I see "Sign in to your account"
+    Then I see "Sign in"
 
   @angular @react @vue
   Scenario: Invalid TOTP code

diff --git a/packages/e2e/features/ui/components/authenticator/sign-in-with-email.feature b/packages/e2e/features/ui/components/authenticator/sign-in-with-email.feature
@@ -38,7 +38,7 @@ Feature: Sign In with Email
     And I click the "Sign in" button
     Then I see "Sign out"
     And I click the "Sign out" button
-    Then I see "Sign in to your account"
+    Then I see "Sign in"
 
 
 

diff --git a/packages/e2e/features/ui/components/authenticator/sign-in-with-phone.feature b/packages/e2e/features/ui/components/authenticator/sign-in-with-phone.feature
@@ -49,7 +49,7 @@ Feature: Sign In with Phone Number
     And I click the "Sign in" button
     Then I see "Sign out"
     And I click the "Sign out" button
-    Then I see "Sign in to your account"
+    Then I see "Sign in"
 
 
   # FORCE_CHANGE_PASSWORD tests are skipped as the temporary passwords used for these

diff --git a/packages/e2e/features/ui/components/authenticator/sign-in-with-username.feature b/packages/e2e/features/ui/components/authenticator/sign-in-with-username.feature
@@ -42,7 +42,7 @@ Feature: Sign In with Username
     When I reload the page
     Then I see "Sign out"
     And I click the "Sign out" button
-    Then I see "Sign in to your account"
+    Then I see "Sign in"
 
   # FORCE_CHANGE_PASSWORD tests are skipped as the temporary passwords used for these
   # test accounts will expire in Cognito.

diff --git a/packages/e2e/features/ui/components/authenticator/withAuthenticator.feature b/packages/e2e/features/ui/components/authenticator/withAuthenticator.feature
@@ -7,7 +7,7 @@ Feature: withAuthenticator
 
   @react
   Scenario: Application is wrapped with Authenticator
-    Then I see "Sign in to your account"
+    Then I see "Sign in"
 
   @react
   Scenario: Application renders when signed in

diff --git a/packages/react/src/components/Authenticator/FederatedSignIn/FederatedSignIn.tsx b/packages/react/src/components/Authenticator/FederatedSignIn/FederatedSignIn.tsx
@@ -1,21 +1,25 @@
 import { FederatedIdentityProviders, translate } from '@aws-amplify/ui';
 
 import { useAuthenticator } from '..';
-import { Divider, Flex } from '../../..';
+import { Divider, Flex, View } from '../../..';
 import { FederatedSignInButton } from './FederatedSignInButtons';
 
 export function FederatedSignIn() {
-  const { _state } = useAuthenticator();
+  const { _state, route } = useAuthenticator();
   const { socialProviders = [] } = _state.context.config;
 
   if (socialProviders.length === 0) {
     return null;
   }
 
-  return (
-    <Flex direction="column" className="federated-sign-in-container">
-      <Divider size="small" />
+  const federatedText = route === 'signUp' ? 'Up' : 'In';
 
+  return (
+    <Flex
+      direction="column"
+      padding={`0 0 1rem 0`}
+      className="federated-sign-in-container"
+    >
       {socialProviders.map((provider) => {
         switch (provider) {
           case 'amazon':
@@ -24,7 +28,7 @@ export function FederatedSignIn() {
                 icon="amazon"
                 key={provider}
                 provider={FederatedIdentityProviders.Amazon}
-                text={translate('Sign In with Amazon')}
+                text={translate<string>(`Sign ${federatedText} with Amazon`)}
               />
             );
           case 'apple':
@@ -33,7 +37,7 @@ export function FederatedSignIn() {
                 icon="apple"
                 key={provider}
                 provider={FederatedIdentityProviders.Apple}
-                text={translate('Sign In with Apple')}
+                text={translate<string>(`Sign ${federatedText} with Apple`)}
               />
             );
           case 'facebook':
@@ -42,7 +46,7 @@ export function FederatedSignIn() {
                 icon="facebook"
                 key={provider}
                 provider={FederatedIdentityProviders.Facebook}
-                text={translate('Sign In with Facebook')}
+                text={translate<string>(`Sign ${federatedText} with Facebook`)}
               />
             );
           case 'google':
@@ -51,7 +55,7 @@ export function FederatedSignIn() {
                 icon="google"
                 key={provider}
                 provider={FederatedIdentityProviders.Google}
-                text={translate('Sign In with Google')}
+                text={translate<string>(`Sign ${federatedText} with Google`)}
               />
             );
           default:
@@ -60,6 +64,11 @@ export function FederatedSignIn() {
             );
         }
       })}
+
+      <Flex data-or-container="">
+        <View data-or-line>or</View>
+        <Divider size="small" />
+      </Flex>
     </Flex>
   );
 }