TP7 Recréer une Application de Connexion avec Mot de Passe Oublié et Inscription

• Développer une application Flutter composée de plusieurs pages, chacune avec un design spécifique, en se basant sur les captures d’écran fournies.

• Vous devez développer une petite application avec les fonctionnalités suivantes :
• Page de Connexion : Permet à l’utilisateur de se connecter en entrant son adresse e-mail et son mot de passe.
• Page d’Inscription : Permet à un utilisateur de créer un compte en entrant son nom, adresse e-mail, et mot de passe.
• Page de Réinitialisation du Mot de Passe : Permet à l’utilisateur de réinitialiser son mot de passe en entrant son adresse e-mail.
• Politique de Confidentialité : Page contenant la politique de confidentialité de l’application.
• Termes et Conditions : Page contenant les termes et conditions d’utilisation de l’application.

1. Consignes Générales :

• Vous avez 5 captures d’écran, chacune correspondant à l’une des pages mentionnées ci-dessus.
• Utilisez ces captures pour recréer l’apparence et la structure des interfaces (UI) en Flutter, y compris les couleurs, les polices de texte, et les boutons.
• Vous devez également implémenter la navigation entre les pages avec Navigator.push et Navigator.pop comme suit.

ext: TextSpan(
    text: 'En utilisant cette application, vous acceptez nos ',
    style: const TextStyle(color: Colors.white, fontSize: 16), // Style par défaut
    children: [
      TextSpan(
        text: 'termes et conditions',
        style: TextStyle(
          
          color: Colors.blue[900], // Couleur des termes et conditions
          decoration: TextDecoration.underline, // Souligner le texte
        ),
        recognizer: TapGestureRecognizer()
          ..onTap = () {
            // Rediriger vers une autre page
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => TermsAndConditionsPage()), // Remplacer par la page correspondante
            );
          },
      ),
      TextSpan(
        text: ' et notre ',
      ),
      TextSpan(
        text: 'politique de confidentialité',
        style: TextStyle(
          color: Colors.blue[900], // Couleur de la politique de confidentialité
          decoration: TextDecoration.underline, // Souligner le texte
        ),
        recognizer: TapGestureRecognizer()
          ..onTap = () {
            // Rediriger vers une autre page
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => PrivacyPolicyPage()), // Remplacer par la page correspondante
            );
          },
      ),
      TextSpan(
        text: '.',
      ),
    ],
  ),
),

• Respectez le style de l’application en utilisant les dégradés de couleur et les polices en gras lorsque cela est indiqué dans les captures d’écran.Vous pouvez utiliser le dégradé suivant:

// Dégradé en arrière-plan
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              Colors.blue[800]!,  // Couleur en haut
              Colors.blue[200]!,  // Couleur en bas
            ],
          ),

• Utilisez les widgets appropriés comme TextField, ElevatedButton, MouseRegion, GestureDetector, etc., en vous basant sur les exemples de code donnés dans les cours.

2. Consigne pour la nomenclature des classes :

• Nommer toutes les classes StatelessWidget avec votre nom et prénom.
• Par exemple, si votre nom est Ahmed Ben Ali, vous devrez nommer vos classes de la manière suivante :

class AhmedBenAli extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // Votre code ici
    );
  }
}


Points à vérifier :

• Utilisez votre nom et prénom en camelCase (sans espaces, en capitalisant chaque partie) pour nommer la classe.
• Si plusieurs classes sont nécessaires, vous pouvez ajouter des suffixes pertinents après votre nom, comme AhmedBenAliLoginPage ou AhmedBenAliInscriptionPage.

3. Instructions Détaillées :

