Improve Confirm Password Error Validation

.changeset/silver-comics-know.md

@@ -0,0 +1,8 @@
+---
+'@aws-amplify/ui-angular': 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.

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()"
+    (setBlur)="onBlur($event)"
   ></amplify-password-field>
 
   <amplify-text-field

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.updateBlur({ name });
+  }
+
   inferLabel(): string {
     const label = this.label || this.attributeMap[this.name]?.label;
     return translate<string>(label);

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)="setBlur.emit($event)"
   />
   <div class="amplify-field-group__outer-end">
     <button

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() setBlur = new EventEmitter<Event>();
 
   public type: 'text' | 'password' = 'password';
 

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;
   }

packages/e2e/cypress/integration/common/sign-up.ts

@@ -7,7 +7,10 @@ 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()
+    .wait(100);
 });
 
 Then('I see {string} as an input field', (name: string) => {

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'] && (

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'] && (

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, updateBlur } = 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;
+    updateBlur({ name });
+  };
+
   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'] && (

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*`

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,
 });
@@ -110,3 +111,13 @@ export const handleInput = assign({
     };
   },
 });
+
+export const handleBlur = assign({
+  formControls: (context, event: AuthEvent) => {
+    const { name } = event.data;
+    return {
+      ...context['formControls'],
+      [`touched_${name}`]: true,
+    };
+  },
+});

packages/ui/src/machines/authenticator/actors/resetPassword.ts

@@ -6,9 +6,11 @@ import { runValidators } from '../../../validators';
 import {
   clearError,
   clearFormValues,
+  clearFormControls,
   clearUsername,
   clearValidationError,
   handleInput,
+  handleBlur,
   setFieldErrors,
   setRemoteError,
   setUsername,
@@ -32,13 +34,14 @@ export const resetPasswordActor = createMachine<
       },
       resetPassword: {
         initial: 'edit',
-        exit: ['clearFormValues', 'clearError'],
+        exit: ['clearFormValues', 'clearError', 'clearFormControls'],
         states: {
           edit: {
             entry: sendUpdate(),
             on: {
               SUBMIT: 'submit',
               CHANGE: { actions: 'handleInput' },
+              BLUR: { actions: 'handleBlur' },
             },
           },
           submit: {
@@ -59,7 +62,12 @@ export const resetPasswordActor = createMachine<
       },
       confirmResetPassword: {
         type: 'parallel',
-        exit: ['clearFormValues', 'clearError', 'clearUsername'],
+        exit: [
+          'clearFormValues',
+          'clearError',
+          'clearUsername',
+          'clearFormControls',
+        ],
         states: {
           validation: {
             initial: 'pending',
@@ -85,6 +93,10 @@ export const resetPasswordActor = createMachine<
                 actions: 'handleInput',
                 target: '.pending',
               },
+              BLUR: {
+                actions: 'handleBlur',
+                target: '.pending',
+              },
             },
           },
           submission: {
@@ -96,6 +108,7 @@ export const resetPasswordActor = createMachine<
                   SUBMIT: 'validate',
                   RESEND: 'resendCode',
                   CHANGE: { actions: 'handleInput' },
+                  BLUR: { actions: 'handleBlur' },
                 },
               },
               validate: {
@@ -150,9 +163,11 @@ export const resetPasswordActor = createMachine<
     actions: {
       clearError,
       clearFormValues,
+      clearFormControls,
       clearUsername,
       clearValidationError,
       handleInput,
+      handleBlur,
       setFieldErrors,
       setRemoteError,
       setUsername,
@@ -175,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]
+        );
       },
     },
   }