first commit

This commit is contained in:
DahoudG
2025-08-20 21:00:35 +00:00
commit b2a23bdf89
583 changed files with 243074 additions and 0 deletions

View File

@@ -0,0 +1,362 @@
import 'package:flutter/material.dart';
import '../../../../shared/theme/app_theme.dart';
/// Pied de page de la connexion avec informations et liens
class LoginFooter extends StatelessWidget {
const LoginFooter({super.key});
@override
Widget build(BuildContext context) {
return Column(
children: [
// Séparateur
_buildDivider(),
const SizedBox(height: 24),
// Informations sur l'application
_buildAppInfo(),
const SizedBox(height: 20),
// Liens utiles
_buildUsefulLinks(context),
const SizedBox(height: 20),
// Version et copyright
_buildVersionInfo(),
],
);
}
Widget _buildDivider() {
return Row(
children: [
Expanded(
child: Container(
height: 1,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.transparent,
AppTheme.textSecondary.withOpacity(0.3),
Colors.transparent,
],
),
),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Icon(
Icons.star,
size: 16,
color: AppTheme.textSecondary.withOpacity(0.5),
),
),
Expanded(
child: Container(
height: 1,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.transparent,
AppTheme.textSecondary.withOpacity(0.3),
Colors.transparent,
],
),
),
),
),
],
);
}
Widget _buildAppInfo() {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppTheme.backgroundLight,
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: AppTheme.textSecondary.withOpacity(0.1),
),
),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.security,
size: 20,
color: AppTheme.successColor,
),
const SizedBox(width: 8),
Text(
'Connexion sécurisée',
style: TextStyle(
fontSize: 14,
color: AppTheme.successColor,
fontWeight: FontWeight.w600,
),
),
],
),
const SizedBox(height: 8),
Text(
'Vos données sont protégées par un cryptage de niveau bancaire',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 12,
color: AppTheme.textSecondary,
),
),
],
),
);
}
Widget _buildUsefulLinks(BuildContext context) {
return Wrap(
spacing: 20,
runSpacing: 12,
alignment: WrapAlignment.center,
children: [
_buildLinkButton(
icon: Icons.help_outline,
label: 'Aide',
onTap: () => _showHelpDialog(context),
),
_buildLinkButton(
icon: Icons.info_outline,
label: 'À propos',
onTap: () => _showAboutDialog(context),
),
_buildLinkButton(
icon: Icons.privacy_tip_outlined,
label: 'Confidentialité',
onTap: () => _showPrivacyDialog(context),
),
],
);
}
Widget _buildLinkButton({
required IconData icon,
required String label,
required VoidCallback onTap,
}) {
return GestureDetector(
onTap: onTap,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: AppTheme.textSecondary.withOpacity(0.2),
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
icon,
size: 16,
color: AppTheme.textSecondary,
),
const SizedBox(width: 6),
Text(
label,
style: TextStyle(
fontSize: 12,
color: AppTheme.textSecondary,
fontWeight: FontWeight.w500,
),
),
],
),
),
);
}
Widget _buildVersionInfo() {
return Column(
children: [
Text(
'UnionFlow Mobile v1.0.0',
style: TextStyle(
fontSize: 12,
color: AppTheme.textSecondary.withOpacity(0.7),
fontWeight: FontWeight.w500,
),
),
const SizedBox(height: 4),
Text(
'© 2025 Lions Dev Team. Tous droits réservés.',
style: TextStyle(
fontSize: 10,
color: AppTheme.textSecondary.withOpacity(0.5),
),
),
],
);
}
void _showHelpDialog(BuildContext context) {
showDialog(
context: context,
builder: (context) => AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
title: Row(
children: [
Icon(
Icons.help_outline,
color: AppTheme.infoColor,
),
const SizedBox(width: 12),
const Text('Aide'),
],
),
content: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildHelpItem(
'Connexion',
'Utilisez votre email et mot de passe fournis par votre association.',
),
const SizedBox(height: 12),
_buildHelpItem(
'Mot de passe oublié',
'Contactez votre administrateur pour réinitialiser votre mot de passe.',
),
const SizedBox(height: 12),
_buildHelpItem(
'Problèmes techniques',
'Vérifiez votre connexion internet et réessayez.',
),
],
),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(),
child: Text(
'Fermer',
style: TextStyle(
color: AppTheme.primaryColor,
fontWeight: FontWeight.w600,
),
),
),
],
),
);
}
void _showAboutDialog(BuildContext context) {
showDialog(
context: context,
builder: (context) => AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
title: Row(
children: [
Icon(
Icons.info_outline,
color: AppTheme.primaryColor,
),
const SizedBox(width: 12),
const Text('À propos'),
],
),
content: const Text(
'UnionFlow est une solution complète de gestion d\'associations développée par Lions Dev Team.\n\n'
'Cette application mobile vous permet de gérer vos membres, cotisations, événements et bien plus encore, où que vous soyez.',
),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(),
child: Text(
'Fermer',
style: TextStyle(
color: AppTheme.primaryColor,
fontWeight: FontWeight.w600,
),
),
),
],
),
);
}
void _showPrivacyDialog(BuildContext context) {
showDialog(
context: context,
builder: (context) => AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
title: Row(
children: [
Icon(
Icons.privacy_tip_outlined,
color: AppTheme.warningColor,
),
const SizedBox(width: 12),
const Text('Confidentialité'),
],
),
content: const Text(
'Nous respectons votre vie privée. Toutes vos données sont stockées de manière sécurisée et ne sont jamais partagées avec des tiers.\n\n'
'Les données sont chiffrées en transit et au repos selon les standards de sécurité les plus élevés.',
),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(),
child: Text(
'Compris',
style: TextStyle(
color: AppTheme.primaryColor,
fontWeight: FontWeight.w600,
),
),
),
],
),
);
}
Widget _buildHelpItem(String title, String description) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: AppTheme.textPrimary,
),
),
const SizedBox(height: 4),
Text(
description,
style: TextStyle(
fontSize: 12,
color: AppTheme.textSecondary,
),
),
],
);
}
}

