import 'dart:async'; import 'package:diplomaticquarterapp/config/size_config.dart'; import 'package:diplomaticquarterapp/core/viewModels/project_view_model.dart'; import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart'; import 'package:diplomaticquarterapp/widgets/text/app_texts_widget.dart'; import 'package:flutter/material.dart'; import 'dart:math'; import 'package:provider/provider.dart'; import 'package:sms_otp_auto_verify/sms_otp_auto_verify.dart'; import '../otp_widget.dart'; class SMSOTP { final type; final mobileNo; final Function onSuccess; final Function onFailure; final context; int remainingTime = 600; Future timer; static BuildContext _context; static bool _loading; SMSOTP( this.context, this.type, this.mobileNo, this.onSuccess, this.onFailure, ); final verifyAccountForm = GlobalKey(); final TextEditingController _pinPutController = TextEditingController(); TextEditingController digit1 = TextEditingController(text: ""); TextEditingController digit2 = TextEditingController(text: ""); TextEditingController digit3 = TextEditingController(text: ""); TextEditingController digit4 = TextEditingController(text: ""); Map verifyAccountFormValue = { 'digit1': '', 'digit2': '', 'digit3': '', 'digit4': '', }; final focusD1 = FocusNode(); final focusD2 = FocusNode(); final focusD3 = FocusNode(); final focusD4 = FocusNode(); String errorMsg; ProjectViewModel projectProvider; String displayTime = ''; String _code; dynamic setState; static String signature; displayDialog(BuildContext context) async { return showDialog( context: context, barrierColor: Colors.black.withOpacity(0.63), builder: (context) { projectProvider = Provider.of(context); return Dialog( backgroundColor: Colors.white, shape: RoundedRectangleBorder(), insetPadding: EdgeInsets.only(left: 21, right: 21), child: StatefulBuilder(builder: (context, setState) { if (displayTime == '') { startTimer(setState); } return Container( padding: EdgeInsets.only(left: 21, right: 18, top: 39, bottom: 59), child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Image.asset( type == 1 ? 'assets/images/login/103.png' : 'assets/images/login/104.png', height: 50, width: 50, ), IconButton( padding: EdgeInsets.zero, icon: Icon(Icons.close), constraints: BoxConstraints(), onPressed: () { Navigator.pop(context); this.onFailure(); }, ) ], ), SizedBox(height: 22), Text( TranslationBase.of(context).pleaseEnterTheVerificationCode + ' xxxxxxxx' + mobileNo.toString().substring(mobileNo.toString().length - 3), style: TextStyle(fontSize: 16, fontFamily: "Poppins", fontWeight: FontWeight.w600, color: Color(0xff2B353E), letterSpacing: -0.48), ), SizedBox(height: 18), Directionality( textDirection: TextDirection.ltr, child: OTPWidget( autoFocus: true, controller: _pinPutController, defaultBorderColor: Color(0xffD8D8D8), maxLength: 4, onTextChanged: (text) {}, pinBoxColor: Colors.white, onDone: (code) => _onOtpCallBack(code, null), textBorderColor: Color(0xffD8D8D8), pinBoxWidth: 68, pinBoxHeight: 75, pinTextStyle: TextStyle( fontSize: 24.0, color: Color(0xff2B353E), ), pinTextAnimatedSwitcherTransition: ProvidedPinBoxTextAnimation.scalingTransition, pinTextAnimatedSwitcherDuration: Duration(milliseconds: 300), pinBoxRadius: 10, keyboardType: TextInputType.number, ), ), SizedBox(height: 30), RichText( text: TextSpan( text: TranslationBase.of(context).validationMessage + '\n', style: TextStyle(fontSize: 16, fontFamily: "Poppins", fontWeight: FontWeight.w600, color: Color(0xff2B353E), letterSpacing: -0.48), children: [ TextSpan( text: displayTime, style: TextStyle(fontSize: 16, fontFamily: "Poppins", fontWeight: FontWeight.w600, color: Color(0xffD02127), letterSpacing: -0.48), ), ], ), ), ], ), ); return Container( color: Colors.white, height: SizeConfig.realScreenHeight * 0.5, width: SizeConfig.realScreenWidth, child: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ type == 1 ? Image.asset('assets/images/login/103.png') : Image.asset('assets/images/login/104.png'), Padding( padding: EdgeInsets.only(top: 5), child: AppText( TranslationBase.of(context).pleaseEnterTheVerificationCode + ' XXXXXX' + mobileNo.toString().substring(mobileNo.toString().length - 3), textAlign: TextAlign.center, )), Directionality( textDirection: TextDirection.ltr, child: TextFieldPin( filled: true, filledColor: Colors.grey[100], codeLength: 4, filledAfterTextChange: true, boxSize: 50, margin: 10, borderStyeAfterTextChange: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(10)), borderSide: BorderSide(color: Colors.black), ), borderStyle: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(10)), borderSide: BorderSide(color: Colors.black), ), onOtpCallback: (code, isAutofill) => _onOtpCallBack(code, isAutofill), )), SizedBox(height: 20), Padding( padding: EdgeInsets.only(top: 10), child: AppText( TranslationBase.of(context).validationMessage + ' ' + displayTime, color: Colors.red, textAlign: TextAlign.center, )) ], )), ); }), ); AlertDialog( title: Row( mainAxisAlignment: MainAxisAlignment.end, children: [ IconButton( icon: Icon(Icons.close), onPressed: () { Navigator.pop(context); this.onFailure(); }, ) ], ), shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10.0))), content: StatefulBuilder(builder: (context, setState) { if (displayTime == '') { startTimer(setState); } return Container( color: Colors.white, height: SizeConfig.realScreenHeight * 0.5, width: SizeConfig.realScreenWidth, child: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ type == 1 ? Image.asset('assets/images/login/103.png') : Image.asset('assets/images/login/104.png'), Padding( padding: EdgeInsets.only(top: 5), child: AppText( TranslationBase.of(context).pleaseEnterTheVerificationCode + ' XXXXXX' + mobileNo.toString().substring(mobileNo.toString().length - 3), textAlign: TextAlign.center, )), Directionality( textDirection: TextDirection.ltr, child: TextFieldPin( filled: true, filledColor: Colors.grey[100], codeLength: 4, filledAfterTextChange: true, boxSize: 50, margin: 10, borderStyeAfterTextChange: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(10)), borderSide: BorderSide(color: Colors.black), ), borderStyle: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(10)), borderSide: BorderSide(color: Colors.black), ), onOtpCallback: (code, isAutofill) => _onOtpCallBack(code, isAutofill), )), // Form( // key: verifyAccountForm, // child: Padding( // padding: EdgeInsets.only(top: 20), // child: Directionality( // textDirection: TextDirection.ltr, // child: // // Row( // mainAxisAlignment: MainAxisAlignment.spaceAround, // children: [ // Container( // child: , // ) // Container( // width: SizeConfig.realScreenWidth * 0.15, // child: TextFormField( // textInputAction: TextInputAction.next, // style: buildTextStyle(), // autofocus: true, // maxLength: 1, // controller: digit1, // textAlign: TextAlign.center, // keyboardType: TextInputType.number, // decoration: buildInputDecoration(context), // onSaved: (val) {}, // validator: validateCodeDigit, // onFieldSubmitted: (_) { // FocusScope.of(context) // .requestFocus(focusD2); // }, // onChanged: (val) { // if (val.length == 1) { // FocusScope.of(context) // .requestFocus(focusD2); // verifyAccountFormValue['digit1'] = // val.trim(); // checkValue(); // } // }, // ), // ), // Container( // width: SizeConfig.realScreenWidth * 0.15, // child: TextFormField( // focusNode: focusD2, // textInputAction: TextInputAction.next, // maxLength: 1, // controller: digit2, // textAlign: TextAlign.center, // style: buildTextStyle(), // keyboardType: TextInputType.number, // decoration: buildInputDecoration(context), // onSaved: (val) {}, // onFieldSubmitted: (_) { // FocusScope.of(context) // .requestFocus(focusD3); // }, // onChanged: (val) { // if (val.length == 1) { // FocusScope.of(context) // .requestFocus(focusD3); // verifyAccountFormValue['digit2'] = // val.trim(); // checkValue(); // } // }, // validator: validateCodeDigit), // ), // Container( // width: SizeConfig.realScreenWidth * 0.15, // child: TextFormField( // focusNode: focusD3, // textInputAction: TextInputAction.next, // maxLength: 1, // controller: digit3, // textAlign: TextAlign.center, // style: buildTextStyle(), // keyboardType: TextInputType.number, // decoration: // buildInputDecoration(context), // onSaved: (val) {}, // onFieldSubmitted: (_) { // FocusScope.of(context) // .requestFocus(focusD4); // }, // onChanged: (val) { // if (val.length == 1) { // FocusScope.of(context) // .requestFocus(focusD4); // verifyAccountFormValue['digit3'] = // val.trim(); // checkValue(); // } // }, // validator: validateCodeDigit)), // Container( // width: SizeConfig.realScreenWidth * 0.15, // child: TextFormField( // focusNode: focusD4, // maxLength: 1, // textAlign: TextAlign.center, // style: buildTextStyle(), // controller: digit4, // keyboardType: TextInputType.number, // decoration: // buildInputDecoration(context), // onFieldSubmitted: (_) { // FocusScope.of(context) // .requestFocus(focusD4); // }, // onChanged: (val) { // if (val.length == 1) { // verifyAccountFormValue['digit4'] = // val.trim(); // checkValue(); // } // }, // validator: validateCodeDigit)), // ], //)), //), //), SizedBox(height: 20), Padding( padding: EdgeInsets.only(top: 10), child: AppText( TranslationBase.of(context).validationMessage + ' ' + displayTime, color: Colors.red, textAlign: TextAlign.center, )) ], )), ); }), ); }); } TextStyle buildTextStyle() { return TextStyle( fontSize: SizeConfig.textMultiplier * 3, ); } InputDecoration buildInputDecoration(BuildContext context) { return InputDecoration( counterText: " ", // ts/images/password_icon.png // contentPadding: EdgeInsets.only(top: 20, bottom: 20), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(10)), borderSide: BorderSide(color: Colors.black), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Theme.of(context).primaryColor), ), errorBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Theme.of(context).errorColor), ), focusedErrorBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Theme.of(context).errorColor), ), ); } String validateCodeDigit(value) { if (value.isEmpty) { return ' '; } else if (value.length == 3) { print(value); } else { return null; } } checkValue() { //print(verifyAccountFormValue); if (verifyAccountForm.currentState.validate()) { onSuccess(digit1.text.toString() + digit2.text.toString() + digit3.text.toString() + digit4.text.toString()); } } getSecondsAsDigitalClock(int inputSeconds) { var sec_num = int.parse(inputSeconds.toString()); // don't forget the second param var hours = (sec_num / 3600).floor(); var minutes = ((sec_num - hours * 3600) / 60).floor(); var seconds = sec_num - hours * 3600 - minutes * 60; var minutesString = ""; var secondsString = ""; minutesString = minutes < 10 ? "0" + minutes.toString() : minutes.toString(); secondsString = seconds < 10 ? "0" + seconds.toString() : seconds.toString(); return minutesString + ":" + secondsString; } startTimer(setState) { this.remainingTime--; setState(() { displayTime = this.getSecondsAsDigitalClock(this.remainingTime); }); timer = Future.delayed(Duration(seconds: 1), () { if (this.remainingTime > 0) { startTimer(setState); } else { Navigator.pop(context); } }); } static void showLoadingDialog(BuildContext context, bool _loading) async { _context = context; //setSignature(); if (_loading == false) { Navigator.of(context).pop(); return; } _loading = true; await showDialog( context: _context, barrierDismissible: false, builder: (BuildContext context) { return SimpleDialog( elevation: 0.0, backgroundColor: Colors.transparent, children: [ Center( child: CircularProgressIndicator( valueColor: AlwaysStoppedAnimation(Colors.black), ), ) ], ); }); } static void hideSMSBox(context) { Navigator.pop(context); } _onOtpCallBack(String otpCode, bool isAutofill) { if (otpCode.length == 4) { onSuccess(otpCode); } } static getSignature() async { return await SmsRetrieved.getAppSignature(); } }