feat(front): implémenter la page create-password du ticket #118

Ajoute le flux frontend de création initiale du mot de passe via token email (route /create-password, vérification de token et soumission /auth/create-password), avec redirection login en succès et gestion neutre des liens invalides/expirés.

Made-with: Cursor
This commit is contained in:
MARTIN Julien 2026-04-23 11:58:10 +02:00
parent 3716dfe611
commit 29623f33b9
5 changed files with 309 additions and 2 deletions

View File

@ -18,6 +18,7 @@ import '../screens/auth/am_register_step1_screen.dart';
import '../screens/auth/am_register_step2_screen.dart';
import '../screens/auth/am_register_step3_screen.dart';
import '../screens/auth/am_register_step4_screen.dart';
import '../screens/auth/create_password_screen.dart';
import '../screens/home/home_screen.dart';
import '../screens/administrateurs/admin_dashboardScreen.dart';
import '../screens/gestionnaire/gestionnaire_dashboard_screen.dart';
@ -49,6 +50,11 @@ class AppRouter {
path: '/register-choice',
builder: (BuildContext context, GoRouterState state) => const RegisterChoiceScreen(),
),
GoRoute(
path: '/create-password',
builder: (BuildContext context, GoRouterState state) =>
CreatePasswordScreen(token: state.uri.queryParameters['token']),
),
GoRoute(
path: '/home',
builder: (BuildContext context, GoRouterState state) => const HomeScreen(),

View File

@ -0,0 +1,244 @@
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:google_fonts/google_fonts.dart';
import '../../services/auth_service.dart';
import '../../widgets/image_button.dart';
class CreatePasswordScreen extends StatefulWidget {
final String? token;
const CreatePasswordScreen({super.key, this.token});
@override
State<CreatePasswordScreen> createState() => _CreatePasswordScreenState();
}
class _CreatePasswordScreenState extends State<CreatePasswordScreen> {
final _formKey = GlobalKey<FormState>();
final _passwordCtrl = TextEditingController();
final _confirmCtrl = TextEditingController();
bool _checkingToken = true;
bool _submitting = false;
bool _tokenValid = false;
String? _message;
String get _token => (widget.token ?? '').trim();
@override
void initState() {
super.initState();
_checkToken();
}
@override
void dispose() {
_passwordCtrl.dispose();
_confirmCtrl.dispose();
super.dispose();
}
bool _isStrongPassword(String v) {
if (v.length < 8) return false;
final hasUpper = RegExp(r'[A-Z]').hasMatch(v);
final hasDigit = RegExp(r'\d').hasMatch(v);
return hasUpper && hasDigit;
}
String? _validatePassword(String? value) {
final v = value ?? '';
if (v.isEmpty) return 'Veuillez saisir un mot de passe.';
if (!_isStrongPassword(v)) {
return 'Minimum 8 caractères, avec au moins 1 majuscule et 1 chiffre.';
}
return null;
}
String? _validateConfirmation(String? value) {
final v = value ?? '';
if (v.isEmpty) return 'Veuillez confirmer le mot de passe.';
if (v != _passwordCtrl.text) return 'Les mots de passe ne correspondent pas.';
return null;
}
Future<void> _checkToken() async {
if (_token.isEmpty) {
setState(() {
_checkingToken = false;
_tokenValid = false;
});
return;
}
try {
final ok = await AuthService.verifyCreatePasswordToken(_token);
if (!mounted) return;
setState(() {
_checkingToken = false;
_tokenValid = ok;
});
} catch (e) {
if (!mounted) return;
setState(() {
_checkingToken = false;
_tokenValid = false;
_message = e.toString().replaceAll('Exception: ', '');
});
}
}
Future<void> _submit() async {
if (_submitting || !_tokenValid) return;
if (!(_formKey.currentState?.validate() ?? false)) return;
setState(() {
_submitting = true;
_message = null;
});
try {
await AuthService.createPasswordWithToken(
token: _token,
password: _passwordCtrl.text,
passwordConfirmation: _confirmCtrl.text,
);
if (!mounted) return;
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(
'Mot de passe créé avec succès. Vous pouvez vous connecter.',
style: GoogleFonts.merienda(),
),
),
);
context.go('/login');
} catch (e) {
if (!mounted) return;
setState(() {
_submitting = false;
_message = e.toString().replaceAll('Exception: ', '');
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/paper2.png'),
fit: BoxFit.cover,
repeat: ImageRepeat.repeat,
),
),
child: Center(
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 560),
child: Card(
color: const Color(0xF4FFFFFF),
margin: const EdgeInsets.all(24),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
child: Padding(
padding: const EdgeInsets.all(24),
child: _checkingToken
? const Center(child: CircularProgressIndicator())
: _tokenValid
? _buildForm()
: _buildInvalidToken(),
),
),
),
),
),
);
}
Widget _buildForm() {
return Form(
key: _formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
'Créer votre mot de passe',
style: GoogleFonts.merienda(fontSize: 28, fontWeight: FontWeight.w700),
textAlign: TextAlign.center,
),
const SizedBox(height: 18),
TextFormField(
controller: _passwordCtrl,
obscureText: true,
validator: _validatePassword,
decoration: const InputDecoration(
labelText: 'Nouveau mot de passe',
border: OutlineInputBorder(),
),
),
const SizedBox(height: 14),
TextFormField(
controller: _confirmCtrl,
obscureText: true,
validator: _validateConfirmation,
decoration: const InputDecoration(
labelText: 'Confirmer le mot de passe',
border: OutlineInputBorder(),
),
),
const SizedBox(height: 10),
Text(
'Le mot de passe doit contenir au moins 8 caractères, dont 1 majuscule et 1 chiffre.',
style: GoogleFonts.merienda(fontSize: 12, color: Colors.black54),
),
if (_message != null) ...[
const SizedBox(height: 12),
Text(
_message!,
style: GoogleFonts.merienda(color: Colors.red.shade700),
),
],
const SizedBox(height: 16),
_submitting
? const Center(child: CircularProgressIndicator())
: ImageButton(
bg: 'assets/images/bg_green.png',
width: double.infinity,
height: 44,
text: 'Valider',
textColor: const Color(0xFF2D6A4F),
onPressed: _submit,
),
],
),
);
}
Widget _buildInvalidToken() {
final msg = _message ?? 'Lien invalide ou expiré.';
return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
'Création du mot de passe',
style: GoogleFonts.merienda(fontSize: 28, fontWeight: FontWeight.w700),
textAlign: TextAlign.center,
),
const SizedBox(height: 20),
Text(
msg,
style: GoogleFonts.merienda(fontSize: 16),
textAlign: TextAlign.center,
),
const SizedBox(height: 20),
ImageButton(
bg: 'assets/images/bg_green.png',
width: double.infinity,
height: 44,
text: 'Retour à la connexion',
textColor: const Color(0xFF2D6A4F),
onPressed: () => context.go('/login'),
),
],
);
}
}