View File

@@ -0,0 +1,437 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import '../../../../shared/theme/app_theme.dart';
import '../../../../shared/widgets/buttons/buttons.dart';
/// Formulaire de connexion sophistiqué avec validation
class LoginForm extends StatefulWidget {
final GlobalKey<FormState> formKey;
final TextEditingController emailController;
final TextEditingController passwordController;
final bool obscurePassword;
final bool rememberMe;
final bool isLoading;
final VoidCallback onObscureToggle;
final ValueChanged<bool> onRememberMeToggle;
final VoidCallback onSubmit;
const LoginForm({
super.key,
required this.formKey,
required this.emailController,
required this.passwordController,
required this.obscurePassword,
required this.rememberMe,
required this.isLoading,
required this.onObscureToggle,
required this.onRememberMeToggle,
required this.onSubmit,
});
@override
State<LoginForm> createState() => _LoginFormState();
}
class _LoginFormState extends State<LoginForm>
with TickerProviderStateMixin {
late AnimationController _fieldAnimationController;
late List<Animation<Offset>> _fieldAnimations;
final FocusNode _emailFocusNode = FocusNode();
final FocusNode _passwordFocusNode = FocusNode();
bool _emailHasFocus = false;
bool _passwordHasFocus = false;
@override
void initState() {
super.initState();
_setupAnimations();
_setupFocusListeners();
_startFieldAnimations();
}
void _setupAnimations() {
_fieldAnimationController = AnimationController(
duration: const Duration(milliseconds: 800),
vsync: this,
);
_fieldAnimations = List.generate(4, (index) {
return Tween<Offset>(
begin: const Offset(0, 1),
end: Offset.zero,
).animate(CurvedAnimation(
parent: _fieldAnimationController,
curve: Interval(
index * 0.2,
(index * 0.2) + 0.6,
curve: Curves.easeOut,
),
));
});
}
void _setupFocusListeners() {
_emailFocusNode.addListener(() {
setState(() {
_emailHasFocus = _emailFocusNode.hasFocus;
});
});
_passwordFocusNode.addListener(() {
setState(() {
_passwordHasFocus = _passwordFocusNode.hasFocus;
});
});
}
void _startFieldAnimations() {
Future.delayed(const Duration(milliseconds: 200), () {
if (mounted) {
_fieldAnimationController.forward();
}
});
}
@override
void dispose() {
_fieldAnimationController.dispose();
_emailFocusNode.dispose();
_passwordFocusNode.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Form(
key: widget.formKey,
child: Column(
children: [
// Champ email
SlideTransition(
position: _fieldAnimations[0],
child: _buildEmailField(),
),
const SizedBox(height: 20),
// Champ mot de passe
SlideTransition(
position: _fieldAnimations[1],
child: _buildPasswordField(),
),
const SizedBox(height: 16),
// Options (Se souvenir de moi, Mot de passe oublié)
SlideTransition(
position: _fieldAnimations[2],
child: _buildOptionsRow(),
),
const SizedBox(height: 32),
// Bouton de connexion
SlideTransition(
position: _fieldAnimations[3],
child: _buildLoginButton(),
),
],
),
);
}
Widget _buildEmailField() {
return AnimatedContainer(
duration: const Duration(milliseconds: 200),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
boxShadow: _emailHasFocus ? [
BoxShadow(
color: AppTheme.primaryColor.withOpacity(0.2),
blurRadius: 12,
offset: const Offset(0, 4),
),
] : [],
),
child: TextFormField(
controller: widget.emailController,
focusNode: _emailFocusNode,
keyboardType: TextInputType.emailAddress,
textInputAction: TextInputAction.next,
enabled: !widget.isLoading,
onFieldSubmitted: (_) {
FocusScope.of(context).requestFocus(_passwordFocusNode);
},
decoration: InputDecoration(
labelText: 'Adresse email',
hintText: 'votre.email@exemple.com',
prefixIcon: AnimatedContainer(
duration: const Duration(milliseconds: 200),
child: Icon(
Icons.email_outlined,
color: _emailHasFocus
? AppTheme.primaryColor
: AppTheme.textSecondary,
),
),
filled: true,
fillColor: Colors.white,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(16),
borderSide: BorderSide.none,
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(16),
borderSide: BorderSide(
color: AppTheme.primaryColor,
width: 2,
),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(16),
borderSide: BorderSide(
color: AppTheme.errorColor,
width: 2,
),
),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(16),
borderSide: BorderSide(
color: AppTheme.errorColor,
width: 2,
),
),
contentPadding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 16,
),
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Veuillez saisir votre email';
}
if (!RegExp(r'^[^@]+@[^@]+\.[^@]+').hasMatch(value)) {
return 'Format d\'email invalide';
}
return null;
},
),
);
}
Widget _buildPasswordField() {
return AnimatedContainer(
duration: const Duration(milliseconds: 200),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
boxShadow: _passwordHasFocus ? [
BoxShadow(
color: AppTheme.primaryColor.withOpacity(0.2),
blurRadius: 12,
offset: const Offset(0, 4),
),
] : [],
),
child: TextFormField(
controller: widget.passwordController,
focusNode: _passwordFocusNode,
obscureText: widget.obscurePassword,
textInputAction: TextInputAction.done,
enabled: !widget.isLoading,
onFieldSubmitted: (_) => widget.onSubmit(),
decoration: InputDecoration(
labelText: 'Mot de passe',
hintText: 'Saisissez votre mot de passe',
prefixIcon: AnimatedContainer(
duration: const Duration(milliseconds: 200),
child: Icon(
Icons.lock_outlined,
color: _passwordHasFocus
? AppTheme.primaryColor
: AppTheme.textSecondary,
),
),
suffixIcon: IconButton(
onPressed: widget.onObscureToggle,
icon: AnimatedSwitcher(
duration: const Duration(milliseconds: 200),
child: Icon(
widget.obscurePassword
? Icons.visibility_outlined
: Icons.visibility_off_outlined,
key: ValueKey(widget.obscurePassword),
color: _passwordHasFocus
? AppTheme.primaryColor
: AppTheme.textSecondary,
),
),
),
filled: true,
fillColor: Colors.white,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(16),
borderSide: BorderSide.none,
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(16),
borderSide: BorderSide(
color: AppTheme.primaryColor,
width: 2,
),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(16),
borderSide: BorderSide(
color: AppTheme.errorColor,
width: 2,
),
),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(16),
borderSide: BorderSide(
color: AppTheme.errorColor,
width: 2,
),
),
contentPadding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 16,
),
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Veuillez saisir votre mot de passe';
}
if (value.length < 6) {
return 'Le mot de passe doit contenir au moins 6 caractères';
}
return null;
},
),
);
}
Widget _buildOptionsRow() {
return Row(
children: [
// Se souvenir de moi
Expanded(
child: GestureDetector(
onTap: () => widget.onRememberMeToggle(!widget.rememberMe),
child: Row(
children: [
AnimatedContainer(
duration: const Duration(milliseconds: 200),
width: 20,
height: 20,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
border: Border.all(
color: widget.rememberMe
? AppTheme.primaryColor
: AppTheme.textSecondary,
width: 2,
),
color: widget.rememberMe
? AppTheme.primaryColor
: Colors.transparent,
),
child: widget.rememberMe
? Icon(
Icons.check,
size: 14,
color: Colors.white,
)
: null,
),
const SizedBox(width: 8),
Text(
'Se souvenir de moi',
style: TextStyle(
fontSize: 14,
color: AppTheme.textSecondary,
fontWeight: FontWeight.w500,
),
),
],
),
),
),
// Mot de passe oublié
TextButton(
onPressed: widget.isLoading ? null : () {
HapticFeedback.selectionClick();
_showForgotPasswordDialog();
},
child: Text(
'Mot de passe oublié ?',
style: TextStyle(
fontSize: 14,
color: AppTheme.primaryColor,
fontWeight: FontWeight.w600,
),
),
),
],
);
}
Widget _buildLoginButton() {
return SizedBox(
width: double.infinity,
height: 56,
child: widget.isLoading
? QuickButtons.primary(
text: '',
onPressed: () {},
loading: true,
)
: QuickButtons.primary(
text: 'Se connecter',
icon: Icons.login,
onPressed: widget.onSubmit,
size: ButtonSize.large,
),
);
}
void _showForgotPasswordDialog() {
showDialog(
context: context,
builder: (context) => AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
title: Row(
children: [
Icon(
Icons.help_outline,
color: AppTheme.primaryColor,
),
const SizedBox(width: 12),
const Text('Mot de passe oublié'),
],
),
content: const Text(
'Pour récupérer votre mot de passe, veuillez contacter votre administrateur ou utiliser la fonction de récupération sur l\'interface web.',
),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(),
child: Text(
'Compris',
style: TextStyle(
color: AppTheme.primaryColor,
fontWeight: FontWeight.w600,
),
),
),
],
),
);
}
}

