163 lines
6.8 KiB
Dart
163 lines
6.8 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_bloc/flutter_bloc.dart';
|
|
import 'package:flutter_otp_text_field/flutter_otp_text_field.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,
|
|
body: BlocConsumer<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,
|
|
),
|
|
);
|
|
}
|
|
},
|
|
builder: (context, state) {
|
|
final isLoading = state.status == VerifyOtpStatus.loading;
|
|
|
|
return SafeArea(
|
|
child: Padding(
|
|
padding: EdgeInsets.symmetric(horizontal: 24.w),
|
|
child: Column(
|
|
children: [
|
|
Expanded(
|
|
child: SingleChildScrollView(
|
|
child: Column(
|
|
children: [
|
|
SizedBox(height: 40.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 =====
|
|
OtpTextField(
|
|
numberOfFields: 6,
|
|
borderColor: AppColors.borderGrey,
|
|
focusedBorderColor: AppColors.primaryRed,
|
|
showFieldAsBox: true,
|
|
fieldWidth: 45.w,
|
|
borderRadius: BorderRadius.circular(12.r),
|
|
enabledBorderColor: AppColors.borderGrey,
|
|
cursorColor: AppColors.primaryRed,
|
|
textStyle: GoogleFonts.poppins(
|
|
fontSize: 18.sp,
|
|
fontWeight: FontWeight.w600,
|
|
color: AppColors.black,
|
|
),
|
|
onCodeChanged: (String code) {
|
|
context.read<VerifyOtpBloc>().add(
|
|
OtpChanged(otp: code),
|
|
);
|
|
},
|
|
onSubmit: (String verificationCode) {
|
|
if (isLoading) return;
|
|
context.read<VerifyOtpBloc>().add(
|
|
OtpChanged(otp: verificationCode),
|
|
);
|
|
context.read<VerifyOtpBloc>().add(
|
|
VerifyOtpSubmitted(
|
|
emailAddress: email,
|
|
otp: verificationCode,
|
|
),
|
|
);
|
|
},
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
|
|
// ===== VERIFY BUTTON =====
|
|
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),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|