213 lines
8.7 KiB
Dart
213 lines
8.7 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_bloc/flutter_bloc.dart';
|
|
import 'package:pinput/pinput.dart';
|
|
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
|
import 'package:google_fonts/google_fonts.dart';
|
|
import '../../constants/app_assets.dart';
|
|
import '../../constants/app_colors.dart';
|
|
import '../../core/app_router.dart';
|
|
import '../../custome_widgets/custom_button.dart';
|
|
import '../blocs/verify_otp/verify_otp_bloc.dart';
|
|
|
|
class OtpVerificationPage extends StatelessWidget {
|
|
final String email;
|
|
|
|
const OtpVerificationPage({super.key, required this.email});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return GestureDetector(
|
|
onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
|
|
behavior: HitTestBehavior.translucent,
|
|
child: Scaffold(
|
|
backgroundColor: AppColors.backgroundWhite,
|
|
appBar: AppBar(
|
|
backgroundColor: Colors.transparent,
|
|
elevation: 0,
|
|
leadingWidth: 70.w,
|
|
leading: Padding(
|
|
padding: EdgeInsets.only(left: 24.w, top: 8.h, bottom: 8.h),
|
|
child: InkWell(
|
|
onTap: () => Navigator.pop(context),
|
|
borderRadius: BorderRadius.circular(50),
|
|
child: Container(
|
|
decoration: const BoxDecoration(
|
|
color: AppColors.primaryRed,
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: Icon(
|
|
Icons.arrow_back_ios_new,
|
|
color: Colors.white,
|
|
size: 18.sp,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
body: BlocListener<VerifyOtpBloc, VerifyOtpState>(
|
|
listener: (context, state) {
|
|
if (state.status == VerifyOtpStatus.success) {
|
|
Navigator.pushReplacementNamed(
|
|
context,
|
|
AppRouter.resetPassword,
|
|
arguments: email,
|
|
);
|
|
} else if (state.status == VerifyOtpStatus.failure) {
|
|
ScaffoldMessenger.of(context).hideCurrentSnackBar();
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
SnackBar(
|
|
content: Text(state.errorMessage ?? "Verification failed"),
|
|
backgroundColor: Colors.redAccent,
|
|
),
|
|
);
|
|
}
|
|
},
|
|
child: SafeArea(
|
|
child: Padding(
|
|
padding: EdgeInsets.symmetric(horizontal: 24.w),
|
|
child: Column(
|
|
children: [
|
|
Expanded(
|
|
child: SingleChildScrollView(
|
|
child: Column(
|
|
children: [
|
|
SizedBox(height: 10.h),
|
|
// ===== LOGO SECTION =====
|
|
Center(
|
|
child: Column(
|
|
children: [
|
|
Image.asset(
|
|
AppAssets.appIcon,
|
|
height: 60.h,
|
|
),
|
|
SizedBox(height: 8.h),
|
|
Text(
|
|
"Partner's App",
|
|
style: GoogleFonts.poppins(
|
|
color: AppColors.primaryRed,
|
|
fontSize: 20.sp,
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
SizedBox(height: 60.h),
|
|
|
|
// ===== HEADER TEXT =====
|
|
Text(
|
|
"Verify OTP",
|
|
textAlign: TextAlign.center,
|
|
style: GoogleFonts.poppins(
|
|
color: AppColors.black,
|
|
fontSize: 24.sp,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
SizedBox(height: 12.h),
|
|
Text(
|
|
"We've sent an OTP to your registered email. Please enter it below.",
|
|
textAlign: TextAlign.center,
|
|
style: GoogleFonts.poppins(
|
|
color: AppColors.textGrey,
|
|
fontSize: 16.sp,
|
|
height: 1.4,
|
|
),
|
|
),
|
|
SizedBox(height: 48.h),
|
|
|
|
// ===== OTP INPUT FIELDS =====
|
|
Pinput(
|
|
length: 6,
|
|
defaultPinTheme: PinTheme(
|
|
width: 48.w,
|
|
height: 52.h,
|
|
textStyle: GoogleFonts.poppins(
|
|
fontSize: 18.sp,
|
|
fontWeight: FontWeight.w600,
|
|
color: AppColors.black,
|
|
),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(12.r),
|
|
border: Border.all(color: AppColors.borderGrey),
|
|
),
|
|
),
|
|
focusedPinTheme: PinTheme(
|
|
width: 48.w,
|
|
height: 52.h,
|
|
textStyle: GoogleFonts.poppins(
|
|
fontSize: 18.sp,
|
|
fontWeight: FontWeight.w600,
|
|
color: AppColors.black,
|
|
),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(12.r),
|
|
border: Border.all(color: AppColors.primaryRed),
|
|
),
|
|
),
|
|
submittedPinTheme: PinTheme(
|
|
width: 48.w,
|
|
height: 52.h,
|
|
textStyle: GoogleFonts.poppins(
|
|
fontSize: 18.sp,
|
|
fontWeight: FontWeight.w600,
|
|
color: AppColors.black,
|
|
),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(12.r),
|
|
border: Border.all(color: AppColors.borderGrey),
|
|
),
|
|
),
|
|
onChanged: (String code) {
|
|
context.read<VerifyOtpBloc>().add(
|
|
OtpChanged(otp: code),
|
|
);
|
|
},
|
|
onCompleted: (String verificationCode) {
|
|
context.read<VerifyOtpBloc>().add(
|
|
VerifyOtpSubmitted(
|
|
emailAddress: email,
|
|
otp: verificationCode,
|
|
),
|
|
);
|
|
},
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
|
|
// ===== VERIFY BUTTON =====
|
|
BlocBuilder<VerifyOtpBloc, VerifyOtpState>(
|
|
buildWhen: (previous, current) =>
|
|
previous.otp.length != current.otp.length ||
|
|
previous.status != current.status,
|
|
builder: (context, state) {
|
|
final isLoading = state.status == VerifyOtpStatus.loading;
|
|
return CustomButton(
|
|
text: "Verify",
|
|
isLoading: isLoading,
|
|
onPressed: state.otp.length == 6 && !isLoading
|
|
? () {
|
|
context.read<VerifyOtpBloc>().add(
|
|
VerifyOtpSubmitted(
|
|
emailAddress: email,
|
|
otp: state.otp,
|
|
),
|
|
);
|
|
}
|
|
: null,
|
|
);
|
|
},
|
|
),
|
|
SizedBox(height: 24.h),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|