templates/security/register.html.twig line 1

  1. {% extends 'base.html.twig' %}
  2. {% block title %}Inscription{% endblock %}
  4. {% block body_class %}bg-biologie effect-bg-1 center{% endblock %}
  6. {% block body %}
  7. <div class="container">
  8.     <div class="row justify-content-center">
  9.         <div class="col-12 col-md-8">
  10.             <div class="bg-primary-transparent p-5 my-5">
  11.                 <img src="{{ asset('images/identity/logo_short.png') }}" alt="Logo la brume">
  12.                 <h1>Inscription</h1>
  13.                 <p>Déjà inscrit ? <a href="{{ path('app_login') }}">Connexion</a></p>
  15.                 {{ form_start(registrationForm) }}
  17.                     <div class="form-group">
  18.                         {{ form_label(registrationForm.username) }}
  19.                         {{ form_errors(registrationForm.username) }}
  20.                         {{ form_widget(registrationForm.username) }}
  21.                         {{ form_help(registrationForm.username) }}
  22.                     </div>
  24.                     <div class="form-group">
  25.                         {{ form_label(registrationForm.email) }}
  26.                         {{ form_errors(registrationForm.email) }}
  27.                         {{ form_widget(registrationForm.email) }}
  28.                     </div>
  30.                     {{ form_row(registrationForm.plainPassword) }}
  32.                     <div class="form-group d-flex align-items-center">
  33.                         <label class="toggleButton">
  34.                             <input type="checkbox" name="newsletter">
  35.                             <span>
  36.                                 <svg viewBox="0 0 44 44">
  37.                                     <path d="M14,24 L21,31 L39.7428882,11.5937758 C35.2809627,6.53125861 30.0333333,4 24,4 C12.95,4 4,12.95 4,24 C4,35.05 12.95,44 24,44 C35.05,44 44,35.05 44,24 C44,19.3 42.5809627,15.1645919 39.7428882,11.5937758" transform="translate(-2.000000, -2.000000)"></path>
  38.                                 </svg>
  39.                             </span>
  40.                         </label>
  41.                         <p class="mb-0">S'inscrire à la Newsletter.<br><small class="text-muted">Vous pouvez vous désisncrire à tout moment de notre Newsletter.</small></p>
  42.                     </div>
  44.                     <div class="form-group d-flex align-items-center">
  45.                         <p class="mb-0">En validant votre inscription, vous acceptez les <a href="{{ path('app_page_cgu') }}" target="_blank" rel="nofollow">conditions générales d'utilisation</a>.</p>
  46.                     </div>
  47.                     <input type="submit" class="btn mt-4" value="Inscription">
  48.                 {{ form_end(registrationForm) }}
  49.             </div>
  50.         </div>
  51.     </div>
  52. </div>
  53.     <div class="bg-effect"></div>
  54. {% endblock %}
  56. {% block footer_scripts %}
  57. <script>
  58.     $(document).ready(function() {
  60.         let show_password =
  61.         '<div class="Control-label--showPassword">'+
  62.             '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="32" height="32" class="svg-toggle-password" title="Toggle Password Security">'+
  63.                 '<title>Afficher/Masquer le mot de passe</title>'+
  64.                 '<path d="M24,9A23.654,23.654,0,0,0,2,24a23.633,23.633,0,0,0,44,0A23.643,23.643,0,0,0,24,9Zm0,25A10,10,0,1,1,34,24,10,10,0,0,1,24,34Zm0-16a6,6,0,1,0,6,6A6,6,0,0,0,24,18Z"/>'+
  65.                 '<rect x="20.133" y="2.117" height="44" transform="translate(23.536 -8.587) rotate(45)" class="closed-eye"/>'+
  66.                 '<rect x="22" y="3.984" width="4" height="44" transform="translate(25.403 -9.36) rotate(45)" style="fill:#fff" class="closed-eye"/>'+
  67.             '</svg>'+
  68.         '</div>'
  69.         $('.password').each(function(){
  70.             $(this).append(show_password);
  71.         });
  73.         let show_test = '<div class="strength-lines"><div class="line"></div><div class="line"></div><div class="line"></div></div>'
  74.         $('.password').first().append(show_test)
  76.         // hide/show password
  77.         $(".Control-label--showPassword").click(function() {
  78.             $(".closed-eye").toggleClass("open");
  79.             let input = $(".ControlInput--password");
  80.             if (input.attr("type") == "password") {
  81.                 input.attr("type", "text");
  82.             } else {
  83.                 input.attr("type", "password");
  84.             }
  85.         });
  87.         // strength validation on keyup-event
  88.         $(".ControlInput--password").first().on("keyup", function() {
  89.             let val = $(this).val(),
  90.                 color = testPasswordStrength(val);
  91.             styleStrengthLine(color, val);
  92.         });
  94.         // check password strength
  95.         function testPasswordStrength(value) {
  96.             let strongRegex = new RegExp(
  97.                     '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[=/\()%ยง!@#$%^&*])(?=.{8,})'
  98.                 ),
  99.                 mediumRegex = new RegExp(
  100.                     '^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})'
  101.                 );
  103.             if (strongRegex.test(value)) {
  104.                 return "green";
  105.             } else if (mediumRegex.test(value)) {
  106.                 return "orange";
  107.             } else {
  108.                 return "red";
  109.             }
  110.         }
  112.         function styleStrengthLine(color, value) {
  113.             $(".line")
  114.                 .removeClass("bg-red bg-orange bg-green")
  115.                 .addClass("bg-transparent");
  116.             if (value) {
  117.                 if (color === "red") {
  118.                     $(".line:nth-child(1)")
  119.                         .removeClass("bg-transparent")
  120.                         .addClass("bg-red");
  121.                 } else if (color === "orange") {
  122.                     $(".line:not(:last-of-type)")
  123.                         .removeClass("bg-transparent")
  124.                         .addClass("bg-orange");
  125.                 } else if (color === "green") {
  126.                     $(".line")
  127.                         .removeClass("bg-transparent")
  128.                         .addClass("bg-green");
  129.                 }
  130.             }
  131.         }
  132.     });
  133. </script>
  134. {% endblock %}