Css et Form sur le Login

assets/styles/login.css

@@ -0,0 +1,84 @@
+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;
+}

src/Controller/LoginController.php

@@ -2,6 +2,7 @@
 
 namespace App\Controller;
 
+use App\Form\LoginFormType;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
@@ -10,8 +11,13 @@ use Symfony\Component\Routing\Attribute\Route;
 class LoginController extends AbstractController
 {
     #[Route('/login', name: 'app_login')]
-    public function index(): Response
+    public function index(Request $request): Response
     {
-        return $this->render('login/login.html.twig');
+        $form = $this->createForm(LoginFormType::class);
+        $form->handleRequest($request);
+
+        return $this->render('login/login.html.twig',[
+        'form' => $form->createView(),
+        ]);
     }
 }

src/Form/LoginFormType.php

@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Form;
+
+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\SubmitType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+class LoginFormType extends AbstractType
+{
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $builder
+            ->add('email', EmailType::class, [
+                'label' => 'Email',
+            ])
+            ->add('password', PasswordType::class, [
+                'label' => 'Mot de passe',
+            ])
+            ->add('confirm', SubmitType::class, [
+                'label' => 'Connexion',
+            ]);
+    }
+
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        $resolver->setDefaults([
+            // Configure your form options here
+        ]);
+    }
+}

templates/base.html.twig

@@ -4,6 +4,9 @@
         <meta charset="UTF-8">
         <title>{% block title %}Welcome!{% endblock %}</title>
         <link rel="" href="">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Qwitcher+Grypen:wght@400;700&display=swap" rel="stylesheet">
         {% block stylesheets %}
         {% endblock %}
 

templates/login/login.html.twig

@@ -1,12 +1,18 @@
 {% extends 'base.html.twig' %}
 
+{% block stylesheets %}
+    <link rel="stylesheet" href="../../../assets/styles/login.css">
+{% endblock %}
+
+
 {% block title %}Login{% endblock %}
 
 {% block body %}
+
 <style>
     html {
-        background-color: #f8b5b5 ;
+        background-image: url("asset/image/BackgroundLogin.jpg"); background-repeat: no-repeat; background-size: cover;
-        height: 1000px;
+        height: 100%;
         width: 100%;
     }
 
@@ -16,17 +22,16 @@
     }
 
     .Login {
-        background-color: #f8b5b5 ;
         width: 100%;
         height: 100%;
     }
     .Circle {
         background: #db5559;
-        width: 44%;
+        width: 41%;
-        height: 70%;
+        height: 80%;
         margin: 0 auto;
         border-style: solid;
-        border-radius: 1000px;
+        border-radius: 50%;
         border-color: white;
         border-width: 5px;
     }
@@ -39,6 +44,13 @@
         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 {
@@ -46,13 +58,65 @@
         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">
         <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>
+        <h1 class="Title2">Volaille en fête, Saveurs parfaites !</h1>
     </div>
 </div>
 {% endblock %}