update: improve login and verif otp screen

This commit is contained in:
pahmiudahgede 2025-05-16 22:17:45 +07:00
parent cbcb250be3
commit 1785fbceb7
2 changed files with 136 additions and 97 deletions

View File

@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:provider/provider.dart';
import 'package:rijig_mobile/core/router.dart';
import 'package:rijig_mobile/core/utils/guide.dart';
@ -20,47 +21,77 @@ class LoginScreenState extends State<LoginScreen> {
return Scaffold(
body: Consumer<LoginViewModel>(
builder: (context, viewModel, child) {
return Padding(
padding: PaddingCustom().paddingHorizontalVertical(15, 40),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FormFieldOne(
controllers: phoneController,
hintText: 'Phone Number',
isRequired: true,
textInputAction: TextInputAction.done,
keyboardType: TextInputType.phone,
onTap: () {},
onChanged: (value) {},
fontSize: 14,
fontSizeField: 16,
onFieldSubmitted: (value) {},
readOnly: false,
enabled: true,
return SafeArea(
child: Center(
child: Padding(
padding: PaddingCustom().paddingHorizontalVertical(15, 40),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Text(
"Selamat datang di aplikasi",
style: Tulisan.subheading(),
),
Text(
"Rijig",
style: Tulisan.heading(color: primaryColor),
),
Gap(60),
Column(
children: [
FormFieldOne(
controllers: phoneController,
hintText: 'Masukkan nomor whatsapp anda!',
placeholder: "cth.62..",
isRequired: true,
textInputAction: TextInputAction.done,
keyboardType: TextInputType.phone,
onTap: () {},
onChanged: (value) {},
fontSize: 14,
fontSizeField: 16,
onFieldSubmitted: (value) {},
readOnly: false,
enabled: true,
),
SizedBox(height: 20),
CardButtonOne(
textButton:
viewModel.isLoading
? 'Sending OTP...'
: 'Send OTP',
fontSized: 16,
colorText: whiteColor,
color: primaryColor,
borderRadius: 10,
horizontal: double.infinity,
vertical: 50,
onTap: () async {
if (phoneController.text.isNotEmpty) {
debugPrint("send otp dipencet");
await viewModel.loginOrRegister(
phoneController.text,
);
if (viewModel.loginResponse != null) {
router.go(
"/verif-otp",
extra: phoneController.text,
);
}
}
},
loadingTrue: viewModel.isLoading,
usingRow: false,
),
],
),
],
),
],
),
SizedBox(height: 20),
CardButtonOne(
textButton:
viewModel.isLoading ? 'Sending OTP...' : 'Send OTP',
fontSized: 16,
colorText: whiteColor,
borderRadius: 10,
horizontal: double.infinity,
vertical: 50,
onTap: () async {
if (phoneController.text.isNotEmpty) {
debugPrint("send otp dipencet");
await viewModel.loginOrRegister(phoneController.text);
if (viewModel.loginResponse != null) {
router.go("/verif-otp", extra: phoneController.text);
}
}
},
loadingTrue: viewModel.isLoading,
usingRow: false,
),
],
),
),
);
},

View File

@ -23,65 +23,73 @@ class VerifOtpScreenState extends State<VerifOtpScreen> {
return Scaffold(
body: Consumer<OtpViewModel>(
builder: (context, viewModel, child) {
return Padding(
padding: PaddingCustom().paddingHorizontalVertical(15, 40),
child: Column(
children: [
Text("OTP has been sent to ${widget.phoneNumber}"),
SizedBox(height: 20),
return SafeArea(
child: Center(
child: Padding(
padding: PaddingCustom().paddingHorizontalVertical(15, 40),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("OTP has been sent to ${widget.phoneNumber}"),
SizedBox(height: 20),
PinCodeTextField(
controller: _otpController,
appContext: context,
length: 4,
obscureText: false,
animationType: AnimationType.fade,
pinTheme: PinTheme(
shape: PinCodeFieldShape.box,
borderRadius: BorderRadius.circular(5),
fieldHeight: 50,
fieldWidth: 50,
activeFillColor: Colors.white,
inactiveFillColor: Colors.white,
selectedFillColor: Colors.white,
activeColor: Colors.black,
inactiveColor: Colors.black,
selectedColor: Colors.blue,
),
onChanged: (value) {},
onCompleted: (value) {},
PinCodeTextField(
controller: _otpController,
appContext: context,
length: 4,
obscureText: false,
animationType: AnimationType.fade,
pinTheme: PinTheme(
shape: PinCodeFieldShape.box,
borderRadius: BorderRadius.circular(5),
fieldHeight: 50,
fieldWidth: 50,
activeFillColor: whiteColor,
inactiveFillColor: whiteColor,
selectedFillColor: whiteColor,
activeColor: blackNavyColor,
inactiveColor: blackNavyColor,
selectedColor: primaryColor,
),
onChanged: (value) {},
onCompleted: (value) {},
),
SizedBox(height: 20),
CardButtonOne(
textButton:
viewModel.isLoading
? 'Verifying OTP...'
: 'Verify OTP',
fontSized: 16,
colorText: whiteColor,
color: primaryColor,
borderRadius: 10,
horizontal: double.infinity,
vertical: 50,
onTap: () async {
if (_otpController.text.isNotEmpty) {
await viewModel.verifyOtp(
widget.phoneNumber,
_otpController.text,
);
if (viewModel.authResponse != null) {
router.go("/navigasi");
}
}
},
loadingTrue: viewModel.isLoading,
usingRow: false,
),
if (viewModel.errorMessage != null)
Text(
viewModel.errorMessage!,
style: TextStyle(color: redColor),
),
],
),
SizedBox(height: 20),
CardButtonOne(
textButton:
viewModel.isLoading ? 'Verifying OTP...' : 'Verify OTP',
fontSized: 16,
colorText: Colors.white,
borderRadius: 10,
horizontal: double.infinity,
vertical: 50,
onTap: () async {
if (_otpController.text.isNotEmpty) {
await viewModel.verifyOtp(
widget.phoneNumber,
_otpController.text,
);
if (viewModel.authResponse != null) {
router.go("/navigasi");
}
}
},
loadingTrue: viewModel.isLoading,
usingRow: false,
),
if (viewModel.errorMessage != null)
Text(
viewModel.errorMessage!,
style: TextStyle(color: Colors.red),
),
],
),
),
);
},