fix(authenticator): Username form validation Cognito requirements (#2296)

Lorenzohidalgo · Dillon Nys · dnys1 · web-flow · commit 672a7cf133b8 · 2022-11-07T12:45:33.000-05:00
* updated validator

* Update l10n files

* Update packages/amplify_authenticator/lib/src/l10n/input_resolver.dart

Co-authored-by: Dillon Nys &lt;24740863+dnys1@users.noreply.github.com&gt;

* chore: Reformat files

* updated username temp regex expression

* updated errorMaxLines

Co-authored-by: Dillon Nys &lt;nydillon@amazon.com&gt;
Co-authored-by: Dillon Nys &lt;24740863+dnys1@users.noreply.github.com&gt;
Co-authored-by: Jordan Nelson &lt;nejrd@amazon.com&gt;
diff --git a/packages/amplify_authenticator/lib/src/l10n/generated/button_localizations.dart b/packages/amplify_authenticator/lib/src/l10n/generated/button_localizations.dart
@@ -22,14 +22,14 @@ import 'package:intl/intl.dart' as intl;
 
 import 'button_localizations_en.dart' deferred as button_localizations_en;
 
-/// Callers can lookup localized strings with an instance of AuthenticatorButtonLocalizations returned
-/// by `AuthenticatorButtonLocalizations.of(context)`.
+/// Callers can lookup localized strings with an instance of AuthenticatorButtonLocalizations
+/// returned by `AuthenticatorButtonLocalizations.of(context)`.
 ///
 /// Applications need to include `AuthenticatorButtonLocalizations.delegate()` in their app's
-/// localizationDelegates list, and the locales they support in the app's
-/// supportedLocales list. For example:
+/// `localizationDelegates` list, and the locales they support in the app's
+/// `supportedLocales` list. For example:
 ///
-/// ```
+/// ```dart
 /// import 'generated/button_localizations.dart';
 ///
 /// return MaterialApp(
@@ -44,14 +44,14 @@ import 'button_localizations_en.dart' deferred as button_localizations_en;
 /// Please make sure to update your pubspec.yaml to include the following
 /// packages:
 ///
-/// ```
+/// ```yaml
 /// dependencies:
 ///   # Internationalization support.
 ///   flutter_localizations:
 ///     sdk: flutter
 ///   intl: any # Use the pinned version from flutter_localizations
 ///
-///   # rest of dependencies
+///   # Rest of dependencies
 /// ```
 ///
 /// ## iOS Applications
diff --git a/packages/amplify_authenticator/lib/src/l10n/generated/button_localizations_en.dart b/packages/amplify_authenticator/lib/src/l10n/generated/button_localizations_en.dart
@@ -16,6 +16,7 @@
 import 'package:amplify_authenticator/amplify_authenticator.dart';
 
 import 'package:intl/intl.dart' as intl;
+
 import 'button_localizations.dart';
 
 /// The translations for English (`en`).
diff --git a/packages/amplify_authenticator/lib/src/l10n/generated/country_localizations.dart b/packages/amplify_authenticator/lib/src/l10n/generated/country_localizations.dart
@@ -21,14 +21,14 @@ import 'package:intl/intl.dart' as intl;
 
 import 'country_localizations_en.dart' deferred as country_localizations_en;
 
-/// Callers can lookup localized strings with an instance of AuthenticatorCountryLocalizations returned
-/// by `AuthenticatorCountryLocalizations.of(context)`.
+/// Callers can lookup localized strings with an instance of AuthenticatorCountryLocalizations
+/// returned by `AuthenticatorCountryLocalizations.of(context)`.
 ///
 /// Applications need to include `AuthenticatorCountryLocalizations.delegate()` in their app's
-/// localizationDelegates list, and the locales they support in the app's
-/// supportedLocales list. For example:
+/// `localizationDelegates` list, and the locales they support in the app's
+/// `supportedLocales` list. For example:
 ///
-/// ```
+/// ```dart
 /// import 'generated/country_localizations.dart';
 ///
 /// return MaterialApp(
@@ -43,14 +43,14 @@ import 'country_localizations_en.dart' deferred as country_localizations_en;
 /// Please make sure to update your pubspec.yaml to include the following
 /// packages:
 ///
-/// ```
+/// ```yaml
 /// dependencies:
 ///   # Internationalization support.
 ///   flutter_localizations:
 ///     sdk: flutter
 ///   intl: any # Use the pinned version from flutter_localizations
 ///
-///   # rest of dependencies
+///   # Rest of dependencies
 /// ```
 ///
 /// ## iOS Applications
diff --git a/packages/amplify_authenticator/lib/src/l10n/generated/input_localizations.dart b/packages/amplify_authenticator/lib/src/l10n/generated/input_localizations.dart
@@ -22,14 +22,14 @@ import 'package:intl/intl.dart' as intl;
 
 import 'input_localizations_en.dart' deferred as input_localizations_en;
 
-/// Callers can lookup localized strings with an instance of AuthenticatorInputLocalizations returned
-/// by `AuthenticatorInputLocalizations.of(context)`.
+/// Callers can lookup localized strings with an instance of AuthenticatorInputLocalizations
+/// returned by `AuthenticatorInputLocalizations.of(context)`.
 ///
 /// Applications need to include `AuthenticatorInputLocalizations.delegate()` in their app's
-/// localizationDelegates list, and the locales they support in the app's
-/// supportedLocales list. For example:
+/// `localizationDelegates` list, and the locales they support in the app's
+/// `supportedLocales` list. For example:
 ///
-/// ```
+/// ```dart
 /// import 'generated/input_localizations.dart';
 ///
 /// return MaterialApp(
@@ -44,14 +44,14 @@ import 'input_localizations_en.dart' deferred as input_localizations_en;
 /// Please make sure to update your pubspec.yaml to include the following
 /// packages:
 ///
-/// ```
+/// ```yaml
 /// dependencies:
 ///   # Internationalization support.
 ///   flutter_localizations:
 ///     sdk: flutter
 ///   intl: any # Use the pinned version from flutter_localizations
 ///
-///   # rest of dependencies
+///   # Rest of dependencies
 /// ```
 ///
 /// ## iOS Applications
@@ -240,6 +240,12 @@ abstract class AuthenticatorInputLocalizations {
   /// **'Confirm {attribute}'**
   String confirmAttribute(String attribute);
 
+  /// Warning for when username requirements are not met.
+  ///
+  /// In en, this message translates to:
+  /// **'Username must only contain alphanumeric characters and symbols.'**
+  String get usernameRequirements;
+
   /// Preamble to list of unment password requirements.
   ///
   /// In en, this message translates to:
@@ -257,7 +263,7 @@ abstract class AuthenticatorInputLocalizations {
   ///
   /// In en, this message translates to:
   /// **'at least {numCharacters, plural, =1{1{characterType} character} other{{numCharacters}{characterType} characters}}'**
-  String passwordRequirementsAtLeast(int numCharacters, String characterType);
+  String passwordRequirementsAtLeast(num numCharacters, String characterType);
 
   /// Message for conflicting password and confirm password fields.
   ///
diff --git a/packages/amplify_authenticator/lib/src/l10n/generated/input_localizations_en.dart b/packages/amplify_authenticator/lib/src/l10n/generated/input_localizations_en.dart
@@ -16,6 +16,7 @@
 import 'package:amplify_authenticator/amplify_authenticator.dart';
 
 import 'package:intl/intl.dart' as intl;
+
 import 'input_localizations.dart';
 
 /// The translations for English (`en`).
@@ -105,6 +106,10 @@ class AuthenticatorInputLocalizationsEn
     return 'Confirm $attribute';
   }
 
+  @override
+  String get usernameRequirements =>
+      'Username must only contain alphanumeric characters and symbols.';
+
   @override
   String get passwordRequirementsPreamble => 'Password must include:';
 
@@ -126,7 +131,7 @@ class AuthenticatorInputLocalizationsEn
   }
 
   @override
-  String passwordRequirementsAtLeast(int numCharacters, String characterType) {
+  String passwordRequirementsAtLeast(num numCharacters, String characterType) {
     final String pluralString = intl.Intl.pluralLogic(
       numCharacters,
       locale: localeName,
diff --git a/packages/amplify_authenticator/lib/src/l10n/generated/message_localizations.dart b/packages/amplify_authenticator/lib/src/l10n/generated/message_localizations.dart
@@ -21,14 +21,14 @@ import 'package:intl/intl.dart' as intl;
 
 import 'message_localizations_en.dart' deferred as message_localizations_en;
 
-/// Callers can lookup localized strings with an instance of AuthenticatorMessageLocalizations returned
-/// by `AuthenticatorMessageLocalizations.of(context)`.
+/// Callers can lookup localized strings with an instance of AuthenticatorMessageLocalizations
+/// returned by `AuthenticatorMessageLocalizations.of(context)`.
 ///
 /// Applications need to include `AuthenticatorMessageLocalizations.delegate()` in their app's
-/// localizationDelegates list, and the locales they support in the app's
-/// supportedLocales list. For example:
+/// `localizationDelegates` list, and the locales they support in the app's
+/// `supportedLocales` list. For example:
 ///
-/// ```
+/// ```dart
 /// import 'generated/message_localizations.dart';
 ///
 /// return MaterialApp(
@@ -43,14 +43,14 @@ import 'message_localizations_en.dart' deferred as message_localizations_en;
 /// Please make sure to update your pubspec.yaml to include the following
 /// packages:
 ///
-/// ```
+/// ```yaml
 /// dependencies:
 ///   # Internationalization support.
 ///   flutter_localizations:
 ///     sdk: flutter
 ///   intl: any # Use the pinned version from flutter_localizations
 ///
-///   # rest of dependencies
+///   # Rest of dependencies
 /// ```
 ///
 /// ## iOS Applications
diff --git a/packages/amplify_authenticator/lib/src/l10n/generated/title_localizations.dart b/packages/amplify_authenticator/lib/src/l10n/generated/title_localizations.dart
@@ -21,14 +21,14 @@ import 'package:intl/intl.dart' as intl;
 
 import 'title_localizations_en.dart' deferred as title_localizations_en;
 
-/// Callers can lookup localized strings with an instance of AuthenticatorTitleLocalizations returned
-/// by `AuthenticatorTitleLocalizations.of(context)`.
+/// Callers can lookup localized strings with an instance of AuthenticatorTitleLocalizations
+/// returned by `AuthenticatorTitleLocalizations.of(context)`.
 ///
 /// Applications need to include `AuthenticatorTitleLocalizations.delegate()` in their app's
-/// localizationDelegates list, and the locales they support in the app's
-/// supportedLocales list. For example:
+/// `localizationDelegates` list, and the locales they support in the app's
+/// `supportedLocales` list. For example:
 ///
-/// ```
+/// ```dart
 /// import 'generated/title_localizations.dart';
 ///
 /// return MaterialApp(
@@ -43,14 +43,14 @@ import 'title_localizations_en.dart' deferred as title_localizations_en;
 /// Please make sure to update your pubspec.yaml to include the following
 /// packages:
 ///
-/// ```
+/// ```yaml
 /// dependencies:
 ///   # Internationalization support.
 ///   flutter_localizations:
 ///     sdk: flutter
 ///   intl: any # Use the pinned version from flutter_localizations
 ///
-///   # rest of dependencies
+///   # Rest of dependencies
 /// ```
 ///
 /// ## iOS Applications
diff --git a/packages/amplify_authenticator/lib/src/l10n/input_resolver.dart b/packages/amplify_authenticator/lib/src/l10n/input_resolver.dart
@@ -52,6 +52,7 @@ enum InputResolverKeyType {
   hint,
   confirmHint,
   empty,
+  usernameRequirements,
   passwordRequirements,
   format,
   mismatch
@@ -80,6 +81,10 @@ class InputResolverKey {
     InputResolverKeyType.empty,
     field: InputField.username,
   );
+  static const usernameRequirementsUnmet = InputResolverKey._(
+    InputResolverKeyType.usernameRequirements,
+    field: InputField.username,
+  );
   static const passwordTitle = InputResolverKey._(
     InputResolverKeyType.title,
     field: InputField.password,
@@ -477,6 +482,11 @@ class InputResolver extends Resolver<InputResolverKey> {
         .warnInvalidFormat(title(context, field).toLowerCase());
   }
 
+  /// Returns the text displayed when the username requirements are not met
+  String usernameRequires(BuildContext context) {
+    return AuthenticatorLocalizations.inputsOf(context).usernameRequirements;
+  }
+
   /// Returns the text displayed when a password input does match the password requirements
   /// defined in the amplify configuration.
   String passwordRequires(
@@ -523,6 +533,8 @@ class InputResolver extends Resolver<InputResolverKey> {
         return confirmHint(context, key.field);
       case InputResolverKeyType.empty:
         return empty(context, key.field);
+      case InputResolverKeyType.usernameRequirements:
+        return usernameRequires(context);
       case InputResolverKeyType.passwordRequirements:
         return passwordRequires(context, key.unmetPasswordRequirements!);
       case InputResolverKeyType.mismatch:
diff --git a/packages/amplify_authenticator/lib/src/l10n/src/inputs/inputs_en.arb b/packages/amplify_authenticator/lib/src/l10n/src/inputs/inputs_en.arb
@@ -146,6 +146,10 @@
                 "description": "The field which can be filled."
             }
         }
+    },    
+    "usernameRequirements": "Username must only contain alphanumeric characters and symbols.",
+    "@usernameRequirements": {
+        "description": "Warning for when username requirements are not met."
     },
     "passwordRequirementsPreamble": "Password must include:",
     "@passwordRequirementsPreamble": {
diff --git a/packages/amplify_authenticator/lib/src/mixins/authenticator_username_field.dart b/packages/amplify_authenticator/lib/src/mixins/authenticator_username_field.dart
@@ -179,12 +179,10 @@ mixin AuthenticatorUsernameField<FieldType,
   FormFieldValidator<UsernameInput> get validator {
     switch (selectedUsernameType) {
       case UsernameType.username:
-        return (input) => simpleValidator(
-              stringResolver.inputs.resolve(
-                context,
-                InputResolverKey.usernameEmpty,
-              ),
+        return (input) => usernameValidator(
               isOptional: isOptional,
+              context: context,
+              inputResolver: stringResolver.inputs,
             )(input?.username);
       case UsernameType.email:
         return (input) => validateEmail(
diff --git a/packages/amplify_authenticator/lib/src/utils/validators.dart b/packages/amplify_authenticator/lib/src/utils/validators.dart
@@ -17,6 +17,11 @@ import 'package:amplify_authenticator/amplify_authenticator.dart';
 import 'package:amplify_flutter/amplify_flutter.dart';
 import 'package:flutter/material.dart';
 
+/* TODO: update `usernameRegex` expression to match Cognito requirements
+* Proposed expression `[\p{L}\p{M}\p{S}\p{N}\p{P}]+` does not work as 
+* expected due to a mismatch in Regex flavor used by dart
+*/
+final usernameRegex = RegExp(r'^\S+$');
 final emailRegex = RegExp(r'^\S+@\S+$');
 final phoneNumberRegex = RegExp(r'^\+\d+$');
 final _codeRegex = RegExp(r'^\d{6}$');
@@ -40,6 +45,32 @@ FormFieldValidator<String> simpleValidator(
   };
 }
 
+FormFieldValidator<String> usernameValidator({
+  required bool isOptional,
+  required BuildContext context,
+  required InputResolver inputResolver,
+}) {
+  return (String? input) {
+    if (isOptional) return null;
+
+    if (input == null || input.isEmpty) {
+      return inputResolver.resolve(
+        context,
+        InputResolverKey.usernameEmpty,
+      );
+    }
+
+    if (!usernameRegex.hasMatch(input)) {
+      return inputResolver.resolve(
+        context,
+        InputResolverKey.usernameRequirementsUnmet,
+      );
+    }
+
+    return null;
+  };
+}
+
 extension PasswordPolicyCharactersX on PasswordPolicyCharacters {
   @visibleForTesting
   bool meetsRequirement(String value) {
diff --git a/packages/amplify_authenticator/lib/src/widgets/form_field.dart b/packages/amplify_authenticator/lib/src/widgets/form_field.dart
@@ -169,7 +169,7 @@ abstract class AuthenticatorFormFieldState<FieldType, FieldValue,
   Widget? get companionWidget => null;
 
   /// Maximum number of lines to use for error text.
-  int get errorMaxLines => 1;
+  int get errorMaxLines => 2;
 
   /// The maximum length of the input.
   int? get maxLength => null;

Original file line number	Diff line number	Diff line change
`@@ -146,6 +146,10 @@`
`146`	`146`	`"description": "The field which can be filled."`
`147`	`147`	`}`
`148`	`148`	`}`
	`149`	`+ },`
	`150`	`+ "usernameRequirements": "Username must only contain alphanumeric characters and symbols.",`
	`151`	`+ "@usernameRequirements": {`
	`152`	`+ "description": "Warning for when username requirements are not met."`
`149`	`153`	`},`
`150`	`154`	`"passwordRequirementsPreamble": "Password must include:",`
`151`	`155`	`"@passwordRequirementsPreamble": {`