Mise en page login et titres centrés

assets/styles/app.scss

@@ -8,4 +8,21 @@ $enable-shadows: true;
 body {
     padding-top:5rem;
     padding-bottom:4rem;
+}
+
+.form-signin {
+    max-width: 430px;
+    padding: 15px;
+  }
+
+.form-signin input[type="text"] {
+    margin-bottom: -1px;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.form-signin input[type="password"] {
+    margin-bottom: 10px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
 }

templates/base.html.twig

@@ -17,11 +17,7 @@
 				{% include 'flashbag.html.twig' %}
 				{% include 'navbar.html.twig' %}
 				{% include 'modal.html.twig' %}
-				<nav class="navbar">
-					<div class="nav-item">
-						<h1>{% block titre %}{% endblock %}</h1>
-					</div>
-				</nav>
+				<h1 class="text-center">{% block titre %}{% endblock %}</h1>
 			</header>			
 				
 			<main role="main">

templates/security/login.html.twig

@@ -4,44 +4,39 @@
 {% block titre %}Identification{%  endblock %}
 
 {% block body %}
-        <div class="row">
-            <div class="col-md-4">
-                <form method="post">
-                    {% if error %}
-                        <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
-                    {% endif %}
-                    <label for="inputUsername" class="sr-only">Login</label>
-                    <div class="input-group mb-3">
-                        <input type="text" value="{{ last_username }}" name="_username" id="inputUsername" class="form-control" placeholder="Login" required autofocus>
-                    </div>
-                    <label for="inputPassword" class="sr-only">Mot de passe</label>
-                    <div class="input-group mb-3">
-                        <input type="password" name="_password" id="inputPassword" class="form-control" placeholder="Mot de passe" required>
-                    </div>
-                    <input type="hidden" name="_csrf_token"
-                        value="{{ csrf_token('authenticate') }}"
-                    >
-
-                    {#
-                        Uncomment this section and add a remember_me option below your firewall to activate remember me functionality.
-                        See https://symfony.com/doc/current/security/remember_me.html
-                    #}
-                        <div class="checkbox mb-3">
-                            <input type="checkbox" name="_remember_me">
-                            <label for="remember_me">Se souvenir de moi</label>
-                        </div>
-                    
+    <div class="form-signin w-100 m-auto text-center">
+        <form method="post">
+            {% if error %}
+                <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
+            {% endif %}
+            <div class="form-floating mb-3">
+                <input type="text" value="{{ last_username }}" name="_username" id="inputUsername" class="form-control" placeholder="Identifiant" required autofocus>
+                <label for="inputUsername">Login</label>
+            </div>
+            <div class="form-floating">
+                <input type="password" name="_password" id="inputPassword" class="form-control" placeholder="Mot de passe" required>
+                <label for="inputPassword">Mot de passe</label>
+            </div>
+            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
 
-                    <button class="btn btn-primary mb-3" type="submit">
-                        Se connecter
-                    </button>
-                </form>
+            {#
+                Uncomment this section and add a remember_me option below your firewall to activate remember me functionality.
+                See https://symfony.com/doc/current/security/remember_me.html
+            #}
+            <div class="checkbox mb-3">
+                <input type="checkbox" name="_remember_me">
+                <label for="remember_me">Se souvenir de moi</label>
             </div>
-        </div>
-        <div class="row">
+            
+            <button class="btn btn-primary mb-3" type="submit">
+                Se connecter
+            </button>
+        </form>
+        <div class="">
             <div class="hr">
                 <p>Pas de compte ? <a href="{{ path('security_register') }}">S'enregistrer</a></p>
                 <p>Mot de passe oublié ? <a href="{{ path('security_envoyertoken') }}">Récupérer mot de passe</a></p>
             </div>
         </div>
+    </div>
 {% endblock %}