formulaire d'inscription complet (bamibami)

CSS

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-image: url('background.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.form-container {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 20px;
  border-radius: 8px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.logo {
  width: 60px;
  height: 60px;
}

h1 {
  margin: 10px 0;
  font-size: 24px;
  color: #333;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

@media (max-width: 600px) {
  .form-container {
    padding: 15px;
  }
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Inscription</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="form-container">
    <form id="signup-form" method="POST" action="signup.php">
      <div class="header">
        <img src="logo.png" alt="Logo" class="logo">
        <h1>Inscription</h1>
      </div>
      <div class="form-group">
        <label for="username">Nom d'utilisateur</label>
        <input type="text" id="username" name="username" required>
      </div>
      <div class="form-group">
        <label for="email">Email</label>
        <input type="email" id="email" name="email" required>
      </div>
      <div class="form-group">
        <label for="password">Mot de passe</label>
        <input type="password" id="password" name="password" required>
      </div>
      <div class="form-group">
        <label for="repassword">Répétez le mot de passe</label>
        <input type="password" id="repassword" name="repassword" required>
      </div>
      <button type="submit">S'inscrire</button>
    </form>
  </div>
  <script src="scripts.js"></script>
</body>
</html>

PHP

<?php
require_once 'db.php';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $username = htmlspecialchars(trim($_POST['username']));
  $email = htmlspecialchars(trim($_POST['email']));
  $password = htmlspecialchars(trim($_POST['password']));
  $hashed_password = password_hash($password, PASSWORD_DEFAULT);
  $token = bin2hex(random_bytes(16));

  // Validation simple
  if (empty($username) || empty($email) || empty($password)) {
    die('Tous les champs sont requis.');
  }

  // Insertion dans la base de données
  $stmt = $pdo->prepare('INSERT INTO user_session (username, email, password, token) VALUES (?, ?, ?, ?)');
  if ($stmt->execute([$username, $email, $hashed_password, $token])) {
    echo "Inscription réussie !";
  } else {
    echo "Erreur lors de l'inscription.";
  }
}
?>

##db_conect##

<?php
$host = 'localhost';
$dbname = 'dbname';
$user = 'username';
$pass = 'password';

try {
  $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $user, $pass);
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
  die("Erreur de connexion : " . $e->getMessage());
}
?>

##table##

CREATE TABLE user_session (
  id INT AUTO_INCREMENT PRIMARY KEY,
  username VARCHAR(50) NOT NULL,
  email VARCHAR(100) NOT NULL UNIQUE,
  password VARCHAR(255) NOT NULL,
  token VARCHAR(32) NOT NULL UNIQUE,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

JavaScript

document.getElementById('signup-form').addEventListener('submit', function (e) {
  const password = document.getElementById('password').value;
  const repassword = document.getElementById('repassword').value;

  if (password !== repassword) {
    e.preventDefault();
    alert("Les mots de passe ne correspondent pas !");
  }
});