Co-authored-by: eddgranados12 <eddgranados12@users.noreply.github.com>
Co-authored-by: MENDOZA BALLARDO GAEL RICARDO <gael-meb123@users.noreply.github.com> Co-authored-by: Azareth-Tr <Azareth-Tr@users.noreply.github.com> modificacion de vistas panel admin, login, animaciones y implementacion de mascota
This commit is contained in:
@@ -1,12 +1,13 @@
|
||||
import 'package:dio/dio.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:dio/dio.dart';
|
||||
|
||||
import '../../core/models/auth_state.dart';
|
||||
import '../../core/services/auth_controller.dart';
|
||||
import '../../core/theme/app_theme.dart';
|
||||
import '../../core/widgets/app_widgets.dart';
|
||||
import '../../core/services/auth_controller.dart';
|
||||
import '../../core/models/auth_state.dart';
|
||||
import 'widgets/video_mascot.dart';
|
||||
|
||||
class LoginPage extends ConsumerStatefulWidget {
|
||||
const LoginPage({super.key});
|
||||
@@ -30,23 +31,18 @@ class _LoginPageState extends ConsumerState<LoginPage> {
|
||||
) {
|
||||
if (!mounted) return;
|
||||
if (next is AsyncError) {
|
||||
String errorMessage = 'Ocurrió un error inesperado';
|
||||
final error = next.error;
|
||||
|
||||
String msg = 'Ocurrió un error inesperado';
|
||||
if (error is DioException) {
|
||||
if (error.response?.data != null && error.response?.data is Map) {
|
||||
errorMessage =
|
||||
error.response!.data['detail'] ?? 'Credenciales inválidas';
|
||||
} else {
|
||||
errorMessage = 'Error de conexión con el servidor';
|
||||
}
|
||||
msg = (error.response?.data is Map)
|
||||
? error.response!.data['detail'] ?? 'Credenciales inválidas'
|
||||
: 'Error de conexión con el servidor';
|
||||
} else {
|
||||
errorMessage = error.toString();
|
||||
msg = error.toString();
|
||||
}
|
||||
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(
|
||||
content: Text(errorMessage),
|
||||
content: Text(msg),
|
||||
backgroundColor: AppTheme.danger,
|
||||
behavior: SnackBarBehavior.floating,
|
||||
),
|
||||
@@ -72,171 +68,189 @@ class _LoginPageState extends ConsumerState<LoginPage> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final loading = ref.watch(authControllerProvider).isLoading;
|
||||
final screenH = MediaQuery.of(context).size.height;
|
||||
|
||||
return Scaffold(
|
||||
backgroundColor: AppTheme.background,
|
||||
appBar: AppBar(
|
||||
backgroundColor: Colors.transparent,
|
||||
elevation: 0,
|
||||
iconTheme: const IconThemeData(color: AppTheme.textPrimary),
|
||||
title: const Text(
|
||||
'Iniciar sesión',
|
||||
style: TextStyle(color: AppTheme.textPrimary, fontSize: 16),
|
||||
),
|
||||
),
|
||||
body: SafeArea(
|
||||
child: SingleChildScrollView(
|
||||
padding: const EdgeInsets.all(24),
|
||||
child: Form(
|
||||
key: _formKey,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const SizedBox(height: 8),
|
||||
body: Column(
|
||||
children: [
|
||||
// ── Cabecera verde con mascota ─────────────────────────────
|
||||
_GreenHeader(height: screenH * 0.38),
|
||||
|
||||
// ── Encabezado ──────────────────────────────────────────
|
||||
Row(
|
||||
// ── Formulario ─────────────────────────────────────────────
|
||||
Expanded(
|
||||
child: SingleChildScrollView(
|
||||
padding: const EdgeInsets.fromLTRB(24, 28, 24, 24),
|
||||
child: Form(
|
||||
key: _formKey,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Container(
|
||||
width: 48,
|
||||
height: 48,
|
||||
decoration: BoxDecoration(
|
||||
color: AppTheme.primaryLight,
|
||||
borderRadius: BorderRadius.circular(AppTheme.radiusMd),
|
||||
),
|
||||
child: const Icon(
|
||||
Icons.delete_outline_rounded,
|
||||
color: AppTheme.primary,
|
||||
size: 26,
|
||||
AppFormField(
|
||||
label: 'Correo electrónico',
|
||||
hint: 'tu@correo.com',
|
||||
controller: _emailCtrl,
|
||||
keyboardType: TextInputType.emailAddress,
|
||||
validator: (v) => (v == null || v.trim().isEmpty)
|
||||
? 'Ingresa tu correo'
|
||||
: null,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
AppFormField(
|
||||
label: 'Contraseña',
|
||||
hint: '••••••••',
|
||||
controller: _passCtrl,
|
||||
obscureText: _obscurePass,
|
||||
validator: (v) => (v == null || v.length < 6)
|
||||
? 'Mínimo 6 caracteres'
|
||||
: null,
|
||||
suffix: IconButton(
|
||||
icon: Icon(
|
||||
_obscurePass
|
||||
? Icons.visibility_outlined
|
||||
: Icons.visibility_off_outlined,
|
||||
size: 18,
|
||||
color: AppTheme.textSecondary,
|
||||
),
|
||||
onPressed: () =>
|
||||
setState(() => _obscurePass = !_obscurePass),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 14),
|
||||
const Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'Recolecta',
|
||||
style: TextStyle(
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppTheme.textPrimary,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Align(
|
||||
alignment: Alignment.centerRight,
|
||||
child: TextButton(
|
||||
onPressed: () {},
|
||||
style: TextButton.styleFrom(
|
||||
foregroundColor: AppTheme.primary,
|
||||
padding: EdgeInsets.zero,
|
||||
minimumSize: Size.zero,
|
||||
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
||||
),
|
||||
Text(
|
||||
'Bienvenido de nuevo',
|
||||
style: TextStyle(
|
||||
fontSize: 13,
|
||||
color: AppTheme.textSecondary,
|
||||
),
|
||||
child: const Text(
|
||||
'¿Olvidaste tu contraseña?',
|
||||
style: TextStyle(fontSize: 13),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
SizedBox(
|
||||
height: 52,
|
||||
child: ElevatedButton(
|
||||
onPressed: loading ? null : _submit,
|
||||
child: AnimatedSwitcher(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
child: loading
|
||||
? const SizedBox(
|
||||
key: ValueKey('loading'),
|
||||
width: 20,
|
||||
height: 20,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 2,
|
||||
color: Colors.white,
|
||||
),
|
||||
)
|
||||
: const Text(
|
||||
'Ingresar',
|
||||
key: ValueKey('text'),
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 32),
|
||||
Center(
|
||||
child: Wrap(
|
||||
alignment: WrapAlignment.center,
|
||||
children: [
|
||||
const Text(
|
||||
'¿No tienes cuenta? ',
|
||||
style: TextStyle(
|
||||
fontSize: 13,
|
||||
color: AppTheme.textSecondary,
|
||||
),
|
||||
),
|
||||
GestureDetector(
|
||||
onTap: () => context.go('/register'),
|
||||
child: const Text(
|
||||
'Regístrate',
|
||||
style: TextStyle(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppTheme.primary,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const SizedBox(height: 32),
|
||||
// ── Cabecera con gradiente verde y mascota ───────────────────────────────────
|
||||
|
||||
// ── Formulario ──────────────────────────────────────────
|
||||
AppFormField(
|
||||
label: 'Correo electrónico',
|
||||
hint: 'tu@correo.com',
|
||||
controller: _emailCtrl,
|
||||
keyboardType: TextInputType.emailAddress,
|
||||
validator: (v) => (v == null || v.trim().isEmpty)
|
||||
? 'Ingresa tu correo'
|
||||
: null,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
AppFormField(
|
||||
label: 'Contraseña',
|
||||
hint: '••••••••',
|
||||
controller: _passCtrl,
|
||||
obscureText: _obscurePass,
|
||||
validator: (v) => (v == null || v.length < 6)
|
||||
? 'Mínimo 6 caracteres'
|
||||
: null,
|
||||
suffix: IconButton(
|
||||
icon: Icon(
|
||||
_obscurePass
|
||||
? Icons.visibility_outlined
|
||||
: Icons.visibility_off_outlined,
|
||||
size: 18,
|
||||
color: AppTheme.textSecondary,
|
||||
),
|
||||
onPressed: () =>
|
||||
setState(() => _obscurePass = !_obscurePass),
|
||||
),
|
||||
),
|
||||
class _GreenHeader extends StatelessWidget {
|
||||
final double height;
|
||||
const _GreenHeader({required this.height});
|
||||
|
||||
const SizedBox(height: 10),
|
||||
Align(
|
||||
alignment: Alignment.centerRight,
|
||||
child: TextButton(
|
||||
onPressed: () {},
|
||||
style: TextButton.styleFrom(
|
||||
foregroundColor: AppTheme.primary,
|
||||
),
|
||||
child: const Text(
|
||||
'¿Olvidaste tu contraseña?',
|
||||
style: TextStyle(fontSize: 13),
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ClipPath(
|
||||
clipper: _WaveClipper(),
|
||||
child: Container(
|
||||
height: height,
|
||||
decoration: const BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
stops: [0.0, 0.6, 1.0],
|
||||
colors: [Color(0xFF0A4A38), Color(0xFF0F6E56), Color(0xFF1D9E75)],
|
||||
),
|
||||
),
|
||||
child: SafeArea(
|
||||
bottom: false,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 24),
|
||||
child: SingleChildScrollView(
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
const SizedBox(height: 8),
|
||||
const VideoMascot(size: 108),
|
||||
const SizedBox(height: 16),
|
||||
const Text(
|
||||
'RecolectApp',
|
||||
style: TextStyle(
|
||||
fontSize: 30,
|
||||
fontWeight: FontWeight.w800,
|
||||
color: Colors.white,
|
||||
letterSpacing: -0.8,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// ── Botón ───────────────────────────────────────────────
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
height: 52,
|
||||
child: ElevatedButton(
|
||||
onPressed: loading ? null : _submit,
|
||||
child: AnimatedSwitcher(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
child: loading
|
||||
? const SizedBox(
|
||||
key: ValueKey('loading'),
|
||||
width: 20,
|
||||
height: 20,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 2,
|
||||
color: Colors.white,
|
||||
),
|
||||
)
|
||||
: const Text('Ingresar', key: ValueKey('text')),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
'Bienvenido de nuevo',
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
color: Colors.white.withValues(alpha: 0.82),
|
||||
fontWeight: FontWeight.w400,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(height: 36),
|
||||
|
||||
// ── Crear cuenta ────────────────────────────────────────
|
||||
Center(
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
const Text(
|
||||
'¿No tienes cuenta? ',
|
||||
style: TextStyle(
|
||||
fontSize: 13,
|
||||
color: AppTheme.textSecondary,
|
||||
),
|
||||
),
|
||||
GestureDetector(
|
||||
onTap: () => context.go('/register'),
|
||||
child: const Text(
|
||||
'Regístrate',
|
||||
style: TextStyle(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppTheme.primary,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
const SizedBox(height: 28),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
@@ -244,3 +258,29 @@ class _LoginPageState extends ConsumerState<LoginPage> {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _WaveClipper extends CustomClipper<Path> {
|
||||
@override
|
||||
Path getClip(Size size) {
|
||||
final path = Path();
|
||||
path.lineTo(0, size.height - 36);
|
||||
path.quadraticBezierTo(
|
||||
size.width * 0.25,
|
||||
size.height,
|
||||
size.width * 0.5,
|
||||
size.height - 18,
|
||||
);
|
||||
path.quadraticBezierTo(
|
||||
size.width * 0.75,
|
||||
size.height - 36,
|
||||
size.width,
|
||||
size.height - 10,
|
||||
);
|
||||
path.lineTo(size.width, 0);
|
||||
path.close();
|
||||
return path;
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldReclip(_WaveClipper old) => false;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user