templates/packages/core/action/http/registration.html.twig line 1

  1. {% extends 'packages/core/layout/base_public_half_sized.html.twig' %}
  2. {% form_theme form 'packages/core/form/bootstrap_5_layout.html.twig' %}
  3. {% trans_default_domain 'core@messages' %}
  5. {% block javascripts %}
  6.     <script type="text/javascript">
  7.         function onGoogleReCaptchaApiLoad() {
  8.             let widgets = document.querySelectorAll('.js-google-recaptcha');
  10.             for (let i = 0; i < widgets.length; i++) {
  11.                 renderReCaptcha(widgets[i]);
  12.             }
  13.         }
  15.         function renderReCaptcha(widget) {
  16.             let form = widget.closest('form');
  17.             let widgetType = widget.getAttribute('data-type');
  18.             let widgetParameters = {
  19.                 'sitekey': widget.getAttribute('data-site-key')
  20.             };
  22.             if (widgetType === 'invisible') {
  23.                 widgetParameters['callback'] = function () {
  24.                     form.submit()
  25.                 };
  26.                 widgetParameters['size'] = "invisible";
  27.             }
  29.             let widgetId = grecaptcha.render(widget, widgetParameters);
  31.             if (widgetType === 'invisible') {
  32.                 bindChallengeToSubmitButtons(form, widgetId);
  33.             }
  34.         }
  36.         function bindChallengeToSubmitButtons(form, reCaptchaId) {
  37.             getSubmitButtons(form).forEach(function (button) {
  38.                 button.addEventListener('click', function (e) {
  39.                     e.preventDefault();
  40.                     grecaptcha.execute(reCaptchaId);
  41.                 });
  42.             });
  43.         }
  45.         function getSubmitButtons(form) {
  46.             let buttons = form.querySelectorAll('button, input');
  47.             let submitButtons = [];
  49.             for (let i= 0; i < buttons.length; i++) {
  50.                 let button = buttons[i];
  52.                 if (button.getAttribute('type') === 'submit') {
  53.                     submitButtons.push(button);
  54.                 }
  55.             }
  57.             return submitButtons;
  58.         }
  59.     </script>
  60.     <script type="text/javascript" src="https://www.google.com/recaptcha/api.js?onload=onGoogleReCaptchaApiLoad&render=explicit" async defer></script>
  61.     {{ parent() }}
  62. {% endblock %}
  64. {% block title %}{{ 'title.registration'|trans }}{% endblock %}
  66. {% block content %}
  67.     <form
  68.             action="{{ form.vars.action }}"
  69.             method="{{ form.vars.method }}"
  70.             class="form w-100"
  71.             novalidate="novalidate"
  72.             autocomplete="off"
  73.     >
  74.         {% include 'packages/core/layout/fragments/_public_half_sized_header.html.twig' with {
  75.             'header': 'header.registration'|trans,
  76.             'subtitle': 'subtitle.registration'|trans
  77.         } %}
  79.         {{ form_errors(form) }}
  80.         <div class="fv-row mb-7">
  81.             <div class="form-floating">
  82.                 {{ form_widget(form.contact.firstName, { 'attr': { 'placeholder': 'placeholder.first_name'|trans } }) }}
  83.                 {{ form_label(form.contact.firstName, 'label.first_name'|trans) }}
  84.             </div>
  85.             {{ form_errors(form.contact.firstName) }}
  86.         </div>
  87.         <div class="fv-row mb-7">
  88.             <div class="form-floating">
  89.                 {{ form_widget(form.contact.lastName, { 'attr': { 'placeholder': 'placeholder.last_name'|trans } }) }}
  90.                 {{ form_label(form.contact.lastName, 'label.last_name'|trans) }}
  91.             </div>
  92.             {{ form_errors(form.contact.lastName) }}
  93.         </div>
  94.         <div class="fv-row mb-7">
  95.             <div class="form-floating">
  96.                 {{ form_widget(form.username, { 'attr': {
  97.                     'autocomplete': 'email',
  98.                     'placeholder': 'placeholder.username'|trans,
  99.                 } }) }}
  100.                 {{ form_label(form.username, 'label.username'|trans) }}
  101.             </div>
  102.             {{ form_errors(form.username) }}
  103.         </div>
  104.         <div class="fv-row mb-7" {{ stimulus_controller('core/password_meter') }}>
  105.             <div class="form-floating" {{ stimulus_controller('core/password_visibility') }} {{ stimulus_target('core/password_meter', 'inputWrapper') }}>
  106.                 {{ form_widget(form.password.first, { 'attr': {
  107.                     'autocomplete': 'new-password',
  108.                     'placeholder': 'placeholder.password'|trans,
  109.                     'data-core--password-visibility-target': 'input',
  110.                     'data-action': 'input->core--password-visibility#update'
  111.                 } }) }}
  112.                 {{ form_label(form.password.first, 'label.password'|trans) }}
  113.             </div>
  114.             <div class="text-muted mt-3">{{ 'help.password.requirements'|trans }}</div>
  115.             {{ form_errors(form.password.first) }}
  116.         </div>
  117.         <div class="fv-row mb-7">
  118.             <div class="form-floating" {{ stimulus_controller('core/password_visibility') }}>
  119.                 {{ form_widget(form.password.second, { 'attr': {
  120.                     'autocomplete': 'new-password',
  121.                     'placeholder': 'placeholder.password_repeat'|trans,
  122.                     'data-core--password-visibility-target': 'input',
  123.                     'data-action': 'input->core--password-visibility#update'
  124.                 } }) }}
  125.                 {{ form_label(form.password.second, 'label.password_repeat'|trans) }}
  126.             </div>
  127.             {{ form_errors(form.password.second) }}
  128.         </div>
  129.         <div class="fv-row mb-8">
  130.             {{ form_widget(form.consent, { 'attr': { 'checked': false }, 'label': 'label.registration_consent'|trans }) }}
  131.         </div>
  132.         {{ form_widget(form.recaptcha) }}
  133.         <div class="d-grid mb-10">
  134.             <button type="submit" id="kt_sign_up_submit" class="btn btn-primary">
  135.                 {{ 'action.register'|trans }}
  136.             </button>
  137.         </div>
  138.         <div class="text-gray-500 text-center fs-11rem  fw-semibold mb-7">
  139.             {{ 'text.already_have_account'|trans }} <a href="{{ path('app_login') }}" class="link-primary btn-border-white fw-semibold">{{ 'action.login'|trans }}</a>
  140.         </div>
  141.         {{ form_widget(form._token) }}
  142.     </form>
  143. {% endblock %}