Css sur l'ajout d'un User

Css sur le login
Mise en place du /Logout
Ajout de la liste User
This commit is contained in:
Joshua 2024-10-26 00:32:31 +02:00
parent fef9b0d56e
commit ca240ee372
10 changed files with 229 additions and 211 deletions

View File

@ -22,14 +22,14 @@ security:
entry_point: App\Security\LoginAuthenticator entry_point: App\Security\LoginAuthenticator
logout: logout:
path: logout path: app_logout
target: login target: app_login
access_control: access_control:
# - { path: ^/login, roles: IS_AUTHENTICATED_ANONYMOUSLY } # - { path: ^/login, roles: IS_AUTHENTICATED_ANONYMOUSLY }
- { path: ^/logout, roles: IS_AUTHENTICATED_ANONYMOUSLY } # - { path: ^/logout, roles: ROLE_USER }
# - { path: ^/, roles: ROLE_USER } # - { path: ^/, roles: ROLE_USER }
#when@test: #when@test:

View File

@ -12,9 +12,9 @@ class LoginController extends AbstractController
#[Route('/login', name: 'app_login')] #[Route('/login', name: 'app_login')]
public function index(AuthenticationUtils $authenticationUtils): Response public function index(AuthenticationUtils $authenticationUtils): Response
{ {
// if ($this->getUser()) { if ($this->getUser()) {
// return $this->redirectToRoute('index/index.html.twig'); return $this->redirectToRoute('index/index.html.twig');
// } }
// get the login error if there is one // get the login error if there is one
$error = $authenticationUtils->getLastAuthenticationError(); $error = $authenticationUtils->getLastAuthenticationError();

View File

@ -3,6 +3,7 @@
namespace App\Controller; namespace App\Controller;
use App\Entity\Utilisateurs; use App\Entity\Utilisateurs;
use App\Repository\UtilisateursRepository;
use App\Form\AddUserFormType; use App\Form\AddUserFormType;
use App\Security\LoginAuthenticator; use App\Security\LoginAuthenticator;
use Doctrine\ORM\EntityManagerInterface; use Doctrine\ORM\EntityManagerInterface;
@ -15,12 +16,9 @@ use Symfony\Component\PasswordHasher\Hasher\UserPasswordHasherInterface;
class UserController extends AbstractController class UserController extends AbstractController
{ {
#[Route('/user', name: 'app_user')] public function __construct(UtilisateursRepository $utilisateursRepository)
public function index(): Response
{ {
return $this->render('user/index.html.twig', [ $this->utilisateursRepository = $utilisateursRepository;
'controller_name' => 'UserController',
]);
} }
#[Route('/user/add', name: 'add_user')] #[Route('/user/add', name: 'add_user')]
@ -45,8 +43,18 @@ class UserController extends AbstractController
return $security->login($user, LoginAuthenticator::class, 'main'); return $security->login($user, LoginAuthenticator::class, 'main');
} }
return $this->render('user/user.html.twig', [ return $this->render('user/add.html.twig', [
'registrationForm' => $form, 'registrationForm' => $form,
]); ]);
} }
#[Route('/user/list', name: 'list_user')]
public function list(): Response
{
$utilisateur = $this->utilisateursRepository->findAll();
return $this->render('user/list.html.twig', [
'utilisateurs' => $utilisateur
]);
}
} }

View File

