templates/security/forgot_password.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Authentification</title>
  7. <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  8. <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  9. <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  10. <style>
  11.     {# html, body {
  12.         background-color: rgb(122, 163, 185);
  13.     } #}
  14. html, body {
  15.     height: 100%;
  16.     margin: 0;
  17.     padding: 0;
  18. }
  20. body {
  21.     position: relative;
  22.         background: url('/assets/img/Bg3.png') no-repeat center center fixed;/*ancienne bgcanva3.png*/
  23.     background-size: cover;
  24. }
  26. body::before {
  27.     content: "";
  28.     position: absolute;
  29.     top: 0;
  30.     left: 0;
  31.     width: 100%;
  32.     height: 100%;
  33.     background-color: rgba(255, 233, 201, 0.5); /* Couche blanche semi-transparente */
  34.     z-index: -1;
  35. }
  37.     body {
  38.         font-family: "Poppins", sans-serif;
  39.         height: 100vh;
  40.     }
  42.     a {
  43.         color: rgb(64, 120, 148);
  44.         display: inline-block;
  45.         text-decoration: none;
  46.         font-weight: 400;
  47.     }
  49.     h2 {
  50.         text-align: center;
  51.         font-size: 16px;
  52.         font-weight: 600;
  53.         text-transform: uppercase;
  54.         display: inline-block;
  55.         margin: 40px 8px 10px 8px;
  56.         color: #cccccc;
  57.     }
  59.     .wrapper {
  60.         display: flex;
  61.         align-items: center;
  62.         flex-direction: column;
  63.         justify-content: center;
  64.         width: 100%;
  65.         min-height: 100%;
  66.         padding: 20px;
  67.     }
  69.     #formContent {
  70.         border-radius: 10px;
  71.         background: #fff;
  72.         width: 90%;
  73.         max-width: 600px;
  74.         position: relative;
  75.         padding: 30px 30px 30px 30px;
  76.         box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
  77.         text-align: center;
  78.     }
  80.     #formTitle {
  81.         background-color: #f6f6f6;
  82.         border-top: 1px solid #dce8f1;
  83.         padding: 25px;
  84.         text-align: center;
  85.         border-radius: 0 0 10px 10px;
  86.     }
  88.     input[type=button], input[type=submit], input[type=reset] {
  89.         background-color:rgb(64, 120, 148);
  90.         border: none;
  91.         color: white;
  92.         padding: 15px 40px;
  93.         text-align: center;
  94.         text-decoration: none;
  95.         display: inline-block;
  96.         text-transform: uppercase;
  97.         font-size: 13px;
  98.         box-shadow: 0 10px 30px 0 rgba(95, 186, 233, 0.4);
  99.         border-radius: 5px;
  100.         margin: 5px 20px 40px 20px;
  101.         transition: all 0.3s ease-in-out;
  102.     }
  104.     input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
  105.         background-color:rgb(124, 168, 191);
  106.     }
  108.     input[type=text], input[type=password],input[type=email] {
  109.         background-color: #f6f6f6;
  110.         border: none;
  111.         color: #0d0d0d;
  112.         padding: 15px 32px;
  113.         text-align: center;
  114.         text-decoration: none;
  115.         display: inline-block;
  116.         font-size: 16px;
  117.         margin: 5px;
  118.         width: 85%;
  119.         border: 2px solid #f6f6f6;
  120.         transition: all 0.5s ease-in-out;
  121.         border-radius: 5px;
  122.     }
  124.     input[type=text]:focus, input[type=password]:focus {
  125.         background-color: #fff;
  126.         border-bottom: 2px solid rgb(124, 168, 191);
  127.     }
  129.     .fadeInDown {
  130.         animation: fadeInDown 1s both;
  131.     }
  133.     @keyframes fadeInDown {
  134.         0% {
  135.             opacity: 0;
  136.             transform: translate3d(0, -100%, 0);
  137.         }
  138.         100% {
  139.             opacity: 1;
  140.             transform: none;
  141.         }
  142.     }
  144.     *:focus {
  145.         outline: none;
  146.     }
  148.     .logo {
  149.         font-family: "Script MT";
  150.         font-size: 54px;
  151.         text-align: center;
  152.         color:rgb(242, 154, 78);
  153.         margin-bottom: 30px;
  154.     }
  156.     .logo .logo-font {
  157.         color:rgb(64, 120, 148);
  158.     }
  160.     @media only screen and (max-width: 767px) {
  161.         .logo {
  162.             font-size: 34px;
  163.         }
  164.     }
  165.         .sinscrire {
  166.         text-transform: uppercase;
  167.         font-size: 12px;
  168.         border-radius: 5px;
  169.         transition: all 0.3s ease-in-out;
  170.         border: 2px solid rgb(242,154,78);
  171.         color: white;
  172.         background-color: rgb(242,154,78);
  173.         padding: 10px 20px;
  174.         font-weight: bold;
  175.     }
  177.     /* Effet hover : inverser les couleurs */
  178.     .sinscrire:hover {
  179.         color: rgb(242,154,78);
  180.         background-color: white;
  181.     }
  182.     .reset-title {
  183.         font-size: 1.5rem; /* taille lisible */
  184.         font-weight: 600;  /* semi-gras moderne */
  185.         color: #2c3e50; /* gris foncé élégant */
  186.         position: relative;
  187.         display: inline-block;
  188.         padding-bottom: 8px;
  189.     }
  191.     .reset-title::after {
  192.         content: "";
  193.         position: absolute;
  194.         left: 50%;
  195.         bottom: 0;
  196.         transform: translateX(-50%);
  197.         width: 60px;
  198.         height: 3px;
  199.         background: linear-gradient(90deg, rgb(64,120,148), rgb(242,154,78)); /* dégradé bleu moderne */
  200.         border-radius: 2px;
  201.     }
  202. </style>
  203. </head>
  204. <body>
  205. <div class="wrapper fadeInDown">
  206.     <div id="formContent">
  207.         {# <form method="post" action="{{ path('email_password') }}" class="login-form m-0">
  208.             <div class="logo d-flex justify-content-center">
  209.                 <img src="{{ asset('img/logo.png') }}" alt="Logo" class="logo-img">
  210.             </div>
  212.             <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
  214.             <div class="input-group mb-3">
  215.                 <input  id="email" type="email" class="form-control" placeholder="Email" name="email" required>
  216.             </div>
  217.             {% for message in app.flashes('error') %}
  218.                 <div id="emailError" class="text-center" style="color: orange; font-weight: bold; font-size: 16px;">
  219.                     {{ message }}
  220.                 </div>
  221.             {% endfor %}
  222.             <div class="input-group mb-3">
  223.                 <input type="password" class="form-control" placeholder="Mot de passe" name="password" id="password" required>
  224.             </div>
  225.             <div class="input-group mb-3">
  226.                 <input type="password" class="form-control" placeholder="Confirmer le mot de passe" name="confirm_password" id="confirm_password" required>
  227.             </div>
  229.             <div id="passwordError" class="text-danger text-center mb-3 d-none" style="color: rgb(242,154,78);">
  230.                 <p style="color: rgb(242,154,78);">Veuillez saisir des mots de passe identiques.</p>
  231.             </div>
  233.             <div class="text-center">
  234.                 <input type="submit" id="registerBtn" class="btn btn-secondary mb-0" value="Envoyer" >
  235.             </div>
  236.         </form> #}
  237.         <h3 class="text-center mb-4 reset-title">Recevez un lien de réinitialisation par email</h3>
  238.         <form method="post" action="{{ path('forgot_password') }}">
  239.             <div class="input-group mb-3">
  240.             <input type="email" name="email" placeholder="Votre email" required class="form-control mb-3">
  241.             </div>
  243.             <button type="submit" class="btn sinscrire w-25">Envoyer</button>
  245.             {% for message in app.flashes('success') %}
  246.                 <div class="alert alert-success mt-2">{{ message }}</div>
  247.             {% endfor %}
  248.             {% for message in app.flashes('error') %}
  249.                 <div class="alert alert-danger mt-2">{{ message }}</div>
  250.             {% endfor %}
  251.         </form>
  253.     </div>
  254. </div>
  255. {# <script>
  256.     document.addEventListener("DOMContentLoaded", function () {
  257.         let password = document.getElementById("password");
  258.         let confirmPassword = document.getElementById("confirm_password");
  259.         let registerBtn = document.getElementById("registerBtn");
  260.         let passwordError = document.getElementById("passwordError");
  262.         function validatePassword() {
  263.             if (password.value !== confirmPassword.value || password.value === "") {
  264.                 passwordError.classList.remove("d-none");
  265.                 registerBtn.disabled = true;
  266.             } else {
  267.                 passwordError.classList.add("d-none");
  268.                 registerBtn.disabled = false;
  269.             }
  270.         }
  272.         password.addEventListener("keyup", validatePassword);
  273.         confirmPassword.addEventListener("keyup", validatePassword);
  274.     });
  275. </script>
  276. <script>
  277.     document.addEventListener("DOMContentLoaded", function () {
  278.         let emailField = document.getElementById("email");
  279.         let emailError = document.getElementById("emailError");
  281.         if (emailField && emailError) {
  282.             emailField.addEventListener("input", function () {
  283.                 emailError.style.display = "none";
  284.             });
  285.         }
  286.     });
  287. </script>
  288. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> #}
  289. </body>
  290. </html>