1. import 'dart:math';
2.  
3. import 'package:animations/animations.dart';
4. import 'package:dapp/main.dart';
5. import 'package:dapp/utils/FadeAnimation.dart';
6. import 'package:dapp/utils/delayed_animation.dart';
7. import 'package:dapp/utils/phone_auth.dart';
8. import 'package:flutter/cupertino.dart';
9. import 'package:flutter/material.dart';
10. import 'package:flutter/services.dart';
11. import 'package:flutter/widgets.dart';
12. import 'package:flutter_icons/flutter_icons.dart';
13. import 'package:google_fonts/google_fonts.dart';
14. import 'package:country_code_picker/country_code_picker.dart';
15. import 'package:firebase_auth/firebase_auth.dart';
16.  
17. class LoginPage extends StatefulWidget {
18.   LoginPage({Key key}) : super(key: key);
19.  
20.   @override
21.   _LoginPageState createState() => _LoginPageState();
22. }
23.  
24. class _LoginPageState extends State<LoginPage> {
25.   final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
26.   final GlobalKey<FormState> _phoneKey = GlobalKey<FormState>();
27.   bool _autoValidate = false;
28.   bool _phoneValidate = false;
29.   String _mobile;
30.   Map<int, String> userInputs = Map<int, String>();
31.   String _countryPrefix = "+90";
32.   bool _verificationReceived = true;
33.   bool codeArrived = false;
34.   String verificationCode;
35.   static int currentWidget = 0;
36.   final FirebaseAuth _auth = FirebaseAuth.instance;
37.  
38.   @override
39.   Widget build(BuildContext context) {
40.     return SafeArea(
41.         child: Scaffold(
42.             resizeToAvoidBottomInset: false,
43.             backgroundColor: Colors.black,
44.             body: firstStep(context)));
45.   }
46.  
47.   /*Container secondStep(BuildContext context) {
48.     return Container(
49.       color: Colors.black,
50.       child: Center(
51.         child: IconButton(
52.           icon: Icon(
53.             Icons.access_alarm,
54.             color: Colors.white,
55.           ),
56.           onPressed: () {
57.             setState(() {
58.               currentWidget = 0;
59.             });
60.           },
61.         ),
62.       ),
63.     );
64.   }
65. */
66.   SafeArea firstStep(BuildContext context) {
67.     return SafeArea(
68.       child: Scaffold(
69.         resizeToAvoidBottomInset: false,
70.         backgroundColor: Colors.black,
71.         body: FadeAnimation(
72.           3.0,
73.           Container(
74.             child: Column(
75.               mainAxisAlignment: MainAxisAlignment.center,
76.               children: <Widget>[
77.                 Text(
78.                   "Continue with",
79.                   style: TextStyle(
80.                       fontWeight: FontWeight.normal,
81.                       color: Colors.white,
82.                       fontSize: 14),
83.                 ),
84.                 SizedBox(
85.                   height: 20,
86.                 ),
87.                 Row(
88.                   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
89.                   children: <Widget>[
90.                     Icon(
91.                       Ionicons.logo_facebook,
92.                       color: Colors.white,
93.                       size: MediaQuery.of(context).size.height / 20,
94.                     ),
95.                     Icon(
96.                       Ionicons.logo_instagram,
97.                       color: Colors.white,
98.                       size: MediaQuery.of(context).size.height / 20,
99.                     ),
100.                     Icon(
101.                       Ionicons.logo_google,
102.                       color: Colors.white,
103.                       size: MediaQuery.of(context).size.height / 20,
104.                     ),
105.                   ],
106.                 ),
107.                 SizedBox(
108.                   height: 50,
109.                 ),
110.                 Text(
111.                   "Or sign in with phone-number",
112.                   style: TextStyle(
113.                       fontWeight: FontWeight.normal,
114.                       color: Colors.white,
115.                       fontSize: 12),
116.                 ),
117.                 SizedBox(
118.                   height: 10,
119.                 ),
120.                 CountryCodePicker(
121.                   countryFilter: ["+90", "+33", "US", "+49"],
122.                   textStyle: TextStyle(color: Colors.white),
123.                   initialSelection: 'TR',
124.                   onInit: (c) {
125.                     this._countryPrefix = c.dialCode;
126.                   },
127.                   onChanged: (c) {
128.                     this._countryPrefix = c.dialCode;
129.                   },
130.                   showCountryOnly: true,
131.                   showOnlyCountryWhenClosed: true,
132.                 ),
133.                 Container(
134.                   margin: EdgeInsets.only(left: 30, right: 30, top: 50),
135.                   child: Column(
136.                     mainAxisAlignment: MainAxisAlignment.center,
137.                     children: <Widget>[
138.                       phoneNumberValidation(),
139.                       SizedBox(
140.                         height: 30,
141.                       ),
142.                       FadeAnimation(
143.                         8,
144.                         CircleAvatar(
145.                           backgroundColor: Colors.white,
146.                           child: IconButton(
147.                               icon: Icon(CupertinoIcons.down_arrow,
148.                                   color: Colors.deepPurple),
149.                               onPressed: this._verificationReceived == true
150.                                   ? () => this._validatePhoneNumber(context)
151.                                   : () => this._validatePhoneNumber(context)),
152.                         ),
153.                       )
154.                     ],
155.                   ),
156.                 ),
157.               ],
158.             ),
159.           ),
160.         ),
161.       ),
162.     );
163.   }
164.  
165.   Form phoneNumberValidation() {
166.     return Form(
167.       autovalidate: _autoValidate,
168.       key: _formKey,
169.       child: Center(
170.         child: TextFormField(
171.           enabled: _verificationReceived,
172.           keyboardAppearance: Brightness.dark,
173.           maxLength: 10,
174.           autocorrect: true,
175.           textAlign: TextAlign.center,
176.           validator: (String value) {
177.             String patttern = r'(^(?:[+0]9)?[0-9]{10,12}$)';
178.             RegExp regExp = new RegExp(patttern);
179.             if (value.length == 0) {
180.               return 'Lütfen geçerli bir telefon numarası girin.';
181.             } else if (!regExp.hasMatch(value)) {
182.               return 'Lütfen geçerli bir telefon numarası girin.';
183.             }
184.             return null;
185.           },
186.           style: TextStyle(color: Colors.white, fontSize: 13),
187.           decoration: InputDecoration(
188.               errorStyle: TextStyle(color: Colors.red),
189.               focusedErrorBorder: OutlineInputBorder(
190.                   borderSide: BorderSide(color: Colors.deepPurple, width: 0.2),
191.                   borderRadius: BorderRadius.all(Radius.circular(10))),
192.               errorBorder: OutlineInputBorder(
193.                   borderSide: BorderSide(color: Colors.deepPurple, width: 0.2),
194.                   borderRadius: BorderRadius.all(Radius.circular(10))),
195.               hintText: "555555-1234",
196.               hintStyle: TextStyle(color: Colors.white),
197.               prefixText: "${this._countryPrefix} ",
198.               prefixStyle: TextStyle(color: Colors.blue[800], fontSize: 13),
199.               focusedBorder: OutlineInputBorder(
200.                   borderSide: BorderSide(color: Colors.deepPurple, width: 0.2),
201.                   borderRadius: BorderRadius.all(Radius.circular(10))),
202.               enabledBorder: OutlineInputBorder(
203.                   borderSide: BorderSide(color: Colors.deepPurple, width: 0.2),
204.                   borderRadius: BorderRadius.all(Radius.circular(10))),
205.               alignLabelWithHint: true,
206.               labelStyle: TextStyle(color: Colors.white, fontSize: 13),
207.               labelText: 'Phone Number'),
208.           keyboardType: TextInputType.phone,
209.           onSaved: (String val) {
210.             setState(() {
211.               this._mobile = val;
212.             });
213.           },
214.         ),
215.       ),
216.     );
217.   }
218.  
219.   void codeChecker(String code) {
220.     this.verificationCode = code;
221.     setState(() {
222.       this.codeArrived = true;
223.     });
224.   }
225.  
226.   void _validatePhoneNumber(context) {
227.     if (_formKey.currentState.validate()) {
228.       _formKey.currentState.save();
229.       PhoneAuth authenticator = PhoneAuth(
230.           this._countryPrefix + this._mobile, context,
231.           func: codeChecker);
232.       setState(() {
233.         this._verificationReceived = false;
234.       });
235.       authenticator.auth().whenComplete(() async {
236.         FirebaseUser currentUser = await this._auth.currentUser();
237.         if (currentUser == null) {
238.           createVerifyScreen(context);
239.         }
240.       });
241.     } else {
242.       setState(() {
243.         _autoValidate = true;
244.       });
245.     }
246.   }
247.  
248.   createVerifyScreen(context) async {
249.     showModalBottomSheet(
250.         context: this.context,
251.         isDismissible: false,
252.         isScrollControlled: true,
253.         builder: (BuildContext c) {
254.           return Container(
255.             height: MediaQuery.of(this.context).size.height / 1.2,
256.             decoration: BoxDecoration(
257.                 border: Border.all(color: Colors.white60, width: 0.1),
258.                 color: Colors.deepPurple,
259.                 borderRadius: BorderRadius.only(
260.                     topLeft: Radius.circular(30),
261.                     topRight: Radius.circular(30))),
262.             child: FadeAnimation(
263.               1,
264.               Column(
265.                 mainAxisAlignment: MainAxisAlignment.center,
266.                 crossAxisAlignment: CrossAxisAlignment.center,
267.                 children: <Widget>[
268.                   Text("We sent you a code to verify",
269.                       style: TextStyle(
270.                         fontSize: 14,
271.                         fontWeight: FontWeight.bold,
272.                         color: Colors.white,
273.                       )),
274.                   Text("your mobile number",
275.                       style: TextStyle(
276.                         fontSize: 14,
277.                         fontWeight: FontWeight.bold,
278.                         color: Colors.white,
279.                       )),
280.                   SizedBox(
281.                     height: 10,
282.                   ),
283.                   Container(
284.                     height: 80,
285.                     width: MediaQuery.of(context).size.width,
286.                     margin: EdgeInsets.only(left: 15, right: 15, top: 25),
287.                     color: Colors.transparent,
288.                     child: Form(
289.                       autovalidate: _phoneValidate,
290.                       key: _phoneKey,
291.                       child: Row(
292.                           mainAxisAlignment: MainAxisAlignment.center,
293.                           children: <Widget>[
294.                             numberInput(1.6, "1", 0),
295.                             SizedBox(width: 3),
296.                             numberInput(1.6, "3", 1),
297.                             SizedBox(width: 3),
298.                             numberInput(1.6, "0", 2),
299.                             SizedBox(width: 3),
300.                             numberInput(1.8, "6", 3),
301.                             SizedBox(width: 3),
302.                             numberInput(1.8, "9", 4),
303.                             SizedBox(width: 3),
304.                             numberInput(1.8, "7", 5),
305.                           ]),
306.                     ),
307.                   ),
308.                   Text("Enter your 6-digit verification code and click verify",
309.                       style: TextStyle(color: Colors.white54, fontSize: 10)),
310.                   SizedBox(
311.                     height: 30,
312.                   ),
313.                   Text("1:59",
314.                       style: TextStyle(color: Colors.white54, fontSize: 10)),
315.                   RaisedButton.icon(
316.                     animationDuration: Duration(seconds: 1),
317.                     color: Colors.black,
318.                     shape: RoundedRectangleBorder(
319.                         borderRadius: new BorderRadius.circular(18.0),
320.                         side: BorderSide(color: Colors.transparent)),
321.                     onPressed: (codeArrived == true)
322.                         ? () async {
323.                             if (_phoneKey.currentState.validate()) {
324.                               _phoneKey.currentState.save();
325.                               try {
326.                                 AuthResult result = await this
327.                                     ._auth
328.                                     .signInWithCredential(
329.                                         PhoneAuthProvider.getCredential(
330.                                             verificationId:
331.                                                 this.verificationCode,
332.                                             smsCode:
333.                                                 "${this.userInputs[0]}${this.userInputs[1]}${this.userInputs[2]}${this.userInputs[3]}${this.userInputs[4]}${this.userInputs[5]}"));
334.                                 if (result.user != null) {
335.                                   Navigator.of(context).pushAndRemoveUntil(
336.                                       MaterialPageRoute(
337.                                           builder: (context) => MainPage()),
338.                                       ((Route<dynamic> route) => false));
339.                                 }
340.                               } catch (AuthException) {
341.                                 print("Authentication exception occured.");
342.                               }
343.                             } else {
344.                               setState(() {
345.                                 _phoneValidate = true;
346.                               });
347.                             }
348.                           }
349.                         : null,
350.                     icon: Icon(FontAwesome5.check_circle,
351.                         size: 13, color: Colors.deepPurple),
352.                     label: Text("VERIFY NUMBER",
353.                         style: TextStyle(
354.                           color: Colors.white,
355.                           fontSize: 10,
356.                         )),
357.                   ),
358.                   InkWell(
359.                     onTap: () => print(""),
360.                     child: Text(
361.                         "I did not receive the code.ntttttttResend the code.",
362.                         style: TextStyle(color: Colors.white54, fontSize: 10)),
363.                   ),
364.                 ],
365.               ),
366.             ),
367.           );
368.         });
369.   }
370.  
371.   Flexible numberInput(double dur, hnt, int index) {
372.     return Flexible(
373.       flex: 2,
374.       child: DelayedAnimation(
375.         delay: dur.floor(),
376.         curve: Curves.fastOutSlowIn,
377.         offset: Offset(0, 1),
378.         child: TextFormField(
379.             inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],
380.             showCursor: false,
381.             validator: (str) {
382.               if (str == "") {
383.                 return "";
384.               } else
385.                 return null;
386.             },
387.             style: TextStyle(
388.                 color: Colors.black, fontSize: 14, fontWeight: FontWeight.bold),
389.             decoration: InputDecoration(
390.                 counterText: "",
391.                 hintText: hnt,
392.                 hintStyle: TextStyle(color: Colors.black12),
393.                 filled: true,
394.                 helperText: "",
395.                 fillColor: Colors.white,
396.                 focusedBorder: OutlineInputBorder(
397.                   borderSide: BorderSide(color: Colors.black, width: 0.8),
398.                 ),
399.                 enabledBorder: OutlineInputBorder(
400.                     borderSide: BorderSide(color: Colors.black, width: 0.5),
401.                     borderRadius: BorderRadius.circular(50)),
402.                 border: OutlineInputBorder(
403.                     borderSide: BorderSide(color: Colors.purpleAccent))),
404.             maxLength: 1,
405.             textAlign: TextAlign.center,
406.             keyboardType: TextInputType.number,
407.             onChanged: (str) {
408.               this.userInputs[index] = str;
409.               print(this.userInputs[index]);
410.             }),
411.       ),
412.     );
413.   }
414. }
415.