fix: sign up feature

lib/application/assets/path_assets.dart

@@ -11,6 +11,7 @@ class PathAssets {
   static const String icon1 = 'assets/icons/icon-1.png';
   static const String iconConnect = 'assets/icons/icon-connect.png';
   static const String iconShield = 'assets/icons/icon-shield.png';
+  static const String iconFlag = 'assets/icons/icon-flag.png';
 
   /// IMAGE
   static const String imgSplashLogo = 'assets/images/splash-logo.png';

lib/application/component/otp/otp_view.dart

@@ -1,4 +1,3 @@
-import 'package:cims_apps/application/component/button/button_view.dart';
 import 'package:cims_apps/application/component/otp/otp_viewmodel.dart';
 import 'package:cims_apps/application/component/text_caption/text_caption.dart';
 import 'package:cims_apps/application/theme/color_palette.dart';
@@ -61,12 +60,25 @@ class OtpView extends StatelessWidget {
                   borderRadius: BorderRadius.circular(8),
                 ),
               ),
+              onCompleted: (pin) => provider.enableButton(),
+              onChanged: (value) {
+                if (provider.ctrlPin.length != 4) {
+                  provider.enableButton(isActive: false);
+                }
+              },
             ),
-            ButtonView(
-              name: 'Verify',
-              // disabled: !provider.buttonIsActive,
-              // backgroundColor: ColorPalette.grey,
-              onPressed: () {
+            Container(
+              margin: const EdgeInsets.symmetric(vertical: 32.0),
+              width: SizeConfig.width,
+              height: SizeConfig.height * .07,
+              child: ElevatedButton(
+                style: ElevatedButton.styleFrom(
+                  elevation: 0,
+                  backgroundColor: ColorPalette.primary,
+                ),
+                onPressed: !provider.buttonIsActive
+                    ? null
+                    : () {
                         if (provider.formKey.currentState!.validate()) {
                           final pin = provider.ctrlPin.text;
                           provider.validateOtp(pin).then((value) {
@@ -80,6 +92,15 @@ class OtpView extends StatelessWidget {
                           });
                         }
                       },
+                child: const Text(
+                  'Verify',
+                  style: TextStyle(
+                    fontSize: 16,
+                    fontWeight: FontWeight.bold,
+                    color: Colors.white,
+                  ),
+                ),
+              ),
             ),
           ],
         ));
@@ -106,7 +127,9 @@ class OtpView extends StatelessWidget {
                     ),
                     _otpContent(context, provider),
                     TextButton(
-                        onPressed: () {},
+                        onPressed: () {
+                          provider.ctrlPin.clear();
+                        },
                         child: const Text(
                           'Resend Code',
                           style: TextStyle(

lib/application/component/otp/otp_viewmodel.dart

@@ -14,4 +14,9 @@ class OtpViewModel extends ChangeNotifier {
     }
     return false;
   }
+
+  void enableButton({bool isActive = true}) {
+    buttonIsActive = isActive;
+    notifyListeners();
+  }
 }

lib/application/component/text_form/text_form_view.dart

@@ -14,7 +14,7 @@ class TextFormView extends StatelessWidget {
   final String? hintText, errorText;
   final TextEditingController? ctrl;
   final Widget? suffixIcon, suffixLable;
-  final Widget? prefixIcon;
+  final Widget? prefixIcon, prefix;
   final TextInputType? keyboardType;
   final FormFieldValidator<String>? validator;
   final bool obscureText;
@@ -70,7 +70,8 @@ class TextFormView extends StatelessWidget {
       this.disableColor = false,
       this.enableInteractiveSelection = true,
       this.focusNode,
-      this.isTextAlignCenter = false})
+      this.isTextAlignCenter = false,
+      this.prefix})
       : super(key: key);
 
   @override
@@ -187,7 +188,8 @@ class TextFormView extends StatelessWidget {
               prefixIcon: prefixIcon,
               suffixIconConstraints: suffixIconConstraints,
               prefixIconConstraints: preffixIconConstraints,
-          ),
+              prefix: prefix,
+              contentPadding: EdgeInsets.zero),
         )
       ],
     );

lib/features/auth/registration/view/registration_password_view.dart

@@ -55,7 +55,7 @@ class RegistrationPasswordView extends StatelessWidget {
                           },
                           child: Icon(
                             provider.showPassword
-                                ? Icons.visibility_off_outlined
+                                ? Icons.visibility_outlined
                                 : Icons.visibility_off_outlined,
                             color: ColorPalette.greyDarker,
                           ),

lib/features/auth/registration/view/registration_view.dart

