templates/sign_up/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}Zatoka Kodu - Rejestracja{% endblock %}
  4. {% block body %}
  5.     <main>
  6.         <section class="min-vh-100 d-flex align-items-center justify-content-center bg-white py-5 px-3">
  7.             <div class="container">
  8.                 <div class="row justify-content-center">
  9.                     <div class="col-md-10 col-lg-8 col-xl-6">
  10.                         <div class="text-center mb-4">
  11.                             <span class="display-4">馃憢</span>
  12.                             <h1 class="h3 fw-bold mt-2">Witamy w Zatoce Kodu</h1>
  13.                             <p class="text-muted">Wype艂nij formularz, aby zapisa膰 swoje dziecko na zaj臋cia</p>
  14.                         </div>
  15.                         <form action="/zapisz_na_kurs" method="post" class="bg-light p-4 p-md-5 rounded-4 shadow-sm" id="client_form">
  16.                             {% set fields = [
  17.                                 {'label': 'Imi臋 dziecka', 'name': 'child_name', 'icon': 'bi-person-circle'},
  18.                                 {'label': 'Nazwisko dziecka', 'name': 'child_surname', 'icon': 'bi-person-circle'},
  19.                                 {'label': 'Imi臋 rodzica', 'name': 'parent_name', 'icon': 'bi-person-circle'},
  20.                                 {'label': 'Nazwisko rodzica', 'name': 'parent_surname', 'icon': 'bi-person-circle'},
  21.                                 {'label': 'Adres email', 'name': 'email', 'type': 'email', 'icon': 'bi-envelope-fill'},
  22.                                 {'label': 'Telefon', 'name': 'phone', 'type': 'tel', 'icon': 'bi-phone-fill'},
  23.                                 {'label': 'Miasto', 'name': 'city', 'icon': 'bi-geo-alt-fill'},
  24.                                 {'label': 'Szko艂a', 'name': 'school', 'icon': 'bi-building'},
  25.                                 {'label': 'Klasa', 'name': 'class', 'icon': 'bi-people-fill'}
  26.                             ] %}
  27.                             {% for field in fields %}
  28.                                 <div class="mb-3">
  29.                                     <label class="form-label">{{ field.label }} *</label>
  30.                                     <div class="input-group">
  31.                                         <span class="input-group-text bg-white border-end-0"><i class="bi {{ field.icon }}"></i></span>
  32.                                         <input type="{{ field.type|default('text') }}" name="{{ field.name }}" class="form-control border-start-0" placeholder="{{ field.label }}" required>
  33.                                     </div>
  34.                                     {% if field.name == 'email' %}
  35.                                         <div id="emailHelp" class="form-text text-danger" style="display:none;">Niepoprawny format adresu e-mail.</div>
  36.                                     {% endif %}
  37.                                     {% if field.name == 'phone' %}
  38.                                         <div id="phoneHelp" class="form-text text-danger" style="display:none;">Niepoprawny format numeru telefonu. Mo偶esz wpisa膰 cyfry i opcjonalnie + na pocz膮tku.</div>
  39.                                     {% endif %}
  40.                                 </div>
  41.                             {% endfor %}
  42.                             <div class="mb-3">
  43.                                 <label class="form-label">Model P艂atno艣ci *</label>
  44.                                 <div class="input-group">
  45.                                     <span class="input-group-text bg-white border-end-0"><i class="bi bi-credit-card-2-front-fill"></i></span>
  46.                                     <select class="form-select border-start-0" name="payment" required>
  47.                                         <option value="" disabled selected>Wybierz model p艂atno艣ci</option>
  48.                                         <option value="miesieczna">Miesi臋czny (8 x 189 z艂) Cena za zaj臋cia: 50 z艂</option>
  49.                                         <option value="kwartalna">Kwartalny (3 x 420 z艂) Cena za zja臋cia: 42 z艂</option>
  50.                                     </select>
  51.                                 </div>
  52.                             </div>
  53.                             <div class="mb-3">
  54.                                 <label class="form-label">Has艂o *</label>
  55.                                 <div class="input-group">
  56.                                     <span class="input-group-text bg-white border-end-0"><i class="bi bi-lock-fill"></i></span>
  57.                                     <input type="password" name="password" id="password" class="form-control border-start-0" placeholder="Has艂o" minlength="6" required>
  58.                                 </div>
  59.                                 <div id="passwordHelpBlock" class="form-text text-danger" style="display:none;">Has艂o musi mie膰 co najmniej 6 znak贸w.</div>
  60.                             </div>
  61.                             <div class="mb-3">
  62.                                 <label class="form-label">Powt贸rz has艂o *</label>
  63.                                 <div class="input-group">
  64.                                     <span class="input-group-text bg-white border-end-0"><i class="bi bi-lock-fill"></i></span>
  65.                                     <input type="password" name="password-repeat" id="password-repeat" class="form-control border-start-0" placeholder="Powt贸rz has艂o" required>
  66.                                 </div>
  67.                                 <div id="passwordHelpBlock2" class="form-text text-danger" style="display:none;">Has艂a nie s膮 takie same.</div>
  68.                             </div>
  69.                             <div class="form-check my-3">
  70.                                 <input class="form-check-input" type="checkbox" name="permission" id="permission" required>
  71.                                 <label class="form-check-label small" for="permission">
  72.                                     Wyra偶am zgod臋 na przetwarzanie moich danych osobowych oraz danych osobowych mojego dziecka: imi臋 i nazwisko dziecka, imi臋 i nazwisko rodzica/opiekuna prawnego, dane kontaktowe (numer telefonu, adres e-mail), przez Programmers sp z o.o. w celu rejestracji dziecka na zaj臋cia oraz przygotowania umowy i realizacji 艣wiadcze艅 wynikaj膮cych z uczestnictwa w zaj臋ciach. Administratorem danych osobowych jest Programmers sp z o.o. Dane te b臋d膮 przetwarzane zgodnie z Rozporz膮dzeniem Parlamentu Europejskiego i Rady (UE) 2016/679 z dnia 27 kwietnia 2016 r. (RODO).
  73.                                 </label>
  74.                             </div>
  75.                             <div class="align-items-center mb-5">
  76.                                 <div class="d-grid">
  77.                                     <div class="g-recaptcha" data-sitekey="6Lc4NSQrAAAAAPo_MUEoj18JriAWuWj933iAian0"></div>
  78.                                 </div>
  79.                             </div>
  80.                             <input type="hidden" value="{% if course_id is defined %}{{ course_id }}{% endif %}" name="course">
  81.                             <input type="hidden" value="{% if course_id is defined %}{% if group_id matches '/^\\d+$/' %}{{ group_id }}{% endif %}{% endif %}" name="group">
  82.                             <input type="hidden" value="{% if type is defined %}{{ type }}{% endif %}" name="type">
  83.                             <input type="hidden" value="{% if district is defined %}{{ district }}{% else %}rejestracja{% endif %}" name="district">
  84.                             <div class="d-grid">
  85.                                 <button id="register_button" type="submit" class="btn btn-primary btn-lg rounded-pill">Zapisz dziecko</button>
  86.                             </div>
  87.                         </form>
  88.                     </div>
  89.                 </div>
  90.             </div>
  91.         </section>
  92.     </main>
  93. {% endblock %}
  95. {% block js %}
  96.     {{ parent() }}
  97. <script src="{{ asset('./assets/js/jquery-3.6.4.min.js') }}"></script>
  98. <script>
  99.     const passwordInput = document.getElementById('password');
  100.     const repeatPasswordInput = document.getElementById('password-repeat');
  101.     const emailInput = document.querySelector('[name="email"]');
  102.     const phoneInput = document.querySelector('[name="phone"]');
  103.     const form = document.getElementById('client_form');
  105.     function validateForm(event) {
  106.         let valid = true;
  108.         const requiredFields = form.querySelectorAll('[required]');
  109.         requiredFields.forEach(field => {
  110.             if (!field.value.trim()) {
  111.                 field.classList.add('is-invalid');
  112.                 valid = false;
  113.             } else {
  114.                 field.classList.remove('is-invalid');
  115.             }
  116.         });
  118.         const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
  119.         if (!emailRegex.test(emailInput.value.trim())) {
  120.             emailInput.classList.add('is-invalid');
  121.             document.getElementById('emailHelp').style.display = 'block';
  122.             valid = false;
  123.         } else {
  124.             emailInput.classList.remove('is-invalid');
  125.             document.getElementById('emailHelp').style.display = 'none';
  126.         }
  128.         const phoneRegex = /^\+?[0-9]{9,15}$/;
  129.         if (!phoneRegex.test(phoneInput.value.trim())) {
  130.             phoneInput.classList.add('is-invalid');
  131.             document.getElementById('phoneHelp').style.display = 'block';
  132.             valid = false;
  133.         } else {
  134.             phoneInput.classList.remove('is-invalid');
  135.             document.getElementById('phoneHelp').style.display = 'none';
  136.         }
  138.         // Has艂o - min 6 znak贸w
  139.         if (passwordInput.value.length < 6) {
  140.             passwordInput.classList.add('is-invalid');
  141.             document.getElementById('passwordHelpBlock').style.display = 'block';
  142.             valid = false;
  143.         } else {
  144.             passwordInput.classList.remove('is-invalid');
  145.             document.getElementById('passwordHelpBlock').style.display = 'none';
  146.         }
  148.         // Por贸wnanie hase艂
  149.         if (passwordInput.value.length >= 6 && passwordInput.value !== repeatPasswordInput.value) {
  150.             repeatPasswordInput.classList.add('is-invalid');
  151.             document.getElementById('passwordHelpBlock2').style.display = 'block';
  152.             valid = false;
  153.         } else {
  154.             repeatPasswordInput.classList.remove('is-invalid');
  155.             document.getElementById('passwordHelpBlock2').style.display = 'none';
  156.         }
  158.         return valid;
  159.     }
  161.     function sendRequest(formData) {
  162.         const xhr = new XMLHttpRequest();
  163.         xhr.open('POST', '/zapisz_na_kurs', true);
  164.         xhr.setRequestHeader('Content-Type', 'application/json');
  165.         xhr.onreadystatechange = function () {
  166.             if (xhr.readyState === 4) {
  167.                 if (xhr.status === 200) {
  168.                     const jsonObj = JSON.parse(xhr.responseText);
  169.                     if (jsonObj.status == "success") {
  170.                        // document.getElementById('form_div').classList.add('text-center');
  171.                         {% if group_id is defined %}
  172.                             {% if group_id matches '/^\\d+$/' %}
  173.                                 window.location.href = "{{ path('register_success')}}";
  174.                             {% else %}
  175.                                 window.location.href = "{{ path('register_waiting_list')}}";
  176.                             {% endif %}
  177.                         {% else %}
  178.                             window.location.href = "{{ path('register_success')}}";
  179.                         {% endif %}
  180.                     } else if (jsonObj.status == "error3") {
  181.                         window.location.href = "{{ path('account_exsist')}}";
  182.                     }
  183.                 } else {
  184.                     alert('B艂膮d po艂膮czenia z serwerem.');
  185.                 }
  186.             }
  187.         };
  188.         xhr.send(formData);
  189.     }
  190.     form.addEventListener('submit', function (event) {
  191.         event.preventDefault();
  193.         if (!validateForm(event)) {
  194.             return;
  195.         }
  197.         const data = {};
  198.         new FormData(form).forEach((value, key) => {
  199.             data[key] = value;
  200.         });
  202.         sendRequest(JSON.stringify(data));
  203.     });
  204. </script>
  205.     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  206. {% endblock %}