templates/security/register-stepper.html.twig line 1

  1. {% extends "base.html.twig" %}
  3. {% block header %}{% endblock %}
  5. {% block stylesheets %}
  6. {{ parent() }}
  7.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bs-stepper/dist/css/bs-stepper.min.css">
  8.     <style>
  9.         .admin_bg::before {
  10.             background-image: url({{ tString("media_try_for_free_background") }});
  11.         }
  12.     </style>
  13. {% endblock %}
  15. {% block body %}
  17.     <div class="admin_bg">
  19.         <div class="container">
  20.             <section class="signup_section">
  22.                 <div class="top_part"></div>
  24.                 <!-- Comment Form Section -->
  25.                 <div class="signup_form" style="border-radius: unset">
  26.                     <div style="padding: 0 60px">
  27.                         {% if not form.vars.valid %}
  28.                             <div class="alert alert-danger alert-dismissible" style="margin-bottom: 3rem;">
  29.                                 <h5 style="color: white">{{ tString("error_title") }}</h5>
  30.                                 <ul class="list-unstyled">
  31.                                     {# Loop through every form item #}
  32.                                     {% for child in form.children %}
  33.                                         {# Display the errors of the form item #}
  34.                                         {%for error in child.vars.errors%}
  35.                                             <li class="text-white">{{error.message}}</li>
  36.                                         {%endfor%}
  37.                                     {%endfor%}
  38.                                     {% if form_errors(form.password.first) %}<li class="text-white">{{ form_errors(form.password.first) }}</li>{% endif %}
  39.                                 </ul>
  40.                             </div>
  41.                         {% endif %}
  42.                         {% for message in app.flashes("error") %}
  43.                             <div class="alert alert-danger">
  44.                                 {{ message }}
  45.                             </div>
  46.                         {% endfor %}
  47.                     </div>
  48.                     {{ form_start(form,{"attr": {"class": "register-form", "id": "regForm"}}) }}
  49.                         <!-- One "tab" for each step in the form: -->
  50.                         <div class="tab1">
  51.                             <p class="text-center">{{ tString("step_title")|capitalize }} 1 {{ tString("from") }} 6</p>
  52.                             <div class="progress mb-3">
  53.                                 <div class="progress-bar" role="progressbar" aria-valuenow="70"
  54.                                      aria-valuemin="0" aria-valuemax="100" style="width:16.67%">
  55.                                 </div>
  56.                             </div>
  57.                             <h5 class="try-free-title">{{ env("APP_TITLE") }} - {{ tString("isprobaj_besplatno") }}</h5>
  58.                             <div class="row">
  59.                                 <div class="form-group col-lg-12">
  60.                                     <label class="form-label mb-0" for="email">{{ tString("enter_your_email_address") }} <span class="text-danger">*</span></label>
  61.                                     {{ form_widget(form.email,{"attr": {"class": "form-control", "placeholder": tString("enter_your_email_address"), "oninput": "this.className = 'form-control'", "autocomplete": "off"}}) }}
  62.                                     <p style="display: none" class="text-email-exists text-danger">{{ tString("error_text_email_in_use") }}</p>
  63.                                     <div class="alert alert-secondary mt-3 signup-text">
  64.                                         <i class="fa fa-info-circle"></i> {{ tString("info_text_enter_email_for_activation") }}
  65.                                     </div>
  66.                                 </div>
  67.                                 <!-- Text input-->
  68.                                 <div class="col-12">
  69.                                     <div class="custom-control custom-checkboxmb-3 signup-text">
  70.                                         {{ form_widget(form.agreeTerms, { 'attr': {'class': 'custom-control-input', "oninput": "this.className = 'custom-control-input'"} }) }}
  71.                                         <label class="custom-control-label" for="stepper_agreeTerms" id="stepper_agreeTerms_text">
  72.                                             {{ tString("info_text_terms_label") }}
  73.                                         </label>
  74.                                     </div>
  75.                                 </div>
  76.                             </div>
  77.                             <div id="step1ErrorMessage" class="text-danger pb-3"></div>
  78.                         </div>
  80.                         <div class="tab2">
  81.                             <p class="text-center">{{ tString("step_title")|capitalize }} 2 {{ tString("from") }} 6</p>
  82.                             <div class="progress mb-3">
  83.                                 <div class="progress-bar" role="progressbar" aria-valuenow="70"
  84.                                      aria-valuemin="0" aria-valuemax="100" style="width:33.33%">
  85.                                 </div>
  86.                             </div>
  87.                             <h5 class="try-free-title">{{ env("APP_TITLE") }} - {{ tString("isprobaj_besplatno") }}</h5>
  88.                             <h6>{{ tString("enter_your") }}</h6>
  89.                             <div class="row">
  90.                                 <div class="form-group col-12">
  91.                                     <div class="mb-0">
  92.                                         <label class="form-label mb-0" for="email">{{ tString("name")|capitalize }} <span class="text-danger">*</span></label>
  93.                                         {{ form_widget(form.firstName,{"attr": {"class": "form-control", "oninput": "this.className = 'form-control'"}}) }}
  94.                                     </div>
  95.                                 </div>
  96.                                 <div class="form-group col-12">
  97.                                     <div class="mb-0">
  98.                                         <label class="form-label mb-0" for="email">{{ tString("surname")|capitalize }} <span class="text-danger">*</span></label>
  99.                                         {{ form_widget(form.lastName,{"attr": {"class": "form-control", "oninput": "this.className = 'form-control'"}}) }}
  100.                                     </div>
  101.                                 </div>
  102.                             </div>
  103.                             <div id="step2ErrorMessage" class="text-danger pb-3"></div>
  104.                         </div>
  106.                         <div class="tab3">
  107.                             <p class="text-center">{{ tString("step_title")|capitalize }} 3 {{ tString("from") }} 6</p>
  108.                             <div class="progress mb-3">
  109.                                 <div class="progress-bar" role="progressbar" aria-valuenow="70"
  110.                                      aria-valuemin="0" aria-valuemax="100" style="width:50%">
  111.                                 </div>
  112.                             </div>
  113.                             <h5 class="try-free-title">{{ env("APP_TITLE") }} - {{ tString("isprobaj_besplatno") }}</h5>
  114.                             <div class="row">
  115.                                 <div class="form-group col-12">
  116.                                     <div class="mb-0">
  117.                                         <label class="form-label mb-0" for="email">{{ tString("enter_your_phone_number") }} <span class="text-danger">*</span></label>
  118.                                         {{ form_widget(form.phone,{"attr": {"class": "form-control", "oninput": "this.className = 'form-control'", "placeholder": tString("enter_your_phone_number") }}) }}
  119.                                     </div>
  120.                                 </div>
  121.                             </div>
  122.                             <div id="step3ErrorMessage" class="text-danger pb-3"></div>
  123.                         </div>
  125.                         <div class="tab4">
  126.                             <p class="text-center">{{ tString("step_title")|capitalize }} 4 {{ tString("from") }} 6</p>
  127.                             <div class="progress mb-3">
  128.                                 <div class="progress-bar" role="progressbar" aria-valuenow="70"
  129.                                      aria-valuemin="0" aria-valuemax="100" style="width:66.67%">
  130.                                 </div>
  131.                             </div>
  132.                             <h5 class="try-free-title">{{ env("APP_TITLE") }} - {{ tString("isprobaj_besplatno") }}</h5>
  133.                             <div class="row">
  134.                                 <div class="form-group col-12">
  135.                                     <div class="mb-0">
  136.                                         <label class="form-label mb-0" for="email">{{ tString("enter_company_name_legal_name") }} <span class="text-danger">*</span></label>
  137.                                         {{ form_widget(form.companyName,{"attr": {"class": "form-control", "oninput": "this.className = 'form-control'", "placeholder": tString("enter_company_name_legal_name") }}) }}
  138.                                     </div>
  139.                                 </div>
  140.                             </div>
  141.                             <div id="step4ErrorMessage" class="text-danger pb-3"></div>
  142.                         </div>
  144.                         <div class="tab5">
  145.                             <p class="text-center">{{ tString("step_title")|capitalize }} 5 {{ tString("from") }} 6</p>
  146.                             <div class="progress mb-3">
  147.                                 <div class="progress-bar" role="progressbar" aria-valuenow="70"
  148.                                      aria-valuemin="0" aria-valuemax="100" style="width:83.34%">
  149.                                 </div>
  150.                             </div>
  151.                             <h5 class="try-free-title">{{ env("APP_TITLE") }} - {{ tString("isprobaj_besplatno") }}</h5>
  152.                             <div class="row">
  153.                                 <div class="form-group col-12">
  154.                                     <div class="mb-0">
  155.                                         <label class="form-label mb-0" for="email">{{ tString("enter_pin") }} <span class="text-danger">*</span></label>
  156.                                         {{ form_widget(form.pin,{"attr": {"class": "form-control", "oninput": "this.className = 'form-control'", "placeholder": tString("enter_pin") }}) }}
  157.                                     </div>
  158.                                 </div>
  159.                             </div>
  160.                             <div id="step5ErrorMessage" class="text-danger pb-3"></div>
  161.                         </div>
  163.                         <div class="tab6">
  164.                             <p class="text-center">{{ tString("step_title")|capitalize }} 6 {{ tString("from") }} 6</p>
  165.                             <div class="progress mb-3">
  166.                                 <div class="progress-bar" role="progressbar" aria-valuenow="70"
  167.                                      aria-valuemin="0" aria-valuemax="100" style="width:100%">
  168.                                 </div>
  169.                             </div>
  170.                             <h5 class="try-free-title">{{ env("APP_TITLE") }} - {{ tString("isprobaj_besplatno") }}</h5>
  171.                             <h6>{{ tString("create_your_password") }}:</h6>
  172.                             <div class="row">
  173.                                 <div class="form-group col-12">
  174.                                     <div class="mb-0">
  175.                                         <label class="form-label mb-0" for="email">{{ tString("password")|capitalize }} <span class="text-danger">*</span></label>
  176.                                         {{ form_widget(form.password.first,{"attr": {"class": "form-control", "oninput": "this.className = 'form-control'"}}) }}
  177.                                     </div>
  178.                                 </div>
  179.                                 <div class="form-group col-12">
  180.                                     <div class="mb-0">
  181.                                         <label class="form-label mb-0" for="email">{{ tString("confirm_password") }} <span class="text-danger">*</span></label>
  182.                                         {{ form_widget(form.password.second,{"attr": {"class": "form-control", "oninput": "this.className = 'form-control'"}}) }}
  183.                                     </div>
  184.                                 </div>
  185.                                 <div class="col-12">
  186.                                     <div class="alert alert-secondary signup-text">
  187.                                         <i class="fa fa-info-circle"></i>
  188.                                         {{ tString("insert_valid_password") }}.<br>
  189.                                         {{ tString("enter_min_5_char_text") }}.<br>
  190.                                         {{ tString("password_cant_match_email_text") }}.
  191.                                     </div>
  192.                                 </div>
  194.                                 <div class="col-12">
  195.                                     <p class="signup-text">
  196.                                         {{ tString("try_free_form_agree_text_1")|raw() }} <a target="_blank" style="text-decoration: underline" href="https://www.skvid.hr/uploads/documents/Opci-uvjeti-poslovanja.pdf">{{ tString("try_free_form_agree_text_2")|raw() }}</a>.
  197.                                     </p>
  198.                                 </div>
  200.                             </div>
  201.                             <div id="step6ErrorMessage" class="text-danger pb-3"></div>
  202.                         </div>
  204.                     <div class="tab7" style="display: none">
  205.                         <div class="row">
  206.                             <div class="col-12 d-flex align-items-center justify-content-center" style="height: 30vh;">
  207.                                 <div class="loader"></div>
  208.                             </div>
  209.                         </div>
  210.                     </div>
  212.                     <div style="overflow:auto;">
  213.                         <div id="step-btn-group" class="step-btn-group">
  214.                             <button style="width: 50%;border-radius: 5px" class="btn white_btn_2" type="button" id="prevBtn" data-n="-1" style="display: none;"><i class="fa fa-arrow-left"></i> {{ tString("btn_back") }}</button>
  215.                             <button style="width: 100%;border-radius: 5px" class="btn puprple_btn_2" type="button" id="nextBtn" data-n="1">{{ tString("btn_next") }}</button>
  216.                         </div>
  217.                     </div>
  219.                         <!-- Circles which indicates the steps of the form: -->
  220.                         {# <div id="stepIndicator" style="text-align:center;margin-top:40px;">
  221.                             <span class="step"></span>
  222.                             <span class="step"></span>
  223.                             <span class="step"></span>
  224.                             <span class="step"></span>
  225.                             <span class="step"></span>
  226.                             <span class="step"></span>
  227.                         </div> #}
  229.                     <input type="hidden" id="locale" name="locale" value="{{ app.request.locale }}">
  230.                     {{ form_end(form) }}
  231.                 </div>
  232.             </section>
  233.         </div>
  235.     </div>
  237. {% endblock %}
  239. {% block download %}{% endblock %}
  240. {% block newsletter %}{% endblock %}
  241. {% block footer %}{% endblock %}
  243. {% block javascripts %}
  244.     {{ parent() }}
  245.     <script src="{{ asset('js/register-form.js') }}?{{ random() }}"></script>
  246. {% endblock %}