View File

@@ -0,0 +1,259 @@
import 'package:flutter/material.dart';
import '../../../../shared/theme/app_theme.dart';
/// En-tête de la page de connexion avec logo et animation
class LoginHeader extends StatefulWidget {
final VoidCallback? onAnimationComplete;
const LoginHeader({
super.key,
this.onAnimationComplete,
});
@override
State<LoginHeader> createState() => _LoginHeaderState();
}
class _LoginHeaderState extends State<LoginHeader>
with TickerProviderStateMixin {
late AnimationController _logoController;
late AnimationController _textController;
late Animation<double> _logoScaleAnimation;
late Animation<double> _logoRotationAnimation;
late Animation<double> _textFadeAnimation;
late Animation<Offset> _textSlideAnimation;
@override
void initState() {
super.initState();
_setupAnimations();
_startAnimations();
}
void _setupAnimations() {
_logoController = AnimationController(
duration: const Duration(milliseconds: 1000),
vsync: this,
);
_textController = AnimationController(
duration: const Duration(milliseconds: 800),
vsync: this,
);
_logoScaleAnimation = Tween<double>(
begin: 0.5,
end: 1.0,
).animate(CurvedAnimation(
parent: _logoController,
curve: Curves.elasticOut,
));
_logoRotationAnimation = Tween<double>(
begin: -0.1,
end: 0.0,
).animate(CurvedAnimation(
parent: _logoController,
curve: Curves.easeOut,
));
_textFadeAnimation = Tween<double>(
begin: 0.0,
end: 1.0,
).animate(CurvedAnimation(
parent: _textController,
curve: Curves.easeOut,
));
_textSlideAnimation = Tween<Offset>(
begin: const Offset(0, 0.5),
end: Offset.zero,
).animate(CurvedAnimation(
parent: _textController,
curve: Curves.easeOut,
));
}
void _startAnimations() {
_logoController.forward().then((_) {
_textController.forward().then((_) {
widget.onAnimationComplete?.call();
});
});
}
@override
void dispose() {
_logoController.dispose();
_textController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Column(
children: [
// Logo animé
AnimatedBuilder(
animation: _logoController,
builder: (context, child) {
return Transform.scale(
scale: _logoScaleAnimation.value,
child: Transform.rotate(
angle: _logoRotationAnimation.value,
child: _buildLogo(),
),
);
},
),
const SizedBox(height: 32),
// Texte animé
AnimatedBuilder(
animation: _textController,
builder: (context, child) {
return FadeTransition(
opacity: _textFadeAnimation,
child: SlideTransition(
position: _textSlideAnimation,
child: _buildWelcomeText(),
),
);
},
),
],
);
}
Widget _buildLogo() {
return Container(
width: 120,
height: 120,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
AppTheme.primaryColor,
AppTheme.secondaryColor,
],
),
borderRadius: BorderRadius.circular(30),
boxShadow: [
BoxShadow(
color: AppTheme.primaryColor.withOpacity(0.3),
blurRadius: 20,
offset: const Offset(0, 10),
),
],
),
child: Stack(
alignment: Alignment.center,
children: [
// Effet de brillance
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Colors.white.withOpacity(0.2),
Colors.transparent,
],
),
borderRadius: BorderRadius.circular(25),
),
),
// Icône ou texte du logo
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.group,
size: 48,
color: Colors.white,
),
const SizedBox(height: 4),
Text(
'UF',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white,
letterSpacing: 2,
),
),
],
),
],
),
);
}
Widget _buildWelcomeText() {
return Column(
children: [
// Titre principal
ShaderMask(
shaderCallback: (bounds) => LinearGradient(
colors: [
AppTheme.primaryColor,
AppTheme.secondaryColor,
],
).createShader(bounds),
child: Text(
'UnionFlow',
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.bold,
color: Colors.white,
letterSpacing: 1.2,
),
),
),
const SizedBox(height: 8),
// Sous-titre
Text(
'Gestion d\'associations',
style: TextStyle(
fontSize: 16,
color: AppTheme.textSecondary,
fontWeight: FontWeight.w500,
letterSpacing: 0.5,
),
),
const SizedBox(height: 24),
// Message de bienvenue
Container(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
decoration: BoxDecoration(
color: AppTheme.primaryColor.withOpacity(0.1),
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: AppTheme.primaryColor.withOpacity(0.2),
width: 1,
),
),
child: Text(
'Connectez-vous pour accéder à votre espace',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 14,
color: AppTheme.primaryColor,
fontWeight: FontWeight.w500,
),
),
),
],
);
}
}