Tp9 Création dune application flutter de formulaire dinscription

class UserProfile {
  final String nom;
  final String prenom;
  final String email;
  final String password;
  final String profession;
  final int experience;
  final double tjm;
  final String biographie;

  const UserProfile({
    this.nom = '',
    this.prenom = '',
    this.email = '',
    this.password = '',
    this.profession = '',
    this.experience = 0,
    this.tjm = 0.0,
    this.biographie = '',
  });

  /// Crée une copie en remplaçant uniquement les champs fournis.
  UserProfile copyWith({
    String? nom,
    String? prenom,
    String? email,
    String? password,
    String? profession,
    int? experience,
    double? tjm,
    String? biographie,
  }) {
    return UserProfile(
      nom: nom ?? this.nom,
      prenom: prenom ?? this.prenom,
      email: email ?? this.email,
      password: password ?? this.password,
      profession: profession ?? this.profession,
      experience: experience ?? this.experience,
      tjm: tjm ?? this.tjm,
      biographie: biographie ?? this.biographie,
    );
  }

  String get nomComplet => '$prenom ${nom.toUpperCase()}';

  @override
  String toString() =>
      'UserProfile($nomComplet, $email, $profession, $experience an(s), $tjm €)';
}

/// Validateurs réutilisables : renvoient null si la valeur est valide,
/// sinon le message d'erreur à afficher sous le champ.
class Validators {
  Validators._(); // classe utilitaire, non instanciable

  static final RegExp _nomRegExp = RegExp(r"^[A-Za-zÀ-ÖØ-öø-ÿ' -]+$");
  static final RegExp _emailRegExp =
      RegExp(r'^[\w.+-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z]{2,}$');
  static final RegExp _majuscule = RegExp(r'[A-Z]');
  static final RegExp _chiffre = RegExp(r'[0-9]');

  static String? nom(String? value, {String champ = 'Ce champ'}) {
    final v = value?.trim() ?? '';
    if (v.isEmpty) return '$champ est obligatoire';
    if (v.length < 2) return '$champ doit contenir au moins 2 caractères';
    if (!_nomRegExp.hasMatch(v)) return '$champ ne doit contenir que des lettres';
    return null;
  }

  static String? email(String? value) {
    final v = value?.trim() ?? '';
    if (v.isEmpty) return "L'e-mail est obligatoire";
    if (!_emailRegExp.hasMatch(v)) return 'Format attendu : nom@domaine.com';
    return null;
  }

  static String? motDePasse(String? value) {
    final v = value ?? '';
    if (v.isEmpty) return 'Le mot de passe est obligatoire';
    if (v.length < 8) return 'Au moins 8 caractères';
    if (!_majuscule.hasMatch(v)) return 'Au moins une lettre majuscule';
    if (!_chiffre.hasMatch(v)) return 'Au moins un chiffre';
    return null;
  }

  static String? confirmation(String? value, String original) {
    if (value == null || value.isEmpty) return 'Veuillez confirmer le mot de passe';
    if (value != original) return 'Les mots de passe ne correspondent pas';
    return null;
  }

  static String? profession(String? value) {
    final v = value?.trim() ?? '';
    if (v.isEmpty) return 'La profession est obligatoire';
    if (v.length < 2) return 'Profession trop courte';
    return null;
  }

  static String? experience(String? value) {
    final v = value?.trim() ?? '';
    if (v.isEmpty) return "Indiquez vos années d'expérience";
    final n = int.tryParse(v);
    if (n == null) return 'Nombre entier attendu';
    if (n < 0 || n > 50) return 'Valeur comprise entre 0 et 50';
    return null;
  }

  static String? tjm(String? value) {
    final v = (value ?? '').trim().replaceAll(',', '.');
    if (v.isEmpty) return 'Le TJM est obligatoire';
    final n = double.tryParse(v);
    if (n == null) return 'Montant invalide';
    if (n < 50 || n > 3000) return 'Le TJM doit être compris entre 50 € et 3000 €';
    return null;
  }

  /// Champ facultatif : vide = valide, sinon au moins 20 caractères.
  static String? biographie(String? value) {
    final v = value?.trim() ?? '';
    if (v.isEmpty) return null;
    if (v.length < 20) {
      return 'Au moins 20 caractères (${v.length}/20) ou laissez vide';
    }
    return null;
  }
}

import 'package:flutter/material.dart';

import '../models/user_profile.dart';
import '../utils/validators.dart';
import 'step_two_screen.dart';

