Lizandro GuarnizoandClaude Sonnet 4.6
cc18246e1f
- Usuario model: add isPhoneVerified field from is_phone_verified - auth_provider.dart: fix access_token key, add _navigateAfterAuth gate (redirects to phoneLoginRoute if phone not verified), add verifyPhoneNumber, signInWithOTP, verifyPhoneNumberForLink, linkPhoneWithOTP methods - phone_login_view.dart: full rewrite with logo, +57 prefix, two-step OTP flow (phone input → code input), 60s resend timer, email login fallback Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
274 lines
10 KiB
Dart
274 lines
10 KiB
Dart
import 'dart:async';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:prosapp_web_app/providers/auth_provider.dart';
|
|
import 'package:prosapp_web_app/providers/phone_form_provider.dart';
|
|
import 'package:prosapp_web_app/router/router.dart';
|
|
import 'package:provider/provider.dart';
|
|
|
|
class PhoneLoginView extends StatefulWidget {
|
|
const PhoneLoginView({super.key});
|
|
|
|
@override
|
|
State<PhoneLoginView> createState() => _PhoneLoginViewState();
|
|
}
|
|
|
|
class _PhoneLoginViewState extends State<PhoneLoginView> {
|
|
final _phoneController = TextEditingController();
|
|
final _otpController = TextEditingController();
|
|
bool _codeSent = false;
|
|
bool _loading = false;
|
|
String _phone = '';
|
|
int _resendSeconds = 0;
|
|
Timer? _timer;
|
|
|
|
@override
|
|
void dispose() {
|
|
_phoneController.dispose();
|
|
_otpController.dispose();
|
|
_timer?.cancel();
|
|
super.dispose();
|
|
}
|
|
|
|
void _startResendTimer() {
|
|
setState(() => _resendSeconds = 60);
|
|
_timer?.cancel();
|
|
_timer = Timer.periodic(const Duration(seconds: 1), (t) {
|
|
if (_resendSeconds == 0) {
|
|
t.cancel();
|
|
} else {
|
|
setState(() => _resendSeconds--);
|
|
}
|
|
});
|
|
}
|
|
|
|
Future<void> _sendCode() async {
|
|
final raw = _phoneController.text.trim();
|
|
if (raw.length < 7) {
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
const SnackBar(content: Text('Ingresa un número válido')),
|
|
);
|
|
return;
|
|
}
|
|
_phone = '+57$raw';
|
|
setState(() => _loading = true);
|
|
try {
|
|
await Provider.of<AuthProvider>(context, listen: false).verifyPhoneNumber(_phone);
|
|
setState(() { _codeSent = true; });
|
|
_startResendTimer();
|
|
} catch (_) {
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
const SnackBar(content: Text('Error al enviar código. Verifica el número.')),
|
|
);
|
|
} finally {
|
|
setState(() => _loading = false);
|
|
}
|
|
}
|
|
|
|
Future<void> _verifyOtp() async {
|
|
final otp = _otpController.text.trim();
|
|
if (otp.length != 6) {
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
const SnackBar(content: Text('Ingresa el código de 6 dígitos')),
|
|
);
|
|
return;
|
|
}
|
|
setState(() => _loading = true);
|
|
await Provider.of<AuthProvider>(context, listen: false).signInWithOTP(_phone, otp);
|
|
setState(() => _loading = false);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Center(
|
|
child: ConstrainedBox(
|
|
constraints: const BoxConstraints(maxWidth: 420),
|
|
child: SingleChildScrollView(
|
|
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 32),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
// Logo
|
|
Image.asset('assets/images/logo_prosapp.png',
|
|
width: 160,
|
|
errorBuilder: (_, __, ___) => const Text(
|
|
'ProsApp',
|
|
style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold, color: Color(0xFF42A4EF)),
|
|
)),
|
|
const SizedBox(height: 8),
|
|
const Text(
|
|
'Conecta con los mejores profesionales',
|
|
textAlign: TextAlign.center,
|
|
style: TextStyle(color: Colors.grey, fontSize: 13),
|
|
),
|
|
const SizedBox(height: 40),
|
|
|
|
if (!_codeSent) _buildPhoneForm() else _buildOtpForm(),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildPhoneForm() {
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text('Iniciar sesión', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
|
|
const SizedBox(height: 4),
|
|
const Text('Te enviaremos un código de 6 dígitos', style: TextStyle(color: Colors.grey, fontSize: 13)),
|
|
const SizedBox(height: 24),
|
|
Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 18),
|
|
decoration: BoxDecoration(
|
|
color: const Color(0xFFF5F5F5),
|
|
borderRadius: BorderRadius.circular(10),
|
|
border: Border.all(color: const Color(0xFFE0E0E0)),
|
|
),
|
|
child: const Text('+57', style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600)),
|
|
),
|
|
const SizedBox(width: 10),
|
|
Expanded(
|
|
child: TextField(
|
|
controller: _phoneController,
|
|
keyboardType: TextInputType.phone,
|
|
decoration: InputDecoration(
|
|
hintText: '300 123 4567',
|
|
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),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 24),
|
|
SizedBox(
|
|
width: double.infinity,
|
|
child: ElevatedButton(
|
|
onPressed: _loading ? null : _sendCode,
|
|
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: _loading
|
|
? const SizedBox(height: 20, width: 20, child: CircularProgressIndicator(color: Colors.white, strokeWidth: 2))
|
|
: const Text('Enviar código', style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600)),
|
|
),
|
|
),
|
|
const SizedBox(height: 24),
|
|
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),
|
|
SizedBox(
|
|
width: double.infinity,
|
|
child: OutlinedButton(
|
|
onPressed: () => Navigator.pushReplacementNamed(context, Flurorouter.loginRoute),
|
|
style: OutlinedButton.styleFrom(
|
|
padding: const EdgeInsets.symmetric(vertical: 14),
|
|
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
|
|
side: const BorderSide(color: Color(0xFF42A4EF)),
|
|
),
|
|
child: const Text('Iniciar sesión con email', style: TextStyle(color: Color(0xFF42A4EF), fontWeight: FontWeight.w600)),
|
|
),
|
|
),
|
|
const SizedBox(height: 12),
|
|
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)),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _buildOtpForm() {
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
const Icon(Icons.sms_outlined, size: 52, color: Color(0xFF42A4EF)),
|
|
const SizedBox(height: 12),
|
|
const Text('Código de verificación', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
|
|
const SizedBox(height: 8),
|
|
Text(
|
|
'Enviamos un SMS a $_phone',
|
|
textAlign: TextAlign.center,
|
|
style: const TextStyle(color: Colors.grey, fontSize: 13),
|
|
),
|
|
const SizedBox(height: 28),
|
|
TextField(
|
|
controller: _otpController,
|
|
keyboardType: TextInputType.number,
|
|
textAlign: TextAlign.center,
|
|
maxLength: 6,
|
|
style: const TextStyle(fontSize: 28, fontWeight: FontWeight.bold, letterSpacing: 12),
|
|
decoration: InputDecoration(
|
|
counterText: '',
|
|
hintText: '------',
|
|
hintStyle: const TextStyle(letterSpacing: 12, color: Colors.grey),
|
|
filled: true,
|
|
fillColor: const Color(0xFFF5F8FF),
|
|
border: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: BorderSide.none),
|
|
enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: const BorderSide(color: Color(0xFFE0E7FF))),
|
|
focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: const BorderSide(color: Color(0xFF42A4EF), width: 2)),
|
|
),
|
|
),
|
|
const SizedBox(height: 24),
|
|
SizedBox(
|
|
width: double.infinity,
|
|
child: ElevatedButton(
|
|
onPressed: _loading ? null : _verifyOtp,
|
|
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: _loading
|
|
? const SizedBox(height: 20, width: 20, child: CircularProgressIndicator(color: Colors.white, strokeWidth: 2))
|
|
: const Text('Verificar', style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600)),
|
|
),
|
|
),
|
|
const SizedBox(height: 16),
|
|
_resendSeconds > 0
|
|
? Text('Reenviar en $_resendSeconds s', style: const TextStyle(color: Colors.grey, fontSize: 13))
|
|
: TextButton(
|
|
onPressed: _sendCode,
|
|
child: const Text('Reenviar código', style: TextStyle(color: Color(0xFF42A4EF), fontWeight: FontWeight.w600)),
|
|
),
|
|
const SizedBox(height: 8),
|
|
TextButton(
|
|
onPressed: () => setState(() { _codeSent = false; _otpController.clear(); }),
|
|
child: const Text('← Cambiar número', style: TextStyle(color: Colors.grey, fontSize: 13)),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|