projet_php/app/views/connexion.php
2026-01-15 10:21:14 +01:00

107 lines
3.6 KiB
PHP

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="assets/styles.css">
<title>Connexion Folliow</title>
</head>
<body>
<!-- Contenu principal de la page -->
<main class="container py-5">
<!-- Centrage horizontal du formulaire -->
<div class="row justify-content-center">
<div class="col-12 col-md-8 col-lg-5">
<!-- Carte contenant le formulaire de connexion -->
<div class="card shadow-sm border-0 rounded-4 p-4 p-lg-5">
<!-- Titre principal -->
<h1 class="h3 fw-bold mb-1">Connexion</h1>
<!-- Texte descriptif -->
<p class="text-secondary mb-4">
Connectez-vous à votre compte.
</p>
<!-- Formulaire de connexion -->
<!-- Le traitement sera effectué en PHP via la méthode POST -->
<form method="POST">
<div class="row g-3">
<!-- Champ : adresse e-mail de l'utilisateur -->
<div class="col-12">
<label for="user_mail" class="form-label">
Adresse e-mail
</label>
<input
type="email"
class="form-control"
id="user_mail"
name="user_mail"
required
>
</div>
<!-- Champ : mot de passe -->
<div class="col-12">
<label for="user_password" class="form-label">
Mot de passe
</label>
<input
type="password"
class="form-control"
id="user_password"
name="user_password"
required
>
</div>
<!-- Option "Se souvenir de moi" (fonctionnalité optionnelle côté PHP) -->
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="remember_me" name="remember_me">
<label class="form-check-label" for="remember_me">
Se souvenir de moi
</label>
</div>
</div>
<!-- Bouton de soumission du formulaire -->
<div class="col-12 d-grid mt-2">
<button type="submit" class="btn btn-primary btn-lg rounded-3">
Se connecter
</button>
</div>
<!-- Lien vers la page d'inscription -->
<div class="col-12 text-center">
<small class="text-secondary">
Pas encore de compte ?
<a href="inscription.php" class="link-primary">Créer un compte</a>
</small>
</div>
<!-- Lien pour la récupération du mot de passe -->
<div class="col-12 text-center">
<small>
<a href="#" class="link-primary">
Mot de passe oublié ?
</a>
</small>
</div>
</div>
</form>
</div>
</div>
</div>
</main>
</body>
</html>