From 6746ff4709aef9efc83a31c581da9fcdf2a3574b Mon Sep 17 00:00:00 2001
From: Erik Hanchett <ehhanche@amazon.com>
Date: Tue, 23 Nov 2021 13:40:13 -0800
Subject: [PATCH 01/10] Added better confirm dx

---
 .../form-field/form-field.component.html      |  1 +
 .../form-field/form-field.component.ts        |  6 ++++++
 .../password-field.component.html             |  1 +
 .../password-field.component.ts               |  3 ++-
 .../e2e/cypress/integration/common/sign-in.ts |  2 +-
 .../e2e/cypress/integration/common/sign-up.ts |  4 +++-
 .../Authenticator/SignUp/FormFields.tsx       |  9 ++++++++-
 .../machines/authenticator/defaultServices.ts | 19 ++++++++++++++++---
 .../authenticator-sign-up-form-fields.vue     |  8 ++++++++
 packages/vue/src/components/authenticator.vue |  2 +-
 .../vue/src/components/password-control.vue   |  6 ++++++
 11 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/packages/angular/projects/ui-angular/src/lib/components/authenticator/components/form-field/form-field.component.html b/packages/angular/projects/ui-angular/src/lib/components/authenticator/components/form-field/form-field.component.html
index 758395a6df7..be80d97f0cb 100644
--- a/packages/angular/projects/ui-angular/src/lib/components/authenticator/components/form-field/form-field.component.html
+++ b/packages/angular/projects/ui-angular/src/lib/components/authenticator/components/form-field/form-field.component.html
@@ -24,6 +24,7 @@
     [disabled]="disabled"
     [labelHidden]="labelHidden"
     [autocomplete]="inferAutocomplete()"
+    (onBlur)="onBlur($event)"
   ></amplify-password-field>
 
   <amplify-text-field
diff --git a/packages/angular/projects/ui-angular/src/lib/components/authenticator/components/form-field/form-field.component.ts b/packages/angular/projects/ui-angular/src/lib/components/authenticator/components/form-field/form-field.component.ts
index 57707ce4456..848a26b3442 100644
--- a/packages/angular/projects/ui-angular/src/lib/components/authenticator/components/form-field/form-field.component.ts
+++ b/packages/angular/projects/ui-angular/src/lib/components/authenticator/components/form-field/form-field.component.ts
@@ -65,6 +65,12 @@ export class FormFieldComponent implements OnInit {
     return validationError[this.name];
   }
 
