Se connecter à Flutter avec Node js MySQL

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

void main() {
  runApp(const MainApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: LoginPage(),
    );
  }
}

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'home_page.dart'; // Import de ta page Home

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

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final _emailCtrl = TextEditingController();
  final _passwordCtrl = TextEditingController();
  String errorMsg = '';
  bool _isLoading = false;
  bool _obscurePassword = true;

  // Utilise l'IP de ta machine, ici la même que dans ta page Home
  final String serverUrl = "http://10.0.2.2:3000/login";

  Future<void> _login() async {
  try {
    setState(() {
      errorMsg = "";
      _isLoading = true;
    });

    final response = await http.post(
      Uri.parse(serverUrl),
      headers: {'Content-Type': 'application/json'},
      body: jsonEncode({
        'email': _emailCtrl.text,
        'password': _passwordCtrl.text,
      }),
    );

    print('Statut: ${response.statusCode}');
    print('Corps: ${response.body}');

    final data = jsonDecode(response.body);

    // 🚀 CORRECTION ICI : Utilisez 'success' au lieu de 'status'
    if (data['success'] == true) { 
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => const HomePage()),
      );
    } else {
      setState(() {
        // Le message d'erreur est sous la clé 'message' si 'success' est false
        errorMsg = data['message'] ?? 'Identifiants incorrects'; 
      });
    }
  } catch (e) {
      print('Erreur: $e');
      setState(() {
        errorMsg = 'Erreur de connexion au serveur.';
      });
    } finally {
      setState(() {
        _isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[50],
      body: SafeArea(
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(24),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const SizedBox(height: 40),

              /// HEADER
              Text(
                "Connexion",
                style: Theme.of(context).textTheme.headlineMedium?.copyWith(
                      fontWeight: FontWeight.bold,
                      color: Colors.indigo[700],
                    ),
              ),
              const SizedBox(height: 8),
              Text(
                "Bienvenue, connectez-vous pour continuer",
                style: TextStyle(color: Colors.grey[600]),
              ),

              const SizedBox(height: 40),

              /// EMAIL FIELD
              TextField(
                controller: _emailCtrl,
                decoration: InputDecoration(
                  labelText: "Adresse email",
                  prefixIcon: const Icon(Icons.email),
                  filled: true,
                  fillColor: Colors.white,
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(12),
                  ),
                ),
                onChanged: (_) => setState(() => errorMsg = ""),
              ),
              const SizedBox(height: 20),

              /// PASSWORD FIELD
              TextField(
                controller: _passwordCtrl,
                obscureText: _obscurePassword,
                decoration: InputDecoration(
                  labelText: "Mot de passe",
                  prefixIcon: const Icon(Icons.lock_outline),
                  suffixIcon: IconButton(
                    icon: Icon(_obscurePassword
                        ? Icons.visibility_outlined
                        : Icons.visibility_off_outlined),
                    onPressed: () =>
                        setState(() => _obscurePassword = !_obscurePassword),
                  ),
                  filled: true,
                  fillColor: Colors.white,
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(12),
                  ),
                ),
                onChanged: (_) => setState(() => errorMsg = ""),
              ),
              const SizedBox(height: 10),

              /// FORGOT PASSWORD
              Align(
                alignment: Alignment.centerRight,
                child: TextButton(
                  onPressed: () {},
                  child: Text(
                    "Mot de passe oublié ?",
                    style: TextStyle(color: Colors.indigo[600]),
                  ),
                ),
              ),

              const SizedBox(height: 20),

              /// LOGIN BUTTON
              SizedBox(
                width: double.infinity,
                child: ElevatedButton(
                  onPressed: _isLoading ? null : _login,
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.indigo[600],
                    foregroundColor: Colors.white,
                    padding: const EdgeInsets.symmetric(vertical: 16),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(12),
                    ),
                  ),
                  child: _isLoading
                      ? const SizedBox(
                          height: 22,
                          width: 22,
                          child: CircularProgressIndicator(
                            strokeWidth: 2,
                            valueColor:
                                AlwaysStoppedAnimation<Color>(Colors.white),
                          ),
                        )
                      : const Text(
                          "Se connecter",
                          style: TextStyle(
                              fontSize: 16, fontWeight: FontWeight.w600),
                        ),
                ),
              ),

              const SizedBox(height: 15),

              /// ERROR MESSAGE
              if (errorMsg.isNotEmpty)
                Container(
                  margin: const EdgeInsets.only(top: 10),
                  padding: const EdgeInsets.all(15),
                  decoration: BoxDecoration(
                    color: Colors.red[50],
                    borderRadius: BorderRadius.circular(12),
                    border: Border.all(color: Colors.red.shade200),
                  ),
                  child: Row(
                    children: [
                      Icon(Icons.error_outline, color: Colors.red[600]),
                      const SizedBox(width: 10),
                      Expanded(
                        child: Text(
                          errorMsg,
                          style: TextStyle(
                            color: Colors.red[700],
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),

              const SizedBox(height: 30),

              /// FOOTER
              Center(
                child: Text(
                  "Développé pour cours Flutter",
                  style: TextStyle(color: Colors.grey[500]),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class Client {
  final int id;
  final String name;
  final String family;
  final int age;

  Client({
    required this.id,
    required this.name,
    required this.family,
    required this.age,
  });

  factory Client.fromJson(Map<String, dynamic> json) {
    return Client(
      id: json['id'] as int? ?? 0, // Gestion null-safe
      name: (json['name'] ?? '') as String,
      family: (json['family'] ?? '') as String,
      age: (json['age'] ?? 0) as int,
    );
  }

  Map<String, dynamic> toJson() => {
    'id': id,
    'name': name,
    'family': family,
    'age': age,
  };
}

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'client_model.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final _nameCtrl = TextEditingController();
  final _familyCtrl = TextEditingController();
  final _ageCtrl = TextEditingController();

  String serverMsg = '';
  final List<Client> _clientsList = [];

  final String baseUrl = "http://10.0.2.2:3000";

  // ------------------ INSERT ------------------
  Future<void> _postRequest() async {
    try {
      final response = await http.post(
        Uri.parse("$baseUrl/add-client"),
        headers: {'Content-Type': 'application/json'},
        body: jsonEncode({
          'name': _nameCtrl.text.trim(),
          'family': _familyCtrl.text.trim(),
          'age': int.tryParse(_ageCtrl.text) ?? 0,
        }),
      );

      final res = jsonDecode(response.body);

      serverMsg = response.statusCode == 201 ? "Client ajouté" : res["message"];
      _clearForm();

      await _getRequest();
      setState(() {});
    } catch (e) {
      serverMsg = e.toString();
      setState(() {});
    }
  }

  // ------------------ LOAD LIST ------------------
  Future<void> _getRequest() async {
    try {
      final response = await http.get(Uri.parse("$baseUrl/clients"));

      if (response.statusCode == 200) {
        final List jsonData = jsonDecode(response.body);
        _clientsList.clear();
        _clientsList.addAll(jsonData.map((e) => Client.fromJson(e)));
      }
      serverMsg = "Données chargées";
    } catch (e) {
      serverMsg = e.toString();
    }
    setState(() {});
  }

  // ------------------ DELETE ------------------
  Future<void> _deleteRequest(int id) async {
    try {
      final response =
          await http.delete(Uri.parse("$baseUrl/clients/$id"));

      serverMsg =
          response.statusCode == 200 ? "Client supprimé" : "Erreur suppression";

      await _getRequest();
      setState(() {});
    } catch (e) {
      serverMsg = e.toString();
      setState(() {});
    }
  }

  // ------------------ UPDATE ------------------
  Future<void> _updateRequest(Client client) async {
    try {
      final response = await http.put(
        Uri.parse("$baseUrl/clients/${client.id}"),
        headers: {'Content-Type': 'application/json'},
        body: jsonEncode(client.toJson()),
      );

      serverMsg = response.statusCode == 200
          ? "Client mis à jour"
          : "Erreur mise à jour";

      await _getRequest();
      setState(() {});
    } catch (e) {
      serverMsg = e.toString();
      setState(() {});
    }
  }

  void _clearForm() {
    _nameCtrl.clear();
    _familyCtrl.clear();
    _ageCtrl.clear();
  }

  @override
  void initState() {
    super.initState();
    _getRequest();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[100],

      // ------------------ APPBAR ------------------
      appBar: AppBar(
        title: const Text("Gestion des Clients"),
        backgroundColor: Colors.indigo,
        actions: [
          IconButton(
            icon: const Icon(Icons.add),
            onPressed: () {
              _clearForm();
              _showAddDialog();
            },
          )
        ],
      ),

      // ------------------ LIST ------------------
      body: _buildClientList(),

      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _clearForm();
          _showAddDialog();
        },
        backgroundColor: Colors.indigo,
        child: const Icon(Icons.add),
      ),
    );
  }

  // ------------------ LIST BUILDER ------------------
  Widget _buildClientList() {
    return ListView.builder(
      padding: const EdgeInsets.all(12),
      itemCount: _clientsList.length,
      itemBuilder: (context, index) {
        final client = _clientsList[index];

        return Card(
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
          elevation: 3,
          margin: const EdgeInsets.symmetric(vertical: 8),
          child: ListTile(
            title: Text(
              "${client.name} ${client.family}",
              style: const TextStyle(fontWeight: FontWeight.bold),
            ),
            subtitle: Text("Âge : ${client.age}"),
            trailing: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                // EDIT
                IconButton(
                  icon: const Icon(Icons.edit, color: Colors.indigo),
                  onPressed: () {
                    _nameCtrl.text = client.name;
                    _familyCtrl.text = client.family;
                    _ageCtrl.text = client.age.toString();

                    _showUpdateDialog(client);
                  },
                ),

                // DELETE
                IconButton(
                  icon: const Icon(Icons.delete, color: Colors.red),
                  onPressed: () => _deleteRequest(client.id),
                ),
              ],
            ),
          ),
        );
      },
    );
  }

  // ------------------ DIALOG AJOUT ------------------
  void _showAddDialog() {
    showDialog(
      context: context,
      builder: (_) {
        return AlertDialog(
          title: const Text("Ajouter un client"),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              _textField(_nameCtrl, "Nom", Icons.person),
              const SizedBox(height: 10),
              _textField(_familyCtrl, "Prénom", Icons.family_restroom),
              const SizedBox(height: 10),
              _textField(_ageCtrl, "Âge", Icons.cake,
                  keyboard: TextInputType.number),
            ],
          ),
          actions: [
            TextButton(
              child: const Text("Annuler"),
              onPressed: () => Navigator.pop(context),
            ),
            ElevatedButton(
              child: const Text("Ajouter"),
              onPressed: () async {
                await _postRequest();
                Navigator.pop(context);
              },
            ),
          ],
        );
      },
    );
  }

  // ------------------ DIALOG UPDATE ------------------
  void _showUpdateDialog(Client client) {
    showDialog(
      context: context,
      builder: (_) {
        return AlertDialog(
          title: const Text("Modifier le client"),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              _textField(_nameCtrl, "Nom", Icons.person),
              const SizedBox(height: 10),
              _textField(_familyCtrl, "Prénom", Icons.family_restroom),
              const SizedBox(height: 10),
              _textField(_ageCtrl, "Âge", Icons.cake,
                  keyboard: TextInputType.number),
            ],
          ),
          actions: [
            TextButton(
              child: const Text("Annuler"),
              onPressed: () => Navigator.pop(context),
            ),
            ElevatedButton(
              child: const Text("Mettre à jour"),
              onPressed: () async {
                await _updateRequest(
                  Client(
                    id: client.id,
                    name: _nameCtrl.text,
                    family: _familyCtrl.text,
                    age: int.tryParse(_ageCtrl.text) ?? 0,
                  ),
                );
                Navigator.pop(context);
              },
            ),
          ],
        );
      },
    );
  }

  // ------------------ TEXTFIELD DESIGN ------------------
  Widget _textField(TextEditingController ctrl, String label, IconData icon,
      {TextInputType keyboard = TextInputType.text}) {
    return TextField(
      controller: ctrl,
      keyboardType: keyboard,
      decoration: InputDecoration(
        labelText: label,
        prefixIcon: Icon(icon),
        filled: true,
        fillColor: Colors.grey[50],
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(12),
        ),
      ),
    );
  }
}