add registration password page
This commit is contained in:
parent
5d4bc47adf
commit
dacf5461f3
BIN
assets/images/img-success-signup.png
Normal file
BIN
assets/images/img-success-signup.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 88 KiB |
|
@ -23,4 +23,5 @@ class PathAssets {
|
||||||
static const String imgKtpCropped = 'assets/images/img-ktp-cropped.png';
|
static const String imgKtpCropped = 'assets/images/img-ktp-cropped.png';
|
||||||
static const String imgKtpClear = 'assets/images/img-ktp-clear.png';
|
static const String imgKtpClear = 'assets/images/img-ktp-clear.png';
|
||||||
static const String imgKtpBlur = 'assets/images/img-ktp-blur.png';
|
static const String imgKtpBlur = 'assets/images/img-ktp-blur.png';
|
||||||
|
static const String imgSuccessSignup = 'assets/images/img-success-signup.png';
|
||||||
}
|
}
|
||||||
|
|
|
@ -55,8 +55,9 @@ class ButtonView extends StatelessWidget {
|
||||||
final widthPrefix =
|
final widthPrefix =
|
||||||
this.widthPrefix ?? (heightWrapContent ? width! / 4.7 : _widthBtn / 16);
|
this.widthPrefix ?? (heightWrapContent ? width! / 4.7 : _widthBtn / 16);
|
||||||
|
|
||||||
return Container(
|
return Center(
|
||||||
margin: EdgeInsets.symmetric(vertical: marginVertical ?? 32.0),
|
child: Container(
|
||||||
|
margin: EdgeInsets.symmetric(vertical: marginVertical ?? 24.0),
|
||||||
width: width ?? _widthBtn,
|
width: width ?? _widthBtn,
|
||||||
height: heightWrapContent ? null : height ?? _heightBtn,
|
height: heightWrapContent ? null : height ?? _heightBtn,
|
||||||
child: ElevatedButton(
|
child: ElevatedButton(
|
||||||
|
@ -129,6 +130,7 @@ class ButtonView extends StatelessWidget {
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,151 @@
|
||||||
|
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/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/route/route.dart';
|
||||||
|
import 'package:cims_apps/core/utils/size_config.dart';
|
||||||
|
import 'package:cims_apps/features/auth/registration/view/submission_data/submission_parent.dart';
|
||||||
|
import 'package:cims_apps/features/auth/registration/viewmodel/registration_viewmodel.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:provider/provider.dart';
|
||||||
|
|
||||||
|
class RegistrationPasswordView extends StatelessWidget {
|
||||||
|
const RegistrationPasswordView({Key? key}) : super(key: key);
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return ChangeNotifierProvider(
|
||||||
|
create: (context) => RegistrationViewModel(),
|
||||||
|
builder: (context, child) {
|
||||||
|
return Scaffold(
|
||||||
|
appBar: AppBar(
|
||||||
|
title: const Text('Sign Up'),
|
||||||
|
),
|
||||||
|
body: SingleChildScrollView(
|
||||||
|
padding: const EdgeInsets.all(16.0),
|
||||||
|
child: Consumer<RegistrationViewModel>(
|
||||||
|
builder: (context, provider, child) {
|
||||||
|
return Form(
|
||||||
|
key: provider.formKey,
|
||||||
|
child: Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: [
|
||||||
|
const TextCaption(
|
||||||
|
title: 'Create your password',
|
||||||
|
subtitle:
|
||||||
|
'The password you create serves as your login',
|
||||||
|
),
|
||||||
|
TextFormView(
|
||||||
|
name: 'Password',
|
||||||
|
hintText: 'Input password',
|
||||||
|
ctrl: provider.passwordCtrl,
|
||||||
|
obscureText: !provider.showPassword,
|
||||||
|
validator: (value) {
|
||||||
|
if (value!.isEmpty) {
|
||||||
|
return 'Password must filled';
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
suffixIcon: GestureDetector(
|
||||||
|
onTap: () {
|
||||||
|
provider.toggleVisibility();
|
||||||
|
},
|
||||||
|
child: Icon(
|
||||||
|
provider.showPassword
|
||||||
|
? Icons.visibility_off_outlined
|
||||||
|
: Icons.visibility_off_outlined,
|
||||||
|
color: ColorPalette.greyDarker,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(
|
||||||
|
height: 32.0,
|
||||||
|
),
|
||||||
|
TextFormView(
|
||||||
|
name: 'Confirm Password',
|
||||||
|
hintText: 'Input password',
|
||||||
|
ctrl: provider.confirmPasswordCtrl,
|
||||||
|
obscureText: !provider.showPasswordConfirm,
|
||||||
|
validator: (value) {
|
||||||
|
if (value!.isEmpty) {
|
||||||
|
return 'Password must filled';
|
||||||
|
} else if (value != provider.passwordCtrl.text) {
|
||||||
|
return 'Password must be same';
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
suffixIcon: GestureDetector(
|
||||||
|
onTap: () {
|
||||||
|
provider.toggleVisibilityConfirm();
|
||||||
|
},
|
||||||
|
child: Icon(
|
||||||
|
provider.showPasswordConfirm
|
||||||
|
? Icons.visibility_outlined
|
||||||
|
: Icons.visibility_off_outlined,
|
||||||
|
color: ColorPalette.greyDarker,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
ButtonView(
|
||||||
|
name: 'Confirm',
|
||||||
|
onPressed: () {
|
||||||
|
if (provider.formKey.currentState!.validate()) {
|
||||||
|
routePush(context, page: const DialogSuccess());
|
||||||
|
}
|
||||||
|
},
|
||||||
|
)
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class DialogSuccess extends StatelessWidget {
|
||||||
|
const DialogSuccess({Key? key}) : super(key: key);
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Scaffold(
|
||||||
|
body: Container(
|
||||||
|
padding: const EdgeInsets.all(24.0),
|
||||||
|
child: Column(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.end,
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.center,
|
||||||
|
children: [
|
||||||
|
ImageView(
|
||||||
|
image: PathAssets.imgSuccessSignup,
|
||||||
|
width: SizeConfig.width * .8,
|
||||||
|
),
|
||||||
|
const TextCaption(
|
||||||
|
title: 'Success',
|
||||||
|
subtitle:
|
||||||
|
'Congratulations, your account creation was successful!',
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.center,
|
||||||
|
textAlignSubtitle: TextAlign.center,
|
||||||
|
),
|
||||||
|
SizedBox(
|
||||||
|
height: SizeConfig.height * .2,
|
||||||
|
),
|
||||||
|
ButtonView(
|
||||||
|
name: 'Next',
|
||||||
|
marginVertical: 8.0,
|
||||||
|
onPressed: () {
|
||||||
|
routePush(context,
|
||||||
|
page: const SubmissionParent(),
|
||||||
|
routeType: RouteType.pushReplace);
|
||||||
|
},
|
||||||
|
)
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
|
@ -2,7 +2,7 @@ import 'package:cims_apps/application/component/button/button_view.dart';
|
||||||
import 'package:cims_apps/application/component/text_caption/text_caption.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/component/text_form/text_form_view.dart';
|
||||||
import 'package:cims_apps/core/route/route.dart';
|
import 'package:cims_apps/core/route/route.dart';
|
||||||
import 'package:cims_apps/features/auth/registration/view/initial_registration_step.dart';
|
import 'package:cims_apps/features/auth/registration/view/registration_password_view.dart';
|
||||||
import 'package:flutter/gestures.dart';
|
import 'package:flutter/gestures.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
@ -29,7 +29,7 @@ class RegistrationView extends StatelessWidget {
|
||||||
ButtonView(
|
ButtonView(
|
||||||
name: 'Next',
|
name: 'Next',
|
||||||
onPressed: () {
|
onPressed: () {
|
||||||
routePush(context, page: const InitialRegistrationStep());
|
routePush(context, page: const RegistrationPasswordView());
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
Align(
|
Align(
|
||||||
|
|
|
@ -1,10 +1,12 @@
|
||||||
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/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/utils/size_config.dart';
|
import 'package:cims_apps/core/utils/size_config.dart';
|
||||||
import 'package:cims_apps/features/auth/registration/view/submission_data/initial_take_photo.dart';
|
import 'package:cims_apps/features/auth/registration/view/submission_data/initial_take_photo.dart';
|
||||||
import 'package:cims_apps/features/auth/registration/view/submission_data/submit_email.dart';
|
import 'package:cims_apps/features/auth/registration/view/submission_data/submit_email.dart';
|
||||||
import 'package:cims_apps/features/auth/registration/view/submission_data/submit_personal_data.dart';
|
import 'package:cims_apps/features/auth/registration/view/submission_data/submit_personal_data.dart';
|
||||||
import 'package:cims_apps/features/auth/registration/viewmodel/submission_data_viewmodel.dart';
|
import 'package:cims_apps/features/auth/registration/viewmodel/submission_data_viewmodel.dart';
|
||||||
|
import 'package:cims_apps/features/bottom_navigation_view.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:provider/provider.dart';
|
import 'package:provider/provider.dart';
|
||||||
|
|
||||||
|
@ -71,7 +73,14 @@ class _SubmissionParentState extends State<SubmissionParent> {
|
||||||
return ChangeNotifierProvider(
|
return ChangeNotifierProvider(
|
||||||
create: (context) => SubmissionDataViewModel(),
|
create: (context) => SubmissionDataViewModel(),
|
||||||
builder: (context, child) {
|
builder: (context, child) {
|
||||||
return Scaffold(
|
return WillPopScope(
|
||||||
|
onWillPop: () async {
|
||||||
|
await routePush(context,
|
||||||
|
page: const BottomNavigationView(),
|
||||||
|
routeType: RouteType.pushReplace);
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
child: Scaffold(
|
||||||
appBar: AppBar(
|
appBar: AppBar(
|
||||||
title: const Text('Registration'),
|
title: const Text('Registration'),
|
||||||
),
|
),
|
||||||
|
@ -91,14 +100,16 @@ class _SubmissionParentState extends State<SubmissionParent> {
|
||||||
children: List.generate(
|
children: List.generate(
|
||||||
provider.stepAmount,
|
provider.stepAmount,
|
||||||
(index) => _stepItem(
|
(index) => _stepItem(
|
||||||
isCurrentStep: provider.currentStep == index + 1,
|
isCurrentStep:
|
||||||
|
provider.currentStep == index + 1,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
Expanded(
|
Expanded(
|
||||||
child: Container(
|
child: Container(
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 16.0),
|
padding:
|
||||||
|
const EdgeInsets.symmetric(horizontal: 16.0),
|
||||||
child: _content(provider.currentStep),
|
child: _content(provider.currentStep),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
@ -119,6 +130,7 @@ class _SubmissionParentState extends State<SubmissionParent> {
|
||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
|
),
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,19 @@
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
class RegistrationViewModel extends ChangeNotifier {
|
||||||
|
TextEditingController passwordCtrl = TextEditingController();
|
||||||
|
TextEditingController confirmPasswordCtrl = TextEditingController();
|
||||||
|
var formKey = GlobalKey<FormState>();
|
||||||
|
bool showPassword = false;
|
||||||
|
bool showPasswordConfirm = false;
|
||||||
|
|
||||||
|
void toggleVisibility() {
|
||||||
|
showPassword = !showPassword;
|
||||||
|
notifyListeners();
|
||||||
|
}
|
||||||
|
|
||||||
|
void toggleVisibilityConfirm() {
|
||||||
|
showPasswordConfirm = !showPasswordConfirm;
|
||||||
|
notifyListeners();
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user