From 952ab0269bcfc6d12601305e5318cd5f34fae770 Mon Sep 17 00:00:00 2001 From: Juan Felipe Duarte <70235683+DuarteJFelipe@users.noreply.github.com> Date: Mon, 5 Jun 2023 14:23:13 -0500 Subject: [PATCH] login fix --- lib/src/screens/login_email.dart | 547 ++++++++++++++----------------- 1 file changed, 254 insertions(+), 293 deletions(-) diff --git a/lib/src/screens/login_email.dart b/lib/src/screens/login_email.dart index 082fb16..7630ec4 100644 --- a/lib/src/screens/login_email.dart +++ b/lib/src/screens/login_email.dart @@ -89,219 +89,142 @@ class _LoginEmailScreenState extends State { padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 20), margin: const EdgeInsets.only(top: 210, left: 50, right: 50), - child: Column(children: [ - Padding( - padding: const EdgeInsets.only(bottom: 20), - child: ElevatedButton( - onPressed: () async { - await AuthenticationRepository.instance - .signInWithGoogle(); - }, - style: ElevatedButton.styleFrom( - backgroundColor: const Color(0xFF2BA4EC), - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(50), - ), - elevation: 0, - minimumSize: const Size(230, 60), - ), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: const [ - Text( - 'Entrar con Google ', - style: TextStyle( - color: Colors.white, - fontWeight: FontWeight.bold, - fontSize: 18, - ), + child: Column( + children: [ + Padding( + padding: const EdgeInsets.only(bottom: 20), + child: ElevatedButton( + onPressed: () async { + await AuthenticationRepository.instance + .signInWithGoogle(); + }, + style: ElevatedButton.styleFrom( + backgroundColor: const Color(0xFF2BA4EC), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(50), ), - SizedBox(width: 5), - FaIcon(FontAwesomeIcons.google), - ], - )), - ), - Padding( - padding: const EdgeInsets.symmetric(vertical: 5), - child: Row( - children: const [ - Expanded( - child: Divider( - color: Colors.black38, - thickness: 1, + elevation: 0, + minimumSize: const Size(230, 60), ), - ), - Padding( - padding: EdgeInsets.symmetric(horizontal: 10), - child: Text("ó"), - ), - Expanded( - child: Divider( - color: Colors.black38, - thickness: 1, + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: const [ + Text( + 'Entrar con Google ', + style: TextStyle( + color: Colors.white, + fontWeight: FontWeight.bold, + fontSize: 18, + ), + ), + SizedBox(width: 5), + FaIcon(FontAwesomeIcons.google), + ], + )), + ), + Padding( + padding: const EdgeInsets.symmetric(vertical: 5), + child: Row( + children: const [ + Expanded( + child: Divider( + color: Colors.black38, + thickness: 1, + ), ), - ), - ], - ), - ), - const Padding( - padding: EdgeInsets.only(bottom: 5), - child: Align( - alignment: Alignment.topLeft, - child: Text('Email', - style: TextStyle( - fontSize: 18.0, color: Color(0xFF65676B))), - ), - ), - Padding( - padding: const EdgeInsets.only(bottom: 20), - child: TextFormField( - controller: controller.email, - validator: (String? value) { - if (value == null || value.isEmpty) { - return 'Por favor ingrese un email'; - } - final RegExp emailRegExp = - RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$'); - if (!emailRegExp.hasMatch(value)) { - return 'Por favor ingrese un email válido'; - } - return null; - }, - decoration: const InputDecoration( - border: OutlineInputBorder( - borderSide: BorderSide(color: Color(0xFFECECEC)), - borderRadius: BorderRadius.all( - Radius.circular(50), - )), - enabledBorder: OutlineInputBorder( - borderSide: BorderSide(color: Color(0xFFECECEC)), - borderRadius: BorderRadius.all( - Radius.circular(50), - )), - focusedBorder: OutlineInputBorder( - borderSide: BorderSide(color: Color(0xFFECECEC)), - borderRadius: BorderRadius.all( - Radius.circular(50), - )), - errorBorder: OutlineInputBorder( - borderSide: BorderSide( - color: Color.fromARGB(255, 184, 0, 0)), - borderRadius: BorderRadius.all( - Radius.circular(50), - )), - hintText: 'Hello@gmail.com', - fillColor: Color.fromARGB(255, 239, 239, 239), - filled: true, - prefixIcon: Icon(Icons.email_outlined), + Padding( + padding: EdgeInsets.symmetric(horizontal: 10), + child: Text("ó"), + ), + Expanded( + child: Divider( + color: Colors.black38, + thickness: 1, + ), + ), + ], ), ), - ), - const Padding( + const Padding( + padding: EdgeInsets.only(bottom: 5), + child: Align( + alignment: Alignment.topLeft, + child: Text('Email', + style: TextStyle( + fontSize: 18.0, color: Color(0xFF65676B))), + ), + ), + FormEmail(controller: controller), + const Padding( padding: EdgeInsets.only(bottom: 5), child: Align( alignment: Alignment.topLeft, child: Text('Password', style: TextStyle( fontSize: 18.0, color: Color(0xFF65676B))), - )), - Padding( - padding: const EdgeInsets.only(bottom: 50), - child: TextFormField( - controller: controller.password, - obscureText: _obscureText, - validator: (value) { - if (value == null || value.isEmpty) { - return 'Por favor ingrese una contraseña'; - } - return null; - }, - decoration: InputDecoration( - enabledBorder: const OutlineInputBorder( - borderSide: BorderSide(color: Color(0xFFECECEC)), - borderRadius: BorderRadius.all( - Radius.circular(50), - )), - focusedBorder: const OutlineInputBorder( - borderSide: BorderSide(color: Color(0xFFECECEC)), - borderRadius: BorderRadius.all( - Radius.circular(50), - )), - border: const OutlineInputBorder( - borderSide: BorderSide(color: Color(0xFFECECEC)), - borderRadius: BorderRadius.all( - Radius.circular(50), - )), - errorBorder: const OutlineInputBorder( - borderSide: BorderSide( - color: Color.fromARGB(255, 184, 0, 0)), - borderRadius: BorderRadius.all( - Radius.circular(50), - )), - hintText: 'Contraseña', - fillColor: const Color.fromARGB(255, 239, 239, 239), - filled: true, - prefixIcon: const Icon(Icons.lock_outline), - suffixIcon: IconButton( - icon: Icon( - _obscureText - ? Icons.visibility - : Icons.visibility_off, - color: Colors.grey, - ), - onPressed: () { - setState(() { - _obscureText = !_obscureText; - }); - }, - ), ), ), - ), - Padding( - padding: const EdgeInsets.only(bottom: 40), - child: Center( - child: PrimaryButtom( - onPressed: () { - if (_formKey.currentState!.validate()) { - LoginEmailController.instance.loginUser( - controller.email.text.trim(), - controller.password.text.trim(), - ); - } - }, - label: 'Iniciar'), - ), - ), - RichText( - text: TextSpan( - style: const TextStyle( - fontSize: 16.0, - color: Color(0xFF65676B), - fontFamily: 'Poppins', - ), - children: [ - const TextSpan(text: 'No estas registrado? '), - WidgetSpan( - child: GestureDetector( - onTap: () { - Navigator.pushReplacementNamed( - context, '/register'); - }, - child: const Text( - 'Registrarse', - style: TextStyle( - fontSize: 16.0, - color: Color(0xFF2BA4EC), - fontWeight: FontWeight.w600, - ), + Padding( + padding: const EdgeInsets.only(bottom: 50), + child: TextFormField( + controller: controller.password, + obscureText: _obscureText, + validator: (value) { + if (value == null || value.isEmpty) { + return 'Por favor ingrese una contraseña'; + } + return null; + }, + decoration: InputDecoration( + enabledBorder: const OutlineInputBorder( + borderSide: + BorderSide(color: Color(0xFFECECEC)), + borderRadius: BorderRadius.all( + Radius.circular(50), + )), + focusedBorder: const OutlineInputBorder( + borderSide: + BorderSide(color: Color(0xFFECECEC)), + borderRadius: BorderRadius.all( + Radius.circular(50), + )), + border: const OutlineInputBorder( + borderSide: + BorderSide(color: Color(0xFFECECEC)), + borderRadius: BorderRadius.all( + Radius.circular(50), + )), + errorBorder: const OutlineInputBorder( + borderSide: BorderSide( + color: Color.fromARGB(255, 184, 0, 0)), + borderRadius: BorderRadius.all( + Radius.circular(50), + )), + hintText: 'Contraseña', + fillColor: const Color.fromARGB(255, 239, 239, 239), + filled: true, + prefixIcon: const Icon(Icons.lock_outline), + suffixIcon: IconButton( + icon: Icon( + _obscureText + ? Icons.visibility + : Icons.visibility_off, + color: Colors.grey, ), + onPressed: () { + setState(() { + _obscureText = !_obscureText; + }); + }, ), ), - ], + ), ), - ) - ]), + PaddingButtomBottom( + formKey: _formKey, controller: controller), + const RichTxtBottom() + ], + ), ), ), ], @@ -434,62 +357,17 @@ class _LoginEmailScreenState extends State { fontSize: 18.0, color: Color(0xFF65676B))), )), - Padding( - padding: const EdgeInsets.only(bottom: 20), - child: TextFormField( - controller: controller.email, - validator: (String? value) { - if (value == null || value.isEmpty) { - return 'Por favor ingrese un email'; - } - final RegExp emailRegExp = - RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$'); - if (!emailRegExp.hasMatch(value)) { - return 'Por favor ingrese un email válido'; - } - return null; - }, - decoration: const InputDecoration( - border: OutlineInputBorder( - borderSide: - BorderSide(color: Color(0xFFECECEC)), - borderRadius: BorderRadius.all( - Radius.circular(50), - )), - enabledBorder: OutlineInputBorder( - borderSide: - BorderSide(color: Color(0xFFECECEC)), - borderRadius: BorderRadius.all( - Radius.circular(50), - )), - focusedBorder: OutlineInputBorder( - borderSide: - BorderSide(color: Color(0xFFECECEC)), - borderRadius: BorderRadius.all( - Radius.circular(50), - )), - errorBorder: OutlineInputBorder( - borderSide: BorderSide( - color: Color.fromARGB(255, 184, 0, 0)), - borderRadius: BorderRadius.all( - Radius.circular(50), - )), - hintText: 'Hello@gmail.com', - fillColor: Color.fromARGB(255, 239, 239, 239), - filled: true, - prefixIcon: Icon(Icons.email_outlined), - ), + FormEmail(controller: controller), + const Padding( + padding: EdgeInsets.only(bottom: 5), + child: Align( + alignment: Alignment.topLeft, + child: Text('Password', + style: TextStyle( + fontSize: 18.0, + color: Color(0xFF65676B))), ), ), - const Padding( - padding: EdgeInsets.only(bottom: 5), - child: Align( - alignment: Alignment.topLeft, - child: Text('Password', - style: TextStyle( - fontSize: 18.0, - color: Color(0xFF65676B))), - )), Padding( padding: const EdgeInsets.only(bottom: 50), child: TextFormField( @@ -547,49 +425,9 @@ class _LoginEmailScreenState extends State { ), ), ), - Padding( - padding: const EdgeInsets.only(bottom: 40), - child: Center( - child: PrimaryButtom( - onPressed: () { - if (_formKey.currentState!.validate()) { - LoginEmailController.instance.loginUser( - controller.email.text.trim(), - controller.password.text.trim(), - ); - } - }, - label: 'Iniciar'), - ), - ), - RichText( - text: TextSpan( - style: const TextStyle( - fontSize: 16.0, - color: Color(0xFF65676B), - fontFamily: 'Poppins', - ), - children: [ - const TextSpan(text: 'No estas registrado? '), - WidgetSpan( - child: GestureDetector( - onTap: () { - Navigator.pushReplacementNamed( - context, '/register'); - }, - child: const Text( - 'Registrarse', - style: TextStyle( - fontSize: 16.0, - color: Color(0xFF2BA4EC), - fontWeight: FontWeight.w600, - ), - ), - ), - ), - ], - ), - ) + PaddingButtomBottom( + formKey: _formKey, controller: controller), + const RichTxtBottom() ]), ), ), @@ -603,3 +441,126 @@ class _LoginEmailScreenState extends State { ); } } + +class FormEmail extends StatelessWidget { + const FormEmail({ + super.key, + required this.controller, + }); + + final LoginEmailController controller; + + @override + Widget build(BuildContext context) { + return Padding( + padding: const EdgeInsets.only(bottom: 20), + child: TextFormField( + controller: controller.email, + validator: (String? value) { + if (value == null || value.isEmpty) { + return 'Por favor ingrese un email'; + } + final RegExp emailRegExp = + RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$'); + if (!emailRegExp.hasMatch(value)) { + return 'Por favor ingrese un email válido'; + } + return null; + }, + decoration: const InputDecoration( + border: OutlineInputBorder( + borderSide: BorderSide(color: Color(0xFFECECEC)), + borderRadius: BorderRadius.all( + Radius.circular(50), + )), + enabledBorder: OutlineInputBorder( + borderSide: BorderSide(color: Color(0xFFECECEC)), + borderRadius: BorderRadius.all( + Radius.circular(50), + )), + focusedBorder: OutlineInputBorder( + borderSide: BorderSide(color: Color(0xFFECECEC)), + borderRadius: BorderRadius.all( + Radius.circular(50), + )), + errorBorder: OutlineInputBorder( + borderSide: BorderSide(color: Color.fromARGB(255, 184, 0, 0)), + borderRadius: BorderRadius.all( + Radius.circular(50), + )), + hintText: 'Hello@gmail.com', + fillColor: Color.fromARGB(255, 239, 239, 239), + filled: true, + prefixIcon: Icon(Icons.email_outlined), + ), + ), + ); + } +} + +class PaddingButtomBottom extends StatelessWidget { + const PaddingButtomBottom({ + super.key, + required GlobalKey formKey, + required this.controller, + }) : _formKey = formKey; + + final GlobalKey _formKey; + final LoginEmailController controller; + + @override + Widget build(BuildContext context) { + return Padding( + padding: const EdgeInsets.only(bottom: 40), + child: Center( + child: PrimaryButtom( + onPressed: () { + if (_formKey.currentState!.validate()) { + LoginEmailController.instance.loginUser( + controller.email.text.trim(), + controller.password.text.trim(), + ); + } + }, + label: 'Iniciar'), + ), + ); + } +} + +class RichTxtBottom extends StatelessWidget { + const RichTxtBottom({ + super.key, + }); + + @override + Widget build(BuildContext context) { + return RichText( + text: TextSpan( + style: const TextStyle( + fontSize: 16.0, + color: Color(0xFF65676B), + fontFamily: 'Poppins', + ), + children: [ + const TextSpan(text: 'No estas registrado? '), + WidgetSpan( + child: GestureDetector( + onTap: () { + Navigator.pushReplacementNamed(context, '/register'); + }, + child: const Text( + 'Registrarse', + style: TextStyle( + fontSize: 16.0, + color: Color(0xFF2BA4EC), + fontWeight: FontWeight.w600, + ), + ), + ), + ), + ], + ), + ); + } +}