@@ -1,9 +1,16 @@
+import 'package:cims_apps/application/assets/path_assets.dart';
 import 'package:cims_apps/application/component/button/button_view.dart';
+import 'package:cims_apps/application/component/image/image_view.dart';
 import 'package:cims_apps/application/component/otp/otp_view.dart';
 import 'package:cims_apps/application/component/text_caption/text_caption.dart';
 import 'package:cims_apps/application/component/text_form/text_form_view.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:cims_apps/features/auth/registration/viewmodel/registration_viewmodel.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:provider/provider.dart';
 
 class RegistrationView extends StatelessWidget {
   static const routName = '/RegistrationView';
@@ -11,7 +18,7 @@ class RegistrationView extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    _showOtpWidget() {
+    showOtpWidget() {
       Navigator.of(context).pop();
       showModalBottomSheet(
         context: context,
@@ -35,12 +42,19 @@ class RegistrationView extends StatelessWidget {
       );
     }
 
+    return ChangeNotifierProvider(
+        create: (context) => RegistrationViewModel(),
+        builder: (context, child) {
           return Scaffold(
             appBar: AppBar(
               title: const Text('Sign Up'),
             ),
             body: Container(
               padding: const EdgeInsets.all(24.0),
+              child: Consumer<RegistrationViewModel>(
+                  builder: (context, provider, child) {
+                return Form(
+                  key: provider.formKeyPhone,
                   child: Column(
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: [
@@ -48,13 +62,56 @@ class RegistrationView extends StatelessWidget {
                         title: 'Enter your phone number',
                         subtitle: 'Input your registered phone number',
                       ),
-            TextFormView(name: 'Phone Number'),
+                      TextFormView(
+                        name: 'Phone Number',
+                        keyboardType: TextInputType.number,
+                        inputFormatters: [
+                          FilteringTextInputFormatter.deny(RegExp(r'^0'))
+                        ],
+                        prefixIcon: Container(
+                            width: SizeConfig.width * .23,
+                            padding:
+                                const EdgeInsets.symmetric(horizontal: 16.0),
+                            margin: const EdgeInsets.only(right: 16),
+                            decoration: const BoxDecoration(
+                                color: ColorPalette.grey,
+                                borderRadius: BorderRadius.only(
+                                  topLeft: Radius.circular(8),
+                                  bottomLeft: Radius.circular(8),
+                                )),
+                            child: const Row(
+                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                              children: [
+                                ImageView(
+                                  image: PathAssets.iconFlag,
+                                  fit: BoxFit.contain,
+                                  width: 24,
+                                  height: 24,
+                                ),
+                                Text(
+                                  '+62',
+                                  style: TextStyle(
+                                    fontWeight: FontWeight.w600,
+                                    color: ColorPalette.slate800,
+                                  ),
+                                )
+                              ],
+                            )),
+                        ctrl: provider.phoneNumberCtrl,
+                        validator: (value) {
+                          if (value!.isEmpty) {
+                            return 'Phone number must be filled';
+                          } else {
+                            return null;
+                          }
+                        },
+                      ),
                       ButtonView(
                         name: 'Next',
                         onPressed: () {
-                _showOtpWidget();
-
-                // routePush(context, page: const RegistrationPasswordView());
+                          if (provider.formKeyPhone.currentState!.validate()) {
+                            showOtpWidget();
+                          }
                         },
                       ),
                       Align(
@@ -70,10 +127,7 @@ class RegistrationView extends StatelessWidget {
                               ),
                             ),
                             TextSpan(
-                    recognizer: TapGestureRecognizer()
-                      ..onTap = () {
-                        print('object');
-                      },
+                              recognizer: TapGestureRecognizer()..onTap = () {},
                               text: ' Sign In',
                               style: const TextStyle(
                                 color: Colors.blue,
@@ -84,7 +138,10 @@ class RegistrationView extends StatelessWidget {
                       )
                     ],
                   ),
+                );
+              }),
             ),
           );
+        });
   }
 }

lib/features/auth/registration/viewmodel/registration_viewmodel.dart

@@ -3,7 +3,9 @@ import 'package:flutter/material.dart';
 class RegistrationViewModel extends ChangeNotifier {
   TextEditingController passwordCtrl = TextEditingController();
   TextEditingController confirmPasswordCtrl = TextEditingController();
+  TextEditingController phoneNumberCtrl = TextEditingController();
   var formKey = GlobalKey<FormState>();
+  var formKeyPhone = GlobalKey<FormState>();
   bool showPassword = false;
   bool showPasswordConfirm = false;