+  public onBlur($event: Event) {
+    let { name } = <HTMLInputElement>$event.target;
+
+    this.authenticator.updateForm({ name: `touched_${name}`, value: true });
+  }
+
   inferLabel(): string {
     const label = this.label || this.attributeMap[this.name]?.label;
     return translate<string>(label);
diff --git a/packages/angular/projects/ui-angular/src/lib/primitives/password-field/password-field.component.html b/packages/angular/projects/ui-angular/src/lib/primitives/password-field/password-field.component.html
index 0a57cdd4c0d..674978fb2b3 100644
--- a/packages/angular/projects/ui-angular/src/lib/primitives/password-field/password-field.component.html
+++ b/packages/angular/projects/ui-angular/src/lib/primitives/password-field/password-field.component.html
@@ -12,6 +12,7 @@
     [value]="initialValue"
     [attr.disabled]="disabled ? '' : null"
     [autocomplete]="autocomplete"
+    (blur)="onBlur.emit($event)"
   />
   <div class="amplify-field-group__outer-end">
     <button
diff --git a/packages/angular/projects/ui-angular/src/lib/primitives/password-field/password-field.component.ts b/packages/angular/projects/ui-angular/src/lib/primitives/password-field/password-field.component.ts
index 1e60d9df254..06deb2bf14e 100644
--- a/packages/angular/projects/ui-angular/src/lib/primitives/password-field/password-field.component.ts
+++ b/packages/angular/projects/ui-angular/src/lib/primitives/password-field/password-field.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { translate } from '@aws-amplify/ui';
 import { nanoid } from 'nanoid';
 
@@ -16,6 +16,7 @@ export class PasswordFieldComponent {
   @Input() placeholder = '';
   @Input() required = true;
   @Input() labelHidden = false;
+  @Output() onBlur = new EventEmitter<Event>();
 
   public type: 'text' | 'password' = 'password';
 
diff --git a/packages/e2e/cypress/integration/common/sign-in.ts b/packages/e2e/cypress/integration/common/sign-in.ts
index e253a91e866..03fbbc0d1f1 100644
--- a/packages/e2e/cypress/integration/common/sign-in.ts
+++ b/packages/e2e/cypress/integration/common/sign-in.ts
@@ -33,5 +33,5 @@ When(
 );
 
 When('I type my password', () => {
-  cy.findInputField('Password').type(Cypress.env('VALID_PASSWORD'));
+  cy.findInputField('Password').type(Cypress.env('VALID_PASSWORD')).blur();
 });
diff --git a/packages/e2e/cypress/integration/common/sign-up.ts b/packages/e2e/cypress/integration/common/sign-up.ts
index 51e7e458f2c..07065f76a79 100644
--- a/packages/e2e/cypress/integration/common/sign-up.ts
+++ b/packages/e2e/cypress/integration/common/sign-up.ts
@@ -7,7 +7,9 @@ Given('I click {string}', (text: string) => {
 });
 
 When('I confirm my password', () => {
-  cy.findInputField('Confirm Password').type(Cypress.env('VALID_PASSWORD'));
+  cy.findInputField('Confirm Password')
+    .type(Cypress.env('VALID_PASSWORD'))
+    .blur();
 });
 
 Then('I see {string} as an input field', (name: string) => {
diff --git a/packages/react/src/components/Authenticator/SignUp/FormFields.tsx b/packages/react/src/components/Authenticator/SignUp/FormFields.tsx
index e79e089ca69..a35e1ab199e 100644
--- a/packages/react/src/components/Authenticator/SignUp/FormFields.tsx
+++ b/packages/react/src/components/Authenticator/SignUp/FormFields.tsx
@@ -10,7 +10,7 @@ import { PasswordField, PhoneNumberField, Text, TextField } from '../../..';
 import { UserNameAlias as UserNameAliasComponent } from '../shared';
 
 export function FormFields() {
-  const { _state } = useAuthenticator();
+  const { _state, updateForm } = useAuthenticator();
   const { country_code, validationError } = getActorContext(
     _state
   ) as SignUpContext;
@@ -23,6 +23,11 @@ export function FormFields() {
   // Only 1 is supported, so `['email', 'phone_number']` will only show `email`
   const loginMechanism = fieldNames.shift() as LoginMechanism;
 
+  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+    const { name } = event.target;
+    updateForm({ name: `touched_${name}`, value: true });
+  };
+
   return (
     <>
       <UserNameAliasComponent
@@ -39,6 +44,7 @@ export function FormFields() {
         label={translate('Password')}
         labelHidden={true}
         placeholder={translate('Password')}
+        onBlur={handleBlur}
       />
 
       <PasswordField
@@ -50,6 +56,7 @@ export function FormFields() {
         label={translate('Confirm Password')}
         labelHidden={true}
         name="confirm_password"
+        onBlur={handleBlur}
       />
 
       {validationError['confirm_password'] && (
diff --git a/packages/ui/src/machines/authenticator/defaultServices.ts b/packages/ui/src/machines/authenticator/defaultServices.ts
index c3c0596da8c..dfa0a07e712 100644
--- a/packages/ui/src/machines/authenticator/defaultServices.ts
+++ b/packages/ui/src/machines/authenticator/defaultServices.ts
@@ -14,13 +14,26 @@ export const defaultServices = {
   // Validation hooks for overriding
   async validateCustomSignUp(formData): Promise<ValidatorResult> {},
   async validateConfirmPassword<Validator>(formData): Promise<ValidatorResult> {
-    const { password, confirm_password } = formData;
+    const {
+      password,
+      confirm_password,
+      touched_confirm_password,
+      touched_password,
+    } = formData;
 
     if (!password && !confirm_password) {
       // these inputs are clean, don't complain yet
       return null;
-    } else if (password && confirm_password && password !== confirm_password) {
-      // only return an error if both fields have text entered and the passwords do not match
+    } else if (
+      password &&
+      confirm_password &&
+      password !== confirm_password &&
+      ((touched_confirm_password && touched_password) ||
+        (password.length >= 6 && confirm_password.length >= 6))
+    ) {
+      // Only return an error if both fields have text entered,
+      // the passwords do not match, and the fields have been
+      // touched or the password and confirm password is longer then or equal to 6.
       return {
         confirm_password: 'Your passwords must match',
       };
diff --git a/packages/vue/src/components/authenticator-sign-up-form-fields.vue b/packages/vue/src/components/authenticator-sign-up-form-fields.vue
index 68b8bcc77ab..162e8d086c1 100644
--- a/packages/vue/src/components/authenticator-sign-up-form-fields.vue
+++ b/packages/vue/src/components/authenticator-sign-up-form-fields.vue
@@ -20,6 +20,7 @@ const {
 } = state;
 
 const { validationErrors } = toRefs(useAuthenticator());
+const props = useAuthenticator();
 
 const inputAttributes: ComputedRef<AuthInputAttributes> = computed(
   () => authInputAttributes
@@ -46,6 +47,11 @@ fieldNames = fieldNames.filter((fieldName) => {
   return hasDefaultField;
 });
 
+function onBlur(e: Event) {
+  const { name, value } = <HTMLInputElement>e.target;
+  props.updateForm({ name: `touched_${name}`, value: true });
+}
+
 // Only 1 is supported, so `['email', 'phone_number']` will only show `email`
 const loginMechanism = fieldNames.shift() as LoginMechanism;
 </script>
@@ -64,6 +70,7 @@ const loginMechanism = fieldNames.shift() as LoginMechanism;
       :label="passwordLabel"
       autocomplete="new-password"
       :ariainvalid="!!validationErrors.confirm_password"
+      @blur="onBlur"
     />
   </base-wrapper>
   <base-wrapper
@@ -78,6 +85,7 @@ const loginMechanism = fieldNames.shift() as LoginMechanism;
       :label="confirmPasswordLabel"
       autocomplete="new-password"
       :ariainvalid="!!validationErrors.confirm_password"
+      @blur="onBlur"
     />
   </base-wrapper>
   <p
diff --git a/packages/vue/src/components/authenticator.vue b/packages/vue/src/components/authenticator.vue
index a653300c4b6..857e8fea5f5 100644
--- a/packages/vue/src/components/authenticator.vue
+++ b/packages/vue/src/components/authenticator.vue
@@ -67,7 +67,7 @@ const machine = createAuthenticatorMachine({
 });
 
 const service = useInterpret(machine, {
-  devTools: process.env.NODE_ENV === 'development',
+  devTools: process.env.NODE_ENV !== 'development',
 });
 
 const { state, send } = useActor(service);
diff --git a/packages/vue/src/components/password-control.vue b/packages/vue/src/components/password-control.vue
index bf986b8633e..2b484b7b192 100644
--- a/packages/vue/src/components/password-control.vue
+++ b/packages/vue/src/components/password-control.vue
@@ -26,6 +26,11 @@ function togglePasswordText(): void {
   showHideType.value = showHideType.value === 'password' ? 'text' : 'password';
 }
 </script>
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+};
+</script>
 
 <template>
   <base-label class="amplify-label sr-only" :for="'amplify-field-' + random">
@@ -33,6 +38,7 @@ function togglePasswordText(): void {
   </base-label>
   <base-wrapper class="amplify-flex amplify-field-group">
     <base-input
+      v-bind="$attrs"
       v-model="password"
       class="amplify-input amplify-field-group__control"
       :aria-invalid="ariainvalid"

From 6c4da2f1843c305d1ccd5e1b8ee4c8e06007c551 Mon Sep 17 00:00:00 2001
From: Erik Hanchett <ehhanche@amazon.com>
Date: Tue, 23 Nov 2021 13:45:31 -0800
Subject: [PATCH 02/10] Fixed devtools

---
 packages/vue/src/components/authenticator.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vue/src/components/authenticator.vue b/packages/vue/src/components/authenticator.vue
index 857e8fea5f5..a653300c4b6 100644
--- a/packages/vue/src/components/authenticator.vue
+++ b/packages/vue/src/components/authenticator.vue
@@ -67,7 +67,7 @@ const machine = createAuthenticatorMachine({
 });
 
 const service = useInterpret(machine, {
-  devTools: process.env.NODE_ENV !== 'development',
+  devTools: process.env.NODE_ENV === 'development',
 });
 
 const { state, send } = useActor(service);

From e655083c3cfda34eaa19450c3ee3f9c3660b8736 Mon Sep 17 00:00:00 2001
From: Erik Hanchett <ehhanche@amazon.com>
Date: Tue, 23 Nov 2021 13:58:17 -0800
Subject: [PATCH 03/10] Fixed output name

---
 .../components/form-field/form-field.component.html             | 2 +-
 .../lib/primitives/password-field/password-field.component.html | 2 +-
 .../lib/primitives/password-field/password-field.component.ts   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/angular/projects/ui-angular/src/lib/components/authenticator/components/form-field/form-field.component.html b/packages/angular/projects/ui-angular/src/lib/components/authenticator/components/form-field/form-field.component.html
index be80d97f0cb..f74116e05c5 100644
--- a/packages/angular/projects/ui-angular/src/lib/components/authenticator/components/form-field/form-field.component.html
+++ b/packages/angular/projects/ui-angular/src/lib/components/authenticator/components/form-field/form-field.component.html
@@ -24,7 +24,7 @@
     [disabled]="disabled"
     [labelHidden]="labelHidden"
     [autocomplete]="inferAutocomplete()"
-    (onBlur)="onBlur($event)"
+    (setBlur)="onBlur($event)"
   ></amplify-password-field>
 
   <amplify-text-field
diff --git a/packages/angular/projects/ui-angular/src/lib/primitives/password-field/password-field.component.html b/packages/angular/projects/ui-angular/src/lib/primitives/password-field/password-field.component.html
index 674978fb2b3..4fdd3556efe 100644
--- a/packages/angular/projects/ui-angular/src/lib/primitives/password-field/password-field.component.html
+++ b/packages/angular/projects/ui-angular/src/lib/primitives/password-field/password-field.component.html
@@ -12,7 +12,7 @@
     [value]="initialValue"
     [attr.disabled]="disabled ? '' : null"
     [autocomplete]="autocomplete"
-    (blur)="onBlur.emit($event)"
+    (blur)="setBlur.emit($event)"
   />
   <div class="amplify-field-group__outer-end">
     <button
diff --git a/packages/angular/projects/ui-angular/src/lib/primitives/password-field/password-field.component.ts b/packages/angular/projects/ui-angular/src/lib/primitives/password-field/password-field.component.ts
index 06deb2bf14e..a21b4c3b154 100644
--- a/packages/angular/projects/ui-angular/src/lib/primitives/password-field/password-field.component.ts
+++ b/packages/angular/projects/ui-angular/src/lib/primitives/password-field/password-field.component.ts
@@ -16,7 +16,7 @@ export class PasswordFieldComponent {
   @Input() placeholder = '';
   @Input() required = true;
   @Input() labelHidden = false;
-  @Output() onBlur = new EventEmitter<Event>();
+  @Output() setBlur = new EventEmitter<Event>();
 
   public type: 'text' | 'password' = 'password';
 

From dc62d667c6626d5ea19192fb2448813f16bb51af Mon Sep 17 00:00:00 2001
From: Erik Hanchett <ehhanche@amazon.com>
Date: Tue, 23 Nov 2021 14:06:43 -0800
Subject: [PATCH 04/10] added changset

---
 .changeset/silver-comics-know.md | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 .changeset/silver-comics-know.md

diff --git a/.changeset/silver-comics-know.md b/.changeset/silver-comics-know.md
new file mode 100644
index 00000000000..7fa7c72fc86
--- /dev/null
+++ b/.changeset/silver-comics-know.md
@@ -0,0 +1,9 @@
+---
+'@aws-amplify/ui-angular': patch
+'e2e': patch
+'@aws-amplify/ui-react': patch
+'@aws-amplify/ui': patch
+'@aws-amplify/ui-vue': patch
+---
+
+Updated the password validation logic, so errors are only display on blur, or when six or more characters is typed for both the confirm password and password fields.

From 24331fbd99b0644288f2abecce5c9af874c55c44 Mon Sep 17 00:00:00 2001
From: Erik Hanchett <ehhanche@amazon.com>
Date: Tue, 23 Nov 2021 14:11:12 -0800
Subject: [PATCH 05/10] Removed private package from changeset

---
 .changeset/silver-comics-know.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.changeset/silver-comics-know.md b/.changeset/silver-comics-know.md
index 7fa7c72fc86..1e4a5e8b5ae 100644
--- a/.changeset/silver-comics-know.md
+++ b/.changeset/silver-comics-know.md
@@ -1,6 +1,5 @@
 ---
 '@aws-amplify/ui-angular': patch
-'e2e': patch
 '@aws-amplify/ui-react': patch
 '@aws-amplify/ui': patch
 '@aws-amplify/ui-vue': patch

From 8f8f1184785b2c6688697fe040c0992088155066 Mon Sep 17 00:00:00 2001
From: Erik Hanchett <ehhanche@amazon.com>
Date: Tue, 23 Nov 2021 17:08:26 -0800
Subject: [PATCH 06/10] added wait to fix tests

---
 packages/e2e/cypress/integration/common/sign-up.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/e2e/cypress/integration/common/sign-up.ts b/packages/e2e/cypress/integration/common/sign-up.ts
index 07065f76a79..6f39176ad2c 100644
--- a/packages/e2e/cypress/integration/common/sign-up.ts
+++ b/packages/e2e/cypress/integration/common/sign-up.ts
@@ -9,7 +9,8 @@ Given('I click {string}', (text: string) => {
 When('I confirm my password', () => {
   cy.findInputField('Confirm Password')
     .type(Cypress.env('VALID_PASSWORD'))
-    .blur();
+    .blur()
+    .wait(100);
 });
 
 Then('I see {string} as an input field', (name: string) => {

From 25c7dd667aa5c1c93f0251ae550dd3a79d255c2e Mon Sep 17 00:00:00 2001
From: Erik Hanchett <ehhanche@amazon.com>
Date: Wed, 24 Nov 2021 13:04:11 -0800
Subject: [PATCH 07/10] Added new updateBlur facade, update for confirm
 password and reset password too for all frameworks

---
 .../form-field/form-field.component.ts        |   2 +-
 .../src/lib/services/authenticator.service.ts |   4 +
 .../e2e/cypress/integration/common/sign-in.ts |   2 +-
 .../ForceNewPassword/ForceNewPassword.tsx     |  18 +-
 .../ResetPassword/ConfirmResetPassword.tsx    |   9 +-
 .../Authenticator/SignUp/FormFields.tsx       |   4 +-
 packages/ui/src/helpers/auth.ts               |   1 +
 .../ui/src/machines/authenticator/actions.ts  |  10 ++
 .../authenticator/actors/resetPassword.ts     |   8 +
 .../machines/authenticator/actors/signIn.ts   |   6 +
 .../machines/authenticator/defaultServices.ts |   9 +
 .../ui/src/machines/authenticator/index.ts    |   1 +
 .../ui/src/machines/authenticator/signUp.ts   |   7 +
 packages/ui/src/types/authMachine.ts          |   1 +
 .../authenticator-sign-up-form-fields.vue     |   4 +-
 .../src/components/confirm-reset-password.vue | 158 +++++++++--------
 .../vue/src/components/force-new-password.vue | 160 ++++++++++--------
 packages/vue/src/composables/useUtils.ts      |   1 +
 18 files changed, 246 insertions(+), 159 deletions(-)

diff --git a/packages/angular/projects/ui-angular/src/lib/components/authenticator/components/form-field/form-field.component.ts b/packages/angular/projects/ui-angular/src/lib/components/authenticator/components/form-field/form-field.component.ts
index 848a26b3442..a56d094f2b6 100644
--- a/packages/angular/projects/ui-angular/src/lib/components/authenticator/components/form-field/form-field.component.ts
+++ b/packages/angular/projects/ui-angular/src/lib/components/authenticator/components/form-field/form-field.component.ts
@@ -68,7 +68,7 @@ export class FormFieldComponent implements OnInit {
   public onBlur($event: Event) {
     let { name } = <HTMLInputElement>$event.target;
 
-    this.authenticator.updateForm({ name: `touched_${name}`, value: true });
+    this.authenticator.updateBlur({ name });
   }
 
   inferLabel(): string {
diff --git a/packages/angular/projects/ui-angular/src/lib/services/authenticator.service.ts b/packages/angular/projects/ui-angular/src/lib/services/authenticator.service.ts
index 9231bb931be..a348f169961 100644
--- a/packages/angular/projects/ui-angular/src/lib/services/authenticator.service.ts
+++ b/packages/angular/projects/ui-angular/src/lib/services/authenticator.service.ts
@@ -97,6 +97,10 @@ export class AuthenticatorService implements OnDestroy {
     return this._sendEventAliases.updateForm;
   }
 
+  public get updateBlur() {
+    return this._sendEventAliases.updateBlur;
+  }
+
   public get resendCode() {
     return this._sendEventAliases.resendCode;
   }
diff --git a/packages/e2e/cypress/integration/common/sign-in.ts b/packages/e2e/cypress/integration/common/sign-in.ts
index 03fbbc0d1f1..e253a91e866 100644
--- a/packages/e2e/cypress/integration/common/sign-in.ts
+++ b/packages/e2e/cypress/integration/common/sign-in.ts
@@ -33,5 +33,5 @@ When(
 );
 
 When('I type my password', () => {
-  cy.findInputField('Password').type(Cypress.env('VALID_PASSWORD')).blur();
+  cy.findInputField('Password').type(Cypress.env('VALID_PASSWORD'));
 });
diff --git a/packages/react/src/components/Authenticator/ForceNewPassword/ForceNewPassword.tsx b/packages/react/src/components/Authenticator/ForceNewPassword/ForceNewPassword.tsx
index bff82b1fee3..8cc678018f4 100644
--- a/packages/react/src/components/Authenticator/ForceNewPassword/ForceNewPassword.tsx
+++ b/packages/react/src/components/Authenticator/ForceNewPassword/ForceNewPassword.tsx
@@ -5,8 +5,15 @@ import { Button, Flex, Heading, PasswordField, Text } from '../../..';
 import { isInputOrSelectElement, isInputElement } from '../../../helpers/utils';
 
 export const ForceNewPassword = (): JSX.Element => {
-  const { _state, error, isPending, toSignIn, submitForm, updateForm } =
-    useAuthenticator();
+  const {
+    _state,
+    error,
+    isPending,
+    toSignIn,
+    submitForm,
+    updateForm,
+    updateBlur,
+  } = useAuthenticator();
   const { validationError } = getActorContext(_state) as SignInContext;
 
   const handleChange = (event: React.FormEvent<HTMLFormElement>) => {
@@ -29,6 +36,11 @@ export const ForceNewPassword = (): JSX.Element => {
     submitForm();
   };
 
+  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+    const { name } = event.target;
+    updateBlur({ name });
+  };
+
   return (
     <form
       data-amplify-form=""
@@ -49,6 +61,7 @@ export const ForceNewPassword = (): JSX.Element => {
             label={translate('Password')}
             labelHidden={true}
             hasError={!!validationError['confirm_password']}
+            onBlur={handleBlur}
           />
           <PasswordField
             data-amplify-confirmpassword
@@ -58,6 +71,7 @@ export const ForceNewPassword = (): JSX.Element => {
             label={translate('Confirm Password')}
             labelHidden={true}
             hasError={!!validationError['confirm_password']}
+            onBlur={handleBlur}
           />
 
           {!!validationError['confirm_password'] && (
diff --git a/packages/react/src/components/Authenticator/ResetPassword/ConfirmResetPassword.tsx b/packages/react/src/components/Authenticator/ResetPassword/ConfirmResetPassword.tsx
index b9839a7f47f..918fb5c7905 100644
--- a/packages/react/src/components/Authenticator/ResetPassword/ConfirmResetPassword.tsx
+++ b/packages/react/src/components/Authenticator/ResetPassword/ConfirmResetPassword.tsx
@@ -14,7 +14,7 @@ import {
 import { isInputOrSelectElement, isInputElement } from '../../../helpers/utils';
 
 export const ConfirmResetPassword = (): JSX.Element => {
-  const { _state, submitForm, updateForm } = useAuthenticator();
+  const { _state, submitForm, updateForm, updateBlur } = useAuthenticator();
   const { validationError } = getActorContext(_state) as ResetPasswordContext;
 
   const headerText = translate('Reset your password');
@@ -41,6 +41,11 @@ export const ConfirmResetPassword = (): JSX.Element => {
     submitForm();
   };
 
+  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+    const { name } = event.target;
+    updateBlur({ name });
+  };
+
   return (
     <form
       data-amplify-form=""
@@ -63,6 +68,7 @@ export const ConfirmResetPassword = (): JSX.Element => {
             name="password"
             label={passwordText}
             labelHidden={true}
+            onBlur={handleBlur}
           />
           <PasswordField
             data-amplify-confirmpassword
@@ -72,6 +78,7 @@ export const ConfirmResetPassword = (): JSX.Element => {
             label={confirmPasswordLabel}
             labelHidden={true}
             hasError={!!validationError['confirm_password']}
+            onBlur={handleBlur}
           />
 
           {!!validationError['confirm_password'] && (
diff --git a/packages/react/src/components/Authenticator/SignUp/FormFields.tsx b/packages/react/src/components/Authenticator/SignUp/FormFields.tsx
index a35e1ab199e..fa5a1319715 100644
--- a/packages/react/src/components/Authenticator/SignUp/FormFields.tsx
+++ b/packages/react/src/components/Authenticator/SignUp/FormFields.tsx
@@ -10,7 +10,7 @@ import { PasswordField, PhoneNumberField, Text, TextField } from '../../..';
 import { UserNameAlias as UserNameAliasComponent } from '../shared';
 
 export function FormFields() {
-  const { _state, updateForm } = useAuthenticator();
+  const { _state, updateForm, updateBlur } = useAuthenticator();
   const { country_code, validationError } = getActorContext(
     _state
   ) as SignUpContext;
@@ -25,7 +25,7 @@ export function FormFields() {
 
   const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
     const { name } = event.target;
-    updateForm({ name: `touched_${name}`, value: true });
+    updateBlur({ name });
   };
 
   return (
diff --git a/packages/ui/src/helpers/auth.ts b/packages/ui/src/helpers/auth.ts
index 0a23c67276d..cc02b30ee27 100644
--- a/packages/ui/src/helpers/auth.ts
+++ b/packages/ui/src/helpers/auth.ts
@@ -199,6 +199,7 @@ export const getSendEventAliases = (send: Sender<AuthEvent>) => {
     signOut: sendToMachine('SIGN_OUT'),
     submitForm: sendToMachine('SUBMIT'),
     updateForm: sendToMachine('CHANGE'),
+    updateBlur: sendToMachine('BLUR'),
 
     // Actions that don't immediately invoke a service but instead transition to a screen
     // are prefixed with `to*`
diff --git a/packages/ui/src/machines/authenticator/actions.ts b/packages/ui/src/machines/authenticator/actions.ts
index a1313f130b8..f43fc6ddeaa 100644
--- a/packages/ui/src/machines/authenticator/actions.ts
+++ b/packages/ui/src/machines/authenticator/actions.ts
@@ -110,3 +110,13 @@ export const handleInput = assign({
     };
   },
 });
+
+export const handleBlur = assign({
+  formValues: (context, event: AuthEvent) => {
+    const { name } = event.data;
+    return {
+      ...context['formValues'],
+      [`touched_${name}`]: true,
+    };
+  },
+});
diff --git a/packages/ui/src/machines/authenticator/actors/resetPassword.ts b/packages/ui/src/machines/authenticator/actors/resetPassword.ts
index 610605cc4db..9436968f00d 100644
--- a/packages/ui/src/machines/authenticator/actors/resetPassword.ts
+++ b/packages/ui/src/machines/authenticator/actors/resetPassword.ts
@@ -9,6 +9,7 @@ import {
   clearUsername,
   clearValidationError,
   handleInput,
+  handleBlur,
   setFieldErrors,
   setRemoteError,
   setUsername,
@@ -39,6 +40,7 @@ export const resetPasswordActor = createMachine<
             on: {
               SUBMIT: 'submit',
               CHANGE: { actions: 'handleInput' },
+              BLUR: { actions: 'handleBlur' },
             },
           },
           submit: {
@@ -85,6 +87,10 @@ export const resetPasswordActor = createMachine<
                 actions: 'handleInput',
                 target: '.pending',
               },
+              BLUR: {
+                actions: 'handleBlur',
+                target: '.pending',
+              },
             },
           },
           submission: {
@@ -96,6 +102,7 @@ export const resetPasswordActor = createMachine<
                   SUBMIT: 'validate',
                   RESEND: 'resendCode',
                   CHANGE: { actions: 'handleInput' },
+                  BLUR: { actions: 'handleBlur' },
                 },
               },
               validate: {
@@ -153,6 +160,7 @@ export const resetPasswordActor = createMachine<
       clearUsername,
       clearValidationError,
       handleInput,
+      handleBlur,
       setFieldErrors,
       setRemoteError,
       setUsername,
diff --git a/packages/ui/src/machines/authenticator/actors/signIn.ts b/packages/ui/src/machines/authenticator/actors/signIn.ts
index 099fc8d8eb5..3fd36ccd9ab 100644
--- a/packages/ui/src/machines/authenticator/actors/signIn.ts
+++ b/packages/ui/src/machines/authenticator/actors/signIn.ts
@@ -13,6 +13,7 @@ import {
   clearUnverifiedAttributes,
   clearValidationError,
   handleInput,
+  handleBlur,
   setChallengeName,
   setConfirmResetPasswordIntent,
   setConfirmSignUpIntent,
@@ -184,6 +185,10 @@ export const signInActor = createMachine<SignInContext, AuthEvent>(
                 actions: 'handleInput',
                 target: '.pending',
               },
+              BLUR: {
+                actions: 'handleBlur',
+                target: '.pending',
+              },
             },
           },
           submit: {
@@ -346,6 +351,7 @@ export const signInActor = createMachine<SignInContext, AuthEvent>(
       clearUnverifiedAttributes,
       clearValidationError,
       handleInput,
+      handleBlur,
       setChallengeName,
       setConfirmResetPasswordIntent,
       setConfirmSignUpIntent,
diff --git a/packages/ui/src/machines/authenticator/defaultServices.ts b/packages/ui/src/machines/authenticator/defaultServices.ts
index dfa0a07e712..26f9f9ddf6e 100644
--- a/packages/ui/src/machines/authenticator/defaultServices.ts
+++ b/packages/ui/src/machines/authenticator/defaultServices.ts
@@ -24,6 +24,15 @@ export const defaultServices = {
     if (!password && !confirm_password) {
       // these inputs are clean, don't complain yet
       return null;
+    } else if (
+      (password || confirm_password) &&
+      touched_password &&
+      touched_confirm_password &&
+      password !== confirm_password
+    ) {
+      return {
+        confirm_password: 'Your passwords must match',
+      };
     } else if (
       password &&
       confirm_password &&
diff --git a/packages/ui/src/machines/authenticator/index.ts b/packages/ui/src/machines/authenticator/index.ts
index ec46e1e620e..10629e29dda 100644
--- a/packages/ui/src/machines/authenticator/index.ts
+++ b/packages/ui/src/machines/authenticator/index.ts
@@ -111,6 +111,7 @@ export function createAuthenticatorMachine({
       },
       on: {
         CHANGE: { actions: 'forwardToActor' },
+        BLUR: { actions: 'forwardToActor' },
         SUBMIT: { actions: 'forwardToActor' },
         FEDERATED_SIGN_IN: { actions: 'forwardToActor' },
         RESEND: { actions: 'forwardToActor' },
diff --git a/packages/ui/src/machines/authenticator/signUp.ts b/packages/ui/src/machines/authenticator/signUp.ts
index b4743b1b45c..912379e1ba9 100644
--- a/packages/ui/src/machines/authenticator/signUp.ts
+++ b/packages/ui/src/machines/authenticator/signUp.ts
@@ -10,6 +10,7 @@ import {
   clearFormValues,
   clearValidationError,
   handleInput,
+  handleBlur,
   setCredentials,
   setFieldErrors,
   setRemoteError,
@@ -61,6 +62,10 @@ export function createSignUpMachine({ services }: SignUpMachineOptions) {
                   actions: 'handleInput',
                   target: '.pending',
                 },
+                BLUR: {
+                  actions: 'handleBlur',
+                  target: '.pending',
+                },
               },
             },
             submission: {
@@ -148,6 +153,7 @@ export function createSignUpMachine({ services }: SignUpMachineOptions) {
               on: {
                 SUBMIT: 'submit',
                 CHANGE: { actions: 'handleInput' },
+                BLUR: { actions: 'handleBlur' },
                 RESEND: 'resend',
               },
             },
@@ -220,6 +226,7 @@ export function createSignUpMachine({ services }: SignUpMachineOptions) {
         clearFormValues,
         clearValidationError,
         handleInput,
+        handleBlur,
         setCredentials,
         setFieldErrors,
         setRemoteError,
diff --git a/packages/ui/src/types/authMachine.ts b/packages/ui/src/types/authMachine.ts
index 9299c9fcaf7..71f8b693b47 100644
--- a/packages/ui/src/types/authMachine.ts
+++ b/packages/ui/src/types/authMachine.ts
@@ -108,6 +108,7 @@ export type InvokeActorEventTypes =
 
 export type AuthEventTypes =
   | 'CHANGE'
+  | 'BLUR'
   | 'FEDERATED_SIGN_IN'
   | 'RESEND'
   | 'RESET_PASSWORD'
diff --git a/packages/vue/src/components/authenticator-sign-up-form-fields.vue b/packages/vue/src/components/authenticator-sign-up-form-fields.vue
index 162e8d086c1..6e27f55752c 100644
--- a/packages/vue/src/components/authenticator-sign-up-form-fields.vue
+++ b/packages/vue/src/components/authenticator-sign-up-form-fields.vue
@@ -48,8 +48,8 @@ fieldNames = fieldNames.filter((fieldName) => {
 });
 
 function onBlur(e: Event) {
-  const { name, value } = <HTMLInputElement>e.target;
-  props.updateForm({ name: `touched_${name}`, value: true });
+  const { name } = <HTMLInputElement>e.target;
+  props.updateBlur({ name });
 }
 
 // Only 1 is supported, so `['email', 'phone_number']` will only show `email`
diff --git a/packages/vue/src/components/confirm-reset-password.vue b/packages/vue/src/components/confirm-reset-password.vue
index 124b628f5bd..78761486bcd 100644
--- a/packages/vue/src/components/confirm-reset-password.vue
+++ b/packages/vue/src/components/confirm-reset-password.vue
@@ -1,3 +1,84 @@
+<script setup lang="ts">
+import { computed, ComputedRef, useAttrs, defineEmits } from 'vue';
+import {
+  getActorContext,
+  getActorState,
+  ResetPasswordContext,
+  ResetPasswordState,
+  ValidationError,
+  translate,
+} from '@aws-amplify/ui';
+
+import { useAuth, useAuthenticator } from '../composables/useAuth';
+import PasswordControl from './password-control.vue';
+
+const { state, send } = useAuth();
+const props = useAuthenticator();
+
+const attrs = useAttrs();
+const emit = defineEmits(['confirmResetPasswordSubmit', 'backToSignInClicked']);
+
+const actorState: ComputedRef<ResetPasswordState> = computed(() =>
+  getActorState(state.value)
+) as ComputedRef<ResetPasswordState>;
+
+const actorContext = computed(() =>
+  getActorContext(state.value)
+) as ComputedRef<ResetPasswordContext>;
+
+// Computed Properties
+const resendCodeText = computed(() => translate('Resend Code'));
+const confirmationCodeText = computed(() => translate('Confirmation Code'));
+const confirmResetPasswordHeading = computed(() =>
+  translate('Reset your Password')
+);
+const confirmResetPasswordText = computed(() => translate('Submit'));
+
+const codeText = computed(() => translate('Code'));
+const newPasswordLabel = computed(() => translate('New password'));
+const confirmPasswordLabel = computed(() => translate('Confirm Password'));
+
+// Methods
+const onConfirmResetPasswordSubmit = (e: Event): void => {
+  if (attrs?.onConfirmResetPasswordSubmit) {
+    emit('confirmResetPasswordSubmit', e);
+  } else {
+    submit(e);
+  }
+};
+
+const submit = (e: Event): void => {
+  const formData = new FormData(<HTMLFormElement>e.target);
+  send({
+    type: 'SUBMIT',
+    //@ts-ignore
+    data: {
+      //@ts-ignore
+      ...Object.fromEntries(formData),
+    },
+  });
+};
+
+const onLostYourCodeClicked = (): void => {
+  send({
+    type: 'RESEND',
+  });
+};
+
+const onInput = (e: Event) => {
+  const { name, value } = <HTMLInputElement>e.target;
+  send({
+    type: 'CHANGE',
+    data: { name, value },
+  });
+};
+
+function onBlur(e: Event) {
+  const { name } = <HTMLInputElement>e.target;
+  props.updateBlur({ name });
+}
+</script>
+
 <template>
   <slot v-bind="$attrs" name="confirmResetPasswordSlotI">
     <base-wrapper v-bind="$attrs">
@@ -58,6 +139,7 @@
                 :ariainvalid="
                   !!(actorContext.validationError as ValidationError)['confirm_password']
                 "
+                @blur="onBlur"
               />
             </base-wrapper>
             <base-wrapper
@@ -76,6 +158,7 @@
                 :ariainvalid="
                   !!(actorContext.validationError as ValidationError)['confirm_password']
                 "
+                @blur="onBlur"
               />
             </base-wrapper>
           </base-wrapper>
@@ -124,78 +207,3 @@
     </base-wrapper>
   </slot>
 </template>
-
-<script setup lang="ts">
-import { computed, ComputedRef, useAttrs, defineEmits } from 'vue';
-import {
-  getActorContext,
-  getActorState,
-  ResetPasswordContext,
-  ResetPasswordState,
-  ValidationError,
-  translate,
-} from '@aws-amplify/ui';
-
-import { useAuth } from '../composables/useAuth';
-import PasswordControl from './password-control.vue';
-
-const { state, send } = useAuth();
-
-const attrs = useAttrs();
-const emit = defineEmits(['confirmResetPasswordSubmit', 'backToSignInClicked']);
-
-const actorState: ComputedRef<ResetPasswordState> = computed(() =>
-  getActorState(state.value)
-) as ComputedRef<ResetPasswordState>;
-
-const actorContext = computed(() =>
-  getActorContext(state.value)
-) as ComputedRef<ResetPasswordContext>;
-
-// Computed Properties
-const resendCodeText = computed(() => translate('Resend Code'));
-const confirmationCodeText = computed(() => translate('Confirmation Code'));
-const confirmResetPasswordHeading = computed(() =>
-  translate('Reset your Password')
-);
-const confirmResetPasswordText = computed(() => translate('Submit'));
-
-const codeText = computed(() => translate('Code'));
-const newPasswordLabel = computed(() => translate('New password'));
-const confirmPasswordLabel = computed(() => translate('Confirm Password'));
-
-// Methods
-const onConfirmResetPasswordSubmit = (e: Event): void => {
-  if (attrs?.onConfirmResetPasswordSubmit) {
-    emit('confirmResetPasswordSubmit', e);
-  } else {
-    submit(e);
-  }
-};
-
-const submit = (e: Event): void => {
-  const formData = new FormData(<HTMLFormElement>e.target);
-  send({
-    type: 'SUBMIT',
-    //@ts-ignore
-    data: {
-      //@ts-ignore
-      ...Object.fromEntries(formData),
-    },
-  });
-};
-
-const onLostYourCodeClicked = (): void => {
-  send({
-    type: 'RESEND',
-  });
-};
-
-const onInput = (e: Event) => {
-  const { name, value } = <HTMLInputElement>e.target;
-  send({
-    type: 'CHANGE',
-    data: { name, value },
-  });
-};
-</script>
diff --git a/packages/vue/src/components/force-new-password.vue b/packages/vue/src/components/force-new-password.vue
index 3dfe9bca2ae..ca33b5e2981 100644
--- a/packages/vue/src/components/force-new-password.vue
+++ b/packages/vue/src/components/force-new-password.vue
@@ -1,3 +1,84 @@
+<script setup lang="ts">
+import { computed, ComputedRef, useAttrs } from 'vue';
+import {
+  getActorContext,
+  getActorState,
+  SignInState,
+  SignUpContext,
+  ValidationError,
+  translate,
+} from '@aws-amplify/ui';
+
+import { useAuth, useAuthenticator } from '../composables/useAuth';
+
+import PasswordControl from './password-control.vue';
+
+const attrs = useAttrs();
+const emit = defineEmits(['haveAccountClicked', 'forceNewPasswordSubmit']);
+
+const { state, send } = useAuth();
+const props = useAuthenticator();
+const actorState = computed(() =>
+  getActorState(state.value)
+) as ComputedRef<SignInState>;
+
+const actorContext = computed(() =>
+  getActorContext(state.value)
+) as ComputedRef<SignUpContext>;
+
+// computed properties
+const changePasswordLabel = computed(() => translate('Change Password'));
+const changingPasswordLabel = computed(() => translate('Changing'));
+const backSignInText = computed(() => translate('Back to Sign In'));
+const passwordLabel = computed(() => translate('Password'));
+const confirmPasswordLabel = computed(() => translate('Confirm Password'));
+
+// Methods
+const onHaveAccountClicked = (): void => {
+  if (attrs?.onHaveAccountClicked) {
+    emit('haveAccountClicked');
+  } else {
+    send({
+      type: 'SIGN_IN',
+    });
+  }
+};
+
+const onForceNewPasswordSubmit = (e: Event): void => {
+  if (attrs?.onForceNewPasswordSubmit) {
+    emit('forceNewPasswordSubmit', e);
+  } else {
+    submit(e);
+  }
+};
+
+const submit = (e: Event): void => {
+  const formData = new FormData(<HTMLFormElement>e.target);
+  send({
+    type: 'SUBMIT',
+    //@ts-ignore
+    data: {
+      //@ts-ignore
+      ...Object.fromEntries(formData),
+    },
+  });
+};
+
+const onInput = (e: Event): void => {
+  const { name, value } = <HTMLInputElement>e.target;
+  send({
+    type: 'CHANGE',
+    //@ts-ignore
+    data: { name, value },
+  });
+};
+
+function onBlur(e: Event) {
+  const { name } = <HTMLInputElement>e.target;
+  props.updateBlur({ name });
+}
+</script>
+
 <template>
   <slot v-bind="$attrs" name="forceNewPasswordI">
     <base-wrapper v-bind="$attrs">
@@ -34,6 +115,7 @@
                 :ariainvalid="
                   !!(actorContext.validationError as ValidationError)['confirm_password']
                 "
+                @blur="onBlur"
               />
             </base-wrapper>
 
@@ -54,6 +136,7 @@
                 :ariainvalid="
                   !!(actorContext.validationError as ValidationError)['confirm_password']
                 "
+                @blur="onBlur"
               />
             </base-wrapper>
           </base-wrapper>
@@ -61,6 +144,8 @@
             <base-box
               data-ui-error
               role="alert"
+              data-variation="error"
+              class="amplify-text"
               v-if="!!(actorContext.validationError as ValidationError)['confirm_password']"
             >
               {{ (actorContext.validationError as ValidationError)['confirm_password'] }}
@@ -104,78 +189,3 @@
     </base-wrapper>
   </slot>
 </template>
-
-<script setup lang="ts">
-import { computed, ComputedRef, useAttrs } from 'vue';
-import {
-  getActorContext,
-  getActorState,
-  SignInState,
-  SignUpContext,
-  ValidationError,
-  translate,
-} from '@aws-amplify/ui';
-
-import { useAuth } from '../composables/useAuth';
-
-import PasswordControl from './password-control.vue';
-
-const attrs = useAttrs();
-const emit = defineEmits(['haveAccountClicked', 'forceNewPasswordSubmit']);
-
-const { state, send } = useAuth();
-const actorState = computed(() =>
-  getActorState(state.value)
-) as ComputedRef<SignInState>;
-
-const actorContext = computed(() =>
-  getActorContext(state.value)
-) as ComputedRef<SignUpContext>;
-
-// computed properties
-const changePasswordLabel = computed(() => translate('Change Password'));
-const changingPasswordLabel = computed(() => translate('Changing'));
-const backSignInText = computed(() => translate('Back to Sign In'));
-const passwordLabel = computed(() => translate('Password'));
-const confirmPasswordLabel = computed(() => translate('Confirm Password'));
-
-// Methods
-const onHaveAccountClicked = (): void => {
-  if (attrs?.onHaveAccountClicked) {
-    emit('haveAccountClicked');
-  } else {
-    send({
-      type: 'SIGN_IN',
-    });
-  }
-};
-
-const onForceNewPasswordSubmit = (e: Event): void => {
-  if (attrs?.onForceNewPasswordSubmit) {
-    emit('forceNewPasswordSubmit', e);
-  } else {
-    submit(e);
-  }
-};
-
-const submit = (e: Event): void => {
-  const formData = new FormData(<HTMLFormElement>e.target);
-  send({
-    type: 'SUBMIT',
-    //@ts-ignore
-    data: {
-      //@ts-ignore
-      ...Object.fromEntries(formData),
-    },
-  });
-};
-
-const onInput = (e: Event): void => {
-  const { name, value } = <HTMLInputElement>e.target;
-  send({
-    type: 'CHANGE',
-    //@ts-ignore
-    data: { name, value },
-  });
-};
-</script>
diff --git a/packages/vue/src/composables/useUtils.ts b/packages/vue/src/composables/useUtils.ts
index 998b35a5037..ecba386b5fb 100644
--- a/packages/vue/src/composables/useUtils.ts
+++ b/packages/vue/src/composables/useUtils.ts
@@ -26,6 +26,7 @@ export const facade = {
   },
   change: (data?: AuthEventData) => null,
   updateForm: (data?: AuthEventData) => null,
+  updateBlur: (data?: AuthEventData) => null,
   resend: (data?: AuthEventData) => null,
   resendCode: (data?: AuthEventData) => null,
   signOut: (data?: AuthEventData) => null,

From 032b48b7465933f6ac48a04c025ad3eb713a853d Mon Sep 17 00:00:00 2001
From: Erik Hanchett <ehhanche@amazon.com>
Date: Fri, 26 Nov 2021 09:51:13 -0800
Subject: [PATCH 08/10] Added new formControls in context

---
 .../ui/src/machines/authenticator/actions.ts  |  5 +++--
 .../authenticator/actors/resetPassword.ts     | 18 +++++++++++-----
 .../machines/authenticator/actors/signIn.ts   | 20 +++++++++++-------
 .../machines/authenticator/defaultServices.ts | 11 +---------
 .../ui/src/machines/authenticator/index.ts    |  3 +++
 .../ui/src/machines/authenticator/signUp.ts   | 21 ++++++++++++-------
 packages/ui/src/types/authMachine.ts          |  1 +
 packages/vue/src/components/authenticator.vue |  2 +-
 8 files changed, 47 insertions(+), 34 deletions(-)

diff --git a/packages/ui/src/machines/authenticator/actions.ts b/packages/ui/src/machines/authenticator/actions.ts
index f43fc6ddeaa..6de636ca54f 100644
--- a/packages/ui/src/machines/authenticator/actions.ts
+++ b/packages/ui/src/machines/authenticator/actions.ts
@@ -42,6 +42,7 @@ export const clearAttributeToVerify = assign({
 export const clearChallengeName = assign({ challengeName: (_) => undefined });
 export const clearError = assign({ remoteError: (_) => '' });
 export const clearFormValues = assign({ formValues: (_) => ({}) });
+export const clearFormControls = assign({ formControls: (_) => ({}) });
 export const clearUnverifiedAttributes = assign({
   unverifiedAttributes: (_) => undefined,
 });
@@ -112,10 +113,10 @@ export const handleInput = assign({
 });
 
 export const handleBlur = assign({
-  formValues: (context, event: AuthEvent) => {
+  formControls: (context, event: AuthEvent) => {
     const { name } = event.data;
     return {
-      ...context['formValues'],
+      ...context['formControls'],
       [`touched_${name}`]: true,
     };
   },
diff --git a/packages/ui/src/machines/authenticator/actors/resetPassword.ts b/packages/ui/src/machines/authenticator/actors/resetPassword.ts
index 9436968f00d..fbfa2a14452 100644
--- a/packages/ui/src/machines/authenticator/actors/resetPassword.ts
+++ b/packages/ui/src/machines/authenticator/actors/resetPassword.ts
@@ -6,6 +6,7 @@ import { runValidators } from '../../../validators';
 import {
   clearError,
   clearFormValues,
+  clearFormControls,
   clearUsername,
   clearValidationError,
   handleInput,
@@ -33,7 +34,7 @@ export const resetPasswordActor = createMachine<
       },
       resetPassword: {
         initial: 'edit',
-        exit: ['clearFormValues', 'clearError'],
+        exit: ['clearFormValues', 'clearError', 'clearFormControls'],
         states: {
           edit: {
             entry: sendUpdate(),
@@ -61,7 +62,12 @@ export const resetPasswordActor = createMachine<
       },
       confirmResetPassword: {
         type: 'parallel',
-        exit: ['clearFormValues', 'clearError', 'clearUsername'],
+        exit: [
+          'clearFormValues',
+          'clearError',
+          'clearUsername',
+          'clearFormControls',
+        ],
         states: {
           validation: {
             initial: 'pending',
@@ -157,6 +163,7 @@ export const resetPasswordActor = createMachine<
     actions: {
       clearError,
       clearFormValues,
+      clearFormControls,
       clearUsername,
       clearValidationError,
       handleInput,
@@ -183,9 +190,10 @@ export const resetPasswordActor = createMachine<
         return Auth.forgotPasswordSubmit(username, code, password);
       },
       async validateFields(context, event) {
-        return runValidators(context.formValues, [
-          defaultServices.validateConfirmPassword,
-        ]);
+        return runValidators(
+          { ...context.formValues, ...context.formControls },
+          [defaultServices.validateConfirmPassword]
+        );
       },
     },
   }
diff --git a/packages/ui/src/machines/authenticator/actors/signIn.ts b/packages/ui/src/machines/authenticator/actors/signIn.ts
index 3fd36ccd9ab..58e3b5c5db5 100644
--- a/packages/ui/src/machines/authenticator/actors/signIn.ts
+++ b/packages/ui/src/machines/authenticator/actors/signIn.ts
@@ -10,6 +10,7 @@ import {
   clearChallengeName,
   clearError,
   clearFormValues,
+  clearFormControls,
   clearUnverifiedAttributes,
   clearValidationError,
   handleInput,
@@ -36,7 +37,7 @@ export const signInActor = createMachine<SignInContext, AuthEvent>(
       },
       signIn: {
         initial: 'edit',
-        exit: 'clearFormValues',
+        exit: ['clearFormValues', 'clearFormControls'],
         states: {
           edit: {
             entry: sendUpdate(),
@@ -130,7 +131,7 @@ export const signInActor = createMachine<SignInContext, AuthEvent>(
       },
       confirmSignIn: {
         initial: 'edit',
-        exit: ['clearFormValues', 'clearError'],
+        exit: ['clearFormValues', 'clearError', 'clearFormControls'],
         states: {
           edit: {
             entry: sendUpdate(),
@@ -159,7 +160,7 @@ export const signInActor = createMachine<SignInContext, AuthEvent>(
       },
       forceNewPassword: {
         type: 'parallel',
-        exit: ['clearFormValues', 'clearError'],
+        exit: ['clearFormValues', 'clearError', 'clearFormControls'],
         states: {
           validation: {
             initial: 'pending',
@@ -237,7 +238,7 @@ export const signInActor = createMachine<SignInContext, AuthEvent>(
       },
       setupTOTP: {
         initial: 'edit',
-        exit: ['clearFormValues', 'clearError'],
+        exit: ['clearFormValues', 'clearError', 'clearFormControls'],
         states: {
           edit: {
             entry: sendUpdate(),
@@ -266,7 +267,7 @@ export const signInActor = createMachine<SignInContext, AuthEvent>(
       },
       verifyUser: {
         initial: 'edit',
-        exit: ['clearFormValues', 'clearError'],
+        exit: ['clearFormValues', 'clearError', 'clearFormControls'],
         states: {
           edit: {
             entry: sendUpdate(),
@@ -299,6 +300,7 @@ export const signInActor = createMachine<SignInContext, AuthEvent>(
           'clearError',
           'clearUnverifiedAttributes',
           'clearAttributeToVerify',
+          'clearFormControls',
         ],
         states: {
           edit: {
@@ -348,6 +350,7 @@ export const signInActor = createMachine<SignInContext, AuthEvent>(
       clearChallengeName,
       clearError,
       clearFormValues,
+      clearFormControls,
       clearUnverifiedAttributes,
       clearValidationError,
       handleInput,
@@ -456,9 +459,10 @@ export const signInActor = createMachine<SignInContext, AuthEvent>(
         );
       },
       async validateFields(context, event) {
-        return runValidators(context.formValues, [
-          defaultServices.validateConfirmPassword,
-        ]);
+        return runValidators(
+          { ...context.formValues, ...context.formControls },
+          [defaultServices.validateConfirmPassword]
+        );
       },
     },
   }
diff --git a/packages/ui/src/machines/authenticator/defaultServices.ts b/packages/ui/src/machines/authenticator/defaultServices.ts
index 26f9f9ddf6e..402f757d925 100644
--- a/packages/ui/src/machines/authenticator/defaultServices.ts
+++ b/packages/ui/src/machines/authenticator/defaultServices.ts
@@ -26,16 +26,6 @@ export const defaultServices = {
       return null;
     } else if (
       (password || confirm_password) &&
-      touched_password &&
-      touched_confirm_password &&
-      password !== confirm_password
-    ) {
-      return {
-        confirm_password: 'Your passwords must match',
-      };
-    } else if (
-      password &&
-      confirm_password &&
       password !== confirm_password &&
       ((touched_confirm_password && touched_password) ||
         (password.length >= 6 && confirm_password.length >= 6))
@@ -43,6 +33,7 @@ export const defaultServices = {
       // Only return an error if both fields have text entered,
       // the passwords do not match, and the fields have been
       // touched or the password and confirm password is longer then or equal to 6.
+
       return {
         confirm_password: 'Your passwords must match',
       };
diff --git a/packages/ui/src/machines/authenticator/index.ts b/packages/ui/src/machines/authenticator/index.ts
index 10629e29dda..4b2be7be53e 100644
--- a/packages/ui/src/machines/authenticator/index.ts
+++ b/packages/ui/src/machines/authenticator/index.ts
@@ -182,6 +182,7 @@ export function createAuthenticatorMachine({
               intent: event.data?.intent,
               country_code: DEFAULT_COUNTRY_CODE,
               formValues: {},
+              formControls: {},
               validationError: {},
               loginMechanisms: context.config?.loginMechanisms,
               socialProviders: context.config?.socialProviders,
@@ -196,6 +197,7 @@ export function createAuthenticatorMachine({
               country_code: DEFAULT_COUNTRY_CODE,
               intent: event.data?.intent,
               formValues: {},
+              formControls: {},
               validationError: {},
               loginMechanisms: context.config?.loginMechanisms,
               socialProviders: context.config?.socialProviders,
@@ -207,6 +209,7 @@ export function createAuthenticatorMachine({
           actorRef: (context, event) => {
             const actor = resetPasswordActor.withContext({
               formValues: {},
+              formControls: {},
               intent: event.data?.intent,
               username: event.data?.authAttributes?.username,
               validationError: {},
diff --git a/packages/ui/src/machines/authenticator/signUp.ts b/packages/ui/src/machines/authenticator/signUp.ts
index 912379e1ba9..8dfa96e47d0 100644
--- a/packages/ui/src/machines/authenticator/signUp.ts
+++ b/packages/ui/src/machines/authenticator/signUp.ts
@@ -8,6 +8,7 @@ import { runValidators } from '../../validators';
 import {
   clearError,
   clearFormValues,
+  clearFormControls,
   clearValidationError,
   handleInput,
   handleBlur,
@@ -36,7 +37,7 @@ export function createSignUpMachine({ services }: SignUpMachineOptions) {
         },
         signUp: {
           type: 'parallel',
-          exit: ['clearError', 'clearFormValues'],
+          exit: ['clearError', 'clearFormValues', 'clearFormControls'],
           states: {
             validation: {
               initial: 'pending',
@@ -224,6 +225,7 @@ export function createSignUpMachine({ services }: SignUpMachineOptions) {
       actions: {
         clearError,
         clearFormValues,
+        clearFormControls,
         clearValidationError,
         handleInput,
         handleBlur,
@@ -316,14 +318,17 @@ export function createSignUpMachine({ services }: SignUpMachineOptions) {
         },
         async validateSignUp(context, event) {
           // This needs to exist in the machine to reference new `services`
-          return runValidators(context.formValues, [
-            // Validation for default form fields
-            services.validateConfirmPassword,
-            services.validatePreferredUsername,
+          return runValidators(
+            { ...context.formValues, ...context.formControls },
+            [
+              // Validation for default form fields
+              services.validateConfirmPassword,
+              services.validatePreferredUsername,
 
-            // Validation for any custom Sign Up fields
-            services.validateCustomSignUp,
-          ]);
+              // Validation for any custom Sign Up fields
+              services.validateCustomSignUp,
+            ]
+          );
         },
       },
     }
diff --git a/packages/ui/src/types/authMachine.ts b/packages/ui/src/types/authMachine.ts
index 71f8b693b47..f8e9e46dfcc 100644
--- a/packages/ui/src/types/authMachine.ts
+++ b/packages/ui/src/types/authMachine.ts
@@ -18,6 +18,7 @@ interface BaseFormContext {
   authAttributes?: Record<string, any>;
   challengeName?: string;
   formValues?: AuthFormData;
+  formControls?: AuthFormData;
   intent?: string;
   remoteError?: string;
   user?: CognitoUserAmplify;
diff --git a/packages/vue/src/components/authenticator.vue b/packages/vue/src/components/authenticator.vue
index a653300c4b6..857e8fea5f5 100644
--- a/packages/vue/src/components/authenticator.vue
+++ b/packages/vue/src/components/authenticator.vue
@@ -67,7 +67,7 @@ const machine = createAuthenticatorMachine({
 });
 
 const service = useInterpret(machine, {
-  devTools: process.env.NODE_ENV === 'development',
+  devTools: process.env.NODE_ENV !== 'development',
 });
 
 const { state, send } = useActor(service);

From 15c8b020291d7127c4d8f3322f5d82d609ccaa4a Mon Sep 17 00:00:00 2001
From: Erik Hanchett <ehhanche@amazon.com>
Date: Fri, 26 Nov 2021 12:40:18 -0800
Subject: [PATCH 09/10] Updated named from formControls to touched

---
 .../ui/src/machines/authenticator/actions.ts  |  8 +++----
 .../authenticator/actors/resetPassword.ts     | 15 ++++++------
 .../machines/authenticator/actors/signIn.ts   | 23 +++++++++---------
 .../machines/authenticator/defaultServices.ts | 24 ++++++++++++-------
 .../ui/src/machines/authenticator/index.ts    |  6 ++---
 .../ui/src/machines/authenticator/signUp.ts   | 23 ++++++++----------
 packages/ui/src/types/authMachine.ts          |  2 +-
 packages/ui/src/types/validator.ts            |  3 ++-
 packages/ui/src/validators/index.ts           |  3 ++-
 packages/vue/src/components/authenticator.vue |  2 +-
 10 files changed, 57 insertions(+), 52 deletions(-)

diff --git a/packages/ui/src/machines/authenticator/actions.ts b/packages/ui/src/machines/authenticator/actions.ts
index 6de636ca54f..4080daf14a4 100644
--- a/packages/ui/src/machines/authenticator/actions.ts
+++ b/packages/ui/src/machines/authenticator/actions.ts
@@ -42,7 +42,7 @@ export const clearAttributeToVerify = assign({
 export const clearChallengeName = assign({ challengeName: (_) => undefined });
 export const clearError = assign({ remoteError: (_) => '' });
 export const clearFormValues = assign({ formValues: (_) => ({}) });
-export const clearFormControls = assign({ formControls: (_) => ({}) });
+export const clearTouched = assign({ touched: (_) => ({}) });
 export const clearUnverifiedAttributes = assign({
   unverifiedAttributes: (_) => undefined,
 });
@@ -113,11 +113,11 @@ export const handleInput = assign({
 });
 
 export const handleBlur = assign({
-  formControls: (context, event: AuthEvent) => {
+  touched: (context, event: AuthEvent) => {
     const { name } = event.data;
     return {
-      ...context['formControls'],
-      [`touched_${name}`]: true,
+      ...context['touched'],
+      [`${name}`]: true,
     };
   },
 });
diff --git a/packages/ui/src/machines/authenticator/actors/resetPassword.ts b/packages/ui/src/machines/authenticator/actors/resetPassword.ts
index fbfa2a14452..094c8a45951 100644
--- a/packages/ui/src/machines/authenticator/actors/resetPassword.ts
+++ b/packages/ui/src/machines/authenticator/actors/resetPassword.ts
@@ -6,7 +6,7 @@ import { runValidators } from '../../../validators';
 import {
   clearError,
   clearFormValues,
-  clearFormControls,
+  clearTouched,
   clearUsername,
   clearValidationError,
   handleInput,
@@ -34,7 +34,7 @@ export const resetPasswordActor = createMachine<
       },
       resetPassword: {
         initial: 'edit',
-        exit: ['clearFormValues', 'clearError', 'clearFormControls'],
+        exit: ['clearFormValues', 'clearError', 'clearTouched'],
         states: {
           edit: {
             entry: sendUpdate(),
@@ -66,7 +66,7 @@ export const resetPasswordActor = createMachine<
           'clearFormValues',
           'clearError',
           'clearUsername',
-          'clearFormControls',
+          'clearTouched',
         ],
         states: {
           validation: {
@@ -163,7 +163,7 @@ export const resetPasswordActor = createMachine<
     actions: {
       clearError,
       clearFormValues,
-      clearFormControls,
+      clearTouched,
       clearUsername,
       clearValidationError,
       handleInput,
@@ -190,10 +190,9 @@ export const resetPasswordActor = createMachine<
         return Auth.forgotPasswordSubmit(username, code, password);
       },
       async validateFields(context, event) {
-        return runValidators(
-          { ...context.formValues, ...context.formControls },
-          [defaultServices.validateConfirmPassword]
-        );
+        return runValidators(context.formValues, context.touched, [
+          defaultServices.validateConfirmPassword,
+        ]);
       },
     },
   }
diff --git a/packages/ui/src/machines/authenticator/actors/signIn.ts b/packages/ui/src/machines/authenticator/actors/signIn.ts
index 58e3b5c5db5..81f8c2cce84 100644
--- a/packages/ui/src/machines/authenticator/actors/signIn.ts
+++ b/packages/ui/src/machines/authenticator/actors/signIn.ts
@@ -10,7 +10,7 @@ import {
   clearChallengeName,
   clearError,
   clearFormValues,
-  clearFormControls,
+  clearTouched,
   clearUnverifiedAttributes,
   clearValidationError,
   handleInput,
@@ -37,7 +37,7 @@ export const signInActor = createMachine<SignInContext, AuthEvent>(
       },
       signIn: {
         initial: 'edit',
-        exit: ['clearFormValues', 'clearFormControls'],
+        exit: ['clearFormValues', 'clearTouched'],
         states: {
           edit: {
             entry: sendUpdate(),
@@ -131,7 +131,7 @@ export const signInActor = createMachine<SignInContext, AuthEvent>(
       },
       confirmSignIn: {
         initial: 'edit',
-        exit: ['clearFormValues', 'clearError', 'clearFormControls'],
+        exit: ['clearFormValues', 'clearError', 'clearTouched'],
         states: {
           edit: {
             entry: sendUpdate(),
@@ -160,7 +160,7 @@ export const signInActor = createMachine<SignInContext, AuthEvent>(
       },
       forceNewPassword: {
         type: 'parallel',
-        exit: ['clearFormValues', 'clearError', 'clearFormControls'],
+        exit: ['clearFormValues', 'clearError', 'clearTouched'],
         states: {
           validation: {
             initial: 'pending',
@@ -238,7 +238,7 @@ export const signInActor = createMachine<SignInContext, AuthEvent>(
       },
       setupTOTP: {
         initial: 'edit',
-        exit: ['clearFormValues', 'clearError', 'clearFormControls'],
+        exit: ['clearFormValues', 'clearError', 'clearTouched'],
         states: {
           edit: {
             entry: sendUpdate(),
@@ -267,7 +267,7 @@ export const signInActor = createMachine<SignInContext, AuthEvent>(
       },
       verifyUser: {
         initial: 'edit',
-        exit: ['clearFormValues', 'clearError', 'clearFormControls'],
+        exit: ['clearFormValues', 'clearError', 'clearTouched'],
         states: {
           edit: {
             entry: sendUpdate(),
@@ -300,7 +300,7 @@ export const signInActor = createMachine<SignInContext, AuthEvent>(
           'clearError',
           'clearUnverifiedAttributes',
           'clearAttributeToVerify',
-          'clearFormControls',
+          'clearTouched',
         ],
         states: {
           edit: {
@@ -350,7 +350,7 @@ export const signInActor = createMachine<SignInContext, AuthEvent>(
       clearChallengeName,
       clearError,
       clearFormValues,
-      clearFormControls,
+      clearTouched,
       clearUnverifiedAttributes,
       clearValidationError,
       handleInput,
@@ -459,10 +459,9 @@ export const signInActor = createMachine<SignInContext, AuthEvent>(
         );
       },
       async validateFields(context, event) {
-        return runValidators(
-          { ...context.formValues, ...context.formControls },
-          [defaultServices.validateConfirmPassword]
-        );
+        return runValidators(context.formValues, context.touched, [
+          defaultServices.validateConfirmPassword,
+        ]);
       },
     },
   }
diff --git a/packages/ui/src/machines/authenticator/defaultServices.ts b/packages/ui/src/machines/authenticator/defaultServices.ts
index 402f757d925..d3139657ddd 100644
--- a/packages/ui/src/machines/authenticator/defaultServices.ts
+++ b/packages/ui/src/machines/authenticator/defaultServices.ts
@@ -12,14 +12,18 @@ export const defaultServices = {
   },
 
   // Validation hooks for overriding
-  async validateCustomSignUp(formData): Promise<ValidatorResult> {},
-  async validateConfirmPassword<Validator>(formData): Promise<ValidatorResult> {
+  async validateCustomSignUp(formData, touchData): Promise<ValidatorResult> {},
+  async validateConfirmPassword<Validator>(
+    formData,
+    touchData
+  ): Promise<ValidatorResult> {
+    const { password, confirm_password } = formData;
+
     const {
-      password,
-      confirm_password,
-      touched_confirm_password,
-      touched_password,
-    } = formData;
+      confirm_password: touched_confirm_password,
+      password: touched_password,
+    } = touchData;
+    console.log('got', touched_confirm_password, touched_password);
 
     if (!password && !confirm_password) {
       // these inputs are clean, don't complain yet
@@ -30,6 +34,7 @@ export const defaultServices = {
       ((touched_confirm_password && touched_password) ||
         (password.length >= 6 && confirm_password.length >= 6))
     ) {
+      console.log('got here');
       // Only return an error if both fields have text entered,
       // the passwords do not match, and the fields have been
       // touched or the password and confirm password is longer then or equal to 6.
@@ -39,5 +44,8 @@ export const defaultServices = {
       };
     }
   },
-  async validatePreferredUsername(formData): Promise<ValidatorResult> {},
+  async validatePreferredUsername(
+    formData,
+    touchData
+  ): Promise<ValidatorResult> {},
 };
diff --git a/packages/ui/src/machines/authenticator/index.ts b/packages/ui/src/machines/authenticator/index.ts
index 4b2be7be53e..faf6aff2898 100644
--- a/packages/ui/src/machines/authenticator/index.ts
+++ b/packages/ui/src/machines/authenticator/index.ts
@@ -182,7 +182,7 @@ export function createAuthenticatorMachine({
               intent: event.data?.intent,
               country_code: DEFAULT_COUNTRY_CODE,
               formValues: {},
-              formControls: {},
+              touched: {},
               validationError: {},
               loginMechanisms: context.config?.loginMechanisms,
               socialProviders: context.config?.socialProviders,
@@ -197,7 +197,7 @@ export function createAuthenticatorMachine({
               country_code: DEFAULT_COUNTRY_CODE,
               intent: event.data?.intent,
               formValues: {},
-              formControls: {},
+              touched: {},
               validationError: {},
               loginMechanisms: context.config?.loginMechanisms,
               socialProviders: context.config?.socialProviders,
@@ -209,7 +209,7 @@ export function createAuthenticatorMachine({
           actorRef: (context, event) => {
             const actor = resetPasswordActor.withContext({
               formValues: {},
-              formControls: {},
+              touched: {},
               intent: event.data?.intent,
               username: event.data?.authAttributes?.username,
               validationError: {},
diff --git a/packages/ui/src/machines/authenticator/signUp.ts b/packages/ui/src/machines/authenticator/signUp.ts
index 8dfa96e47d0..9a2f147857f 100644
--- a/packages/ui/src/machines/authenticator/signUp.ts
+++ b/packages/ui/src/machines/authenticator/signUp.ts
@@ -8,7 +8,7 @@ import { runValidators } from '../../validators';
 import {
   clearError,
   clearFormValues,
-  clearFormControls,
+  clearTouched,
   clearValidationError,
   handleInput,
   handleBlur,
@@ -37,7 +37,7 @@ export function createSignUpMachine({ services }: SignUpMachineOptions) {
         },
         signUp: {
           type: 'parallel',
-          exit: ['clearError', 'clearFormValues', 'clearFormControls'],
+          exit: ['clearError', 'clearFormValues', 'clearTouched'],
           states: {
             validation: {
               initial: 'pending',
@@ -225,7 +225,7 @@ export function createSignUpMachine({ services }: SignUpMachineOptions) {
       actions: {
         clearError,
         clearFormValues,
-        clearFormControls,
+        clearTouched,
         clearValidationError,
         handleInput,
         handleBlur,
@@ -318,17 +318,14 @@ export function createSignUpMachine({ services }: SignUpMachineOptions) {
         },
         async validateSignUp(context, event) {
           // This needs to exist in the machine to reference new `services`
-          return runValidators(
-            { ...context.formValues, ...context.formControls },
-            [
-              // Validation for default form fields
-              services.validateConfirmPassword,
-              services.validatePreferredUsername,
+          return runValidators(context.formValues, context.touched, [
+            // Validation for default form fields
+            services.validateConfirmPassword,
+            services.validatePreferredUsername,
 
-              // Validation for any custom Sign Up fields
-              services.validateCustomSignUp,
-            ]
-          );
+            // Validation for any custom Sign Up fields
+            services.validateCustomSignUp,
+          ]);
         },
       },
     }
diff --git a/packages/ui/src/types/authMachine.ts b/packages/ui/src/types/authMachine.ts
index f8e9e46dfcc..1ebb1f04558 100644
--- a/packages/ui/src/types/authMachine.ts
+++ b/packages/ui/src/types/authMachine.ts
@@ -18,7 +18,7 @@ interface BaseFormContext {
   authAttributes?: Record<string, any>;
   challengeName?: string;
   formValues?: AuthFormData;
-  formControls?: AuthFormData;
+  touched?: AuthFormData;
   intent?: string;
   remoteError?: string;
   user?: CognitoUserAmplify;
diff --git a/packages/ui/src/types/validator.ts b/packages/ui/src/types/validator.ts
index d8b5ae23ad5..1329b96fd4c 100644
--- a/packages/ui/src/types/validator.ts
+++ b/packages/ui/src/types/validator.ts
@@ -11,5 +11,6 @@ export type ValidatorResult = void | null | ValidationError; // null if there ar
  * Validates the given formData. This can be synchronous or asynchronous.
  */
 export type Validator = (
-  formData: AuthFormData
+  formData: AuthFormData,
+  touchData?: AuthFormData
 ) => ValidatorResult | Promise<ValidatorResult>;
diff --git a/packages/ui/src/validators/index.ts b/packages/ui/src/validators/index.ts
index 7575abea647..0278a4703f0 100644
--- a/packages/ui/src/validators/index.ts
+++ b/packages/ui/src/validators/index.ts
@@ -5,10 +5,11 @@ import merge from 'lodash/merge';
 // Runs all validators given. Resolves if there are no error. Rejects otherwise.
 export const runValidators = async (
   formData: AuthFormData,
+  touchData: AuthFormData,
   validators: Validator[]
 ) => {
   const errors = await Promise.all(
-    validators.map((validator) => validator(formData))
+    validators.map((validator) => validator(formData, touchData))
   );
   const mergedError = merge({}, ...errors);
 
diff --git a/packages/vue/src/components/authenticator.vue b/packages/vue/src/components/authenticator.vue
index 857e8fea5f5..a653300c4b6 100644
--- a/packages/vue/src/components/authenticator.vue
+++ b/packages/vue/src/components/authenticator.vue
@@ -67,7 +67,7 @@ const machine = createAuthenticatorMachine({
 });
 
 const service = useInterpret(machine, {
-  devTools: process.env.NODE_ENV !== 'development',
+  devTools: process.env.NODE_ENV === 'development',
 });
 
 const { state, send } = useActor(service);

From 86533e8967f6471c6100dbe5e40c844dcb823591 Mon Sep 17 00:00:00 2001
From: Erik Hanchett <ehhanche@amazon.com>
Date: Fri, 26 Nov 2021 12:42:04 -0800
Subject: [PATCH 10/10] Got rid of console.logs

---
 packages/ui/src/machines/authenticator/defaultServices.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/ui/src/machines/authenticator/defaultServices.ts b/packages/ui/src/machines/authenticator/defaultServices.ts
index d3139657ddd..6637964ff13 100644
--- a/packages/ui/src/machines/authenticator/defaultServices.ts
+++ b/packages/ui/src/machines/authenticator/defaultServices.ts
@@ -23,7 +23,6 @@ export const defaultServices = {
       confirm_password: touched_confirm_password,
       password: touched_password,
     } = touchData;
-    console.log('got', touched_confirm_password, touched_password);
 
     if (!password && !confirm_password) {
       // these inputs are clean, don't complain yet
@@ -34,7 +33,6 @@ export const defaultServices = {
       ((touched_confirm_password && touched_password) ||
         (password.length >= 6 && confirm_password.length >= 6))
     ) {
-      console.log('got here');
       // Only return an error if both fields have text entered,
       // the passwords do not match, and the fields have been
       // touched or the password and confirm password is longer then or equal to 6.