• Étape 1 : Créer la page de Connexion (connection.dart)
• La page de connexion comporte deux champs de texte : un pour l’adresse e-mail et un pour le mot de passe.
• Il y a un bouton « Se connecter » et un lien pour réinitialiser le mot de passe (mot de passe oublié).
• Les boutons et textes doivent correspondre aux couleurs affichées dans la capture d’écran.
• Dans le champ mot de passe, l’icône « œil » doit apparaître à droite.
• Lorsque l’icône est cliquée :
• Si l’œil est « ouvert », le mot de passe doit être visible (texte normal).
• Si l’œil est « fermé », le mot de passe doit être masqué (texte sécurisé).
• L’état de l’œil (ouvert/fermé) doit changer dynamiquement lorsque l’utilisateur appuie sur l’icône.
• Points clés à vérifier :
• Les champs de texte sont correctement stylés.
• Le bouton « Se connecter » fonctionne, même s’il ne redirige pas vers une authentification réelle.
• Le lien vers la page « Mot de Passe Oublié » redirige correctement à la bonne page.
• Étape 2 : Créer la page d’Inscription (inscription.dart)
• Cette page contient des champs pour le nom, l’adresse e-mail, et le mot de passe.
• Le bouton « Créer un compte » doit être stylé selon la capture.
• Ajouter un bouton ou un lien pour revenir à la page de connexion.
• Points clés à vérifier :
• Navigation entre la page d’inscription et celle de connexion.
• Champs et validation visuelle (couleurs, icônes).
• Étape 3 : Créer la page de Mot de Passe Oublié (motDepasseOublien.dart)
• Un seul champ de texte pour entrer l’adresse e-mail, avec un bouton pour soumettre.
• Respecter la structure visuelle : bouton stylé, couleur, alignement du texte.
• Points clés à vérifier :
• Le design de la page respecte celui des captures.
• Navigation fonctionnelle pour revenir à la page de connexion après l’envoi du formulaire.
• Étape 4 : Créer la page de Politique de Confidentialité (privacyPolicyPage.dart)
• Cette page contient un texte détaillant la politique de confidentialité.
• Un bouton « Accepter et continuer » en bas de la page permet de revenir à la page précédente.
• Points clés à vérifier :
• Le texte est lisible et bien formaté, avec une mise en page soignée.
• Le bouton fonctionne et permet de revenir à la page précédente.
• Texte à utiliser :

// Contenu de la politique de confidentialité
              const Text(
                '''Cette politique de confidentialité explique comment nous collectons, utilisons et protégeons vos informations personnelles lorsque vous utilisez notre application.
1. Collecte d'informations : Nous collectons des informations personnelles que vous nous fournissez directement, telles que votre nom et votre adresse e-mail.
2. Utilisation des informations : Vos informations sont utilisées pour fournir et améliorer nos services. Nous ne partagerons pas vos informations avec des tiers sans votre consentement.
3. Sécurité des informations : Nous mettons en place des mesures de sécurité pour protéger vos données contre tout accès non autorisé.
4. Modifications : Nous nous réservons le droit de mettre à jour cette politique de confidentialité à tout moment.''',
                style: TextStyle(color: Colors.white, fontSize: 16),
              ),

• Étape 5 : Créer la page des Termes et Conditions (termPage.dart)
• Cette page doit contenir les termes et conditions en format texte avec un bouton pour revenir en arrière.
• Points clés à vérifier :
• Navigation correcte pour revenir à la page précédente.
• Texte à utiliser :

// Contenu des termes et conditions
              const Text(
                '''Bienvenue sur notre application. En utilisant cette application, vous acceptez de respecter et d'être lié par les termes et conditions suivants. Veuillez les lire attentivement.

1. Utilisation de l'application : Vous acceptez d'utiliser cette application uniquement à des fins légales et conformément à ces termes et conditions.

2. Confidentialité : Vos informations personnelles sont protégées par notre politique de confidentialité.

3. Propriété intellectuelle : Tout le contenu de cette application est protégé par les lois sur le droit d'auteur et la propriété intellectuelle.

4. Modifications : Nous nous réservons le droit de modifier ces termes et conditions à tout moment.''',
                style: TextStyle(color: Colors.white, fontSize: 16),
              ),

• Navigation : Utilisez Navigator.push pour la navigation entre les pages.
• Design : Respectez les polices, couleurs, et tailles indiquées dans les captures d’écran. Utilisez des dégradés pour le fond, et des polices en gras pour les titres.
• Structure du projet : Chaque page doit être dans son propre fichier .dart.
• Bonus : Si vous avez terminé, essayez d’ajouter des validations de base aux champs de texte (par exemple, vérifier si l’e-mail est valide).

• Votre projet Flutter complet sous forme de fichier .zip.
• Assurez-vous que votre projet compile et fonctionne sans erreurs.
• Incluez une capture d’écran de chaque page de votre application.

• Connexion (20 points)
• Inscription (20 points)
• Mot de Passe Oublié (20 points)
• Politique de Confidentialité (15 points)
• Termes et Conditions (15 points)
• Qualité du code et respect des consignes (10 points)

• Soyez attentif aux détails et à la cohérence du design.
• Utilisez les bonnes pratiques en Flutter, comme la réutilisation de widgets et un code bien structuré.
• N’hésitez pas à poser des questions en cas de doute, mais le travail doit être individuel.

Bonne chance à tous !