feat: Phone number tab sign in UI with internationalization (#65)

## Description * Sign in page phone number tab UI. Implementation of issue #67 * Internationalization of text in both french and English <img src="https://user-images.githubusercontent.com/60433438/218272037-aa21da14-eed4-4207-9b08-0defeca17fc3.png" width= "500" height="800"> <img src="https://user-images.githubusercontent.com/60433438/218272048-96bbc46d-2db5-497b-b6b8-d852271ce5d8.png" width= "500" height="800"> ## Type of Change  - [x] ✨ New feature (non-breaking change which adds functionality) - [ ] 🛠️ Bug fix (non-breaking change which fixes an issue) - [ ] ❌ Breaking change (fix or feature that would cause existing functionality to change) - [ ] 🧹 Code refactor - [ ] ✅ Build configuration change - [ ] 📝 Documentation - [ ] 🗑️ Chore ## Pre-launch Checklist - [ ] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [ ] I read and ran all relevant commands as specififed in the Running Tests section of the [Contributor Guide]. - [ ] The title of the PR follows the [Conventional Commits] guideline - [ ] My local branch follows the naming standards in the [Deepsource Branch Naming Convention] or [Biodiversity Branch Naming Convention] - [ ] I listed at least one issue that this PR fixes in the description above. - [ ] I updated `pubspec.yaml` with an appropriate new version according to the [pub versioning philosophy], - [ ] I updated/added relevant documentation (doc comments with `///`). - [ ] I added new tests to check the change I am making, or this PR is [test-exempt]. - [ ] All existing and new tests are passing. [Contributor Guide]: https://github.com/FlutterPlaza/.github/blob/main/CONTRIBUTING.md [Conventional Commits]: https://www.conventionalcommits.org/en/v1.0.0-beta.4/ [pub versioning philosophy]: https://dart.dev/tools/pub/versioning [Biodiversity Branch Naming Convention]: https://bit.ly/3DyYSwM [Deepsource Branch Naming Convention]: https://bit.ly/3Y08Gs4
FlutterPlaza · Feb 26, 2023 · eec399d · eec399d
2 parents 73538de + 9d3244c
commit eec399d
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 18 deletions.
diff --git a/lib/core/presentation/theming/colors/colors.dart b/lib/core/presentation/theming/colors/colors.dart
@@ -4,12 +4,14 @@ class _AppColors {
   static Color primaryColorW = const Color(0xff48A2DF);
   static Color secondaryColorW = const Color(0xff000000);
   static Color secondaryContainerW = const Color(0xffDF602F);
-  static Color onSurfaceW = const Color(0xffD9D9D9);
-  static Color bgColorW = const Color(0xffF5F5F5); // ;
   static Color errorContainerW = const Color(0xffFFE5E7);
   static Color onErrorW = const Color(0xffFF000D);
   // static Color bgColorW = const Color(0xffF7F7F7);
-  static Color onBgColorW = Color(0xffFFFFFF);
+  static Color bgColorW = Color(0xffFFFFFF);
+  static Color onBgColorW = Color(0xffD9D9D9);
+  static Color surfaceW = const Color(0xffF5F5F5); // ;
+  // static Color surfacerW = Color(0xffFFFFFF);
+  static Color onSurfaceW = Color(0xffD9D9D9); // const Color(0xff808191);
 
   static Color getShade(Color color, {bool darker = false, double value = .1}) {
     assert(value >= 0 && value <= 1, 'verify domain interval');

diff --git a/lib/core/presentation/theming/themes/light_theme.dart b/lib/core/presentation/theming/themes/light_theme.dart
@@ -6,21 +6,20 @@ const borderRaduis = 0.025;
 ThemeData whiteTheme(BuildContext context, BoxConstraints cts) {
   final theme = Theme.of(context);
   final style = theme.textTheme;
-  // final colors = theme.colorScheme;
 
   return ThemeData(
     colorScheme: ColorScheme.light(
       primary: _AppColors.primaryColorW,
+      onPrimary: _AppColors.onSurfaceW,
       primaryContainer: _AppColors.primaryColorW,
       secondary: _AppColors.secondaryColorW,
+      onSecondary: _AppColors.primaryColorW,
       secondaryContainer: _AppColors.secondaryContainerW,
       surface: _AppColors.bgColorW,
-      background: _AppColors.bgColorW,
-      error: _AppColors.primaryColorW,
-      onPrimary: _AppColors.onSurfaceW,
-      onSecondary: _AppColors.primaryColorW,
       onSurface: _AppColors.onSurfaceW,
+      background: _AppColors.bgColorW,
       onBackground: _AppColors.onBgColorW,
+      error: _AppColors.primaryColorW,
       onError: _AppColors.onErrorW,
       errorContainer: _AppColors.errorContainerW,
 
@@ -51,6 +50,7 @@ ThemeData whiteTheme(BuildContext context, BoxConstraints cts) {
       ),
       titleSmall: style.titleSmall?.copyWith(
         fontSize: cts.maxWidth * 0.04,
+        color: _AppColors.onSurfaceW,
       ),
       bodyLarge: style.bodyLarge?.copyWith(
         fontSize: cts.maxWidth * 0.042,
@@ -99,7 +99,9 @@ ThemeData whiteTheme(BuildContext context, BoxConstraints cts) {
 
     inputDecorationTheme: InputDecorationTheme(
       focusColor: Colors.red,
-      labelStyle: style.bodySmall,
+      labelStyle: style.bodySmall?.copyWith(
+        color: _AppColors.onSurfaceW,
+      ),
       hintStyle: style.bodySmall,
       enabledBorder: OutlineInputBorder(
         borderRadius: BorderRadius.circular(cts.maxWidth * borderRaduis),
@@ -127,16 +129,18 @@ ThemeData whiteTheme(BuildContext context, BoxConstraints cts) {
       contentPadding: EdgeInsets.symmetric(
           horizontal: cts.maxWidth * 0.035, vertical: cts.maxWidth * 0.05),
     ),
-    scaffoldBackgroundColor: _AppColors.bgColorW,
+    scaffoldBackgroundColor: _AppColors.onSurfaceW,
     tabBarTheme: TabBarTheme(
+      overlayColor: MaterialStateProperty.all(Colors.blue),
+      // indicatorColor: Colors.black,
       labelStyle: style.bodySmall,
       unselectedLabelStyle: style.bodySmall,
       unselectedLabelColor: theme.colorScheme.onSurface,
       labelColor: theme.colorScheme.onBackground,
       indicator: BoxDecoration(
         borderRadius:
             BorderRadius.all(Radius.circular(cts.maxWidth * borderRaduis)),
-        color: theme.shadowColor,
+        color: _AppColors.secondaryColorW,
       ),
       indicatorSize: TabBarIndicatorSize.tab,
     ),

diff --git a/lib/core/presentation/widget/my_textformfield.dart b/lib/core/presentation/widget/my_textformfield.dart
@@ -59,7 +59,8 @@ class _FpbTextFormFieldState extends State<FpbTextFormField> {
                   : TextInputType.none,
           onChanged: widget.onChanged,
           obscureText: hidePassword ?? false,
-          style: textTheme.bodyMedium,
+          style: textTheme
+              .titleSmall, //bodyMedium //.copyWith(color: colors.onSurface),
           decoration: InputDecoration(
             errorText: widget.errorText,
             suffixIcon: !widget.isPassword

diff --git a/lib/l10n/arb/app_en.arb b/lib/l10n/arb/app_en.arb
@@ -48,11 +48,11 @@
     "@signInPhoneNumberLogInLabel": {
         "description": "This is the label displayed on the sign in screen on the phone number tab"
     },
-    "signInForgotPasswordText": "Forgot Password?",
+    "signInForgotPasswordText": "Forgot password?",
     "@signInForgotPasswordText": {
         "description": "This is the text displayed on the sign in screen after login password field"
     },
-    "signInOrLogInWithText": "Or Login with",
+    "signInOrLogInWithText": "Or login with",
     "@signInPhoneNumberLogIn": {
         "description": "This is the text displayed on the sign in screen after the log in button"
     },
@@ -88,6 +88,10 @@
     "@signInPasswordFieldLabel": {
         "description": "This is the label displayed on the sign in screen for the Password field"
     },
+    "signInPhoneNumberFieldLabel": "Phone Number",
+    "@signInPhoneNumberFieldLabel": {
+        "description": "This is the label displayed on the sign in screen for the Phone number field"
+    },
     "signInPasswordFieldHintText": "Enter your password",
     "@signInPasswordFieldHintText": {
         "description": "This is the hint text displayed on the sign in screen for the Password field"
@@ -228,4 +232,4 @@
     "@signUpAlreadyAMemberText": {
         "description": "This is the text displayed on the sign up screen after the social media icon buttons"
     }
-}
+}
diff --git a/lib/l10n/arb/app_fr.arb b/lib/l10n/arb/app_fr.arb
@@ -92,6 +92,10 @@
     "@signInPasswordFieldHintText": {
         "description": "Il s'agit du texte d'indication affiché sur l'écran de connexion pour le champ Mot de passe."
     },
+    "signInPhoneNumberFieldLabel": "Numéro de Téléphone",
+    "@signInPhoneNumberFieldLabel": {
+        "description": "Il s'agit de l'étiquette affichée sur l'écran d'ouverture de session pour le champ Numéro de téléphone."
+    },
     "homeScreenCashBalance": "Solde d'encaisse",
     "@homeScreenCashBalance": {
         "description": "Il s'agit du texte affiché sur l'écran d'accueil du premier widget de carte"
@@ -232,4 +236,4 @@
     "@signUpAlreadyAMemberText": {
         "description": "Il s'agit du texte affiché sur l'écran d'inscription après les boutons d'icône de médias sociaux."
     }
-}
+}
diff --git a/lib/sign_in/view/sign_in_page.dart b/lib/sign_in/view/sign_in_page.dart
@@ -17,6 +17,7 @@ import 'package:fpb/router/app_route.gr.dart';
 import 'package:fpb/sign_in/view/widgets/email_input.dart';
 import 'package:fpb/sign_in/view/widgets/login_button.dart';
 import 'package:fpb/sign_in/view/widgets/password_input.dart';
+import 'package:fpb/sign_in/view/widgets/phone_number_input.dart';
 
 class SignInScreen extends StatelessWidget {
   const SignInScreen({super.key});
@@ -161,7 +162,15 @@ class _SignInBodyState extends State<SignInBody>
                                           Text(l10n.signInForgotPasswordText),
                                         ],
                                       ),
-                                      Container(),
+                                      Column(
+                                        mainAxisAlignment:
+                                            MainAxisAlignment.center,
+                                        children: [
+                                          PhoneNumberInput(
+                                              l10n: l10n, cts: cts),
+                                          PasswordInput(box: cts),
+                                        ],
+                                      ),
                                     ],
                                   ),
                                 ),

diff --git a/lib/sign_in/view/widgets/login_button.dart b/lib/sign_in/view/widgets/login_button.dart
@@ -19,7 +19,7 @@ class LoginButton extends StatelessWidget {
         return FormzStatus.submissionInProgress == state.status
             ? const FpbButton(label: 'Log in', onTap: null)
             : FpbButton(
-                label: l10n.signInEmailLogInLabel,
+                label: l10n.signInLogInButtonLabel,
                 onTap: () => context
                     .read<EmailPasswordBloc>()
                     .add(const EmailPasswordEvent.submitted()),

diff --git a/lib/sign_in/view/widgets/phone_number_input.dart b/lib/sign_in/view/widgets/phone_number_input.dart
@@ -0,0 +1,62 @@
+import 'package:flutter/material.dart';
+import 'package:fpb/l10n/l10n.dart';
+import 'package:intl_phone_field/intl_phone_field.dart';
+
+
+class PhoneNumberInput extends StatelessWidget {
+  const PhoneNumberInput({
+    super.key,
+    required this.l10n,
+    required this.cts,
+    this.node,
+    this.textController,
+  });
+
+  final AppLocalizations l10n;
+  final FocusNode? node;
+  final TextEditingController? textController;
+  final BoxConstraints cts;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final style = theme.textTheme;
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          l10n.signInPhoneNumberFieldLabel,
+          style: style.titleSmall,
+        ),
+        SizedBox(
+          height: cts.maxHeight * 0.01,
+        ),
+        IntlPhoneField(
+          disableLengthCheck: true,
+          flagsButtonPadding: EdgeInsets.all(
+            cts.maxHeight * 0.01,
+          ),
+          dropdownIconPosition: IconPosition.trailing,
+          decoration: InputDecoration(
+            contentPadding: EdgeInsets.all(
+              cts.maxHeight * 0.025,
+            ),
+            labelText: '1 234 89 9000',
+            border: OutlineInputBorder(
+              borderRadius: BorderRadius.all(
+                Radius.circular(
+                  cts.maxHeight * 0.025,
+                ),
+              ),
+            ),
+          ),
+          initialCountryCode: 'US',
+        ),
+        SizedBox(
+          height: cts.maxHeight * .02,
+        )
+      ],
+    );
+  }
+}
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -8,6 +8,7 @@ environment:
   flutter: 3.3.7
 
 dependencies:
+  intl_phone_field: ^3.1.0 
   bloc: ^8.1.1
   device_preview: ^1.1.0
   flutter: