templates/registration/register.html.twig line 1

Open in your IDE?
  1. {% extends 'layout_web.html.twig' %}
  3. {% block title %}{{ 'register.title'|trans }}
  4.     |
  5.     {{parent()}}
  6. {% endblock %}
  8. {% block body %}
  10.     <div class="page">
  11.         <div class="page-single">
  12.             <div class="container">
  14.                 <div class="row">
  16.                     <div class="col col-md-5 mx-auto">
  18.                         <div class="text-center mb-6">
  19.                             <img src="{{ asset('/images/logo-pbn-200x100.png')}}" alt="{{appname}}">  
  20.                         </div>
  22.                         {% for flashError in app.flashes('verify_email_error') %}
  23.                             <div class="alert alert-danger" role="alert">{{ flashError }}</div>
  24.                         {% endfor %}
  26.                         {{ form_start(registrationForm,{ 'attr': {'class': 'card'} }) }}
  28.                         <div class="card-body p-6">
  30.                             <div class="float-right">
  31.                                 <a
  32.                                     href="{{ path(app.request.get('_route'), app.request.get('_route_params')|merge({'_locale': ''})) }}">
  33.                                     <span class="flag flag-fr mr-3"></span></a>
  34.                                 <a
  35.                                     href="{{ path(app.request.get('_route'), app.request.get('_route_params')|merge({'_locale': 'en'})) }}">
  36.                                     <span class="flag flag-gb"></span></a>
  37.                             </div>
  39.                             <div class="card-title">{{ 'register.title'|trans }}</div>
  41.                             <div class="form-group">
  42.                                 {{ form_label(registrationForm.email, 'register.email', { 'label_attr': {'class': 'form-label'} }) }}
  43.                                 {{ form_widget(registrationForm.email,{ 'attr': {'class': form_errors(registrationForm.email) == null ? 'form-control' : 'form-control is-invalid'} }) }}
  44.                                 <div class="form-error invalid-feedback">
  45.                                     {{ form_errors(registrationForm.email) }}
  46.                                 </div>
  47.                             </div>
  49.                             <div class="form-group">
  50.                                 {{ form_label(registrationForm.plainPassword, 'register.password', { 'label_attr': {'class': 'form-label'} }) }}
  51.                                 {{ form_widget(registrationForm.plainPassword,{ 'attr': {'class': form_errors(registrationForm.plainPassword) == null ? 'form-control' : 'form-control is-invalid'} }) }}
  52.                                 <i class="fe fe-eye-off" id="togglePassword"></i>
  53.                                 <div class="form-error invalid-feedback">
  54.                                     {{ form_errors(registrationForm.plainPassword) }}
  55.                                 </div>
  56.                             </div>
  58.                             <div class="row">
  60.                                 <div class="col-md-6">
  62.                                     <div class="form-group">
  63.                                         {{ form_label(registrationForm.firstname, 'user.firstname', { 'label_attr': {'class': 'form-label'} }) }}
  64.                                         {{ form_widget(registrationForm.firstname,{ 'attr': {'class': form_errors(registrationForm.firstname) == null ? 'form-control' : 'form-control is-invalid'} }) }}
  65.                                         <div class="form-error invalid-feedback">
  66.                                             {{ form_errors(registrationForm.firstname) }}
  67.                                         </div>
  68.                                     </div>
  70.                                 </div>
  72.                                 <div class="col-md-6">
  74.                                     <div class="form-group">
  75.                                         {{ form_label(registrationForm.lastname, 'user.lastname', { 'label_attr': {'class': 'form-label'} }) }}
  76.                                         {{ form_widget(registrationForm.lastname,{ 'attr': {'class': form_errors(registrationForm.lastname) == null ? 'form-control' : 'form-control is-invalid'} }) }}
  77.                                         <div class="form-error invalid-feedback">
  78.                                             {{ form_errors(registrationForm.lastname) }}
  79.                                         </div>
  80.                                     </div>
  82.                                 </div>
  84.                             </div>
  86.                             <div class="form-group">
  87.                                 {{ form_label(registrationForm.company, 'user.company', { 'label_attr': {'class': 'form-label'} }) }}
  88.                                 {{ form_widget(registrationForm.company,{ 'attr': {'class': form_errors(registrationForm.company) == null ? 'form-control' : 'form-control is-invalid'} }) }}
  89.                                 <div class="form-error invalid-feedback">
  90.                                     {{ form_errors(registrationForm.company) }}
  91.                                 </div>
  92.                             </div>
  94.                             <button class="btn btn-primary btn-block">{{ 'register.title'|trans }}</button>
  96.                         </div>
  98.                         {{ form_end(registrationForm) }}
  100.                     </div>
  101.                 </div>
  102.             </div>
  103.         </div>
  104.     </div>
  106. <style>
  107.     #togglePassword {
  108.     position: absolute;
  109.     right: 1.5em;
  110.     cursor: pointer;
  111.     margin-right: 25px;
  112.     margin-top: -27px;
  113. }
  114. </style>
  116. <script>
  117.         const togglePassword = document.querySelector("#togglePassword");
  118.         const password = document.querySelector("#registration_form_plainPassword");
  120.         togglePassword.addEventListener("click", function () {
  121.             // toggle the type attribute
  122.             const type = password.getAttribute("type") === "password" ? "text" : "password";
  123.             password.setAttribute("type", type);            
  124.             // toggle the icon
  125.             if (type == "text") {
  126.             this.classList.remove("fe-eye-off");
  127.             this.classList.add("fe-eye");
  128.             }
  129.             if (type == "password") {
  130.             this.classList.remove("fe-eye");
  131.             this.classList.add("fe-eye-off");
  132.             }
  133.         });
  134. </script>
  136. {% endblock %}