feat(mobile): Implement Keycloak WebView authentication with HTTP callback
- Replace flutter_appauth with custom WebView implementation to resolve deep link issues - Add KeycloakWebViewAuthService with integrated WebView for seamless authentication - Configure Android manifest for HTTP cleartext traffic support - Add network security config for development environment (192.168.1.11) - Update Keycloak client to use HTTP callback endpoint (http://192.168.1.11:8080/auth/callback) - Remove obsolete keycloak_auth_service.dart and temporary scripts - Clean up dependencies and regenerate injection configuration - Tested successfully on multiple Android devices (Xiaomi 2201116TG, SM A725F) BREAKING CHANGE: Authentication flow now uses WebView instead of external browser - Users will see Keycloak login page within the app instead of browser redirect - Resolves ERR_CLEARTEXT_NOT_PERMITTED and deep link state management issues - Maintains full OIDC compliance with PKCE flow and secure token storage Technical improvements: - WebView with custom navigation delegate for callback handling - Automatic token extraction and user info parsing from JWT - Proper error handling and user feedback - Consistent authentication state management across app lifecycle
This commit is contained in:
DahoudG
@@ -0,0 +1,426 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
import '../../../../core/models/evenement_model.dart';
|
||||
|
||||
/// Page de détail d'un événement
|
||||
class EvenementDetailPage extends StatelessWidget {
|
||||
final EvenementModel evenement;
|
||||
|
||||
const EvenementDetailPage({
|
||||
super.key,
|
||||
required this.evenement,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final dateFormat = DateFormat('EEEE dd MMMM yyyy', 'fr_FR');
|
||||
final timeFormat = DateFormat('HH:mm');
|
||||
|
||||
return Scaffold(
|
||||
body: CustomScrollView(
|
||||
slivers: [
|
||||
// App Bar avec image de fond
|
||||
SliverAppBar(
|
||||
expandedHeight: 200,
|
||||
pinned: true,
|
||||
flexibleSpace: FlexibleSpaceBar(
|
||||
title: Text(
|
||||
evenement.titre,
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.bold,
|
||||
shadows: [
|
||||
Shadow(
|
||||
offset: Offset(0, 1),
|
||||
blurRadius: 3,
|
||||
color: Colors.black54,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
background: Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [
|
||||
theme.primaryColor,
|
||||
theme.primaryColor.withOpacity(0.8),
|
||||
],
|
||||
),
|
||||
),
|
||||
child: Center(
|
||||
child: Text(
|
||||
evenement.typeEvenement.icone,
|
||||
style: const TextStyle(fontSize: 80),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
actions: [
|
||||
IconButton(
|
||||
onPressed: () => _shareEvenement(context),
|
||||
icon: const Icon(Icons.share),
|
||||
),
|
||||
PopupMenuButton<String>(
|
||||
onSelected: (value) {
|
||||
switch (value) {
|
||||
case 'calendar':
|
||||
_addToCalendar(context);
|
||||
break;
|
||||
case 'favorite':
|
||||
_toggleFavorite(context);
|
||||
break;
|
||||
}
|
||||
},
|
||||
itemBuilder: (context) => [
|
||||
const PopupMenuItem(
|
||||
value: 'calendar',
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(Icons.calendar_today),
|
||||
SizedBox(width: 8),
|
||||
Text('Ajouter au calendrier'),
|
||||
],
|
||||
),
|
||||
),
|
||||
const PopupMenuItem(
|
||||
value: 'favorite',
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(Icons.favorite_border),
|
||||
SizedBox(width: 8),
|
||||
Text('Ajouter aux favoris'),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
// Contenu principal
|
||||
SliverToBoxAdapter(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Statut et type
|
||||
Row(
|
||||
children: [
|
||||
_buildStatutChip(context),
|
||||
const SizedBox(width: 8),
|
||||
Chip(
|
||||
label: Text(evenement.typeEvenement.libelle),
|
||||
backgroundColor: theme.primaryColor.withOpacity(0.1),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
const SizedBox(height: 16),
|
||||
|
||||
// Description
|
||||
if (evenement.description != null) ...[
|
||||
Text(
|
||||
'Description',
|
||||
style: theme.textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
evenement.description!,
|
||||
style: theme.textTheme.bodyMedium,
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
],
|
||||
|
||||
// Informations pratiques
|
||||
_buildSectionTitle(context, 'Informations pratiques'),
|
||||
const SizedBox(height: 12),
|
||||
|
||||
_buildInfoRow(
|
||||
context,
|
||||
Icons.schedule,
|
||||
'Date et heure',
|
||||
'${dateFormat.format(evenement.dateDebut)}\n'
|
||||
'${timeFormat.format(evenement.dateDebut)}'
|
||||
'${evenement.dateFin != null ? ' - ${timeFormat.format(evenement.dateFin!)}' : ''}',
|
||||
),
|
||||
|
||||
if (evenement.lieu != null)
|
||||
_buildInfoRow(
|
||||
context,
|
||||
Icons.location_on,
|
||||
'Lieu',
|
||||
evenement.lieu!,
|
||||
),
|
||||
|
||||
if (evenement.adresse != null)
|
||||
_buildInfoRow(
|
||||
context,
|
||||
Icons.map,
|
||||
'Adresse',
|
||||
evenement.adresse!,
|
||||
),
|
||||
|
||||
if (evenement.duree != null)
|
||||
_buildInfoRow(
|
||||
context,
|
||||
Icons.timer,
|
||||
'Durée',
|
||||
evenement.dureeFormatee,
|
||||
),
|
||||
|
||||
if (evenement.prix != null)
|
||||
_buildInfoRow(
|
||||
context,
|
||||
Icons.euro,
|
||||
'Prix',
|
||||
evenement.prix! > 0
|
||||
? '${evenement.prix!.toStringAsFixed(0)} €'
|
||||
: 'Gratuit',
|
||||
),
|
||||
|
||||
if (evenement.capaciteMax != null)
|
||||
_buildInfoRow(
|
||||
context,
|
||||
Icons.people,
|
||||
'Capacité',
|
||||
'${evenement.capaciteMax} personnes',
|
||||
),
|
||||
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Inscription
|
||||
if (evenement.inscriptionRequise) ...[
|
||||
_buildSectionTitle(context, 'Inscription'),
|
||||
const SizedBox(height: 12),
|
||||
|
||||
if (evenement.inscriptionsOuvertes) ...[
|
||||
Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.green.withOpacity(0.1),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: Border.all(color: Colors.green.withOpacity(0.3)),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
const Icon(
|
||||
Icons.check_circle,
|
||||
color: Colors.green,
|
||||
size: 32,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
const Text(
|
||||
'Inscriptions ouvertes',
|
||||
style: TextStyle(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.green,
|
||||
),
|
||||
),
|
||||
if (evenement.dateLimiteInscription != null) ...[
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
'Jusqu\'au ${dateFormat.format(evenement.dateLimiteInscription!)}',
|
||||
style: TextStyle(
|
||||
color: Colors.green[700],
|
||||
fontSize: 12,
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
] else ...[
|
||||
Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.red.withOpacity(0.1),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: Border.all(color: Colors.red.withOpacity(0.3)),
|
||||
),
|
||||
child: const Column(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.cancel,
|
||||
color: Colors.red,
|
||||
size: 32,
|
||||
),
|
||||
SizedBox(height: 8),
|
||||
Text(
|
||||
'Inscriptions fermées',
|
||||
style: TextStyle(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.red,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
|
||||
const SizedBox(height: 24),
|
||||
],
|
||||
|
||||
// Instructions particulières
|
||||
if (evenement.instructionsParticulieres != null) ...[
|
||||
_buildSectionTitle(context, 'Instructions particulières'),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
evenement.instructionsParticulieres!,
|
||||
style: theme.textTheme.bodyMedium,
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
],
|
||||
|
||||
// Matériel requis
|
||||
if (evenement.materielRequis != null) ...[
|
||||
_buildSectionTitle(context, 'Matériel requis'),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
evenement.materielRequis!,
|
||||
style: theme.textTheme.bodyMedium,
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
],
|
||||
|
||||
// Contact organisateur
|
||||
if (evenement.contactOrganisateur != null) ...[
|
||||
_buildSectionTitle(context, 'Contact organisateur'),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
evenement.contactOrganisateur!,
|
||||
style: theme.textTheme.bodyMedium,
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
],
|
||||
|
||||
// Espace pour le bouton flottant
|
||||
const SizedBox(height: 80),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
// Bouton d'action flottant
|
||||
floatingActionButton: evenement.inscriptionRequise &&
|
||||
evenement.inscriptionsOuvertes
|
||||
? FloatingActionButton.extended(
|
||||
onPressed: () => _inscrireAEvenement(context),
|
||||
icon: const Icon(Icons.how_to_reg),
|
||||
label: const Text('S\'inscrire'),
|
||||
)
|
||||
: null,
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildStatutChip(BuildContext context) {
|
||||
final color = Color(int.parse(
|
||||
evenement.statut.couleur.substring(1),
|
||||
radix: 16,
|
||||
) + 0xFF000000);
|
||||
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
|
||||
decoration: BoxDecoration(
|
||||
color: color.withOpacity(0.1),
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
border: Border.all(color: color.withOpacity(0.3)),
|
||||
),
|
||||
child: Text(
|
||||
evenement.statut.libelle,
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: color,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSectionTitle(BuildContext context, String title) {
|
||||
return Text(
|
||||
title,
|
||||
style: Theme.of(context).textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildInfoRow(
|
||||
BuildContext context,
|
||||
IconData icon,
|
||||
String label,
|
||||
String value,
|
||||
) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 12),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Icon(
|
||||
icon,
|
||||
size: 20,
|
||||
color: Colors.grey[600],
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
label,
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: Colors.grey[600],
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
value,
|
||||
style: Theme.of(context).textTheme.bodyMedium,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _shareEvenement(BuildContext context) {
|
||||
// TODO: Implémenter le partage
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(content: Text('Partage - À implémenter')),
|
||||
);
|
||||
}
|
||||
|
||||
void _addToCalendar(BuildContext context) {
|
||||
// TODO: Implémenter l'ajout au calendrier
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(content: Text('Ajout au calendrier - À implémenter')),
|
||||
);
|
||||
}
|
||||
|
||||
void _toggleFavorite(BuildContext context) {
|
||||
// TODO: Implémenter les favoris
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(content: Text('Favoris - À implémenter')),
|
||||
);
|
||||
}
|
||||
|
||||
void _inscrireAEvenement(BuildContext context) {
|
||||
// TODO: Implémenter l'inscription
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(content: Text('Inscription - À implémenter')),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user