feat(@aws-amplify/ui-components): amplify-verify-contact (#4583)

* Fix bug where JSX string attributes aren't picked up by stencil * Rename to verifyContact to match <VerifyContact> * Add <VerifyContact /> stories * Initial amplify-verify-contact + stories * Add unverified to CognitoUserInterface * Update <amplify-verify-contact> to work with <amplify-authenticator> * Throw an error if the AuthState is unsupported * Move greetings to renderAuthComponent * Add story snapshots * build * Convert text to constants * build * Remove unused errorMessage(err) function * Use NO_AUTH_MODULE_FOUND for error messaging * Update packages/amplify-ui-components/src/components/amplify-verify-contact/amplify-verify-contact.tsx Co-Authored-By: Sam Martinez <sammartinez19@gmail.com> * Update packages/amplify-ui-components/src/components/amplify-verify-contact/amplify-verify-contact.tsx Co-Authored-By: Sam Martinez <sammartinez19@gmail.com> * Update to async/await * Remove VerifyContact react story * Correct type annotation to use CognitoUserInterface.unverified * Use AmplifyVerifyContact for logger * Put render at the bottom * Update amplify-authenticator snapshot with amplify-greetings being conditional Co-authored-by: Sam Martinez <sammartinez19@gmail.com>
aws-amplify · Dec 20, 2019 · 228f056 · 228f056
1 parent aa9799e
commit 228f056
Show file tree

Hide file tree

Showing 22 changed files with 1,629 additions and 1,336 deletions.
diff --git a/packages/amplify-ui-components/.storybook/stencil-jsx.js b/packages/amplify-ui-components/.storybook/stencil-jsx.js
@@ -22,11 +22,7 @@ export const h = (tag, props, ...children) => {
         }
       }
 
-      if (['number', 'string'].includes(typeof value)) {
-        node.setAttribute(key, value);
-      } else {
-        node[key] = value;
-      }
+      node[key] = value;
     });
   }
 

diff --git a/packages/amplify-ui-components/src/common/constants.ts b/packages/amplify-ui-components/src/common/constants.ts
@@ -122,6 +122,13 @@ export const UNABLE_TO_SETUP_MFA_AT_THIS_TIME = 'Failed! Unable to configure MFA
 export const SUCCESS_MFA_TYPE = 'Success! Your MFA Type is now:';
 export const LESS_THAN_TWO_MFA_VALUES_MESSAGE = 'Less than two mfa types available';
 
+// Verify Contact
+export const VERIFY_CONTACT_HEADER_TEXT = 'Account recovery requires verified contact information';
+export const VERIFY_CONTACT_SUBMIT_LABEL = 'Submit';
+export const VERIFY_CONTACT_VERIFY_LABEL = 'Verify';
+export const VERIFY_CONTACT_EMAIL_LABEL = 'Email';
+export const VERIFY_CONTACT_PHONE_LABEL = 'Phone Number';
+
 // Common events
 export const SUCCESS = 'SUCCESS';
 export const FAILURE = 'FAILURE';
diff --git a/packages/amplify-ui-components/src/common/types/auth-types.ts b/packages/amplify-ui-components/src/common/types/auth-types.ts
@@ -18,7 +18,7 @@ export enum AuthState {
   SettingMFA = 'settingMFA',
   TOTPSetup = 'TOTPSetup',
   CustomConfirmSignIn = 'customConfirmSignIn',
-  VerifyContact = 'verifycontact',
+  VerifyContact = 'verifyContact',
 }
 
 export interface FederatedConfig {
@@ -67,6 +67,10 @@ export interface CognitoUserInterface {
   userSub?: string;
   challengeName: string;
   challengeParam: { [key: string]: any };
+  unverified?: {
+    email?: string;
+    phone_number?: string;
+  };
 }
 
 export type AuthStateHandler = (nextAuthState: AuthState, data?: object) => void;