class StepOneScreen extends StatefulWidget {
  const StepOneScreen({super.key});

  @override
  State<StepOneScreen> createState() => _StepOneScreenState();
}

class _StepOneScreenState extends State<StepOneScreen> {
  final _formKey = GlobalKey<FormState>();
  final _confirmKey = GlobalKey<FormFieldState<String>>();

  final _nomCtrl = TextEditingController();
  final _prenomCtrl = TextEditingController();
  final _emailCtrl = TextEditingController();
  final _passwordCtrl = TextEditingController();
  final _confirmCtrl = TextEditingController();

  bool _masquerMdp = true;
  bool _masquerConfirm = true;

  @override
  void dispose() {
    _nomCtrl.dispose();
    _prenomCtrl.dispose();
    _emailCtrl.dispose();
    _passwordCtrl.dispose();
    _confirmCtrl.dispose();
    super.dispose();
  }

  void _suivant() {
    FocusScope.of(context).unfocus();
    if (!_formKey.currentState!.validate()) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Veuillez corriger les champs en rouge')),
      );
      return;
    }
    final profil = UserProfile(
      nom: _nomCtrl.text.trim(),
      prenom: _prenomCtrl.text.trim(),
      email: _emailCtrl.text.trim(),
      password: _passwordCtrl.text,
    );
    Navigator.push(
      context,
      MaterialPageRoute(builder: (_) => StepTwoScreen(profil: profil)),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Inscription - Étape 1/3'),
        bottom: const PreferredSize(
          preferredSize: Size.fromHeight(4),
          child: LinearProgressIndicator(value: 1 / 3),
        ),
      ),
      body: SafeArea(
        child: Form(
          key: _formKey,
          autovalidateMode: AutovalidateMode.onUserInteraction,
          child: ListView(
            padding: const EdgeInsets.all(16),
            children: [
              TextFormField(
                controller: _nomCtrl,
                decoration: const InputDecoration(
                  labelText: 'Nom',
                  prefixIcon: Icon(Icons.person_outline),
                ),
                textCapitalization: TextCapitalization.characters,
                textInputAction: TextInputAction.next,
                validator: (v) => Validators.nom(v, champ: 'Le nom'),
              ),
              const SizedBox(height: 16),
              TextFormField(
                controller: _prenomCtrl,
                decoration: const InputDecoration(
                  labelText: 'Prénom',
                  prefixIcon: Icon(Icons.badge_outlined),
                ),
                textCapitalization: TextCapitalization.words,
                textInputAction: TextInputAction.next,
                validator: (v) => Validators.nom(v, champ: 'Le prénom'),
              ),
              const SizedBox(height: 16),
              TextFormField(
                controller: _emailCtrl,
                decoration: const InputDecoration(
                  labelText: 'E-mail',
                  hintText: 'nom@domaine.com',
                  prefixIcon: Icon(Icons.email_outlined),
                ),
                keyboardType: TextInputType.emailAddress,
                autocorrect: false,
                textInputAction: TextInputAction.next,
                validator: Validators.email,
              ),
              const SizedBox(height: 16),
              TextFormField(
                controller: _passwordCtrl,
                obscureText: _masquerMdp,
                decoration: InputDecoration(
                  labelText: 'Mot de passe',
                  helperText: '8 caractères min., 1 majuscule, 1 chiffre',
                  prefixIcon: const Icon(Icons.lock_outline),
                  suffixIcon: IconButton(
                    tooltip: _masquerMdp ? 'Afficher' : 'Masquer',
                    icon: Icon(_masquerMdp ? Icons.visibility : Icons.visibility_off),
                    onPressed: () => setState(() => _masquerMdp = !_masquerMdp),
                  ),
                ),
                textInputAction: TextInputAction.next,
                validator: Validators.motDePasse,
                onChanged: (_) {
                  // Revalide la confirmation si elle est déjà remplie
                  if (_confirmCtrl.text.isNotEmpty) {
                    _confirmKey.currentState?.validate();
                  }
                },
              ),
              const SizedBox(height: 16),
              TextFormField(
                key: _confirmKey,
                controller: _confirmCtrl,
                obscureText: _masquerConfirm,
                decoration: InputDecoration(
                  labelText: 'Confirmer le mot de passe',
                  prefixIcon: const Icon(Icons.lock_reset),
                  suffixIcon: IconButton(
                    tooltip: _masquerConfirm ? 'Afficher' : 'Masquer',
                    icon: Icon(_masquerConfirm ? Icons.visibility : Icons.visibility_off),
                    onPressed: () => setState(() => _masquerConfirm = !_masquerConfirm),
                  ),
                ),
                textInputAction: TextInputAction.done,
                onFieldSubmitted: (_) => _suivant(),
                validator: (v) => Validators.confirmation(v, _passwordCtrl.text),
              ),
              const SizedBox(height: 24),
              FilledButton.icon(
                onPressed: _suivant,
                icon: const Icon(Icons.arrow_forward),
                label: const Text('Suivant'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import '../models/user_profile.dart';
import '../utils/validators.dart';
import 'summary_screen.dart';

class StepTwoScreen extends StatefulWidget {
  final UserProfile profil;

  const StepTwoScreen({super.key, required this.profil});

  @override
  State<StepTwoScreen> createState() => _StepTwoScreenState();
}

class _StepTwoScreenState extends State<StepTwoScreen> {
  final _formKey = GlobalKey<FormState>();
  final _professionCtrl = TextEditingController();
  final _experienceCtrl = TextEditingController();
  final _tjmCtrl = TextEditingController();
  final _bioCtrl = TextEditingController();

  @override
  void dispose() {
    _professionCtrl.dispose();
    _experienceCtrl.dispose();
    _tjmCtrl.dispose();
    _bioCtrl.dispose();
    super.dispose();
  }

  void _suivant() {
    FocusScope.of(context).unfocus();
    if (!_formKey.currentState!.validate()) return;

    final profilComplet = widget.profil.copyWith(
      profession: _professionCtrl.text.trim(),
      experience: int.parse(_experienceCtrl.text.trim()),
      tjm: double.parse(_tjmCtrl.text.trim().replaceAll(',', '.')),
      biographie: _bioCtrl.text.trim(),
    );

    Navigator.push(
      context,
      MaterialPageRoute(builder: (_) => SummaryScreen(profil: profilComplet)),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(Icons.arrow_back),
          tooltip: 'Retour à l\'étape 1',
          onPressed: () => Navigator.pop(context),
        ),
        title: const Text('Profil Professionnel - Étape 2/3'),
        bottom: const PreferredSize(
          preferredSize: Size.fromHeight(4),
          child: LinearProgressIndicator(value: 2 / 3),
        ),
      ),
      body: SafeArea(
        child: Form(
          key: _formKey,
          autovalidateMode: AutovalidateMode.onUserInteraction,
          child: ListView(
            padding: const EdgeInsets.all(16),
            children: [
              Text(
                'Bonjour ${widget.profil.prenom}, parlez-nous de votre activité.',
                style: Theme.of(context).textTheme.titleMedium,
              ),
              const SizedBox(height: 16),
              TextFormField(
                controller: _professionCtrl,
                decoration: const InputDecoration(
                  labelText: 'Profession',
                  hintText: 'Ex. : Développeur mobile',
                  prefixIcon: Icon(Icons.work_outline),
                ),
                textCapitalization: TextCapitalization.sentences,
                textInputAction: TextInputAction.next,
                validator: Validators.profession,
              ),
              const SizedBox(height: 16),
              TextFormField(
                controller: _experienceCtrl,
                decoration: const InputDecoration(
                  labelText: "Années d'expérience",
                  prefixIcon: Icon(Icons.timeline),
                ),
                keyboardType: TextInputType.number,
                inputFormatters: [
                  FilteringTextInputFormatter.digitsOnly,
                  LengthLimitingTextInputFormatter(2),
                ],
                textInputAction: TextInputAction.next,
                validator: Validators.experience,
              ),
              const SizedBox(height: 16),
              TextFormField(
                controller: _tjmCtrl,
                decoration: const InputDecoration(
                  labelText: 'Tarif Journalier Moyen (TJM)',
                  prefixIcon: Icon(Icons.euro),
                  suffixText: '€',
                ),
                keyboardType: const TextInputType.numberWithOptions(decimal: true),
                inputFormatters: [
                  // chiffres, un seul séparateur (. ou ,), 2 décimales max
                  FilteringTextInputFormatter.allow(RegExp(r'^\d*[.,]?\d{0,2}')),
                ],
                textInputAction: TextInputAction.next,
                validator: Validators.tjm,
              ),
              const SizedBox(height: 16),
              TextFormField(
                controller: _bioCtrl,
                decoration: const InputDecoration(
                  labelText: 'Biographie (facultative)',
                  hintText: 'Présentez votre parcours en quelques lignes',
                  alignLabelWithHint: true,
                ),
                minLines: 3,
                maxLines: 5,
                maxLength: 300,
                keyboardType: TextInputType.multiline,
                textCapitalization: TextCapitalization.sentences,
                validator: Validators.biographie,
              ),
              const SizedBox(height: 24),
              FilledButton.icon(
                onPressed: _suivant,
                icon: const Icon(Icons.arrow_forward),
                label: const Text('Suivant'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

import '../models/user_profile.dart';
import 'step_one_screen.dart';

class SummaryScreen extends StatefulWidget {
  final UserProfile profil;

  const SummaryScreen({super.key, required this.profil});

  @override
  State<SummaryScreen> createState() => _SummaryScreenState();
}

class _SummaryScreenState extends State<SummaryScreen> {
  final _formKey = GlobalKey<FormState>();

  void _retourDebut() {
    Navigator.of(context).pushAndRemoveUntil(
      MaterialPageRoute(builder: (_) => const StepOneScreen()),
      (route) => false,
    );
  }

  Future<void> _reinitialiser() async {
    final confirme = await showDialog<bool>(
      context: context,
      builder: (ctx) => AlertDialog(
        title: const Text('Réinitialiser ?'),
        content: const Text('Toutes les données saisies seront perdues.'),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(ctx, false),
            child: const Text('Annuler'),
          ),
          FilledButton(
            onPressed: () => Navigator.pop(ctx, true),
            child: const Text('Réinitialiser'),
          ),
        ],
      ),
    );
    if (confirme == true && mounted) _retourDebut();
  }

  Future<void> _confirmer() async {
    if (!_formKey.currentState!.validate()) return;

    await showDialog<void>(
      context: context,
      barrierDismissible: false,
      builder: (ctx) => AlertDialog(
        icon: const Icon(Icons.check_circle, color: Colors.green, size: 48),
        title: const Text('Compte créé !'),
        content: Text(
          'Bienvenue ${widget.profil.prenom}.\n'
          'Un e-mail de confirmation a été envoyé à ${widget.profil.email}.',
          textAlign: TextAlign.center,
        ),
        actions: [
          FilledButton(
            onPressed: () => Navigator.pop(ctx),
            child: const Text('Terminer'),
          ),
        ],
      ),
    );
    if (mounted) _retourDebut();
  }

  Widget _section(String titre, List<Widget> lignes) {
    return Card(
      margin: const EdgeInsets.only(bottom: 16),
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 8),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: const EdgeInsets.fromLTRB(16, 8, 16, 0),
              child: Text(titre, style: Theme.of(context).textTheme.titleMedium),
            ),
            ...lignes,
          ],
        ),
      ),
    );
  }

  Widget _ligne(IconData icone, String libelle, String valeur) {
    return ListTile(
      leading: Icon(icone),
      title: Text(libelle),
      subtitle: Text(valeur.isEmpty ? 'Non renseigné' : valeur),
    );
  }

  @override
  Widget build(BuildContext context) {
    final p = widget.profil;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Récapitulatif de votre profil'),
        actions: [
          IconButton(
            tooltip: 'Réinitialiser',
            icon: const Icon(Icons.restart_alt),
            onPressed: _reinitialiser,
          ),
        ],
        bottom: const PreferredSize(
          preferredSize: Size.fromHeight(4),
          child: LinearProgressIndicator(value: 1),
        ),
      ),
      body: SafeArea(
        child: Form(
          key: _formKey,
          child: ListView(
            padding: const EdgeInsets.all(16),
            children: [
              _section('Identité', [
                _ligne(Icons.person_outline, 'Nom complet', p.nomComplet),
                _ligne(Icons.email_outlined, 'E-mail', p.email),
                _ligne(Icons.lock_outline, 'Mot de passe', '•' * p.password.length),
              ]),
              _section('Profil professionnel', [
                _ligne(Icons.work_outline, 'Profession', p.profession),
                _ligne(Icons.timeline, 'Expérience', '${p.experience} an(s)'),
                _ligne(Icons.euro, 'TJM', '${p.tjm.toStringAsFixed(2)} €'),
                _ligne(Icons.notes, 'Biographie', p.biographie),
              ]),
              FormField<bool>(
                initialValue: false,
                validator: (v) =>
                    v == true ? null : "Vous devez accepter les conditions d'utilisation",
                builder: (field) => Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    CheckboxListTile(
                      value: field.value,
                      onChanged: field.didChange,
                      title: const Text("J'accepte les conditions d'utilisation"),
                      controlAffinity: ListTileControlAffinity.leading,
                      contentPadding: EdgeInsets.zero,
                    ),
                    if (field.hasError)
                      Padding(
                        padding: const EdgeInsets.only(left: 12),
                        child: Text(
                          field.errorText!,
                          style: TextStyle(
                            color: Theme.of(context).colorScheme.error,
                            fontSize: 12,
                          ),
                        ),
                      ),
                  ],
                ),
              ),
              const SizedBox(height: 24),
              FilledButton.icon(
                onPressed: _confirmer,
                icon: const Icon(Icons.check),
                label: const Text('Confirmer et créer le compte'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

import 'screens/step_one_screen.dart';

void main() => runApp(const InscriptionApp());

class InscriptionApp extends StatelessWidget {
  const InscriptionApp({super.key});

  // Valeurs reprises des styles Figma
  static const Color primary = Color(0xFF00A8CC);
  static const Color error = Color(0xFFD32F2F);
  static const Color fieldBackground = Color(0xFFF2F7F9);

  @override
  Widget build(BuildContext context) {
    final scheme = ColorScheme.fromSeed(seedColor: primary, error: error);
    final rayon = BorderRadius.circular(8);

    return MaterialApp(
      title: 'TP8 Inscription',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: scheme,
        appBarTheme: AppBarTheme(
          backgroundColor: primary,
          foregroundColor: Colors.white,
          centerTitle: true,
        ),
        inputDecorationTheme: InputDecorationTheme(
          filled: true,
          fillColor: fieldBackground,
          border: OutlineInputBorder(borderRadius: rayon),
          enabledBorder: OutlineInputBorder(
            borderRadius: rayon,
            borderSide: BorderSide(color: Colors.grey.shade400),
          ),
          focusedBorder: OutlineInputBorder(
            borderRadius: rayon,
            borderSide: const BorderSide(color: primary, width: 2),
          ),
          errorBorder: OutlineInputBorder(
            borderRadius: rayon,
            borderSide: const BorderSide(color: error),
          ),
          focusedErrorBorder: OutlineInputBorder(
            borderRadius: rayon,
            borderSide: const BorderSide(color: error, width: 2),
          ),
        ),
        filledButtonTheme: FilledButtonThemeData(
          style: FilledButton.styleFrom(
            minimumSize: const Size.fromHeight(48),
            shape: const StadiumBorder(),
          ),
        ),
      ),
      home: const StepOneScreen(),
    );
  }
}

import 'package:flutter_test/flutter_test.dart';
import 'package:tp_inscription/utils/validators.dart';

void main() {
  group('Validators.email', () {
    test('refuse une valeur vide', () {
      expect(Validators.email(''), isNotNull);
    });
    test('refuse une adresse sans extension', () {
      expect(Validators.email('ali@gmail'), isNotNull);
    });
    test('accepte une adresse valide', () {
      expect(Validators.email('ali.ben@gmail.com'), isNull);
    });
  });

  group('Validators.motDePasse', () {
    test('trop court', () {
      expect(Validators.motDePasse('Ab1'), 'Au moins 8 caractères');
    });
    test('sans majuscule', () {
      expect(Validators.motDePasse('bonjour12'), 'Au moins une lettre majuscule');
    });
    test('sans chiffre', () {
      expect(Validators.motDePasse('Bonjourrr'), 'Au moins un chiffre');
    });
    test('valide', () {
      expect(Validators.motDePasse('Bonjour12'), isNull);
    });
  });

  group('Validators.confirmation', () {
    test('différente', () {
      expect(Validators.confirmation('Abc12345', 'Abc12346'), isNotNull);
    });
    test('identique', () {
      expect(Validators.confirmation('Abc12345', 'Abc12345'), isNull);
    });
  });

  group('Validators numériques', () {
    test('expérience hors bornes', () {
      expect(Validators.experience('51'), isNotNull);
    });
    test('TJM avec virgule', () {
      expect(Validators.tjm('350,50'), isNull);
    });
    test('TJM trop bas', () {
      expect(Validators.tjm('20'), isNotNull);
    });
  });

  group('Validators.biographie (facultative)', () {
    test('vide = valide', () {
      expect(Validators.biographie(''), isNull);
    });
    test('trop courte', () {
      expect(Validators.biographie('Je code.'), isNotNull);
    });
  });
}