From c4c04793412d2136db33693f6fb43c8ad9177317 Mon Sep 17 00:00:00 2001 From: Dian Bayu Nugroho Date: Tue, 20 Feb 2024 15:38:21 +0700 Subject: [PATCH] fix: add validation submit sign in --- lib/features/auth/login/view/login_view.dart | 13 +- .../auth/login/view/password_view.dart | 125 ++++++----- .../auth/login/view/phone_number_view.dart | 209 ++++++++++-------- .../login/view_model/login_view_model.dart | 5 +- 4 files changed, 190 insertions(+), 162 deletions(-) diff --git a/lib/features/auth/login/view/login_view.dart b/lib/features/auth/login/view/login_view.dart index 4903c43..00468dd 100644 --- a/lib/features/auth/login/view/login_view.dart +++ b/lib/features/auth/login/view/login_view.dart @@ -1,19 +1,12 @@ -import 'package:cims_apps/application/assets/path_assets.dart'; import 'package:cims_apps/application/component/button/back_button_view.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/text_form/text_form_view.dart'; -import 'package:cims_apps/application/component/text_title/text_title.dart'; import 'package:cims_apps/application/theme/color_palette.dart'; import 'package:cims_apps/core/route/route.dart'; import 'package:cims_apps/core/utils/size_config.dart'; import 'package:cims_apps/features/auth/login/view/password_view.dart'; import 'package:cims_apps/features/auth/login/view/phone_number_view.dart'; import 'package:cims_apps/features/auth/login/view_model/login_view_model.dart'; -import 'package:cims_apps/features/auth/registration/view/submission_data/risk_profile/risk_profile_view.dart'; import 'package:cims_apps/features/bottom_navigation_view.dart'; import 'package:flutter/material.dart'; -import 'package:flutter/services.dart'; import 'package:provider/provider.dart'; class LoginView extends StatefulWidget { @@ -90,7 +83,11 @@ class _LoginViewState extends State { currentPage++; pageController.jumpToPage(1); } else { - routePush(context, page: BottomNavigationView()); + routePush( + context, + page: const BottomNavigationView(), + routeType: RouteType.pushReplace, + ); } } } diff --git a/lib/features/auth/login/view/password_view.dart b/lib/features/auth/login/view/password_view.dart index 5f6906a..660027a 100644 --- a/lib/features/auth/login/view/password_view.dart +++ b/lib/features/auth/login/view/password_view.dart @@ -10,70 +10,83 @@ import 'package:provider/provider.dart'; class PasswordView extends StatelessWidget { final void Function() nextStep; final TextEditingController controller; - const PasswordView({super.key, required this.nextStep, required this.controller}); + const PasswordView( + {super.key, required this.nextStep, required this.controller}); @override Widget build(BuildContext context) { - return Consumer( - builder: (context, provider, child) { - return Container( - width: SizeConfig.width, - height: SizeConfig.height, - padding: const EdgeInsets.all(24), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - const TextTitle(title: 'Enter your password', fontSize: 24), - SizedBox( - height: 24, - ), - TextFormView( - name: 'Password', - ctrl: controller, - obscureText: !provider.showPassword, - contentPadding: EdgeInsets.all(12), - suffixIcon: GestureDetector( - onTap: () { - provider.changeShowPassword(); + return Consumer(builder: (context, provider, child) { + return Container( + width: SizeConfig.width, + height: SizeConfig.height, + padding: const EdgeInsets.all(24), + child: Form( + key: provider.formKey, + child: SingleChildScrollView( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const TextTitle(title: 'Enter your password', fontSize: 24), + SizedBox( + height: 24, + ), + TextFormView( + name: 'Password', + ctrl: controller, + obscureText: !provider.showPassword, + contentPadding: EdgeInsets.all(12), + validator: (value) { + if (value!.isEmpty) { + return 'Password must filled'; + } else if (value.length < 8) { + return 'Minimum password 8 Character'; + } else { + return null; + } }, - child: Icon( - provider.showPassword - ? Icons.visibility_outlined - : Icons.visibility_off_outlined, - color: ColorPalette.greyDarker, + suffixIcon: GestureDetector( + onTap: () { + provider.changeShowPassword(); + }, + child: Icon( + provider.showPassword + ? Icons.visibility_outlined + : Icons.visibility_off_outlined, + color: ColorPalette.greyDarker, + ), ), ), - ), - TextButton( - style: TextButton.styleFrom( - padding: EdgeInsets.all(0) + TextButton( + style: TextButton.styleFrom(padding: EdgeInsets.all(0)), + onPressed: () {}, + child: Text( + 'Forget the password?', + style: TextStyle( + color: ColorPalette.primary, + ), + )), + SizedBox( + height: 16, ), - onPressed: () { - - }, - child: Text( - 'Forget the password?', - style: TextStyle( - color: ColorPalette.primary, - ), + ButtonView( + name: 'Confirm', + heightWrapContent: true, + width: SizeConfig.width, + textSize: 18, + marginVertical: 0, + contentPadding: + EdgeInsets.symmetric(horizontal: 16, vertical: 12), + onPressed: () { + if (provider.formKey.currentState!.validate()) { + nextStep(); + } + }, ) - ), - SizedBox( - height: 16, - ), - ButtonView( - name: 'Confirm', - heightWrapContent: true, - width: SizeConfig.width, - textSize: 18, - marginVertical: 0, - contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 12), - onPressed: nextStep, - ) - ], + ], + ), ), - ); - } - ); + ), + ); + }); } } diff --git a/lib/features/auth/login/view/phone_number_view.dart b/lib/features/auth/login/view/phone_number_view.dart index cfd3b32..118baae 100644 --- a/lib/features/auth/login/view/phone_number_view.dart +++ b/lib/features/auth/login/view/phone_number_view.dart @@ -1,118 +1,135 @@ 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/numeric_pad/numeric_pad.dart'; import 'package:cims_apps/application/component/text_form/text_form_view.dart'; import 'package:cims_apps/application/component/text_title/text_title.dart'; import 'package:cims_apps/application/theme/color_palette.dart'; import 'package:cims_apps/core/route/route.dart'; import 'package:cims_apps/core/utils/size_config.dart'; +import 'package:cims_apps/features/auth/login/view_model/login_view_model.dart'; import 'package:cims_apps/features/auth/registration/view/registration_view.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; +import 'package:provider/provider.dart'; class PhoneNumberView extends StatelessWidget { final void Function() nextStep; final TextEditingController controller; - const PhoneNumberView({super.key, required this.nextStep, required this.controller}); + const PhoneNumberView( + {super.key, required this.nextStep, required this.controller}); @override Widget build(BuildContext context) { - return Container( - width: SizeConfig.width, - height: SizeConfig.height, - padding: const EdgeInsets.all(24), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - const TextTitle(title: 'Enter your phone number', fontSize: 24), - SizedBox( - height: 24, - ), - TextFormView( - name: 'Phone Number', - keyboardType: TextInputType.number, - ctrl: controller, - inputFormatters: [ - FilteringTextInputFormatter.deny(RegExp(r'^0')) - ], - contentPadding: EdgeInsets.all(1), - 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, - ), - ) - ], - )), - validator: (value) { - if (value!.isEmpty) { - return 'Phone number must be filled'; - } else { - return null; - } - }, - ), - SizedBox( - height: 32, - ), - ButtonView( - name: 'Next', - heightWrapContent: true, + return ChangeNotifierProvider( + create: (context) => LoginViewModel(), + builder: (context, child) { + return Container( width: SizeConfig.width, - marginVertical: 0, - contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 12), - onPressed: nextStep, - ), - Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Text( - "Don't have an account yet?", - style: TextStyle( - color: ColorPalette.slate500, - ), - ), - TextButton( - onPressed: () { - routePush(context, page: RegistrationView()); - }, - style: TextButton.styleFrom( - padding: EdgeInsets.all(0) + height: SizeConfig.height, + padding: const EdgeInsets.all(24), + child: + Consumer(builder: (context, provider, child) { + return Form( + key: provider.formKey, + child: SingleChildScrollView( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const TextTitle( + title: 'Enter your phone number', fontSize: 24), + SizedBox( + height: 24, + ), + TextFormView( + name: 'Phone Number', + keyboardType: TextInputType.number, + ctrl: controller, + inputFormatters: [ + FilteringTextInputFormatter.deny(RegExp(r'^0')) + ], + contentPadding: EdgeInsets.all(1), + 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, + ), + ) + ], + )), + validator: (value) { + if (value!.isEmpty) { + return 'Phone number must be filled'; + } else { + return null; + } + }, + ), + SizedBox( + height: 32, + ), + ButtonView( + name: 'Next', + heightWrapContent: true, + width: SizeConfig.width, + marginVertical: 0, + contentPadding: const EdgeInsets.symmetric( + horizontal: 16, vertical: 12), + onPressed: () { + if (provider.formKey.currentState!.validate()) { + nextStep(); + } + }, + ), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + "Don't have an account yet?", + style: TextStyle( + color: ColorPalette.slate500, + ), + ), + TextButton( + onPressed: () { + routePush(context, page: RegistrationView()); + }, + style: TextButton.styleFrom( + padding: EdgeInsets.all(0)), + child: Text( + 'Sign Up', + style: TextStyle( + fontWeight: FontWeight.w600, + color: ColorPalette.primary), + )) + ], + ), + ], ), - child: Text( - 'Sign Up', - style: TextStyle( - fontWeight: FontWeight.w600, - color: ColorPalette.primary - ), - ) - ) - ], - ), - ], - ), - ); + ), + ); + }), + ); + }); } } diff --git a/lib/features/auth/login/view_model/login_view_model.dart b/lib/features/auth/login/view_model/login_view_model.dart index df7a02d..23949b3 100644 --- a/lib/features/auth/login/view_model/login_view_model.dart +++ b/lib/features/auth/login/view_model/login_view_model.dart @@ -1,10 +1,11 @@ -import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; class LoginViewModel extends ChangeNotifier { bool showPassword = false; + var formKey = GlobalKey(); void changeShowPassword() { showPassword = !showPassword; notifyListeners(); } -} \ No newline at end of file +}