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:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import 'package:rijig_mobile/core/router.dart'; import 'package:rijig_mobile/core/router.dart';
import 'package:rijig_mobile/core/utils/guide.dart'; import 'package:rijig_mobile/core/utils/guide.dart';
@ -20,14 +21,30 @@ class LoginScreenState extends State<LoginScreen> {
return Scaffold( return Scaffold(
body: Consumer<LoginViewModel>( body: Consumer<LoginViewModel>(
builder: (context, viewModel, child) { builder: (context, viewModel, child) {
return Padding( return SafeArea(
child: Center(
child: Padding(
padding: PaddingCustom().paddingHorizontalVertical(15, 40), padding: PaddingCustom().paddingHorizontalVertical(15, 40),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, 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: [ children: [
FormFieldOne( FormFieldOne(
controllers: phoneController, controllers: phoneController,
hintText: 'Phone Number', hintText: 'Masukkan nomor whatsapp anda!',
placeholder: "cth.62..",
isRequired: true, isRequired: true,
textInputAction: TextInputAction.done, textInputAction: TextInputAction.done,
keyboardType: TextInputType.phone, keyboardType: TextInputType.phone,
@ -42,18 +59,26 @@ class LoginScreenState extends State<LoginScreen> {
SizedBox(height: 20), SizedBox(height: 20),
CardButtonOne( CardButtonOne(
textButton: textButton:
viewModel.isLoading ? 'Sending OTP...' : 'Send OTP', viewModel.isLoading
? 'Sending OTP...'
: 'Send OTP',
fontSized: 16, fontSized: 16,
colorText: whiteColor, colorText: whiteColor,
color: primaryColor,
borderRadius: 10, borderRadius: 10,
horizontal: double.infinity, horizontal: double.infinity,
vertical: 50, vertical: 50,
onTap: () async { onTap: () async {
if (phoneController.text.isNotEmpty) { if (phoneController.text.isNotEmpty) {
debugPrint("send otp dipencet"); debugPrint("send otp dipencet");
await viewModel.loginOrRegister(phoneController.text); await viewModel.loginOrRegister(
phoneController.text,
);
if (viewModel.loginResponse != null) { if (viewModel.loginResponse != null) {
router.go("/verif-otp", extra: phoneController.text); router.go(
"/verif-otp",
extra: phoneController.text,
);
} }
} }
}, },
@ -62,6 +87,12 @@ class LoginScreenState extends State<LoginScreen> {
), ),
], ],
), ),
],
),
],
),
),
),
); );
}, },
), ),

View File

@ -23,9 +23,12 @@ class VerifOtpScreenState extends State<VerifOtpScreen> {
return Scaffold( return Scaffold(
body: Consumer<OtpViewModel>( body: Consumer<OtpViewModel>(
builder: (context, viewModel, child) { builder: (context, viewModel, child) {
return Padding( return SafeArea(
child: Center(
child: Padding(
padding: PaddingCustom().paddingHorizontalVertical(15, 40), padding: PaddingCustom().paddingHorizontalVertical(15, 40),
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Text("OTP has been sent to ${widget.phoneNumber}"), Text("OTP has been sent to ${widget.phoneNumber}"),
SizedBox(height: 20), SizedBox(height: 20),
@ -41,12 +44,12 @@ class VerifOtpScreenState extends State<VerifOtpScreen> {
borderRadius: BorderRadius.circular(5), borderRadius: BorderRadius.circular(5),
fieldHeight: 50, fieldHeight: 50,
fieldWidth: 50, fieldWidth: 50,
activeFillColor: Colors.white, activeFillColor: whiteColor,
inactiveFillColor: Colors.white, inactiveFillColor: whiteColor,
selectedFillColor: Colors.white, selectedFillColor: whiteColor,
activeColor: Colors.black, activeColor: blackNavyColor,
inactiveColor: Colors.black, inactiveColor: blackNavyColor,
selectedColor: Colors.blue, selectedColor: primaryColor,
), ),
onChanged: (value) {}, onChanged: (value) {},
onCompleted: (value) {}, onCompleted: (value) {},
@ -55,9 +58,12 @@ class VerifOtpScreenState extends State<VerifOtpScreen> {
CardButtonOne( CardButtonOne(
textButton: textButton:
viewModel.isLoading ? 'Verifying OTP...' : 'Verify OTP', viewModel.isLoading
? 'Verifying OTP...'
: 'Verify OTP',
fontSized: 16, fontSized: 16,
colorText: Colors.white, colorText: whiteColor,
color: primaryColor,
borderRadius: 10, borderRadius: 10,
horizontal: double.infinity, horizontal: double.infinity,
vertical: 50, vertical: 50,
@ -79,10 +85,12 @@ class VerifOtpScreenState extends State<VerifOtpScreen> {
if (viewModel.errorMessage != null) if (viewModel.errorMessage != null)
Text( Text(
viewModel.errorMessage!, viewModel.errorMessage!,
style: TextStyle(color: Colors.red), style: TextStyle(color: redColor),
), ),
], ],
), ),
),
),
); );
}, },
), ),