|
|
|
|
@ -1,25 +1,15 @@
|
|
|
|
|
import 'dart:async';
|
|
|
|
|
|
|
|
|
|
import 'package:easy_localization/easy_localization.dart';
|
|
|
|
|
import 'package:flutter/animation.dart';
|
|
|
|
|
import 'package:flutter/foundation.dart';
|
|
|
|
|
import 'package:flutter/material.dart';
|
|
|
|
|
import 'package:flutter/rendering.dart';
|
|
|
|
|
import 'package:flutter/services.dart';
|
|
|
|
|
import 'package:get_it/get_it.dart';
|
|
|
|
|
import 'package:hmg_patient_app_new/core/app_state.dart';
|
|
|
|
|
import 'package:hmg_patient_app_new/core/cache_consts.dart';
|
|
|
|
|
import 'package:hmg_patient_app_new/core/dependencies.dart';
|
|
|
|
|
import 'package:hmg_patient_app_new/core/enums.dart';
|
|
|
|
|
import 'package:hmg_patient_app_new/core/utils/size_utils.dart';
|
|
|
|
|
import 'package:hmg_patient_app_new/extensions/string_extensions.dart';
|
|
|
|
|
import 'package:hmg_patient_app_new/extensions/widget_extensions.dart';
|
|
|
|
|
import 'package:hmg_patient_app_new/features/authentication/authentication_view_model.dart';
|
|
|
|
|
import 'package:hmg_patient_app_new/generated/locale_keys.g.dart';
|
|
|
|
|
import 'package:hmg_patient_app_new/services/cache_service.dart';
|
|
|
|
|
import 'package:hmg_patient_app_new/theme/colors.dart';
|
|
|
|
|
import 'package:hmg_patient_app_new/widgets/appbar/app_bar_widget.dart';
|
|
|
|
|
import 'package:sms_otp_auto_verify/sms_otp_auto_verify.dart';
|
|
|
|
|
import 'package:provider/provider.dart';
|
|
|
|
|
|
|
|
|
|
typedef OnDone = void Function(String text);
|
|
|
|
|
@ -59,8 +49,7 @@ class OTPWidget extends StatefulWidget {
|
|
|
|
|
final FocusNode? focusNode;
|
|
|
|
|
final AnimatedSwitcherTransitionBuilder? pinTextAnimatedSwitcherTransition;
|
|
|
|
|
final Duration pinTextAnimatedSwitcherDuration;
|
|
|
|
|
|
|
|
|
|
// final TextDirection textDirection;
|
|
|
|
|
final TextDirection textDirection;
|
|
|
|
|
final TextInputType keyboardType;
|
|
|
|
|
final EdgeInsets pinBoxOuterPadding;
|
|
|
|
|
|
|
|
|
|
@ -81,6 +70,7 @@ class OTPWidget extends StatefulWidget {
|
|
|
|
|
this.onTextChanged,
|
|
|
|
|
this.autoFocus = false,
|
|
|
|
|
this.focusNode,
|
|
|
|
|
this.textDirection = TextDirection.ltr,
|
|
|
|
|
this.keyboardType = TextInputType.number,
|
|
|
|
|
this.pinBoxOuterPadding = const EdgeInsets.symmetric(horizontal: 4.0),
|
|
|
|
|
this.pinBoxColor = Colors.white,
|
|
|
|
|
@ -104,8 +94,6 @@ class OTPWidgetState extends State<OTPWidget> with SingleTickerProviderStateMixi
|
|
|
|
|
bool hasFocus = false;
|
|
|
|
|
AuthenticationViewModel? authVm;
|
|
|
|
|
|
|
|
|
|
final CacheService cacheService = GetIt.instance<CacheService>();
|
|
|
|
|
|
|
|
|
|
@override
|
|
|
|
|
void didUpdateWidget(OTPWidget oldWidget) {
|
|
|
|
|
super.didUpdateWidget(oldWidget);
|
|
|
|
|
@ -149,7 +137,6 @@ class OTPWidgetState extends State<OTPWidget> with SingleTickerProviderStateMixi
|
|
|
|
|
}
|
|
|
|
|
focusNode.addListener(_focusListener);
|
|
|
|
|
authVm?.otpScreenNotifier.addListener(_onOtpScreenNotifierChanged);
|
|
|
|
|
cacheService.remove(key: CacheConst.quickLoginEnabled);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
void _controllerListener() {
|
|
|
|
|
@ -188,9 +175,17 @@ class OTPWidgetState extends State<OTPWidget> with SingleTickerProviderStateMixi
|
|
|
|
|
widget.controller!.clear();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Remove focus from the input
|
|
|
|
|
if (focusNode.hasFocus) {
|
|
|
|
|
focusNode.unfocus();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Optionally refocus after a short delay to allow user to re-enter OTP
|
|
|
|
|
Future.delayed(const Duration(milliseconds: 100), () {
|
|
|
|
|
if (mounted && widget.autoFocus) {
|
|
|
|
|
FocusScope.of(context).requestFocus(focusNode);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -400,6 +395,58 @@ class OTPWidgetState extends State<OTPWidget> with SingleTickerProviderStateMixi
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Widget _buildPinCode(int i, BuildContext context) {
|
|
|
|
|
// Color pinBoxColor = widget.pinBoxColor;
|
|
|
|
|
//
|
|
|
|
|
// if (widget.hasError) {
|
|
|
|
|
// pinBoxColor = widget.errorBorderColor;
|
|
|
|
|
// } else if (i < text.length) {
|
|
|
|
|
// pinBoxColor = AppColors.blackBgColor; // Custom color for filled boxes
|
|
|
|
|
// } else {
|
|
|
|
|
// pinBoxColor = widget.pinBoxColor;
|
|
|
|
|
// }
|
|
|
|
|
//
|
|
|
|
|
// // Change color to success when all fields are complete
|
|
|
|
|
// if (text.length == widget.maxLength) {
|
|
|
|
|
// pinBoxColor = AppColors.successColor;
|
|
|
|
|
// }
|
|
|
|
|
//
|
|
|
|
|
// EdgeInsets insets;
|
|
|
|
|
// if (i == 0) {
|
|
|
|
|
// insets = EdgeInsets.only(
|
|
|
|
|
// left: 0,
|
|
|
|
|
// top: widget.pinBoxOuterPadding.top,
|
|
|
|
|
// right: widget.pinBoxOuterPadding.right,
|
|
|
|
|
// bottom: widget.pinBoxOuterPadding.bottom,
|
|
|
|
|
// );
|
|
|
|
|
// } else if (i == strList.length - 1) {
|
|
|
|
|
// insets = EdgeInsets.only(
|
|
|
|
|
// left: widget.pinBoxOuterPadding.left,
|
|
|
|
|
// top: widget.pinBoxOuterPadding.top,
|
|
|
|
|
// right: 0,
|
|
|
|
|
// bottom: widget.pinBoxOuterPadding.bottom,
|
|
|
|
|
// );
|
|
|
|
|
// } else {
|
|
|
|
|
// insets = widget.pinBoxOuterPadding;
|
|
|
|
|
// }
|
|
|
|
|
//
|
|
|
|
|
// return AnimatedContainer(
|
|
|
|
|
// duration: const Duration(milliseconds: 200),
|
|
|
|
|
// curve: Curves.easeInOut,
|
|
|
|
|
// key: ValueKey<String>("container$i"),
|
|
|
|
|
// alignment: Alignment.center,
|
|
|
|
|
// padding: EdgeInsets.symmetric(vertical: 4.0, horizontal: 1.0),
|
|
|
|
|
// margin: insets,
|
|
|
|
|
// decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
|
|
|
|
|
// color: pinBoxColor,
|
|
|
|
|
// borderRadius: widget.pinBoxRadius,
|
|
|
|
|
// ),
|
|
|
|
|
// width: widget.pinBoxWidth,
|
|
|
|
|
// height: widget.pinBoxHeight,
|
|
|
|
|
// child: _animatedTextBox(strList[i], i),
|
|
|
|
|
// );
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
Widget _animatedTextBox(String text, int i) {
|
|
|
|
|
if (widget.pinTextAnimatedSwitcherTransition != null) {
|
|
|
|
|
return AnimatedSwitcher(
|
|
|
|
|
@ -454,7 +501,6 @@ class _OTPVerificationScreenState extends State<OTPVerificationScreen> {
|
|
|
|
|
super.initState();
|
|
|
|
|
_otpController = TextEditingController();
|
|
|
|
|
_startResendTimer();
|
|
|
|
|
checkSignature();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@override
|
|
|
|
|
@ -488,30 +534,6 @@ class _OTPVerificationScreenState extends State<OTPVerificationScreen> {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
void checkSignature() async {
|
|
|
|
|
SmsVerification.startListeningSms().then((message) {
|
|
|
|
|
final intRegex = RegExp(r'\d+', multiLine: true);
|
|
|
|
|
var otp = SmsVerification.getCode(message, intRegex);
|
|
|
|
|
if (otp != null && otp.length == _otpLength) {
|
|
|
|
|
autoFillOtp(otp); // Use autoFillOtp to update controller and UI
|
|
|
|
|
}
|
|
|
|
|
SmsVerification.stopListening();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
void _onAutoOtpChanged(String value) {
|
|
|
|
|
setState(() {
|
|
|
|
|
_isOtpComplete = value.length == _otpLength;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (_isOtpComplete && !_isVerifying) {
|
|
|
|
|
_isVerifying = true;
|
|
|
|
|
_verifyOtp(value);
|
|
|
|
|
} else if (!_isOtpComplete) {
|
|
|
|
|
_isVerifying = false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
void _resendOtp() {
|
|
|
|
|
if (_resendTime == 0) {
|
|
|
|
|
setState(() {
|
|
|
|
|
@ -525,6 +547,14 @@ class _OTPVerificationScreenState extends State<OTPVerificationScreen> {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
void _clearOtpAndResetState() {
|
|
|
|
|
setState(() {
|
|
|
|
|
_isVerifying = false;
|
|
|
|
|
_isOtpComplete = false;
|
|
|
|
|
});
|
|
|
|
|
_otpController.clear();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
String _getMaskedPhoneNumber() {
|
|
|
|
|
final phone = widget.phoneNumber;
|
|
|
|
|
return phone.length > 4 ? '05xxxxxx${phone.substring(phone.length - 2)}' : phone;
|
|
|
|
|
@ -532,7 +562,6 @@ class _OTPVerificationScreenState extends State<OTPVerificationScreen> {
|
|
|
|
|
|
|
|
|
|
@override
|
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
|
AuthenticationViewModel authVM = context.read<AuthenticationViewModel>();
|
|
|
|
|
return Scaffold(
|
|
|
|
|
backgroundColor: AppColors.scaffoldBgColor,
|
|
|
|
|
appBar: CustomAppBar(
|
|
|
|
|
@ -548,22 +577,19 @@ class _OTPVerificationScreenState extends State<OTPVerificationScreen> {
|
|
|
|
|
child: Column(
|
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
|
|
children: [
|
|
|
|
|
SizedBox(height: 10.h),
|
|
|
|
|
LocaleKeys.otpVerification.tr().toText24(isBold: true),
|
|
|
|
|
SizedBox(height: 20.h),
|
|
|
|
|
Wrap(
|
|
|
|
|
spacing: 4.h,
|
|
|
|
|
runSpacing: 8.0,
|
|
|
|
|
children: [
|
|
|
|
|
LocaleKeys.weHaveSendOTP.tr().toText16(color: AppColors.inputLabelTextColor),
|
|
|
|
|
_getMaskedPhoneNumber().toText16(color: AppColors.inputLabelTextColor, isBold: true),
|
|
|
|
|
LocaleKeys.via.tr().toText16(color: AppColors.inputLabelTextColor),
|
|
|
|
|
authVM.loginTypeEnum.displayName.toText16(color: AppColors.inputLabelTextColor),
|
|
|
|
|
LocaleKeys.forRegistrationVerification.tr().toText16(color: AppColors.inputLabelTextColor),
|
|
|
|
|
],
|
|
|
|
|
SizedBox(height: 40.h),
|
|
|
|
|
Text(
|
|
|
|
|
'OTP Verification',
|
|
|
|
|
style: TextStyle(fontSize: 24.fSize, fontWeight: FontWeight.bold),
|
|
|
|
|
),
|
|
|
|
|
|
|
|
|
|
SizedBox(height: 16.h),
|
|
|
|
|
Text(
|
|
|
|
|
'We have sent you the OTP code on ${_getMaskedPhoneNumber()} via SMS for registration verification',
|
|
|
|
|
style: TextStyle(fontSize: 16.fSize, color: Colors.grey),
|
|
|
|
|
),
|
|
|
|
|
SizedBox(height: 40.h),
|
|
|
|
|
|
|
|
|
|
// OTP Input Fields using new OTP Widget
|
|
|
|
|
Center(
|
|
|
|
|
child: OTPWidget(
|
|
|
|
|
maxLength: _otpLength,
|
|
|
|
|
@ -585,32 +611,38 @@ class _OTPVerificationScreenState extends State<OTPVerificationScreen> {
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
SizedBox(height: 32.h),
|
|
|
|
|
|
|
|
|
|
const SizedBox(height: 32),
|
|
|
|
|
|
|
|
|
|
// Resend OTP
|
|
|
|
|
Row(
|
|
|
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
|
|
|
children: [
|
|
|
|
|
LocaleKeys.didntReceiveIt.tr().toText16(color: AppColors.inputLabelTextColor),
|
|
|
|
|
SizedBox(width: 5.h),
|
|
|
|
|
const Text("Didn't receive it? "),
|
|
|
|
|
if (_resendTime > 0)
|
|
|
|
|
Builder(
|
|
|
|
|
// Use a Builder to easily calculate minutes and seconds inline
|
|
|
|
|
builder: (context) {
|
|
|
|
|
final minutes = (_resendTime ~/ 60).toString().padLeft(2, '0');
|
|
|
|
|
final seconds = (_resendTime % 60).toString().padLeft(2, '0');
|
|
|
|
|
return Row(
|
|
|
|
|
children: [
|
|
|
|
|
LocaleKeys.resendIn.tr().toText16(color: AppColors.inputLabelTextColor),
|
|
|
|
|
SizedBox(width: 2.h),
|
|
|
|
|
' ($minutes:$seconds). '.toText16(color: AppColors.inputLabelTextColor)
|
|
|
|
|
],
|
|
|
|
|
final minutes = (_resendTime ~/ 60)
|
|
|
|
|
.toString()
|
|
|
|
|
.padLeft(2, '0'); // Integer division for minutes final seconds = (_resendTime % 60).toString().padLeft(2, '0'); // Modulo for remaining seconds
|
|
|
|
|
final seconds = (_resendTime % 60).toString().padLeft(2, '0'); // Modulo for remaining seconds // <--- HERE IT IS
|
|
|
|
|
return Text(
|
|
|
|
|
'resend in ($minutes:$seconds). ',
|
|
|
|
|
style: const TextStyle(color: Colors.grey),
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
)
|
|
|
|
|
else
|
|
|
|
|
GestureDetector(
|
|
|
|
|
onTap: _resendOtp,
|
|
|
|
|
child: LocaleKeys.resendOTP.tr().toText16(color: AppColors.primaryRedColor),
|
|
|
|
|
child: const Text(
|
|
|
|
|
'Resend',
|
|
|
|
|
style: TextStyle(
|
|
|
|
|
color: AppColors.primaryRedColor,
|
|
|
|
|
fontWeight: FontWeight.bold,
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
],
|
|
|
|
|
),
|
|
|
|
|
@ -622,6 +654,7 @@ class _OTPVerificationScreenState extends State<OTPVerificationScreen> {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
void _verifyOtp(String otp) {
|
|
|
|
|
debugPrint('Verifying OTP: $otp');
|
|
|
|
|
widget.checkActivationCode(int.parse(otp));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -631,7 +664,5 @@ class _OTPVerificationScreenState extends State<OTPVerificationScreen> {
|
|
|
|
|
if (otp.length != _otpLength) return;
|
|
|
|
|
_isVerifying = false;
|
|
|
|
|
_otpController.text = otp;
|
|
|
|
|
setState(() {});
|
|
|
|
|
_onOtpChanged(otp);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|