fix: add validation submit sign in

This commit is contained in:
Dian Bayu Nugroho 2024-02-20 15:38:21 +07:00
parent e510aaefd7
commit c4c0479341
4 changed files with 190 additions and 162 deletions

View File

@ -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/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/application/theme/color_palette.dart';
import 'package:cims_apps/core/route/route.dart'; import 'package:cims_apps/core/route/route.dart';
import 'package:cims_apps/core/utils/size_config.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/password_view.dart';
import 'package:cims_apps/features/auth/login/view/phone_number_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/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:cims_apps/features/bottom_navigation_view.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
class LoginView extends StatefulWidget { class LoginView extends StatefulWidget {
@ -90,7 +83,11 @@ class _LoginViewState extends State<LoginView> {
currentPage++; currentPage++;
pageController.jumpToPage(1); pageController.jumpToPage(1);
} else { } else {
routePush(context, page: BottomNavigationView()); routePush(
context,
page: const BottomNavigationView(),
routeType: RouteType.pushReplace,
);
} }
} }
} }

View File

@ -10,70 +10,83 @@ import 'package:provider/provider.dart';
class PasswordView extends StatelessWidget { class PasswordView extends StatelessWidget {
final void Function() nextStep; final void Function() nextStep;
final TextEditingController controller; final TextEditingController controller;
const PasswordView({super.key, required this.nextStep, required this.controller}); const PasswordView(
{super.key, required this.nextStep, required this.controller});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Consumer<LoginViewModel>( return Consumer<LoginViewModel>(builder: (context, provider, child) {
builder: (context, provider, child) { return Container(
return Container( width: SizeConfig.width,
width: SizeConfig.width, height: SizeConfig.height,
height: SizeConfig.height, padding: const EdgeInsets.all(24),
padding: const EdgeInsets.all(24), child: Form(
child: Column( key: provider.formKey,
crossAxisAlignment: CrossAxisAlignment.start, child: SingleChildScrollView(
children: [ child: Column(
const TextTitle(title: 'Enter your password', fontSize: 24), crossAxisAlignment: CrossAxisAlignment.start,
SizedBox( children: [
height: 24, const TextTitle(title: 'Enter your password', fontSize: 24),
), SizedBox(
TextFormView( height: 24,
name: 'Password', ),
ctrl: controller, TextFormView(
obscureText: !provider.showPassword, name: 'Password',
contentPadding: EdgeInsets.all(12), ctrl: controller,
suffixIcon: GestureDetector( obscureText: !provider.showPassword,
onTap: () { contentPadding: EdgeInsets.all(12),
provider.changeShowPassword(); validator: (value) {
if (value!.isEmpty) {
return 'Password must filled';
} else if (value.length < 8) {
return 'Minimum password 8 Character';
} else {
return null;
}
}, },
child: Icon( suffixIcon: GestureDetector(
provider.showPassword onTap: () {
? Icons.visibility_outlined provider.changeShowPassword();
: Icons.visibility_off_outlined, },
color: ColorPalette.greyDarker, child: Icon(
provider.showPassword
? Icons.visibility_outlined
: Icons.visibility_off_outlined,
color: ColorPalette.greyDarker,
),
), ),
), ),
), TextButton(
TextButton( style: TextButton.styleFrom(padding: EdgeInsets.all(0)),
style: TextButton.styleFrom( onPressed: () {},
padding: EdgeInsets.all(0) child: Text(
'Forget the password?',
style: TextStyle(
color: ColorPalette.primary,
),
)),
SizedBox(
height: 16,
), ),
onPressed: () { ButtonView(
name: 'Confirm',
}, heightWrapContent: true,
child: Text( width: SizeConfig.width,
'Forget the password?', textSize: 18,
style: TextStyle( marginVertical: 0,
color: ColorPalette.primary, 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,
)
],
), ),
); ),
} );
); });
} }
} }

View File

@ -1,118 +1,135 @@
import 'package:cims_apps/application/assets/path_assets.dart'; 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/button/button_view.dart';
import 'package:cims_apps/application/component/image/image_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_form/text_form_view.dart';
import 'package:cims_apps/application/component/text_title/text_title.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/application/theme/color_palette.dart';
import 'package:cims_apps/core/route/route.dart'; import 'package:cims_apps/core/route/route.dart';
import 'package:cims_apps/core/utils/size_config.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:cims_apps/features/auth/registration/view/registration_view.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; import 'package:flutter/services.dart';
import 'package:provider/provider.dart';
class PhoneNumberView extends StatelessWidget { class PhoneNumberView extends StatelessWidget {
final void Function() nextStep; final void Function() nextStep;
final TextEditingController controller; final TextEditingController controller;
const PhoneNumberView({super.key, required this.nextStep, required this.controller}); const PhoneNumberView(
{super.key, required this.nextStep, required this.controller});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return ChangeNotifierProvider(
width: SizeConfig.width, create: (context) => LoginViewModel(),
height: SizeConfig.height, builder: (context, child) {
padding: const EdgeInsets.all(24), return Container(
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, width: SizeConfig.width,
marginVertical: 0, height: SizeConfig.height,
contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 12), padding: const EdgeInsets.all(24),
onPressed: nextStep, child:
), Consumer<LoginViewModel>(builder: (context, provider, child) {
Row( return Form(
mainAxisAlignment: MainAxisAlignment.center, key: provider.formKey,
children: [ child: SingleChildScrollView(
Text( child: Column(
"Don't have an account yet?", crossAxisAlignment: CrossAxisAlignment.start,
style: TextStyle( children: [
color: ColorPalette.slate500, const TextTitle(
), title: 'Enter your phone number', fontSize: 24),
), SizedBox(
TextButton( height: 24,
onPressed: () { ),
routePush(context, page: RegistrationView()); TextFormView(
}, name: 'Phone Number',
style: TextButton.styleFrom( keyboardType: TextInputType.number,
padding: EdgeInsets.all(0) 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 });
),
)
)
],
),
],
),
);
} }
} }

View File

@ -1,10 +1,11 @@
import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart';
class LoginViewModel extends ChangeNotifier { class LoginViewModel extends ChangeNotifier {
bool showPassword = false; bool showPassword = false;
var formKey = GlobalKey<FormState>();
void changeShowPassword() { void changeShowPassword() {
showPassword = !showPassword; showPassword = !showPassword;
notifyListeners(); notifyListeners();
} }
} }