View File

@ -355,7 +355,7 @@ class _LoginPageState extends State<LoginScreen> {
Center(
child: TextButton(
onPressed: () {
// TODO: Implémenter la logique de récupération de mot de passe
context.go('/create-password');
},
child: Text(
'Mot de passe oublié ?',
@ -618,7 +618,7 @@ class _LoginPageState extends State<LoginScreen> {
),
const SizedBox(height: 12),
TextButton(
onPressed: () {/* TODO */},
onPressed: () => context.go('/create-password'),
child: Text(
'Mot de passe oublié ?',
style: GoogleFonts.merienda(

View File

@ -44,6 +44,8 @@ class ApiConfig {
static const String refreshToken = '/auth/refresh';
static const String authMe = '/auth/me';
static const String changePasswordRequired = '/auth/change-password-required';
static const String verifyCreatePasswordToken = '/auth/verify-token';
static const String createPassword = '/auth/create-password';
// Users endpoints
static const String users = '/users';

View File

@ -131,6 +131,61 @@ class AuthService {
}
}
/// Vérifie qu'un token de création de mot de passe est encore valide.
/// Retourne `true` si l'API renvoie 200 ; `false` si 404.
static Future<bool> verifyCreatePasswordToken(String token) async {
final cleaned = token.trim();
if (cleaned.isEmpty) return false;
try {
final uri = Uri.parse(
'${ApiConfig.baseUrl}${ApiConfig.verifyCreatePasswordToken}?token=${Uri.encodeQueryComponent(cleaned)}',
);
final response = await http.get(uri, headers: ApiConfig.headers);
if (response.statusCode == 200) return true;
if (response.statusCode == 404) return false;
final decoded = _tryDecodeJsonMap(response.body);
throw Exception(_extractErrorMessage(decoded, response.statusCode));
} on http.ClientException {
throw Exception(
'Connexion à ${ApiConfig.baseUrl} impossible. Vérifiez votre réseau puis réessayez.',
);
}
}
/// Crée le mot de passe initial via token email.
static Future<void> createPasswordWithToken({
required String token,
required String password,
required String passwordConfirmation,
}) async {
final cleaned = token.trim();
if (cleaned.isEmpty) {
throw Exception('Lien invalide ou expiré.');
}
late final http.Response response;
try {
response = await http.post(
Uri.parse('${ApiConfig.baseUrl}${ApiConfig.createPassword}'),
headers: ApiConfig.headers,
body: jsonEncode({
'token': cleaned,
'password': password,
'password_confirmation': passwordConfirmation,
}),
);
} on http.ClientException {
throw Exception(
'Connexion à ${ApiConfig.baseUrl} impossible. Vérifiez votre réseau puis réessayez.',
);
}
if (response.statusCode == 200 || response.statusCode == 201) {
return;
}
final decoded = _tryDecodeJsonMap(response.body);
throw Exception(_extractErrorMessage(decoded, response.statusCode));
}
/// Déconnexion de l'utilisateur
static Future<void> logout() async {
await TokenService.clearAll();