Added login page
This commit is contained in:
julien
@@ -1,20 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{% block title %}Mon Blog{% endblock %}</title>
|
||||
{# <link rel="stylesheet" href="/css/main.css"> #}
|
||||
{#
|
||||
<link rel="stylesheet" href="/css/main.css"> #}
|
||||
<style>
|
||||
body {font-family: Arial, sans-serif; margin: 2rem;}
|
||||
.post {border-bottom: 1px solid #ccc; padding: 1rem 0;}
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
.post {
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.admin-actions a,
|
||||
.admin-actions form {margin-right: .5rem;}
|
||||
.admin-actions form {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
{# Header commun #}
|
||||
{% include 'partials/_header.twig' %}
|
||||
{% include 'partials/_header.twig' with {'session': _SESSION} %}
|
||||
|
||||
{# Zone principale – chaque page injecte son contenu #}
|
||||
<main>
|
||||
@@ -25,8 +71,9 @@
|
||||
{% include 'partials/_footer.twig' %}
|
||||
|
||||
{# Scripts globaux #}
|
||||
{# <script src="/js/app.js"></script> #}
|
||||
{#
|
||||
<script src="/js/app.js"></script> #}
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
47
views/pages/login.twig
Normal file
47
views/pages/login.twig
Normal file
@@ -0,0 +1,47 @@
|
||||
{% extends "layout.twig" %}
|
||||
|
||||
{% block title %}Connexion – Mon Blog{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="auth-container" style="max-width: 400px; margin: 2rem auto;">
|
||||
<h2>Connexion</h2>
|
||||
|
||||
{% if error %}
|
||||
<div class="alert alert-danger"
|
||||
style="padding: 1rem; background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; margin-bottom: 1rem; color: #721c24;">
|
||||
{{ error }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<form method="post" action="/login">
|
||||
{# Tokens CSRF #}
|
||||
<input type="hidden" name="{{ csrf.keys.name }}" value="{{ csrf.name }}">
|
||||
<input type="hidden" name="{{ csrf.keys.value }}" value="{{ csrf.value }}">
|
||||
|
||||
<p>
|
||||
<label for="username">Nom d'utilisateur<br>
|
||||
<input type="text" id="username" name="username" required autofocus
|
||||
style="width: 100%; padding: 0.5rem; margin-top: 0.5rem;">
|
||||
</label>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="password">Mot de passe<br>
|
||||
<input type="password" id="password" name="password" required
|
||||
style="width: 100%; padding: 0.5rem; margin-top: 0.5rem;">
|
||||
</label>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button type="submit" class="btn btn-primary"
|
||||
style="padding: 0.75rem 1.5rem; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">
|
||||
Se connecter
|
||||
</button>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<p style="text-align: center; margin-top: 1.5rem;">
|
||||
Pas encore de compte ? <a href="/register">S'enregistrer</a>
|
||||
</p>
|
||||
</div>
|
||||
{% endblock %}
|
||||
63
views/pages/register.twig
Normal file
63
views/pages/register.twig
Normal file
@@ -0,0 +1,63 @@
|
||||
{% extends "layout.twig" %}
|
||||
|
||||
{% block title %}Enregistrement – Mon Blog{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="auth-container" style="max-width: 400px; margin: 2rem auto;">
|
||||
<h2>S'enregistrer</h2>
|
||||
|
||||
{% if error %}
|
||||
<div class="alert alert-danger"
|
||||
style="padding: 1rem; background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; margin-bottom: 1rem; color: #721c24;">
|
||||
{{ error }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<form method="post" action="/register">
|
||||
{# Tokens CSRF #}
|
||||
<input type="hidden" name="{{ csrf.keys.name }}" value="{{ csrf.name }}">
|
||||
<input type="hidden" name="{{ csrf.keys.value }}" value="{{ csrf.value }}">
|
||||
|
||||
<p>
|
||||
<label for="username">Nom d'utilisateur<br>
|
||||
<input type="text" id="username" name="username" required autofocus minlength="3" maxlength="50"
|
||||
style="width: 100%; padding: 0.5rem; margin-top: 0.5rem;">
|
||||
</label>
|
||||
<small>Minimum 3 caractères</small>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="email">Email<br>
|
||||
<input type="email" id="email" name="email" required
|
||||
style="width: 100%; padding: 0.5rem; margin-top: 0.5rem;">
|
||||
</label>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="password">Mot de passe<br>
|
||||
<input type="password" id="password" name="password" required minlength="8"
|
||||
style="width: 100%; padding: 0.5rem; margin-top: 0.5rem;">
|
||||
</label>
|
||||
<small>Minimum 8 caractères</small>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="password_confirm">Confirmer le mot de passe<br>
|
||||
<input type="password" id="password_confirm" name="password_confirm" required minlength="8"
|
||||
style="width: 100%; padding: 0.5rem; margin-top: 0.5rem;">
|
||||
</label>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button type="submit" class="btn btn-primary"
|
||||
style="padding: 0.75rem 1.5rem; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">
|
||||
S'enregistrer
|
||||
</button>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<p style="text-align: center; margin-top: 1.5rem;">
|
||||
Vous avez déjà un compte ? <a href="/login">Se connecter</a>
|
||||
</p>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -1,6 +1,29 @@
|
||||
<header>
|
||||
<h1>
|
||||
<a href="/">Mon Blog</a> |
|
||||
<a href="/admin">Admin</a>
|
||||
</h1>
|
||||
</header>
|
||||
<header style="border-bottom: 1px solid #ccc; padding: 1rem 0; margin-bottom: 2rem;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<h1 style="margin: 0;">
|
||||
<a href="/" style="text-decoration: none; color: inherit;">Mon Blog</a>
|
||||
</h1>
|
||||
|
||||
<nav>
|
||||
{% if session.user_id is defined and session.user_id %}
|
||||
{# Utilisateur connecté #}
|
||||
<span style="margin-right: 1rem;">
|
||||
Connecté en tant que : <strong>{{ session.username }}</strong>
|
||||
</span>
|
||||
<a href="/admin" style="margin-right: 1rem;">Admin</a>
|
||||
<form method="post" action="/logout" style="display: inline;">
|
||||
<input type="hidden" name="{{ csrf.keys.name }}" value="{{ csrf.name }}">
|
||||
<input type="hidden" name="{{ csrf.keys.value }}" value="{{ csrf.value }}">
|
||||
<button type="submit"
|
||||
style="background: none; border: none; color: #007bff; cursor: pointer; text-decoration: underline;">
|
||||
Déconnexion
|
||||
</button>
|
||||
</form>
|
||||
{% else %}
|
||||
{# Utilisateur non connecté #}
|
||||
<a href="/login" style="margin-right: 1rem;">Connexion</a>
|
||||
<a href="/register">S'enregistrer</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
Reference in New Issue
Block a user