@ -7,6 +7,7 @@ use App\Entity\Tables;
use App\Entity\Clients; use App\Entity\Clients;
use Symfony\Bridge\Doctrine\Form\Type\EntityType; use Symfony\Bridge\Doctrine\Form\Type\EntityType;
use Symfony\Component\Form\AbstractType; use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\EmailType;
use Symfony\Component\Form\Extension\Core\Type\PasswordType; use Symfony\Component\Form\Extension\Core\Type\PasswordType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType; use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\Form\Extension\Core\Type\TextType; use Symfony\Component\Form\Extension\Core\Type\TextType;
@ -21,7 +22,7 @@ class AddUserFormType extends AbstractType
public function buildForm(FormBuilderInterface $builder, array $options): void public function buildForm(FormBuilderInterface $builder, array $options): void
{ {
$builder $builder
->add('UserIdentifier') ->add('UserIdentifier', EmailType::class, )
->add('Password', PasswordType::class, [ ->add('Password', PasswordType::class, [
// instead of being set onto the object directly, // instead of being set onto the object directly,
// this is read and encoded in the controller // this is read and encoded in the controller
@ -29,13 +30,7 @@ class AddUserFormType extends AbstractType
'attr' => ['autocomplete' => 'new-password'], 'attr' => ['autocomplete' => 'new-password'],
'constraints' => [ 'constraints' => [
new NotBlank([ new NotBlank([
'message' => 'Please enter a password', 'message' => 'Entrer un mot de passe',
]),
new Length([
'min' => 6,
'minMessage' => 'Your password should be at least {{ limit }} characters',
// max length allowed by Symfony for security reasons
'max' => 4096,
]), ]),
], ],
]) ])
@ -43,7 +38,7 @@ class AddUserFormType extends AbstractType
->add('Nom') ->add('Nom')
->add('Prenom') ->add('Prenom')
->add('Roles', TextType::class) ->add('Roles', TextType::class)
->add('Submit', SubmitType::class); ->add('Enregistrer', SubmitType::class);
// Convertir le champ role en tableau // Convertir le champ role en tableau

View File

@ -8,15 +8,6 @@
{% block title %}Login{% endblock %} {% block title %}Login{% endblock %}
{% block body %} {% block body %}
{% if error %}
<div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
{% endif %}
{% if app.user %}
<div class="mb-3">
You are logged in as {{ app.user.userIdentifier }}, <a href="{{ path('app_logout') }}">Logout</a>
</div>
{% endif %}
<style> <style>
html { html {
@ -69,6 +60,7 @@
} }
.Title1 { .Title1 {
font-size: 60px;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@ -109,35 +101,34 @@
<div class="Login"> <div class="Login">
<div class="Circle"> <div class="Circle">
<img src="asset/image/LogoHegre.png" class="Logo"> <img src="asset/image/LogoHegre.png" class="Logo">
<div class="Form">
<form method="post"> <form method="post">
{% if error %} <h1 class="Title1">Bienvenue !</h1>
<div>{{ error.messageKey|trans(error.messageData, 'security') }}</div>
{% endif %}
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1> <div class="form-group">
<label for="UserIdentifier">Email:</label>
<input type="text" id="UserIdentifier" name="UserIdentifier" value="{{ last_username }}" required autofocus>
</div>
<label for="UserIdentifier">Email:</label> <div class="form-group">
<input type="text" id="UserIdentifier" name="UserIdentifier" value="{{ last_username }}" required autofocus> <label for="Password">Mot de passe:</label>
<input type="password" id="Password" name="Password" required>
<label for="Password">Password:</label> </div>
<input type="password" id="Password" name="Password" required>
<input type="hidden" name="_csrf_token" <input type="hidden" name="_csrf_token"
value="{{ csrf_token('authenticate') }}" value="{{ csrf_token('authenticate') }}"
> >
<div class="checkbox mb-3"> <div class="form-group">
<label> <button class="btn btn-lg btn-primary" type="submit">
<input type="checkbox" name="_remember_me"> Remember me Connexion
</label> </button>
</div> </div>
<button class="btn btn-lg btn-primary" type="submit">
Sign in
</button>
<h1 class="Title2">Volaille en fête, Saveurs parfaites !</h1> <h1 class="Title2">Volaille en fête, Saveurs parfaites !</h1>
</form> </form>
</div>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}

View File

@ -1,124 +0,0 @@
{% extends 'base.html.twig' %}
{% block stylesheets %}
<link rel="stylesheet" href="../../../assets/styles/login.css">
{% endblock %}
{% block title %}Login{% endblock %}
{% block body %}
<style>
html {
background-image: url("asset/image/BackgroundLogin.jpg"); background-repeat: no-repeat; background-size: cover;
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
}
.Login {
width: 100%;
height: 100%;
}
.Circle {
background: #db5559;
width: 41%;
height: 80%;
margin: 0 auto;
border-style: solid;
border-radius: 50%;
border-color: white;
border-width: 5px;
}
.Form {
background: #791c1c;
height: 40%;
width: 55%;
margin: auto;
border-style: solid;
border-radius: 50px;
border-color: white;
border-width: 2px;
text-align: center;
font-family: "Qwitcher Grypen", cursive;
font-size: 40px;
font-style: italic;
color: white;
padding-bottom: 0;
}
.Logo {
display: flex;
margin: auto;
margin-top: 8%;
}
.Title1 {
margin: 0;
padding: 0;
}
.Title2 {
display: grid;
place-items: center;
height: 7vh;
color: black;
font-family: "Qwitcher Grypen", cursive;
font-size: 40px;
margin: 0;
}
.form-group{
display: grid;
place-items: center;
height: 7vh;
align-items: center;
text-align: center;
/*margin-bottom: 10px;*/
}
.form-control{
background-color: #f19595;
margin-left: 10px;
border-radius: 5px;
}
.btn{
background-color: #279b63;
border-radius: 6px;
height: 30px;
}
</style>
<div class="Login">
<div class="Circle">
<img src="asset/image/LogoHegre.png" class="Logo">
<form action="{{ path('login') }}" method="post">
<div class="Form">
{{ form_start(form) }}
<h1 class="Title1">Bienvenue !</h1>
<div class="form-group">
{{ form_label(form.email) }}
{{ form_widget(form.email, {'attr': {'class': 'form-control'}}) }}
</div>
<div class="form-group">
{{ form_label(form.password) }}
{{ form_widget(form.password, {'attr': {'class': 'form-control'}}) }}
</div>
<div class="form-group">
{{ form_widget(form.confirm, {'attr': {'class': 'btn btn-primary'}}) }}
</div>
{{ form_end(form) }}
</div>
</form>
<h1 class="Title2">Volaille en fête, Saveurs parfaites !</h1>
</div>
</div>
{% endblock %}

View File

@ -0,0 +1,105 @@
{% extends 'base.html.twig' %}
{% block stylesheets %}
<style>
.form-container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
font-family: sans-serif;
}
.form-container h1 {
text-align: center;
margin-bottom: 20px;
font-size: 24px;
}
.form-group {
margin-bottom: 15px;
}
.form-input {
display: flex;
justify-content: center;
margin-bottom: 20px;
width: 95%;
padding: 10px;
border: 1px solid #ced4da;
border-radius: 4px;
font-size: 16px;
}
.form-input:focus {
border-color: #007bff;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.25);
outline: none;
}
.btn-container {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.btn-save {
padding: 5px 10px;
text-decoration: none;
color: white;
background-color: #007bff;
border-radius: 5px;
font-weight: bold;
margin-top: 25px;
}
.btn-list {
padding: 5px 10px;
text-decoration: none;
color: white;
background-color: orange;
border-radius: 5px;
font-weight: bold;
}
</style>
{% endblock %}
{% block title %}Nouvelle Utilisateur{% endblock %}
{% block body %}
<div class="form-container">
<h1>Nouvelle Utilisateur ! ✅</h1>
{{ form_start(registrationForm) }}
{{ form_errors(registrationForm) }}
<div class="form-group">
{{ form_row(registrationForm.Nom, {'attr': {'class': 'form-input'}, 'label': 'Nom'}) }}
</div>
<div class="form-group">
{{ form_row(registrationForm.Prenom, {'attr': {'class': 'form-input'}, 'label': 'Prénom'}) }}
</div>
<div class="form-group">
{{ form_row(registrationForm.UserIdentifier, {'attr': {'class': 'form-input'}, 'label': 'Email'}) }}
</div>
<div class="form-group">
{{ form_row(registrationForm.Password, {'attr': {'class': 'form-input'}, 'label': 'Password'}) }}
</div>
<div class="form-group">
{{ form_row(registrationForm.Roles, {'attr': {'class': 'form-input'}, 'label': 'Roles'}) }}
</div>
<div class="btn-container">
{{ form_row(registrationForm.Enregistrer, {'attr': {'class': 'btn-save'}, 'label': 'Enregistrer'}) }}
</div>
{{ form_end(registrationForm) }}
<div class="btn-container">
<a href="{{ path('list_user') }}" class="btn-list btn-primary">Liste des Utilisateur</a>
</div>
</div>
{% endblock %}

View File

@ -1,20 +0,0 @@
{% extends 'base.html.twig' %}
{% block title %}Hello UserController!{% endblock %}
{% block body %}
<style>
.example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
.example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
</style>
<div class="example-wrapper">
<h1>Hello {{ controller_name }}! ✅</h1>
This friendly message is coming from:
<ul>
<li>Your controller at <code>D:/Devellopement/FestinHegre/src/Controller/UserController.php</code></li>
<li>Your template at <code>D:/Devellopement/FestinHegre/templates/user/index.html.twig</code></li>
</ul>
</div>
{% endblock %}

View File

@ -0,0 +1,84 @@
{% extends 'base.html.twig' %}
{% block title %}Liste Utilisateur{% endblock %}
{% block body %}
<style>
.user-table {
width: 100%;
border-collapse: collapse;
font-family: sans-serif;
}
.user-table th,
.user-table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
.user-table th {
background-color: #f2f2f2;
font-weight: bold;
}
.user-table tr:nth-child(even) {
background-color: #f9f9f9;
}
.user-table tr:hover {
background-color: #f1f1f1;
}
.btn-container {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.btn {
padding: 5px 10px;
text-decoration: none;
color: white;
background-color: #007bff;
border-radius: 5px;
font-weight: bold;
margin-top: 25px;
}
</style>
<div class="example-wrapper">
<h1>Liste des Utilisateurs ! ✅</h1>
<table class="user-table">
<thead>
<tr>
<th>ID</th>
<th>Nom</th>
<th>Prenom</th>
<th>Mail</th>
<th>Roles</th>
</tr>
</thead>
<tbody>
{% for utilisateur in utilisateurs %}
<tr>
<td>{{ utilisateur.id }}</td>
<td>{{ utilisateur.nom }}</td>
<td>{{ utilisateur.prenom }}</td>
<td>{{ utilisateur.UserIdentifier }}</td>
<td>{{ utilisateur.roles|join }}</td>
</tr>
{% else %}
<tr>
<td colspan="5">Aucun utilisateur trouvé.</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="btn-container">
<a href="{{ path('add_user') }}" class="btn btn-primary">Ajouter un Utilisateur</a>
</div>
</div>
{% endblock %}

View File

@ -1,21 +0,0 @@
{% extends 'base.html.twig' %}
{% block stylesheets %}
{% endblock %}
{% block title %}AddUser{% endblock %}
{% block body %}
<h1>Register</h1>
{{ form_errors(registrationForm) }}
{{ form_start(registrationForm) }}
{{ form_row(registrationForm.UserIdentifier) }}
{{ form_row(registrationForm.Password, {
label: 'Password'
}) }}
{{ form_end(registrationForm) }}
{% endblock %}