Yanis232 · Yanis232 · Nov 6, 2024
diff --git a/app.js b/app.js
@@ -0,0 +1,81 @@
+require('dotenv').config();
+const express = require('express');
+const mysql = require('mysql');
+const cors = require('cors');
+
+require('dotenv').config({ path: './info.env' }); // faites att ici à vos infos du fichier info.env
+
+
+const app = express();
+const PORT = process.env.PORT || 3000; 
+
+app.use(cors());
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+
+// connexion a la db "dbtechnoback" 
+const db = mysql.createConnection({
+    host: process.env.DB_HOST,
+    user: process.env.DB_USER,
+    password: process.env.DB_PASSWORD,
+    database: process.env.DB_NAME,
+});
+
+db.connect((err) => { // si erreur ici vérifiez le port - si votre db est correct -
+    if (err) {
+        console.error("Erreur de connexion à la database :", err);
+        return;
+    }
+    console.log('Connection résussi à la DB de MySQL');
+});
+
+app.get('/', (req, res) => { // test serveur - voir console
+    res.send('Le serveur node.js est fonctionnel');
+});
+
+// route POST pour crer un utilisateur
+app.post('/register', (req, res) => {
+    const { username, email, password } = req.body;
+
+    if (!username || !email || !password) {
+        return res.status(400).json({ message: "Les champs nom d'utilisateur, email, et mot de passe sont requis." });
+    }
+
+    const query = 'INSERT INTO users (username, email, password) VALUES (?, ?, ?)';
+
+    db.query(query, [username, email, password], (err, result) => {
+        if (err) {
+            console.error("Erreur lors de l'ajout de l'utilisateur :", err);
+            return res.status(500).json({ message: "Erreur lors de l'ajout de l'utilisateur" });
+        }
+        res.status(201).json({ message: 'Utilisateur créé avec succès' });
+    });
+});
+
+// route POst pour la connexion
+app.post('/login', (req, res) => {
+    const { username, password } = req.body;
+
+    if (!username || !password) {
+        return res.status(400).json({ message: "Nom d'utilisateur et mot de passe requis." });
+    }
+
+    const query = 'SELECT * FROM users WHERE username = ?'; 
+    db.query(query, [username], (err, results) => {
+        if (err) {
+            console.error("Erreur lors de la connexion :", err);
+            return res.status(500).json({ message: 'Erreur lors de la connexion' });
+        }
+
+        if (results.length === 0 || results[0].password !== password) {
+            return res.status(401).json({ message: "Nom d'utilisateur ou mot de passe incorrect." });
+        }
+
+        return res.json({ message: 'Connexion réussie!' });
+    });
+});
+
+
+app.listen(PORT, () => { // mettre le listen apres les routes post
+    console.log(`Serveur démarré sur le port ${PORT}`);
+});
diff --git a/connection.html b/connection.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Page de Connexion</title>
+    <link rel="stylesheet" href="connection.css">
+</head>
+<body>
+    <div class="login-container">
+        <img src="logo.png" alt="Logo de l'Arbre Envie" class="logo">
+        <h2>Connexion</h2>
+        <form action="#" method="POST">
+            <div class="input-group">
+                <label for="username">Nom d'utilisateur</label>
+                <input type="text" id="username" name="username" required>
+            </div>
+            <div class="input-group">
+                <label for="password">Mot de passe</label>
+                <input type="password" id="password" name="password" required>
+            </div>
+            <button type="submit">Se connecter</button>
+        </form>
+        <p>Pas encore de compte ? <a href="create.html">S'inscrire</a></p>
+    </div>
+
+    <script> // on récup ici les infos de la DB pour vérifier les infos
+        document.querySelector('form').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const username = document.getElementById('username').value; // recup de l'username - voir db
+            const password = document.getElementById('password').value;
+
+            try {
+              const response = await fetch('http://localhost:3000/login', { // vous mettrez votre localhost
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ username, password })
+              });
+
+              if (!response.ok) {
+                const errorData = await response.json();
+                alert(`Erreur : ${errorData.message}`);
+              } else {
+                const result = await response.json();
+                alert(result.message);
+
+                window.location.href = 'accueil.html';// redirec vers accueil.html
+              }
+            } catch (error) {
+              console.error("Erreur lors de la requête :", error);
+              alert("Erreur de connexion au serveur.");
+            }
+          });
+    </script>
+</body>
+</html>
diff --git a/create.html b/create.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Créer un Compte</title>
+    <link rel="stylesheet" href="create.css">
+</head>
+<body>
+    <div class="signup-container">
+        <img src="logo.png" alt="Logo de l'Arbre Envie" class="logo">
+        <h2>Créer un Compte</h2>
+        <form id="signup-form">
+            <div class="input-group">
+                <label for="username">Nom d'utilisateur</label>
+                <input type="text" id="username" name="username" required>
+            </div>
+            <div class="input-group">
+                <label for="email">Adresse e-mail</label>
+                <input type="email" id="email" name="email" required>
+            </div>
+            <div class="input-group">
+                <label for="password">Mot de passe</label>
+                <input type="password" id="password" name="password" required>
+            </div>
+            <div class="input-group">
+                <label for="confirm-password">Confirmer le mot de passe</label>
+                <input type="password" id="confirm-password" name="confirm-password" required>
+            </div>
+            <button type="submit">S'inscrire</button>
+        </form>
+        <p>Déjà un compte ? <a href="connection.html">Se connecter</a></p>
+    </div>
+
+    <script> // gestion de l'incription et POST vers la DB
+        document.getElementById('signup-form').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const username = document.getElementById('username').value;
+            const email = document.getElementById('email').value;
+            const password = document.getElementById('password').value;
+            const confirmPassword = document.getElementById('confirm-password').value;
+
+
+            if (password !== confirmPassword) {  
+                alert('Les mots de passe ne correspondent pas.');
+                return;
+            }
+
+            const response = await fetch('http://localhost:3000/register', {  // route post reigister ici
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ username, email, password })
+            });
+
+            if (!response.ok) {
+                const errorData = await response.json();
+                alert(`Erreur: ${errorData.message}`);
+            } else {
+                const result = await response.json();
+                alert(result.message);
+            }
+        });
+    </script>
+
+</body>
+</html>
diff --git a/info.env b/info.env
@@ -0,0 +1,6 @@
+DB_HOST=localhost
+DB_USER=root
+DB_PASSWORD=
+DB_NAME=dbtechnoweb
+
+PORT=3000