diff --git a/lib/src/screens/code_validation.dart b/lib/src/screens/code_validation.dart index df89178..63bd297 100644 --- a/lib/src/screens/code_validation.dart +++ b/lib/src/screens/code_validation.dart @@ -6,17 +6,25 @@ import 'package:prosappco/src/components/column_padding.dart'; import 'package:prosappco/src/components/primary_btn.dart'; import 'package:prosappco/src/controllers/otp_controller.dart'; import 'package:prosappco/src/controllers/phone_auth_controller.dart'; +import 'package:responsive_builder/responsive_builder.dart'; class CodeValidationScreen extends StatelessWidget { CodeValidationScreen({super.key, this.phoneNumber}); String? phoneNumber; + var otp; final controller = Get.put(OTPController()); @override Widget build(BuildContext context) { - var otp; + return ScreenTypeLayout.builder( + mobile: (BuildContext context) => _mobileView(context), + tablet: (BuildContext context) => _mobileView(context), + desktop: (BuildContext context) => _desktopView(context), + ); + } + Widget _mobileView(BuildContext context) { return BottomSheetExpanded( horizontalPadding: 10, children: [ @@ -121,4 +129,146 @@ class CodeValidationScreen extends StatelessWidget { ], ); } + + Widget _desktopView(BuildContext context) { + double height = MediaQuery.of(context).size.height; + double width = MediaQuery.of(context).size.width; + return Scaffold( + backgroundColor: const Color(0xFFD6F4FF), + body: SizedBox( + height: height, + width: width, + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Expanded( + child: SizedBox( + height: height, + child: const Center( + child: Image( + image: AssetImage('images/logo_prosapp.png'), + ), + ), + ), + ), + Expanded( + child: Container( + padding: EdgeInsets.symmetric(horizontal: width * 0.07), + color: Colors.white, + height: height, + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Row( + children: [ + IconButton( + icon: const Icon( + Icons.arrow_back, + size: 30, + ), + onPressed: () { + Navigator.pop(context); + }, + ), + SizedBox(width: width * 0.01), + const Text( + 'Validar código', + style: TextStyle( + color: Color(0xFF262626), + fontSize: 38.0, + fontWeight: FontWeight.bold, + ), + ), + ], + ), + ColumnPadding( + alineacion: MainAxisAlignment.start, + padding: const EdgeInsets.symmetric(horizontal: 25), + children: [ + const SizedBox(height: 10), + const SizedBox( + width: double.infinity, + child: Text( + 'Numero de celular', + style: TextStyle( + fontSize: 18.0, + color: Color(0xFF65676B), + ), + ), + ), + const SizedBox(height: 10), + Row( + children: [ + Expanded( + child: TextField( + onChanged: (value) { + phoneNumber = value; + }, + controller: TextEditingController( + text: phoneNumber ?? ''), + decoration: const InputDecoration( + border: InputBorder.none, + hintText: '', + suffixIcon: Icon(Icons.edit), + ), + ), + ), + TextButton( + child: const Text('Reenviar código'), + onPressed: () { + if (phoneNumber!.isNotEmpty) { + PhoneAuthController.instance + .phoneAuthentication( + phoneNumber!, + ); + } + }, + ), + ], + ), + const SizedBox(height: 10), + const SizedBox( + width: double.infinity, + child: Text( + 'Codigo', + textAlign: TextAlign.left, + style: TextStyle( + fontSize: 18.0, + color: Color(0xFF65676B), + ), + ), + ), + const SizedBox(height: 10), + OtpTextField( + numberOfFields: 6, + focusedBorderColor: Colors.blue, + fillColor: Colors.black.withOpacity(0.1), + filled: true, + keyboardType: TextInputType.number, + onSubmit: (code) { + otp = code; + OTPController.instance.verifyOTP(otp); + }, + ), + const SizedBox(height: 40), + PrimaryButtom( + onPressed: () { + OTPController.instance.verifyOTP(otp); + }, + label: 'Validar código', + ), + const SizedBox(height: 30), + ], + ), + ], + ), + ), + ), + ], + ), + ), + ); + } } diff --git a/lib/src/screens/login.dart b/lib/src/screens/login.dart index c2e4080..d258109 100644 --- a/lib/src/screens/login.dart +++ b/lib/src/screens/login.dart @@ -162,165 +162,163 @@ class _LoginScreenState extends State { double height = MediaQuery.of(context).size.height; double width = MediaQuery.of(context).size.width; return Scaffold( - backgroundColor: const Color(0xFFD6F4FF), - body: SizedBox( - height: height, - width: width, - child: Row( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisAlignment: MainAxisAlignment.start, - children: [ - Expanded( - child: SizedBox( - height: height, - child: const Center( - child: Image( - image: AssetImage('images/logo_prosapp.png'), - ), + backgroundColor: const Color(0xFFD6F4FF), + body: SizedBox( + height: height, + width: width, + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Expanded( + child: SizedBox( + height: height, + child: const Center( + child: Image( + image: AssetImage('images/logo_prosapp.png'), ), ), ), - Expanded( - child: Container( - padding: EdgeInsets.symmetric(horizontal: width * 0.1), - color: Colors.white, - height: height, - child: Column( - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisAlignment: MainAxisAlignment.center, - children: [ - const SizedBox( - width: double.infinity, - child: Text( - 'Iniciar sesión', - style: TextStyle( - color: Color(0xFF262626), - fontSize: 38.0, - fontWeight: FontWeight.bold, - ), - ), - ), - const SizedBox(height: 20), - const SizedBox( - width: double.infinity, - child: Text( - 'Numero de celular', - style: TextStyle( - fontSize: 18.0, - color: Color(0xFF65676B), - ), - ), - ), - Form( - key: _formKey, - child: IntlPhoneField( - controller: controller.phoneNo, - initialCountryCode: 'CO', - keyboardType: TextInputType.number, - onChanged: (phoneNo) { - completePhoneNumber = phoneNo.completeNumber; - }, - decoration: const InputDecoration( - border: 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), - )), - 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), - )), - fillColor: Color.fromARGB(255, 239, 239, 239), - filled: true, - ), - ), - ), - const Text( - 'Un código será enviado a este numero de celular.', - textAlign: TextAlign.center, + ), + Expanded( + child: Container( + padding: EdgeInsets.symmetric(horizontal: width * 0.1), + color: Colors.white, + height: height, + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + const SizedBox( + width: double.infinity, + child: Text( + 'Iniciar sesión', style: TextStyle( - fontSize: 13.0, + color: Color(0xFF262626), + fontSize: 38.0, + fontWeight: FontWeight.bold, + ), + ), + ), + const SizedBox(height: 20), + const SizedBox( + width: double.infinity, + child: Text( + 'Numero de celular', + style: TextStyle( + fontSize: 18.0, color: Color(0xFF65676B), ), ), - const SizedBox(height: 20), - PrimaryButtom( - onPressed: () { - if (_formKey.currentState!.validate()) { - PhoneAuthController.instance.phoneAuthentication( - completePhoneNumber.trim(), - ); - Get.to( - () => CodeValidationScreen( - phoneNumber: completePhoneNumber.trim(), - ), - ); - } + ), + Form( + key: _formKey, + child: IntlPhoneField( + controller: controller.phoneNo, + initialCountryCode: 'CO', + keyboardType: TextInputType.number, + onChanged: (phoneNo) { + completePhoneNumber = phoneNo.completeNumber; }, - label: 'Enviar código', - ), - const SizedBox(height: 20), - GestureDetector( - onTap: () { - Navigator.pushNamed(context, '/login'); - }, - child: const Text( - 'Entrar con correo electronico', - style: TextStyle( - fontSize: 15.0, color: Color(0xFF65676B), - decoration: TextDecoration.underline, // Subrayado - ), + decoration: const InputDecoration( + border: 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), + )), + 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), + )), + fillColor: Color.fromARGB(255, 239, 239, 239), + filled: true, ), ), - const SizedBox(height: 20), - 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.pushNamed(context, '/register'); - }, - child: const Text( - 'Registrarse', - style: TextStyle( - fontSize: 16.0, - color: Color(0xFF2BA4EC), - fontWeight: FontWeight.w600, - ), + ), + const Text( + 'Un código será enviado a este numero de celular.', + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 13.0, + color: Color(0xFF65676B), + ), + ), + const SizedBox(height: 20), + PrimaryButtom( + onPressed: () { + if (_formKey.currentState!.validate()) { + PhoneAuthController.instance.phoneAuthentication( + completePhoneNumber.trim(), + ); + Get.to( + () => CodeValidationScreen( + phoneNumber: completePhoneNumber.trim(), + ), + ); + } + }, + label: 'Enviar código', + ), + const SizedBox(height: 20), + GestureDetector( + onTap: () { + Navigator.pushNamed(context, '/login'); + }, + child: const Text( + 'Entrar con correo electronico', + style: TextStyle( + fontSize: 15.0, color: Color(0xFF65676B), + decoration: TextDecoration.underline, // Subrayado + ), + ), + ), + const SizedBox(height: 20), + 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.pushNamed(context, '/register'); + }, + child: const Text( + 'Registrarse', + style: TextStyle( + fontSize: 16.0, + color: Color(0xFF2BA4EC), + fontWeight: FontWeight.w600, ), ), ), - ], - ), + ), + ], ), - ], - ), + ), + ], ), ), - ], - ), - )); + ), + ], + ), + ), + ); } } diff --git a/lib/src/screens/login_email.dart b/lib/src/screens/login_email.dart index e17bff4..a4ebaa2 100644 --- a/lib/src/screens/login_email.dart +++ b/lib/src/screens/login_email.dart @@ -4,6 +4,7 @@ import 'package:get/get.dart'; import 'package:prosappco/src/authentication/authentication_repository.dart'; import 'package:prosappco/src/components/primary_btn.dart'; import 'package:prosappco/src/controllers/login_email_controller.dart'; +import 'package:responsive_builder/responsive_builder.dart'; class LoginEmailScreen extends StatefulWidget { const LoginEmailScreen({super.key}); @@ -19,283 +20,591 @@ class _LoginEmailScreenState extends State { @override Widget build(BuildContext context) { + return ScreenTypeLayout.builder( + mobile: (BuildContext context) => _mobileView(context), + tablet: (BuildContext context) => _mobileView(context), + desktop: (BuildContext context) => _desktopView(context), + ); + } + + Widget _mobileView(BuildContext context) { return SafeArea( - child: Scaffold( - backgroundColor: const Color(0xFFD6F4FF), - body: SingleChildScrollView( - reverse: true, - child: Stack( - children: [ - Container( - margin: const EdgeInsets.only(top: 130), - width: double.infinity, - height: 700, - decoration: const BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.only( - topRight: Radius.circular(50), - topLeft: Radius.circular(50))), - ), - Container( - margin: const EdgeInsets.only(top: 20, left: 30), - child: const Image( - image: AssetImage('images/logo_prosapp.png'), - width: 180, - height: 100, + child: Scaffold( + backgroundColor: const Color(0xFFD6F4FF), + body: SingleChildScrollView( + reverse: true, + child: Stack( + children: [ + Container( + margin: const EdgeInsets.only(top: 130), + width: double.infinity, + height: 700, + decoration: const BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.only( + topRight: Radius.circular(50), + topLeft: Radius.circular(50))), ), - ), - Container( - padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 20), - margin: const EdgeInsets.only( - top: 125, - left: 25, + Container( + margin: const EdgeInsets.only(top: 20, left: 30), + child: const Image( + image: AssetImage('images/logo_prosapp.png'), + width: 180, + height: 100, + ), ), - child: Row( - children: [ - IconButton( - icon: const Icon( - Icons.arrow_back, - size: 30, - ), - onPressed: () { - Navigator.pop(context); - }, - ), - const Text( - 'Iniciar sesión', - style: TextStyle( - color: Color(0xFF262626), - fontSize: 38.0, - fontWeight: FontWeight.bold, - ), - textAlign: TextAlign.right, - ), - ], - ), - ), - Form( - key: _formKey, - child: Container( + Container( 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, - ), - ), - 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, - ), - ), - Padding( - padding: EdgeInsets.symmetric(horizontal: 10), - child: Text("ó"), - ), - Expanded( - child: Divider( - color: Colors.black38, - thickness: 1, - ), - ), - ], + margin: const EdgeInsets.only( + top: 125, + left: 25, + ), + child: Row( + children: [ + IconButton( + icon: const Icon( + Icons.arrow_back, + size: 30, + ), + onPressed: () { + Navigator.pop(context); + }, ), - ), - const Padding( + const Text( + 'Iniciar sesión', + style: TextStyle( + color: Color(0xFF262626), + fontSize: 38.0, + fontWeight: FontWeight.bold, + ), + textAlign: TextAlign.right, + ), + ], + ), + ), + Form( + key: _formKey, + child: Container( + 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, + ), + ), + 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, + ), + ), + Padding( + padding: EdgeInsets.symmetric(horizontal: 10), + child: Text("ó"), + ), + 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), ), ), - ), - 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: 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: 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', + const Padding( + padding: EdgeInsets.only(bottom: 5), + child: Align( + alignment: Alignment.topLeft, + child: Text('Password', style: TextStyle( - fontSize: 16.0, - color: Color(0xFF2BA4EC), - fontWeight: FontWeight.w600, + 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, + ), ), ), ), + ], + ), + ) + ]), + ), + ), + ], + ), + ), + ), + ); + } + + Widget _desktopView(BuildContext context) { + double height = MediaQuery.of(context).size.height; + double width = MediaQuery.of(context).size.width; + return Scaffold( + backgroundColor: const Color(0xFFD6F4FF), + body: SizedBox( + height: height, + width: width, + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Expanded( + child: SizedBox( + height: height, + child: const Center( + child: Image( + image: AssetImage('images/logo_prosapp.png'), + ), + ), + ), + ), + Expanded( + child: Container( + color: Colors.white, + height: height, + child: SingleChildScrollView( + padding: EdgeInsets.symmetric(horizontal: width * 0.07), + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Row( + children: [ + IconButton( + icon: const Icon( + Icons.arrow_back, + size: 30, + ), + onPressed: () { + Navigator.pop(context); + }, + ), + SizedBox(width: width * 0.01), + const Text( + 'Iniciar sesión', + style: TextStyle( + color: Color(0xFF262626), + fontSize: 38.0, + fontWeight: FontWeight.bold, + ), + textAlign: TextAlign.right, + ), + ], + ), + Form( + key: _formKey, + child: Container( + padding: const EdgeInsets.symmetric( + horizontal: 0, vertical: 20), + 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, + ), + ), + 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, + ), + ), + Padding( + padding: + EdgeInsets.symmetric(horizontal: 10), + child: Text("ó"), + ), + 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), + ), + ), + ), + 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, + ), + ), + ), + ), + ], + ), + ) + ]), ), - ], - ), - ) - ]), + ), + ], + ), + ), ), ), ], ), ), - )); + ); } } diff --git a/lib/src/screens/register.dart b/lib/src/screens/register.dart index 1c1d3e8..4bf3824 100644 --- a/lib/src/screens/register.dart +++ b/lib/src/screens/register.dart @@ -8,6 +8,7 @@ import 'package:prosappco/src/components/primary_btn.dart'; import 'package:prosappco/src/controllers/register_controller.dart'; import 'package:prosappco/src/screens/login.dart'; import 'package:provider/provider.dart'; +import 'package:responsive_builder/responsive_builder.dart'; class RegisterScreen extends StatefulWidget { const RegisterScreen({super.key}); @@ -23,302 +24,634 @@ class _RegisterScreenState extends State { @override Widget build(BuildContext context) { + return ScreenTypeLayout.builder( + mobile: (BuildContext context) => _mobileView(context), + tablet: (BuildContext context) => _mobileView(context), + desktop: (BuildContext context) => _desktopView(context), + ); + } + + Widget _mobileView(BuildContext context) { return SafeArea( - child: Scaffold( - backgroundColor: const Color(0xFFD6F4FF), - body: GestureDetector( - onTap: () => FocusScope.of(context).unfocus(), - child: SingleChildScrollView( - reverse: true, - child: Stack( - children: [ - Container( - margin: const EdgeInsets.only(top: 130), - width: double.infinity, - height: 700, - decoration: const BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.only( - topRight: Radius.circular(50), - topLeft: Radius.circular(50))), - ), - Container( - margin: const EdgeInsets.only(top: 20, left: 30), - child: const Image( - image: AssetImage('images/logo_prosapp.png'), - width: 180, - height: 100, + child: Scaffold( + backgroundColor: const Color(0xFFD6F4FF), + body: GestureDetector( + onTap: () => FocusScope.of(context).unfocus(), + child: SingleChildScrollView( + reverse: true, + child: Stack( + children: [ + Container( + margin: const EdgeInsets.only(top: 130), + width: double.infinity, + height: 700, + decoration: const BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.only( + topRight: Radius.circular(50), + topLeft: Radius.circular(50))), ), - ), - Container( - padding: - const EdgeInsets.symmetric(horizontal: 0, vertical: 20), - margin: const EdgeInsets.only( - top: 125, - left: 25, + Container( + margin: const EdgeInsets.only(top: 20, left: 30), + child: const Image( + image: AssetImage('images/logo_prosapp.png'), + width: 180, + height: 100, + ), ), - child: Row( - children: [ - IconButton( - icon: const Icon( - Icons.arrow_back, - size: 30, - ), - onPressed: () { - Navigator.pop(context); - }, - ), - const Text( - 'Registro', - style: TextStyle( - color: Color(0xFF262626), - fontSize: 38.0, - fontWeight: FontWeight.bold, - ), - textAlign: TextAlign.right, - ), - ], - ), - ), - Container( - padding: - const EdgeInsets.symmetric(horizontal: 0, vertical: 20), - margin: const EdgeInsets.only(top: 200, 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), + Container( + padding: + const EdgeInsets.symmetric(horizontal: 0, vertical: 20), + margin: const EdgeInsets.only( + top: 125, + left: 25, + ), + child: Row( + children: [ + IconButton( + icon: const Icon( + Icons.arrow_back, + size: 30, ), + onPressed: () { + Navigator.pop(context); + }, + ), + const Text( + 'Registro', + style: TextStyle( + color: Color(0xFF262626), + fontSize: 38.0, + fontWeight: FontWeight.bold, + ), + textAlign: TextAlign.right, + ), + ], + ), + ), + Container( + padding: + const EdgeInsets.symmetric(horizontal: 0, vertical: 20), + margin: const EdgeInsets.only(top: 200, 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, + ), + ), + SizedBox(width: 5), + FaIcon(FontAwesomeIcons.google), + ], + )), + ), + Padding( + padding: const EdgeInsets.symmetric(vertical: 0), child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: const [ - Text( - 'Entrar con Google ', - style: TextStyle( - color: Colors.white, - fontWeight: FontWeight.bold, - fontSize: 18, + children: const [ + Expanded( + child: Divider( + color: Colors.black38, + thickness: 1, ), ), - SizedBox(width: 5), - FaIcon(FontAwesomeIcons.google), - ], - )), - ), - Padding( - padding: const EdgeInsets.symmetric(vertical: 0), - child: Row( - children: const [ - Expanded( - child: Divider( - color: Colors.black38, - thickness: 1, - ), - ), - Padding( - padding: EdgeInsets.symmetric(horizontal: 10), - child: Text("ó"), - ), - Expanded( - child: Divider( - color: Colors.black38, - thickness: 1, - ), - ), - ], - ), - ), - Form( - key: _formKey, - child: Column( - children: [ - 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: 18), - 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("ó"), ), - ), - 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: 25), - child: TextFormField( - controller: controller.password, - obscureText: _obscureText, - validator: (value) { - if (value == null || value.isEmpty) { - return 'Por favor ingrese una contraseña'; - } - if (value.length <= 6) { - return 'Contraseña muy corta'; - } - return null; - }, - decoration: InputDecoration( - errorBorder: const OutlineInputBorder( - borderSide: BorderSide( - color: Color.fromARGB(255, 184, 0, 0)), - borderRadius: BorderRadius.all( - Radius.circular(50), - )), - enabledBorder: 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), - )), - focusedBorder: const OutlineInputBorder( - borderSide: - BorderSide(color: Color(0xFFECECEC)), - 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; - }); + Expanded( + child: Divider( + color: Colors.black38, + thickness: 1, + ), + ), + ], + ), + ), + Form( + key: _formKey, + child: Column( + children: [ + 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: 18), + 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)), + ), + ), + 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: 25), + child: TextFormField( + controller: controller.password, + obscureText: _obscureText, + validator: (value) { + if (value == null || value.isEmpty) { + return 'Por favor ingrese una contraseña'; + } + if (value.length <= 6) { + return 'Contraseña muy corta'; + } + return null; + }, + decoration: InputDecoration( + errorBorder: const OutlineInputBorder( + borderSide: BorderSide( + color: + Color.fromARGB(255, 184, 0, 0)), + borderRadius: BorderRadius.all( + Radius.circular(50), + )), + enabledBorder: 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), + )), + focusedBorder: const OutlineInputBorder( + borderSide: BorderSide( + color: Color(0xFFECECEC)), + 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: 25), + child: Center( + child: PrimaryButtom( + onPressed: () { + if (_formKey.currentState!.validate()) { + RegisterController.instance.registerUser( + controller.email.text.trim(), + controller.password.text.trim(), + ); + } + }, + label: 'Registrarme', + ), + ), + ), + RichText( + text: TextSpan( + style: const TextStyle( + fontSize: 16.0, + color: Color(0xFF65676B), + fontFamily: 'Poppins', + ), + children: [ + const TextSpan(text: 'Ya estas registrado? '), + WidgetSpan( + child: GestureDetector( + onTap: () { + Navigator.pushReplacementNamed( + context, '/login'); + }, + child: const Text( + 'Iniciar Sesión', + style: TextStyle( + fontSize: 16.0, + color: Color(0xFF2BA4EC), + fontWeight: FontWeight.w600, + ), ), ), ), - ), - ], - )), - Padding( - padding: const EdgeInsets.only(bottom: 25), - child: Center( - child: PrimaryButtom( - onPressed: () { - if (_formKey.currentState!.validate()) { - RegisterController.instance.registerUser( - controller.email.text.trim(), - controller.password.text.trim(), - ); - } - }, - label: 'Registrarme', - ), - ), - ), - RichText( - text: TextSpan( - style: const TextStyle( - fontSize: 16.0, - color: Color(0xFF65676B), - fontFamily: 'Poppins', - ), - children: [ - const TextSpan(text: 'Ya estas registrado? '), - WidgetSpan( - child: GestureDetector( - onTap: () { - Navigator.pushReplacementNamed(context, '/login'); - }, - child: const Text( - 'Iniciar Sesión', - style: TextStyle( - fontSize: 16.0, - color: Color(0xFF2BA4EC), - fontWeight: FontWeight.w600, - ), - ), - ), + ], ), - ], - ), - ) - ]), - ), - ], + ) + ], + ), + ), + ], + ), ), ), ), - )); + ); + } + + Widget _desktopView(BuildContext context) { + double height = MediaQuery.of(context).size.height; + double width = MediaQuery.of(context).size.width; + return Scaffold( + backgroundColor: const Color(0xFFD6F4FF), + body: SizedBox( + height: height, + width: width, + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Expanded( + child: SizedBox( + height: height, + child: const Center( + child: Image( + image: AssetImage('images/logo_prosapp.png'), + ), + ), + ), + ), + Expanded( + child: Container( + color: Colors.white, + height: height, + child: SingleChildScrollView( + padding: EdgeInsets.symmetric(horizontal: width * 0.07), + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Container( + padding: const EdgeInsets.symmetric( + horizontal: 0, vertical: 20), + child: Row( + children: [ + IconButton( + icon: const Icon( + Icons.arrow_back, + size: 30, + ), + onPressed: () { + Navigator.pop(context); + }, + ), + SizedBox(width: width * 0.01), + const Text( + 'Registro', + style: TextStyle( + color: Color(0xFF262626), + fontSize: 38.0, + fontWeight: FontWeight.bold, + ), + textAlign: TextAlign.right, + ), + ], + ), + ), + Container( + padding: const EdgeInsets.symmetric( + horizontal: 0, vertical: 20), + 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, + ), + ), + SizedBox(width: 5), + FaIcon(FontAwesomeIcons.google), + ], + )), + ), + Padding( + padding: const EdgeInsets.symmetric(vertical: 0), + child: Row( + children: const [ + Expanded( + child: Divider( + color: Colors.black38, + thickness: 1, + ), + ), + Padding( + padding: + EdgeInsets.symmetric(horizontal: 10), + child: Text("ó"), + ), + Expanded( + child: Divider( + color: Colors.black38, + thickness: 1, + ), + ), + ], + ), + ), + Form( + key: _formKey, + child: Column( + children: [ + 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: 18), + 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)), + ), + ), + 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: 25), + child: TextFormField( + controller: controller.password, + obscureText: _obscureText, + validator: (value) { + if (value == null || value.isEmpty) { + return 'Por favor ingrese una contraseña'; + } + if (value.length <= 6) { + return 'Contraseña muy corta'; + } + return null; + }, + decoration: InputDecoration( + errorBorder: const OutlineInputBorder( + borderSide: BorderSide( + color: Color.fromARGB( + 255, 184, 0, 0)), + borderRadius: BorderRadius.all( + Radius.circular(50), + )), + enabledBorder: + 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), + )), + focusedBorder: + const OutlineInputBorder( + borderSide: BorderSide( + color: Color(0xFFECECEC)), + 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: 25), + child: Center( + child: PrimaryButtom( + onPressed: () { + if (_formKey.currentState!.validate()) { + RegisterController.instance.registerUser( + controller.email.text.trim(), + controller.password.text.trim(), + ); + } + }, + label: 'Registrarme', + ), + ), + ), + RichText( + text: TextSpan( + style: const TextStyle( + fontSize: 16.0, + color: Color(0xFF65676B), + fontFamily: 'Poppins', + ), + children: [ + const TextSpan(text: 'Ya estas registrado? '), + WidgetSpan( + child: GestureDetector( + onTap: () { + Navigator.pushReplacementNamed( + context, '/login'); + }, + child: const Text( + 'Iniciar Sesión', + style: TextStyle( + fontSize: 16.0, + color: Color(0xFF2BA4EC), + fontWeight: FontWeight.w600, + ), + ), + ), + ), + ], + ), + ) + ], + ), + ), + ], + ), + ), + ), + ), + ], + ), + ), + ); } }