From e538fa59275858d32cc626cf194e9ff07a85dbd7 Mon Sep 17 00:00:00 2001 From: Dian Bayu Nugroho Date: Tue, 6 Feb 2024 19:21:41 +0700 Subject: [PATCH] fix: sign up feature --- assets/icons/icon-flag.png | Bin 0 -> 2660 bytes lib/application/assets/path_assets.dart | 1 + .../component/text_form/text_form_view.dart | 78 ++++----- .../view/registration_password_view.dart | 2 +- .../registration/view/registration_view.dart | 157 ++++++++++++------ .../viewmodel/registration_viewmodel.dart | 2 + 6 files changed, 151 insertions(+), 89 deletions(-) create mode 100644 assets/icons/icon-flag.png diff --git a/assets/icons/icon-flag.png b/assets/icons/icon-flag.png new file mode 100644 index 0000000000000000000000000000000000000000..32fee5b83d2e6c8fd380f4cfd566a9b34514299a GIT binary patch literal 2660 zcmV-q3Y+zbP)@~0drDELIAGL9O(c600d`2O+f$vv5yPB<4euHrcR&p`8UA1R{tH5=aC#NNn0JSiq*O!~!-||!zNoQ2sNu1b@-@9}E*B^cFzGwT{e$RH|`;)9^ zU%zz5=iGbFx#!(`uAm7emn)p7Il7W@pFj2qtUV@h1?vsGRC5S+~dNUBg88-dZBmXp6jZ+tDjoFMzl75e?e(jY4_j-#<c1If6z-AsVgEC1+d^(94TJq z9={&-Jp>JbL-0_*IH|D$4pa$mZ+GviN8U!1xq;x%{q{F> zmS3al?Qy}V*!$6syD1`-(U6z|;AEY7$&rnAvLPV&#b5nm;skHfQxQ^ZxMdy<2~F%0 zQGhl%Li~*)Y&}fO5(|FZrlwz@h!6kt7k!N&?<)1xBuvuK3dlVvTyYc&-!M7o=@2~3 z%}EBMp~SBU@~%|hUVU!)0S&=W3efgmd7EZ?=G`6oLwm&G`qyZUd1n7yCr#8%XI9ZsT(@ZCmq)6Sm z^uqE6^-13f=wx<2apQ-&_fG?uz!iV?^HBRB=BO_PXou^G|CsI5B>WZ#Q=h)}>rgv8 z=9l|%%&~od4mCaTXS018g%9wX@!L%h5kgiJlUNGSldOn1fBC0BnM&ceh*ScHi6=d$Givb6VfU|p4^Gwu6=a+j1vR};iv-X_EJV1{dj9|kgkY=mDn z4S(=z*T3uZ1x$|+;;O$5cKpqar7tm8TRJDcknmNRd? zX*R9-opDoK$MJS59-%r=)=`tdvCXC}y)_1a8la?Bf}fSvKTp1r4b(kcahDzeQRc@AKRMuxO*7=oHTE3!k|ZoJL!Qrjs9#*b3@zg#EX|PagPz z88fVB*-I&c3UGF;^Gyrvaq|P&OY(x5PxB^Aa%4@}vg{>xpm)8=k{H;iNMmqsZ4>PzCcu1oQU-)qB2uKan1VQ%F+*)Kq(DVqcr_v+9 zGFCF77Ny9NBD=v+U`N21k-E~94`oL{YIvq>S@yD7=BthCSp}qpXUdjk&*_Mu0z5kc zQp0sUvnelCqsU#G<71aB>0owl9uXyp>Vn;FvLr{%=-dJ$fZcFDc#}t#bU3aX)`ev+ z*)Ih4wASm^1f@mYHB1o8UZSX}zp=&&u%T%3z_f=(0LxxB3lHV}?N#fD6UPj0lxS4* zZ7fSs>c0QWYOPL|WI3!J2R;iWwB^wXV7I&F|I&_tw-THw9 z!34~-|0tP^t5!hM4{Z5wI5?`2B^fGVlfKp3yxq=*DpGIw?>MSjKadprhr!N_qT%iL ztvB8gZTfG58LC)kJTx#poy-qtD7V_>YTz^Hf8OxdjtD%Eah1B`|6D#g zw$6A6;CvxNKQmb;P3w9l#Mz;l)U%GCglh_3rTV_sl}RF*J%<*F(Cj=f)h*Xavg&p-ro zM0@NDA|5PTnm{(C1Jm}4&2EMJx-QIeJ$1`;$WIDo8x=*MnzAv-{rMVq<9c*dU_r5&~s@b{{x%K3(gJ7oGC4ptv_f1yMJK#N60KrA@5jgL%pgl zUzrd5N7>eyq1H5lOlR2cQ@$y)p2SiB<_0JU2LK~sn&t?dgwLVS^?nca>3e@b(<$FF+lw3- zO@m{G!;KO?jxf2%vY|d1_!On>M}?b0hU+4qJA?G~Eb3&^X##OR!tZj#v+_aDj{!qT zDfhT=%`r;bgN!3}-pFxI#|9kCa52fMM`Z!n>F zvrqSqPDCQFW$Qm=lM^L;{6_rNq>i>t+*3CFLg>ty77O!PZI&i&L_qL+Y;KTJ@S^s~ zVG`;M7U^^&wF8}T`i6M`gdZs4?3pZOGY*Xtm>MjsPJbd-*+^8~&R+gU0s#Fw)slTt&2iLNF?3GLo`Qg&?YOqzEYoLdG6vy%U86jccv$ zQJvq{;%~dk^W<`)UiR)Lbz*ie#xh;a?H1NqoL6}YxlWV87FGqOX=*w#)_g&;V*8rY zaMo)yTDG{i-y3Cbk78mHHZ5gHC_;$K{6BVuk|obSmwUQ*9~)A}DRe&*n=#Wh_UGsd z+x*L3-CIR{wPtat6? 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;