feat: redesign auth layout and login view with ProsApp logo
- auth_layout: gradient header (mobile) / split panel (desktop) - background_auth: gradient blue with network logo, tagline and feature list - custom_title: network logo replacing local asset - login_view: consistent UI matching phone_login_view (inputs, buttons, links to register/phone login, brand colors) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
cc18246e1f
commit
bf3c380e8e
+114
-77
@@ -1,11 +1,8 @@
|
||||
import 'package:email_validator/email_validator.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:prosapp_web_app/providers/auth_provider.dart';
|
||||
import 'package:prosapp_web_app/providers/login_form_provider.dart';
|
||||
import 'package:prosapp_web_app/router/router.dart';
|
||||
import 'package:prosapp_web_app/ui/buttons/custom_outlined_button.dart';
|
||||
import 'package:prosapp_web_app/ui/buttons/link_text.dart';
|
||||
import 'package:prosapp_web_app/ui/inputs/custom_inputs.dart';
|
||||
import 'package:email_validator/email_validator.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
class LoginView extends StatelessWidget {
|
||||
@@ -18,89 +15,111 @@ class LoginView extends StatelessWidget {
|
||||
return ChangeNotifierProvider(
|
||||
create: (_) => LoginFormProvider(),
|
||||
child: Builder(builder: (context) {
|
||||
final loginFormProvider =
|
||||
Provider.of<LoginFormProvider>(context, listen: false);
|
||||
final loginFormProvider = Provider.of<LoginFormProvider>(context, listen: false);
|
||||
|
||||
return Container(
|
||||
margin: const EdgeInsets.only(top: 100),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 20),
|
||||
child: Center(
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxWidth: 370),
|
||||
return Center(
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxWidth: 400),
|
||||
child: SingleChildScrollView(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 28, vertical: 16),
|
||||
child: Form(
|
||||
autovalidateMode: AutovalidateMode.onUserInteraction,
|
||||
key: loginFormProvider.formKey,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const Text('Iniciar sesión',
|
||||
style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
|
||||
const SizedBox(height: 4),
|
||||
const Text('Ingresa con tu cuenta de email',
|
||||
style: TextStyle(color: Colors.grey, fontSize: 13)),
|
||||
const SizedBox(height: 28),
|
||||
|
||||
// Email
|
||||
TextFormField(
|
||||
onFieldSubmitted: (_) =>
|
||||
onFormSubmit(loginFormProvider, authProvider),
|
||||
validator: (value) {
|
||||
if (!EmailValidator.validate(value ?? '')) {
|
||||
return 'Email no válido';
|
||||
}
|
||||
return null;
|
||||
},
|
||||
onChanged: (value) => loginFormProvider.email = value,
|
||||
decoration: CustomInputs.loginInputDecoration(
|
||||
hint: 'Ingresa tu correo',
|
||||
label: 'Email',
|
||||
icon: Icons.email_outlined,
|
||||
),
|
||||
keyboardType: TextInputType.emailAddress,
|
||||
onFieldSubmitted: (_) => _submit(loginFormProvider, authProvider),
|
||||
validator: (v) => EmailValidator.validate(v ?? '') ? null : 'Email no válido',
|
||||
onChanged: (v) => loginFormProvider.email = v,
|
||||
decoration: _inputDecoration('Email', 'correo@ejemplo.com', Icons.email_outlined),
|
||||
),
|
||||
|
||||
const SizedBox(height: 20),
|
||||
const SizedBox(height: 16),
|
||||
|
||||
// Password
|
||||
TextFormField(
|
||||
onFieldSubmitted: (_) =>
|
||||
onFormSubmit(loginFormProvider, authProvider),
|
||||
validator: (value) {
|
||||
if (value == null || value.isEmpty) {
|
||||
return "Ingresa tu contraseña";
|
||||
}
|
||||
|
||||
if (value.length < 8) {
|
||||
return "La contraseña debe tener al menos 8 caracteres";
|
||||
}
|
||||
|
||||
return null; // Válido
|
||||
},
|
||||
onChanged: (value) => loginFormProvider.password = value,
|
||||
obscureText: true,
|
||||
decoration: CustomInputs.loginInputDecoration(
|
||||
hint: 'Ingresa tu contraseña',
|
||||
label: 'Contraseña',
|
||||
icon: Icons.lock_outline,
|
||||
onFieldSubmitted: (_) => _submit(loginFormProvider, authProvider),
|
||||
validator: (v) {
|
||||
if (v == null || v.isEmpty) return 'Ingresa tu contraseña';
|
||||
if (v.length < 6) return 'Mínimo 6 caracteres';
|
||||
return null;
|
||||
},
|
||||
onChanged: (v) => loginFormProvider.password = v,
|
||||
decoration: _inputDecoration('Contraseña', '••••••••', Icons.lock_outline),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
child: ElevatedButton(
|
||||
onPressed: () => _submit(loginFormProvider, authProvider),
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: const Color(0xFF42A4EF),
|
||||
foregroundColor: Colors.white,
|
||||
padding: const EdgeInsets.symmetric(vertical: 16),
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
|
||||
elevation: 0,
|
||||
),
|
||||
child: const Text('Ingresar',
|
||||
style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600)),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
const SizedBox(height: 20),
|
||||
Row(children: const [
|
||||
Expanded(child: Divider()),
|
||||
Padding(
|
||||
padding: EdgeInsets.symmetric(horizontal: 12),
|
||||
child: Text('o', style: TextStyle(color: Colors.grey))),
|
||||
Expanded(child: Divider()),
|
||||
]),
|
||||
const SizedBox(height: 16),
|
||||
|
||||
CustomOutlinedButton(
|
||||
onPressed: () =>
|
||||
onFormSubmit(loginFormProvider, authProvider),
|
||||
text: "Ingresar",
|
||||
color: Colors.blue,
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
child: OutlinedButton.icon(
|
||||
onPressed: () =>
|
||||
Navigator.pushReplacementNamed(context, Flurorouter.phoneLoginRoute),
|
||||
icon: const Icon(Icons.phone_android, color: Color(0xFF42A4EF)),
|
||||
label: const Text('Ingresar con celular',
|
||||
style: TextStyle(color: Color(0xFF42A4EF), fontWeight: FontWeight.w600)),
|
||||
style: OutlinedButton.styleFrom(
|
||||
padding: const EdgeInsets.symmetric(vertical: 14),
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
|
||||
side: const BorderSide(color: Color(0xFF42A4EF)),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
const SizedBox(height: 12),
|
||||
|
||||
LinkText(
|
||||
text: "Nueva cuenta",
|
||||
onPressed: () {
|
||||
Navigator.pushReplacementNamed(
|
||||
context, Flurorouter.registerRoute);
|
||||
},
|
||||
),
|
||||
const SizedBox(height: 5),
|
||||
|
||||
LinkText(
|
||||
text: "Entrar con celular",
|
||||
onPressed: () {
|
||||
Navigator.pushReplacementNamed(
|
||||
context, Flurorouter.phoneLoginRoute);
|
||||
},
|
||||
Center(
|
||||
child: TextButton(
|
||||
onPressed: () =>
|
||||
Navigator.pushReplacementNamed(context, Flurorouter.registerRoute),
|
||||
child: RichText(
|
||||
text: const TextSpan(
|
||||
style: TextStyle(color: Colors.grey, fontSize: 13),
|
||||
children: [
|
||||
TextSpan(text: '¿No tienes cuenta? '),
|
||||
TextSpan(
|
||||
text: 'Regístrate',
|
||||
style: TextStyle(
|
||||
color: Color(0xFF42A4EF), fontWeight: FontWeight.w600),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -112,14 +131,32 @@ class LoginView extends StatelessWidget {
|
||||
);
|
||||
}
|
||||
|
||||
void onFormSubmit(
|
||||
LoginFormProvider loginFormProvider, AuthProvider authProvider) async {
|
||||
final isValid = loginFormProvider.validateForm();
|
||||
if (isValid) {
|
||||
await authProvider.login(
|
||||
loginFormProvider.email,
|
||||
loginFormProvider.password,
|
||||
);
|
||||
InputDecoration _inputDecoration(String label, String hint, IconData icon) {
|
||||
return InputDecoration(
|
||||
labelText: label,
|
||||
hintText: hint,
|
||||
prefixIcon: Icon(icon, color: const Color(0xFF42A4EF)),
|
||||
filled: true,
|
||||
fillColor: const Color(0xFFF5F8FF),
|
||||
border: OutlineInputBorder(borderRadius: BorderRadius.circular(10), borderSide: BorderSide.none),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
borderSide: const BorderSide(color: Color(0xFFE0E7FF))),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
borderSide: const BorderSide(color: Color(0xFF42A4EF), width: 2)),
|
||||
errorBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
borderSide: const BorderSide(color: Colors.red)),
|
||||
focusedErrorBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
borderSide: const BorderSide(color: Colors.red, width: 2)),
|
||||
);
|
||||
}
|
||||
|
||||
void _submit(LoginFormProvider form, AuthProvider auth) async {
|
||||
if (form.validateForm()) {
|
||||
await auth.login(form.email, form.password);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user