templates/security/create_account.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{ 'auth.inscription_title'|trans }} - {{ 'app.name'|trans }}{% endblock %}
  4. {% form_theme form 'bootstrap_4_layout.html.twig' %}
  6. {% block bodyClass %}auth-page create-page{% endblock %}
  7. {# {% form_theme form 'bootstrap_4_layout.html.twig' %} #}
  8. {% block body %}
  9. <div class="auth-wrap">
  10.     <div class="auth-header">
  11.         <!-- Logo -->
  12.         <img class="auth-logo" src="{{ asset('images/labo.svg') }}" alt="{{ 'app.name'|trans }}">
  14.         <!-- Lang -->
  15.         {#<div class="dropdown lang-dropdown">
  16.             <button class="btn btn-lang dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
  17.                 aria-haspopup="true" aria-expanded="false">
  18.                 {% if app.request.locale == 'fr' %}
  19.                 {{ 'header.fr'|trans }}
  20.                 {% else %}
  21.                 {{ 'header.en'|trans }}
  22.                 {% endif %}
  23.             </button>
  24.             <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  25.                 {% if app.request.locale == 'fr' %}
  26.                 <a class="dropdown-item" href="{{ path('setlocale', {'language': 'en'}) }}">{{ 'header.en'|trans }}</a>
  27.                 {% else %}
  28.                 <a href="{{ path('setlocale', {'language': 'fr'}) }}">{{ 'header.fr'|trans }}</a>
  29.                 {% endif %}
  30.             </div>
  31.         </div>#}
  32.     </div>
  34.     <!-- Flash messages-->
  35.     {% include 'common/all_flash.html.twig' %}
  37.     <div class="auth-content">
  38.         <div class="form-col">
  39.             <div class="auth-block">
  40.                 <h1 class="auth-title">{{ 'auth.inscription_title'|trans }}</h1>
  41.                 <div class="auth-text">{{ 'auth.or'|trans }} <a href="{{ path('app_login') }}">{{
  42.                         'auth.connect_account'|trans }}</a></div>
  44.                 {# <form method="post" class="auth-form" autocomplete="off"> #}
  45.                     {{ form_start(form, {
  46.                         'attr': {
  47.                             'id': 'form_create_account',
  48.                             'class': 'form-create-account validate',
  49.                             'method': 'POST'
  50.                         }
  51.                     }) }}
  52.                     {{ form_errors(form) }}
  53.                     {#{% if error %}
  54.                     <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
  55.                     {% endif %}#}
  57.                     <div class="form-group  {#{% if error %}has-error{% endif %}#}">
  58.                         {# <input type="text" id="first_name" class="form-control" name="_first_name" value=""
  59.                             placeholder="{{ 'form.label.first_name'|trans }}" required="required"
  60.                             autocomplete="first_name" />
  61.                         <label class="required" for="first_name">{{ 'form.label.first_name'|trans }}</label> #}
  62.                         {{ form_row(form.firstName) }}
  63.                         <div class="help-text">
  64.                             {{ 'form.alert.first_name'|trans }}
  65.                         </div>
  66.                     </div>
  67.                     <div class="form-group  {#{% if error %}has-error{% endif %}#}">
  68.                         {# <input type="text" id="last_name" class="form-control" name="_last_name" value=""
  69.                             placeholder="{{ 'form.label.last_name'|trans }}" required="required"
  70.                             autocomplete="last_name" />
  71.                         <label class="required" for="last_name">{{ 'form.label.last_name'|trans }}</label> #}
  72.                         {{ form_row(form.lastName) }}
  73.                         <div class="help-text">
  74.                             {{ 'form.alert.last_name'|trans }}
  75.                         </div>
  76.                     </div>
  77.                     <div class="form-group">
  78.                         {{ form_row(form.statut) }}
  79.                     </div>
  80.                     <div class="form-group  {#{% if error %}has-error{% endif %}#}">
  81.                         {# <input type="text" id="university" class="form-control" name="_university" value=""
  82.                             placeholder="{{ 'form.label.organization'|trans }}" />
  83.                         <label for="university">{{ 'form.label.organization'|trans }}</label> #}
  84.                         {{ form_row(form.organization) }}
  85.                     </div>
  87.                     <div class="form-group  {#{% if error %}has-error{% endif %}#}">
  88.                         {# <input type="text" id="username" class="form-control" name="_username" value=""
  89.                             placeholder="{{ 'form.label.email'|trans }}" required="required" autocomplete="off" />
  90.                         <label class="required" for="username">{{ 'form.label.email'|trans }}</label> #}
  91.                         {{ form_row(form.email) }}
  92.                         <div class="help-text">
  93.                             {{ 'form.alert.email'|trans }}
  94.                         </div>
  95.                     </div>
  97.                     <div class="form-group form-password-group {#{% if error %}has-error{% endif %}#}">
  98.                         <div class="form-password-box">
  99.                             {# <input type="password" id="password" class="form-control check-password-valid"
  100.                                 name="_password" required="required" placeholder="{{ 'form.label.password'|trans }}"
  101.                                 autocomplete="off" />
  102.                             <label class="required" for="password">{{ 'form.label.password'|trans }}</label> #}
  103.                             {{ form_row(form.password.first, {'attr' : {'class' : 'check-password-valid'}}) }}
  104.                             <a href="javascript:void(0)" class="password-text-link password-show-link2"><i
  105.                                     class="icon-eye"></i></a>
  106.                             <a href="javascript:void(0)" class="password-text-link password-hide-link2"><i
  107.                                     class="icon-eye-slash"></i></a>
  108.                         </div>
  110.                         <div class="help-text">
  111.                             {{ 'form.alert.password'|trans }}
  112.                         </div>
  114.                         <div class="password-strength d-none">
  115.                             <span data-regex="3">{{ 'form.password.checkPassword3'|trans }}</span>
  116.                             <span data-regex="2">{{ 'form.password.checkPassword2'|trans }}</span>
  117.                             <span data-regex="1">{{ 'form.password.checkPassword1'|trans }}</span>
  118.                             <span data-regex="0">{{ 'form.password.checkPassword0'|trans }}</span>
  119.                         </div>
  120.                     </div>
  122.                     <div class="form-group form-password-group {#{% if error %}has-error{% endif %}#}">
  123.                         <div class="form-password-box">
  124.                             {# <input type="password" id="confirmation_password" class="form-control"
  125.                                 name="_confirmation_password" required="required"
  126.                                 placeholder="{{ 'form.label.confirmation_password'|trans }}" autocomplete="off" />
  127.                             <label class="required" for="confirmation_password">{{
  128.                                 'form.label.confirmation_password'|trans }}</label> #}
  129.                             {{ form_row(form.password.second, {'attr' : {'class' : 'check-password-valid'}}) }}
  130.                             <a href="javascript:void(0)" class="password-text-link password-show-link2"><i
  131.                                     class="icon-eye"></i></a>
  132.                             <a href="javascript:void(0)" class="password-text-link password-hide-link2"><i
  133.                                     class="icon-eye-slash"></i></a>
  134.                         </div>
  136.                         <div class="help-text">
  137.                             {{ 'form.alert.password'|trans }}
  138.                         </div>
  139.                     </div>
  140.                     <div class="form-group">
  141.                         <div class="form-checkbox">
  142.                             <input type="checkbox" name="cgu" value="1" id="cgu" required="required">
  143.                             <label for="cgu">
  144.                                 <span class="icon"></span>
  145.                                 {% set url_cgu = path('page', {'code': constant('App\\Entity\\Page::CODE')['TERMS_OF_SERVICE']}) %}
  146.                                 {{ 'form.label.read_accept'|trans }} <a href="{{ url_cgu }}">{{ 'form.action.cgu'|trans }}</a>
  147.                             </label>
  148.                         </div>
  149.                     </div>
  151.                     {{ form_row(form.submit) }}
  152.                     {# <button class="btn btn-primary btn-lg" type="submit">
  153.                         {{ 'form.action.register'|trans }}
  154.                     </button> #}
  156.                     <div class="mandatory-text">{{ 'form.label.mandatory'|trans }}</div>
  157.                     {#
  158.                 </form> #}
  159.                 {{ form_end(form) }}
  160.             </div>
  162.         </div>
  164.         <!-- Text -->
  165.         <div class="text-col">
  166.             <div class="auth-text-block">
  167.                 <div id="typed-strings">
  168.                     <p>{{ 'auth.title.first_word'|trans }} </p>
  169.                     <p>{{ 'auth.title.second_word'|trans }} </p>
  170.                     <p>{{ 'auth.title.third_word'|trans }} </p>
  171.                 </div>
  172.                 <div id="typed-strings2">
  173.                     <p>{{ 'auth.title.fourth_word'|trans }} </p>
  174.                     <p>{{ 'auth.title.fith_word'|trans }} </p>
  175.                 </div>
  176.                 <h2 class="auth-text-title">
  177.                     <p class="typed-text" id="typed"></p>{{ 'auth.title.last_sentence'|trans }} <p class="typed-text typed-alt-text" id="typed2"></p>
  178.                 </h2>
  179.                 <div class="auth-text-text">
  180.                     {{ 'auth.text'|trans }}
  181.                 </div>
  182.                 {#<div class="auth-text-action">
  183.                     <a class="btn btn-primary-outline btn-lg" href="#" target="_blank">{{ 'auth.btn'|trans }}</a>
  184.                 </div>#}
  185.             </div>
  186.         </div>
  187.     </div>
  188. </div>
  190.     <style>
  191.         .password-hide-link2 { display: none;}
  192.     </style>
  194.     <script>
  195.         // code doublon avec app/integration/js/front.js line 208 because yarn install bug
  196.         // fait en full JS et non jquery car jquery pas dispo ici
  198.         document.addEventListener('DOMContentLoaded', function () {
  199.             // SHOW PASSWORD
  200.             document.addEventListener('click', function (e) {
  201.                 if (e.target.closest('.password-show-link2')) {
  202.                     const link = e.target.closest('.password-show-link2');
  203.                     const box = link.closest('.form-password-box');
  204.                     const input = box.querySelector('input.form-control');
  206.                     box.querySelector('.password-show-link2').style.display = 'none';
  207.                     box.querySelector('.password-hide-link2').style.display = 'inline';
  208.                     input.type = 'text';
  209.                 }
  210.             });
  212.             // HIDE PASSWORD
  213.             document.addEventListener('click', function (e) {
  214.                 if (e.target.closest('.password-hide-link2')) {
  215.                     const link = e.target.closest('.password-hide-link2');
  216.                     const box = link.closest('.form-password-box');
  217.                     const input = box.querySelector('input.form-control');
  219.                     box.querySelector('.password-hide-link2').style.display = 'none';
  220.                     box.querySelector('.password-show-link2').style.display = 'inline';
  221.                     input.type = 'password';
  222.                 }
  223.             });
  224.         });
  225. </script>
  228. {% endblock %}