feat: create component PIN code input

app/CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased](https://github.com/Orange-OpenSource/ouds-flutter/compare/0.5.0...develop)
 
 ### Added
+- [DemoApp][Library] Create component - `Pin Code Input` ([#307](https://github.com/Orange-OpenSource/ouds-flutter/issues/307))
 
 ### Changed
 

app/lib/l10n/gen/ouds_flutter_app_localizations.dart

@@ -488,6 +488,24 @@ abstract class AppLocalizations {
   /// **'Read only'**
   String get app_components_common_readOnly_label;
 
+  /// No description provided for @app_components_common_placeholder_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Placeholder'**
+  String get app_components_common_placeholder_label;
+
+  /// No description provided for @app_components_common_helperText_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Helper text'**
+  String get app_components_common_helperText_label;
+
+  /// No description provided for @app_components_common_length_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Length'**
+  String get app_components_common_length_label;
+
   /// No description provided for @app_components_button_label.
   ///
   /// In en, this message translates to:
@@ -788,23 +806,59 @@ abstract class AppLocalizations {
   /// **'Suffix'**
   String get app_components_text_input_suffix_label;
 
-  /// No description provided for @app_components_text_input_placeholder_label.
+  /// No description provided for @app_components_text_input_error_label.
   ///
   /// In en, this message translates to:
-  /// **'Placeholder'**
-  String get app_components_text_input_placeholder_label;
+  /// **'This field can’t be empty.'**
+  String get app_components_text_input_error_label;
 
-  /// No description provided for @app_components_text_input_helperText_label.
+  /// No description provided for @app_components_pin_code_input_label.
   ///
   /// In en, this message translates to:
-  /// **'Helper text'**
-  String get app_components_text_input_helperText_label;
+  /// **'Pin code input'**
+  String get app_components_pin_code_input_label;
 
-  /// No description provided for @app_components_text_input_error_label.
+  /// No description provided for @app_components_pin_code_input_description_text.
   ///
   /// In en, this message translates to:
-  /// **'This field can’t be empty.'**
-  String get app_components_text_input_error_label;
+  /// **'A PIN code input is a specialized form field used to capture short, fixed-length numeric codes, typically for authentication or confirmation purposes, such as a 4, 6 or 8-digit personal identification number (PIN).'**
+  String get app_components_pin_code_input_description_text;
+
+  /// No description provided for @app_components_pin_code_input_helperText_description_text_4.
+  ///
+  /// In en, this message translates to:
+  /// **'Enter the 4-digit code sent to your phone.'**
+  String get app_components_pin_code_input_helperText_description_text_4;
+
+  /// No description provided for @app_components_pin_code_input_helperText_description_text_6.
+  ///
+  /// In en, this message translates to:
+  /// **'Enter the 6-digit code sent to your phone.'**
+  String get app_components_pin_code_input_helperText_description_text_6;
+
+  /// No description provided for @app_components_pin_code_input_helperText_description_text_8.
+  ///
+  /// In en, this message translates to:
+  /// **'Enter the 8-digit code sent to your phone.'**
+  String get app_components_pin_code_input_helperText_description_text_8;
+
+  /// No description provided for @app_components_pin_code_input_error_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Please enter the verification code.'**
+  String get app_components_pin_code_input_error_label;
+
+  /// No description provided for @app_components_pin_code_input_verification_error_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Verification failed. Check and enter the correct code.'**
+  String get app_components_pin_code_input_verification_error_label;
+
+  /// No description provided for @app_components_pin_code_input_hidden_password_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Hidden Password'**
+  String get app_components_pin_code_input_hidden_password_label;
 
   /// No description provided for @app_about_name_label.
   ///

app/lib/l10n/gen/ouds_flutter_app_localizations_ar.dart

@@ -211,6 +211,15 @@ class AppLocalizationsAr extends AppLocalizations {
   @override
   String get app_components_common_readOnly_label => 'اقرأ فقط';
 
+  @override
+  String get app_components_common_placeholder_label => 'العنصر النائب';
+
+  @override
+  String get app_components_common_helperText_label => 'نص مساعد';
+
+  @override
+  String get app_components_common_length_label => 'الطول';
+
   @override
   String get app_components_button_label => 'زر';
 
@@ -379,14 +388,39 @@ class AppLocalizationsAr extends AppLocalizations {
   String get app_components_text_input_suffix_label => 'لاحقة';
 
   @override
-  String get app_components_text_input_placeholder_label => 'العنصر النائب';
+  String get app_components_text_input_error_label =>
+      'لا يمكن أن يكون هذا الحقل فارغًا.';
 
   @override
-  String get app_components_text_input_helperText_label => 'نص مساعد';
+  String get app_components_pin_code_input_label => 'إدخال الرقم السري الشخصي';
 
   @override
-  String get app_components_text_input_error_label =>
-      'لا يمكن أن يكون هذا الحقل فارغًا.';
+  String get app_components_pin_code_input_description_text =>
+      'حقل إدخال الرقم السري الشخصي هو حقل مخصص لإدخال رموز رقمية قصيرة وثابتة الطول، يُستخدم عادةً للمصادقة أو لتأكيد العمليات، مثل الرقم السري الشخصي المكوَّن من 4 أو 6 أو 8 أرقام.';
+
+  @override
+  String get app_components_pin_code_input_helperText_description_text_4 =>
+      'أدخل الرقم السري المكوَّن من 4 أرقام المُرسَل إلى هاتفك.';
+
+  @override
+  String get app_components_pin_code_input_helperText_description_text_6 =>
+      'أدخل الرقم السري المكوَّن من 6 أرقام المُرسَل إلى هاتفك.';
+
+  @override
+  String get app_components_pin_code_input_helperText_description_text_8 =>
+      'أدخل الرقم السري المكوَّن من 8 أرقام المُرسَل إلى هاتفك.';
+
+  @override
+  String get app_components_pin_code_input_error_label =>
+      'يرجى إدخال رمز التحقق.';
+
+  @override
+  String get app_components_pin_code_input_verification_error_label =>
+      'فشلت عملية التحقق. يُرجى التحقق وإدخال الرمز الصحيح.';
+
+  @override
+  String get app_components_pin_code_input_hidden_password_label =>
+      'إخفاء كلمة المرور';
 
   @override
   String get app_about_name_label => 'أداة نظام التصميم';

app/lib/l10n/gen/ouds_flutter_app_localizations_en.dart

@@ -210,6 +210,15 @@ class AppLocalizationsEn extends AppLocalizations {
   @override
   String get app_components_common_readOnly_label => 'Read only';
 
+  @override
+  String get app_components_common_placeholder_label => 'Placeholder';
+
+  @override
+  String get app_components_common_helperText_label => 'Helper text';
+
+  @override
+  String get app_components_common_length_label => 'Length';
+
   @override
   String get app_components_button_label => 'Button';
 
@@ -379,14 +388,39 @@ class AppLocalizationsEn extends AppLocalizations {
   String get app_components_text_input_suffix_label => 'Suffix';
 
   @override
-  String get app_components_text_input_placeholder_label => 'Placeholder';
+  String get app_components_text_input_error_label =>
+      'This field can’t be empty.';
 
   @override
-  String get app_components_text_input_helperText_label => 'Helper text';
+  String get app_components_pin_code_input_label => 'Pin code input';
 
   @override
-  String get app_components_text_input_error_label =>
-      'This field can’t be empty.';
+  String get app_components_pin_code_input_description_text =>
+      'A PIN code input is a specialized form field used to capture short, fixed-length numeric codes, typically for authentication or confirmation purposes, such as a 4, 6 or 8-digit personal identification number (PIN).';
+
+  @override
+  String get app_components_pin_code_input_helperText_description_text_4 =>
+      'Enter the 4-digit code sent to your phone.';
+
+  @override
+  String get app_components_pin_code_input_helperText_description_text_6 =>
+      'Enter the 6-digit code sent to your phone.';
+
+  @override
+  String get app_components_pin_code_input_helperText_description_text_8 =>
+      'Enter the 8-digit code sent to your phone.';
+
+  @override
+  String get app_components_pin_code_input_error_label =>
+      'Please enter the verification code.';
+
+  @override
+  String get app_components_pin_code_input_verification_error_label =>
+      'Verification failed. Check and enter the correct code.';
+
+  @override
+  String get app_components_pin_code_input_hidden_password_label =>
+      'Hidden Password';
 
   @override
   String get app_about_name_label => 'Design System Toolbox';

app/lib/l10n/ouds_flutter_ar.arb

@@ -74,6 +74,9 @@
   "app_components_common_icon_a11y": "أيقونة",
   "app_components_common_style_label": "نمط",
   "app_components_common_readOnly_label": "اقرأ فقط",
+  "app_components_common_placeholder_label": "العنصر النائب",
+  "app_components_common_helperText_label": "نص مساعد",
+  "app_components_common_length_label": "الطول",
 
   "@_components_button": {},
   "app_components_button_label": "زر",
@@ -144,10 +147,18 @@
   "app_components_text_input_trailingIcon_label": "عمل زائدة",
   "app_components_text_input_prefix_label": "بادئة",
   "app_components_text_input_suffix_label": "لاحقة",
-  "app_components_text_input_placeholder_label": "العنصر النائب",
-  "app_components_text_input_helperText_label": "نص مساعد",
   "app_components_text_input_error_label": "لا يمكن أن يكون هذا الحقل فارغًا.",
 
+  "@_components_pin_code_input": {},
+  "app_components_pin_code_input_label": "إدخال الرقم السري الشخصي",
+  "app_components_pin_code_input_description_text": "حقل إدخال الرقم السري الشخصي هو حقل مخصص لإدخال رموز رقمية قصيرة وثابتة الطول، يُستخدم عادةً للمصادقة أو لتأكيد العمليات، مثل الرقم السري الشخصي المكوَّن من 4 أو 6 أو 8 أرقام.",
+  "app_components_pin_code_input_helperText_description_text_4": "أدخل الرقم السري المكوَّن من 4 أرقام المُرسَل إلى هاتفك.",
+  "app_components_pin_code_input_helperText_description_text_6": "أدخل الرقم السري المكوَّن من 6 أرقام المُرسَل إلى هاتفك.",
+  "app_components_pin_code_input_helperText_description_text_8": "أدخل الرقم السري المكوَّن من 8 أرقام المُرسَل إلى هاتفك.",
+  "app_components_pin_code_input_error_label": "يرجى إدخال رمز التحقق.",
+  "app_components_pin_code_input_verification_error_label": "فشلت عملية التحقق. يُرجى التحقق وإدخال الرمز الصحيح.",
+  "app_components_pin_code_input_hidden_password_label": "إخفاء كلمة المرور",
+
   "@_about_screen": {},
   "app_about_name_label": "أداة نظام التصميم",
   "app_about_privacyPolicy_label": "سياسة الخصوصية",

app/lib/l10n/ouds_flutter_en.arb

@@ -114,6 +114,9 @@
   "app_components_common_icon_a11y": "Icon",
   "app_components_common_style_label": "Style",
   "app_components_common_readOnly_label": "Read only",
+  "app_components_common_placeholder_label": "Placeholder",
+  "app_components_common_helperText_label": "Helper text",
+  "app_components_common_length_label": "Length",
 
   "@_components_button": {},
   "app_components_button_label": "Button",
@@ -185,10 +188,18 @@
   "app_components_text_input_trailingIcon_label": "Trailing action",
   "app_components_text_input_prefix_label": "Prefix",
   "app_components_text_input_suffix_label": "Suffix",
-  "app_components_text_input_placeholder_label": "Placeholder",
-  "app_components_text_input_helperText_label": "Helper text",
   "app_components_text_input_error_label": "This field can’t be empty.",
 
+  "@_components_pin_code_input": {},
+  "app_components_pin_code_input_label": "Pin code input",
+  "app_components_pin_code_input_description_text": "A PIN code input is a specialized form field used to capture short, fixed-length numeric codes, typically for authentication or confirmation purposes, such as a 4, 6 or 8-digit personal identification number (PIN).",
+  "app_components_pin_code_input_helperText_description_text_4": "Enter the 4-digit code sent to your phone.",
+  "app_components_pin_code_input_helperText_description_text_6": "Enter the 6-digit code sent to your phone.",
+  "app_components_pin_code_input_helperText_description_text_8": "Enter the 8-digit code sent to your phone.",
+  "app_components_pin_code_input_error_label": "Please enter the verification code.",
+  "app_components_pin_code_input_verification_error_label": "Verification failed. Check and enter the correct code.",
+  "app_components_pin_code_input_hidden_password_label": "Hidden Password",
+
   "@_about_screen": {},
   "app_about_name_label": "Design System Toolbox",
   "app_about_privacyPolicy_label": "Privacy policy",

app/lib/ui/components/components.dart

@@ -38,6 +38,7 @@ import 'package:ouds_flutter_demo/ui/components/switch/switch_demo_screen.dart';
 import 'package:ouds_flutter_demo/ui/components/switch/switch_item_demo_screen.dart';
 import 'package:ouds_flutter_demo/ui/components/tag/tag_demo_screen.dart';
 import 'package:ouds_flutter_demo/ui/components/tag/tag_input_demo_screen.dart';
+import 'package:ouds_flutter_demo/ui/components/text_input/pin_code_input/pin_code_input_demo_screen.dart';
 import 'package:ouds_flutter_demo/ui/components/text_input/text_input_demo_screen.dart';
 import 'package:ouds_theme_contract/ouds_theme.dart';
 
@@ -241,6 +242,10 @@ List<Component> components(BuildContext context) {
           context.l10n.app_components_text_input_label,
           TextInputDemoScreen(),
         ),
+        VariantComponent(
+            context.l10n.app_components_pin_code_input_label,
+            PinCodeInputDemoScreen()
+        )
       ],
     ),
   ];

app/lib/ui/components/text_input/pin_code_input/pin_code_input_code_generator.dart

@@ -0,0 +1,80 @@
+/*
+ * // Software Name: OUDS Flutter
+ * // SPDX-FileCopyrightText: Copyright (c) Orange SA
+ * // SPDX-License-Identifier: MIT
+ * //
+ * // This software is distributed under the MIT license,
+ * // the text of which is available at https://opensource.org/license/MIT/
+ * // or see the "LICENSE" file for more details.
+ * //
+ * // Software description: Flutter library of reusable graphical components
+ * //
+ */
+import 'package:flutter/material.dart';
+import 'package:ouds_flutter_demo/l10n/app_localizations.dart';
+import 'package:ouds_flutter_demo/ui/components/text_input/pin_code_input/pin_code_input_enum.dart';
+import 'package:ouds_flutter_demo/ui/components/text_input/text_input_customization.dart';
+import 'package:ouds_flutter_demo/ui/components/text_input/text_input_customization_utils.dart';
+
+class PinCodeInputCodeGenerator {
+  static String updateCode(BuildContext context) {
+    final TextInputCustomizationState? state = TextInputCustomization.of(context);
+
+    if (state == null) return "OudsPinCodeInput(),";
+
+    List<String> lines = [];
+
+    lines.add(" controllers: controllers,");
+
+    if (state.hasHelperText && !state.hasError) {
+      lines.add(
+          ' helperText: "${TextInputCustomizationUtils.getPinCodeHelperText(state, PinCodeLengthEnum.getHelperText(context, state.selectedPinCodeLength))}",');
+    }
+
+    if (state.hasError) {
+      lines.add(" isError: ${state.hasError},");
+      lines.add(' errorText: "${TextInputCustomizationUtils.getPinCodeErrorText(state,context.l10n.app_components_pin_code_input_error_label)}",');
+    }
+
+    final length = TextInputCustomizationUtils.getLength(state.selectedPinCodeLength);
+    lines.add(' length: $length,');
+
+    lines.add(' onCompleted: (value) {\n  //handle completed pin code\n},');
+    lines.add(' onError: (isError) {\n  // handle error state\n},');
+
+    final String decoration = _digitDecorationCode(state);
+
+    return [
+      "OudsPinCodeInput(",
+        ...lines,
+        decoration,
+      "),"
+    ].join("\n");
+  }
+
+  static String _digitDecorationCode(TextInputCustomizationState state) {
+    List<String> props = [];
+
+    if (state.pinCodePlaceholderText.isNotEmpty) {
+      final hint = TextInputCustomizationUtils.getPinCodePlaceholderText(state);
+      props.add(' hintText: "$hint",');
+    }
+
+    if (state.hasRoundedCorner) {
+      props.add(' roundedCorner: ${state.hasRoundedCorner},');
+    }
+
+    if (state.hasHiddenPassword) {
+      props.add(' hiddenPassword: ${state.hasHiddenPassword},');
+    }
+
+    final style = TextInputCustomizationUtils.getStyle(state.selectedStyle);
+    props.add(' style: $style,');
+
+    if (props.isEmpty) {
+      return "digitInputDecoration: OudsDigitInputDecoration(),";
+    }
+
+    return "digitInputDecoration: OudsDigitInputDecoration(\n${props.join("\n")}\n),";
+  }
+}