diff --git a/assets/icons/icon-flag.png b/assets/icons/icon-flag.png new file mode 100644 index 0000000..32fee5b Binary files /dev/null and b/assets/icons/icon-flag.png differ diff --git a/lib/application/assets/path_assets.dart b/lib/application/assets/path_assets.dart index 39e8eb8..bf981d5 100644 --- a/lib/application/assets/path_assets.dart +++ b/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'; diff --git a/lib/application/component/text_form/text_form_view.dart b/lib/application/component/text_form/text_form_view.dart index ea26bb5..8617893 100644 --- a/lib/application/component/text_form/text_form_view.dart +++ b/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? 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 @@ -148,46 +149,47 @@ class TextFormView extends StatelessWidget { enableInteractiveSelection: enableInteractiveSelection, textAlign: isTextAlignCenter ? TextAlign.center : TextAlign.left, decoration: InputDecoration( - helperText: helperText, - errorStyle: errorStyle, - errorText: errorText, - errorMaxLines: 2, - hintStyle: hintTextStyle ?? - const TextStyle( - fontSize: 14, - color: ColorPalette.greyFont, - fontWeight: FontWeight.normal, + helperText: helperText, + errorStyle: errorStyle, + errorText: errorText, + errorMaxLines: 2, + hintStyle: hintTextStyle ?? + const TextStyle( + fontSize: 14, + color: ColorPalette.greyFont, + fontWeight: FontWeight.normal, + ), + isDense: true, + hintText: hintText, + filled: true, + fillColor: enabled && disableColor == false + ? Colors.white + : const Color.fromARGB(255, 233, 236, 239), + disabledBorder: OutlineInputBorder( + borderRadius: _borderRadius, + borderSide: BorderSide( + color: disabledborderColor ?? ColorPalette.greyBorder, ), - isDense: true, - hintText: hintText, - filled: true, - fillColor: enabled && disableColor == false - ? Colors.white - : const Color.fromARGB(255, 233, 236, 239), - disabledBorder: OutlineInputBorder( - borderRadius: _borderRadius, - borderSide: BorderSide( - color: disabledborderColor ?? ColorPalette.greyBorder, ), - ), - enabledBorder: OutlineInputBorder( - borderRadius: _borderRadius, - borderSide: BorderSide( - color: enabledborderColor ?? ColorPalette.greyBorder, + enabledBorder: OutlineInputBorder( + borderRadius: _borderRadius, + borderSide: BorderSide( + color: enabledborderColor ?? ColorPalette.greyBorder, + ), ), - ), - focusedBorder: OutlineInputBorder( - borderRadius: _borderRadius, - borderSide: BorderSide( - color: focusedBorderColor ?? ColorPalette.greyBorder, + focusedBorder: OutlineInputBorder( + borderRadius: _borderRadius, + borderSide: BorderSide( + color: focusedBorderColor ?? ColorPalette.greyBorder, + ), ), - ), - border: OutlineInputBorder(borderRadius: _borderRadius), - suffixIcon: suffixIcon, - prefixIcon: prefixIcon, - suffixIconConstraints: suffixIconConstraints, - prefixIconConstraints: preffixIconConstraints, - ), + border: OutlineInputBorder(borderRadius: _borderRadius), + suffixIcon: suffixIcon, + prefixIcon: prefixIcon, + suffixIconConstraints: suffixIconConstraints, + prefixIconConstraints: preffixIconConstraints, + prefix: prefix, + contentPadding: EdgeInsets.zero), ) ], ); diff --git a/lib/features/auth/registration/view/registration_password_view.dart b/lib/features/auth/registration/view/registration_password_view.dart index 032995b..4210406 100644 --- a/lib/features/auth/registration/view/registration_password_view.dart +++ b/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, ), diff --git a/lib/features/auth/registration/view/registration_view.dart b/lib/features/auth/registration/view/registration_view.dart index 0c60c17..04cdf85 100644 --- a/lib/features/auth/registration/view/registration_view.dart +++ b/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,56 +42,106 @@ class RegistrationView extends StatelessWidget { ); } - return Scaffold( - appBar: AppBar( - title: const Text('Sign Up'), - ), - body: Container( - padding: const EdgeInsets.all(24.0), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - const TextCaption( - title: 'Enter your phone number', - subtitle: 'Input your registered phone number', + return ChangeNotifierProvider( + create: (context) => RegistrationViewModel(), + builder: (context, child) { + return Scaffold( + appBar: AppBar( + title: const Text('Sign Up'), ), - TextFormView(name: 'Phone Number'), - ButtonView( - name: 'Next', - onPressed: () { - _showOtpWidget(); - - // routePush(context, page: const RegistrationPasswordView()); - }, + body: Container( + padding: const EdgeInsets.all(24.0), + child: Consumer( + builder: (context, provider, child) { + return Form( + key: provider.formKeyPhone, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const TextCaption( + title: 'Enter your phone number', + subtitle: 'Input your registered 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: () { + if (provider.formKeyPhone.currentState!.validate()) { + showOtpWidget(); + } + }, + ), + Align( + alignment: Alignment.center, + child: RichText( + textAlign: TextAlign.center, + text: TextSpan(children: [ + const TextSpan( + text: 'Already have an account? ', + style: TextStyle( + color: Colors.black, + decoration: TextDecoration.none, + ), + ), + TextSpan( + recognizer: TapGestureRecognizer()..onTap = () {}, + text: ' Sign In', + style: const TextStyle( + color: Colors.blue, + ), + ), + ]), + ), + ) + ], + ), + ); + }), ), - Align( - alignment: Alignment.center, - child: RichText( - textAlign: TextAlign.center, - text: TextSpan(children: [ - const TextSpan( - text: 'Already have an account? ', - style: TextStyle( - color: Colors.black, - decoration: TextDecoration.none, - ), - ), - TextSpan( - recognizer: TapGestureRecognizer() - ..onTap = () { - print('object'); - }, - text: ' Sign In', - style: const TextStyle( - color: Colors.blue, - ), - ), - ]), - ), - ) - ], - ), - ), - ); + ); + }); } } diff --git a/lib/features/auth/registration/viewmodel/registration_viewmodel.dart b/lib/features/auth/registration/viewmodel/registration_viewmodel.dart index c58548a..55a8f7f 100644 --- a/lib/features/auth/registration/viewmodel/registration_viewmodel.dart +++ b/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(); + var formKeyPhone = GlobalKey(); bool showPassword = false; bool showPasswordConfirm = false;