457 lines
15 KiB
Dart
457 lines
15 KiB
Dart
import 'dart:async';
|
|
import 'dart:convert';
|
|
|
|
import 'package:cathaypay_mobile/Numpad.dart';
|
|
import 'package:cathaypay_mobile/utils/utils.dart';
|
|
import 'package:easy_localization/easy_localization.dart';
|
|
import 'package:flutter/cupertino.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:google_fonts/google_fonts.dart';
|
|
import 'package:pin_code_fields/pin_code_fields.dart';
|
|
|
|
import '../api/api.dart';
|
|
import '../utils/color_custom.dart';
|
|
|
|
TextEditingController _textEditingController = TextEditingController();
|
|
|
|
class OtpPage extends StatefulWidget {
|
|
const OtpPage({Key? key, required this.email, required this.phone}) : super(key: key);
|
|
|
|
final String email;
|
|
final String phone;
|
|
|
|
@override
|
|
State<OtpPage> createState() => _OtpPageState();
|
|
}
|
|
|
|
class _OtpPageState extends State<OtpPage> {
|
|
int _remainingSeconds = 900; // 15 minutes in seconds
|
|
String _displayTime = '15:00';
|
|
Timer? timer;
|
|
|
|
void _startTimer() {
|
|
const oneSec = const Duration(seconds: 1);
|
|
timer = Timer.periodic(
|
|
oneSec,
|
|
(timer) => setState(() {
|
|
if (_remainingSeconds < 1) {
|
|
timer.cancel();
|
|
} else {
|
|
_remainingSeconds = _remainingSeconds - 1;
|
|
_displayTime = _formatTime(_remainingSeconds);
|
|
}
|
|
}),
|
|
);
|
|
}
|
|
|
|
refreshTimer() {
|
|
_textEditingController.text = "";
|
|
timer?.cancel();
|
|
_remainingSeconds = 900; // 15 minutes in seconds
|
|
_displayTime = '15:00';
|
|
_startTimer();
|
|
}
|
|
|
|
String _formatTime(int seconds) {
|
|
int minutes = (seconds / 60).floor();
|
|
int remainingSeconds = seconds - (minutes * 60);
|
|
String formattedMinutes = minutes < 10 ? '0$minutes' : '$minutes';
|
|
String formattedSeconds = remainingSeconds < 10 ? '0$remainingSeconds' : '$remainingSeconds';
|
|
return '$formattedMinutes:$formattedSeconds';
|
|
}
|
|
|
|
TextEditingController pin = TextEditingController();
|
|
|
|
setValue(String val) {
|
|
setState(() {
|
|
_textEditingController.text += val;
|
|
});
|
|
}
|
|
|
|
backspace() {
|
|
if (_textEditingController.text.length > 0) {
|
|
setState(() {
|
|
_textEditingController.text = _textEditingController.text.substring(0, _textEditingController.text.length - 1);
|
|
});
|
|
}
|
|
}
|
|
|
|
@override
|
|
void initState() {
|
|
getOtp();
|
|
_startTimer();
|
|
super.initState();
|
|
}
|
|
|
|
// String otp = "";
|
|
String refno = "";
|
|
String token = "";
|
|
String otpConfirm = "";
|
|
|
|
getOtp() async {
|
|
var param = jsonEncode(<dynamic, dynamic>{"key": Api.API_KEY, "secret": Api.API_SECRET, "msisdn": widget.phone});
|
|
Api.getRaw(context, Api.otpEmail + widget.email).then((value) => {
|
|
print(value),
|
|
setState(() {
|
|
otpConfirm = value.toString();
|
|
})
|
|
});
|
|
}
|
|
|
|
verify(String otp) {
|
|
if (otp == otpConfirm) {
|
|
Navigator.pushNamed(context, '/PolicyPage');
|
|
} else {
|
|
Utils.showAlertDialog(context, "รหัส OTP ไม่ถูกต้อง");
|
|
}
|
|
// var param = jsonEncode(<dynamic, dynamic>{"key": Api.API_KEY, "secret": Api.API_SECRET, "token": token, "pin": otp});
|
|
// Api.postStatus(context, Api.verify, param).then((value) => {
|
|
// print(value),
|
|
// if (value != null) {Navigator.pushNamed(context, '/PolicyPage')} else {Utils.showAlertDialog(context, "รหัส OTP ไม่ถูกต้อง")}
|
|
// });
|
|
}
|
|
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
// extendBodyBehindAppBar: true,
|
|
|
|
appBar: AppBar(
|
|
backgroundColor: Colors.transparent,
|
|
actions: [
|
|
CupertinoButton(
|
|
onPressed: () {
|
|
Navigator.pop(context);
|
|
},
|
|
child: IconButton(
|
|
onPressed: () {
|
|
Navigator.of(context).pop();
|
|
},
|
|
icon: const Icon(
|
|
Icons.clear,
|
|
color: Colors.grey,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
elevation: 0,
|
|
// title: Text(
|
|
// "ยืนยันตัวตน",
|
|
// textAlign: TextAlign.center,
|
|
// style: GoogleFonts.kanit(
|
|
// color: Colors.black,
|
|
// fontSize: 20,
|
|
// ),
|
|
// ),
|
|
),
|
|
body: SafeArea(
|
|
child: Container(
|
|
padding: EdgeInsets.all(10),
|
|
child: Column(mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [
|
|
Text(
|
|
"${"Please enter the OTP code.".tr()}\n${"The code will be sent to".tr()}${widget.email}\nRef:$refno",
|
|
textAlign: TextAlign.center,
|
|
style: GoogleFonts.kanit(
|
|
color: Color(0xff65676b),
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.w300,
|
|
),
|
|
),
|
|
Expanded(child: PinCodeVerificationScreen()),
|
|
InkWell(
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Text(
|
|
"ขอรหัส OTP ใหม่อีกครั้ง",
|
|
textAlign: TextAlign.center,
|
|
style: GoogleFonts.kanit(
|
|
color: Colors.blue,
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.w300,
|
|
),
|
|
),
|
|
SizedBox(
|
|
width: 10,
|
|
),
|
|
Icon(
|
|
Icons.refresh,
|
|
size: 20,
|
|
color: Colors.blue,
|
|
)
|
|
],
|
|
),
|
|
onTap: () {
|
|
getOtp();
|
|
refreshTimer();
|
|
},
|
|
),
|
|
SizedBox(
|
|
height: 10,
|
|
),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Text(
|
|
"within the specified time".tr(),
|
|
textAlign: TextAlign.center,
|
|
style: GoogleFonts.kanit(
|
|
color: Color(0xff65676b),
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.w300,
|
|
),
|
|
),
|
|
SizedBox(
|
|
width: 10,
|
|
),
|
|
Text(
|
|
_displayTime,
|
|
textAlign: TextAlign.center,
|
|
style: GoogleFonts.kanit(
|
|
color: Color(0xffad022c),
|
|
fontSize: 24,
|
|
),
|
|
)
|
|
],
|
|
),
|
|
Container(
|
|
// padding: EdgeInsets.symmetric(horizontal: 50.0),
|
|
child: Column(
|
|
children: <Widget>[
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
|
children: <Widget>[
|
|
NumpadButton(
|
|
text: '1',
|
|
onPressed: () => setValue('1'),
|
|
),
|
|
NumpadButton(
|
|
text: '2',
|
|
onPressed: () => setValue('2'),
|
|
),
|
|
NumpadButton(
|
|
text: '3',
|
|
onPressed: () => setValue('3'),
|
|
),
|
|
],
|
|
),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
|
children: <Widget>[
|
|
NumpadButton(
|
|
text: '4',
|
|
onPressed: () => setValue('4'),
|
|
),
|
|
NumpadButton(
|
|
text: '5',
|
|
onPressed: () => setValue('5'),
|
|
),
|
|
NumpadButton(
|
|
text: '6',
|
|
onPressed: () => setValue('6'),
|
|
),
|
|
],
|
|
),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
|
children: <Widget>[
|
|
NumpadButton(
|
|
text: '7',
|
|
onPressed: () => setValue('7'),
|
|
),
|
|
NumpadButton(
|
|
text: '8',
|
|
onPressed: () => setValue('8'),
|
|
),
|
|
NumpadButton(
|
|
text: '9',
|
|
onPressed: () => setValue('9'),
|
|
),
|
|
],
|
|
),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
|
children: <Widget>[
|
|
SizedBox(
|
|
height: 90,
|
|
width: 90,
|
|
),
|
|
NumpadButton(
|
|
text: '0',
|
|
onPressed: () => setValue('0'),
|
|
),
|
|
NumpadButton(
|
|
haveBorder: false,
|
|
icon: Icons.backspace,
|
|
onPressed: () => backspace(),
|
|
),
|
|
],
|
|
)
|
|
],
|
|
),
|
|
),
|
|
InkWell(
|
|
onTap: () {
|
|
verify(_textEditingController.text);
|
|
},
|
|
child: SizedBox(
|
|
width: 374,
|
|
child: Card(
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(40),
|
|
),
|
|
child: Container(
|
|
padding: EdgeInsets.all(10),
|
|
child: Text(
|
|
"Confirm".tr(),
|
|
textAlign: TextAlign.center,
|
|
style: GoogleFonts.kanit(
|
|
color: ColorCustom.greyBorder,
|
|
fontSize: 20,
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
)
|
|
]),
|
|
),
|
|
));
|
|
}
|
|
}
|
|
|
|
class PinCodeVerificationScreen extends StatefulWidget {
|
|
final String? phoneNumber;
|
|
|
|
const PinCodeVerificationScreen({
|
|
Key? key,
|
|
this.phoneNumber,
|
|
}) : super(key: key);
|
|
|
|
@override
|
|
_PinCodeVerificationScreenState createState() => _PinCodeVerificationScreenState();
|
|
}
|
|
|
|
class _PinCodeVerificationScreenState extends State<PinCodeVerificationScreen> {
|
|
// ..text = "123456";
|
|
|
|
// ignore: close_sinks
|
|
// StreamController<ErrorAnimationType>? errorController;
|
|
|
|
bool hasError = false;
|
|
String currentText = "";
|
|
final formKey = GlobalKey<FormState>();
|
|
|
|
@override
|
|
void initState() {
|
|
// errorController = StreamController<ErrorAnimationType>();
|
|
super.initState();
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
// errorController!.close();
|
|
|
|
super.dispose();
|
|
}
|
|
|
|
// snackBar Widget
|
|
snackBar(String? message) {
|
|
return ScaffoldMessenger.of(context).showSnackBar(
|
|
SnackBar(
|
|
content: Text(message!),
|
|
duration: const Duration(seconds: 2),
|
|
),
|
|
);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
body: GestureDetector(
|
|
onTap: () {},
|
|
child: SizedBox(
|
|
height: 100,
|
|
width: MediaQuery.of(context).size.width,
|
|
child: Form(
|
|
key: formKey,
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 30),
|
|
child: PinCodeTextField(
|
|
appContext: context,
|
|
pastedTextStyle: TextStyle(
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
length: 6,
|
|
|
|
// obscureText: true,
|
|
// obscuringCharacter: '-',
|
|
// obscuringWidget: const FlutterLogo(
|
|
// size: 24,
|
|
// ),
|
|
blinkWhenObscuring: true,
|
|
animationType: AnimationType.fade,
|
|
// validator: (v) {
|
|
// if (v!.length < 3) {
|
|
// return "I'm from validator";
|
|
// } else {
|
|
// return null;
|
|
// }
|
|
// },
|
|
pinTheme: PinTheme(
|
|
shape: PinCodeFieldShape.box,
|
|
borderRadius: BorderRadius.circular(5),
|
|
fieldHeight: 50,
|
|
fieldWidth: 40,
|
|
activeFillColor: Colors.black,
|
|
inactiveColor: Colors.black,
|
|
selectedColor: Colors.black,
|
|
activeColor: Colors.black,
|
|
selectedFillColor: Colors.black,
|
|
inactiveFillColor: Colors.black,
|
|
),
|
|
cursorColor: Colors.white,
|
|
textStyle: TextStyle(
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
animationDuration: const Duration(milliseconds: 300),
|
|
enableActiveFill: true,
|
|
autoDisposeControllers: false,
|
|
// errorAnimationController: errorController,
|
|
controller: _textEditingController,
|
|
keyboardType: TextInputType.number,
|
|
boxShadows: const [
|
|
BoxShadow(
|
|
offset: Offset(0, 1),
|
|
color: Colors.black12,
|
|
blurRadius: 10,
|
|
)
|
|
],
|
|
onCompleted: (v) {
|
|
debugPrint("Completed");
|
|
},
|
|
// onTap: () {
|
|
// print("Pressed");
|
|
// },
|
|
onChanged: (value) {
|
|
debugPrint(value);
|
|
setState(() {
|
|
currentText = value;
|
|
});
|
|
},
|
|
beforeTextPaste: (text) {
|
|
debugPrint("Allowing to paste $text");
|
|
//if you return true then it will show the paste confirmation dialog. Otherwise if false, then nothing will happen.
|
|
//but you can show anything you want here, like your pop up saying wrong paste format or etc
|
|
return true;
|
|
},
|
|
)),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|