Add input validation support to flow components

Signed-off-by: Sajid Mannikeri <sajid.mannikeri@ad.infosys.com>

Author: Sajid Mannikeri

.changeset/input-validation-flow-inputs.md

@@ -0,0 +1,16 @@
+---
+"@asgardeo/javascript": minor
+"@asgardeo/react": minor
+"@asgardeo/i18n": minor
+---
+
+Add SDK support for declarative input validation rules on flow prompts.
+
+- New `ValidationRule` and `FieldError` types in `@asgardeo/javascript`.
+- New framework-agnostic utilities `evaluateValidationRule` and `buildValidatorFromRules`.
+- `EmbeddedFlowComponent.validation` and `EmbeddedFlowResponseData.fieldErrors` added to the v2 flow models.
+- Wires client-side rule evaluation and server-side `fieldErrors` surfacing into `BaseSignIn`, `BaseSignUp`, `BaseAcceptInvite`, `BaseInviteUser`, `BaseRecovery`.
+- Adds `fieldErrors` to `SignInRenderProps` so render-prop consumers can display server-side validation errors.
+- Adds default validation message i18n keys (`validation.pattern.invalid`, `validation.minLength.invalid`, `validation.maxLength.invalid`) to all locale bundles.
+
+Refs asgardeo/thunder#2410.

packages/i18n/src/models/i18n.ts

@@ -63,6 +63,9 @@ export interface I18nTranslations {
 
   /* Validation */
   'validations.required.field.error': string;
+  'validation.pattern.invalid': string;
+  'validation.minLength.invalid': string;
+  'validation.maxLength.invalid': string;
 
   /* |---------------------------------------------------------------| */
   /* |                        Widgets                                | */

packages/i18n/src/translations/en-US.ts

@@ -66,6 +66,9 @@ const translations: I18nTranslations = {
 
   /* Validation */
   'validations.required.field.error': 'This field is required',
+  'validation.pattern.invalid': 'This value does not match the required format.',
+  'validation.minLength.invalid': 'This value is too short.',
+  'validation.maxLength.invalid': 'This value is too long.',
 
   /* |---------------------------------------------------------------| */
   /* |                        Widgets                                | */

packages/i18n/src/translations/fr-FR.ts

@@ -66,6 +66,9 @@ const translations: I18nTranslations = {
 
   /* Validation */
   'validations.required.field.error': 'Ce champ est obligatoire',
+  'validation.pattern.invalid': "Cette valeur ne correspond pas au format requis.",
+  'validation.minLength.invalid': 'Cette valeur est trop courte.',
+  'validation.maxLength.invalid': 'Cette valeur est trop longue.',
 
   /* |---------------------------------------------------------------| */
   /* |                        Widgets                                | */

packages/i18n/src/translations/hi-IN.ts

@@ -66,6 +66,9 @@ const translations: I18nTranslations = {
 
   /* Validation */
   'validations.required.field.error': 'यह फील्ड आवश्यक है',
+  'validation.pattern.invalid': 'यह मान आवश्यक प्रारूप से मेल नहीं खाता।',
+  'validation.minLength.invalid': 'यह मान बहुत छोटा है।',
+  'validation.maxLength.invalid': 'यह मान बहुत लंबा है।',
 
   /* |---------------------------------------------------------------| */
   /* |                        Widgets                                | */

packages/i18n/src/translations/ja-JP.ts

@@ -66,6 +66,9 @@ const translations: I18nTranslations = {
 
   /* Validation */
   'validations.required.field.error': 'この項目は必須です',
+  'validation.pattern.invalid': 'この値は必要な形式と一致しません。',
+  'validation.minLength.invalid': 'この値は短すぎます。',
+  'validation.maxLength.invalid': 'この値は長すぎます。',
 
   /* |---------------------------------------------------------------| */
   /* |                        Widgets                                | */

packages/i18n/src/translations/pt-BR.ts

@@ -66,6 +66,9 @@ const translations: I18nTranslations = {
 
   /* Validation */
   'validations.required.field.error': 'Este campo é obrigatório',
+  'validation.pattern.invalid': 'Este valor não corresponde ao formato necessário.',
+  'validation.minLength.invalid': 'Este valor é muito curto.',
+  'validation.maxLength.invalid': 'Este valor é muito longo.',
 
   /* |---------------------------------------------------------------| */
   /* |                        Widgets                                | */

packages/i18n/src/translations/pt-PT.ts

@@ -66,6 +66,9 @@ const translations: I18nTranslations = {
 
   /* Validation */
   'validations.required.field.error': 'Este campo é obrigatório',
+  'validation.pattern.invalid': 'Este valor não corresponde ao formato necessário.',
+  'validation.minLength.invalid': 'Este valor é demasiado curto.',
+  'validation.maxLength.invalid': 'Este valor é demasiado longo.',
 
   /* |---------------------------------------------------------------| */
   /* |                        Widgets                                | */

packages/i18n/src/translations/si-LK.ts

@@ -66,6 +66,9 @@ const translations: I18nTranslations = {
 
   /* Validation */
   'validations.required.field.error': 'මෙම ක්ෂේත්‍රය අවශ්‍යයි',
+  'validation.pattern.invalid': 'මෙම අගය අවශ්‍ය ආකෘතියට නොගැලපේ.',
+  'validation.minLength.invalid': 'මෙම අගය ඉතා කෙටියි.',
+  'validation.maxLength.invalid': 'මෙම අගය ඉතා දිගයි.',
 
   /* |---------------------------------------------------------------| */
   /* |                        Widgets                                | */

packages/i18n/src/translations/ta-IN.ts

@@ -66,6 +66,9 @@ const translations: I18nTranslations = {
 
   /* Validation */
   'validations.required.field.error': 'இந்த புலம் தேவை',
+  'validation.pattern.invalid': 'இந்த மதிப்பு தேவையான வடிவத்துடன் பொருந்தவில்லை.',
+  'validation.minLength.invalid': 'இந்த மதிப்பு மிகவும் குறுகியது.',
+  'validation.maxLength.invalid': 'இந்த மதிப்பு மிகவும் நீளமானது.',
 
   /* |---------------------------------------------------------------| */
   /* |                        Widgets                                | */