templates/registration_form.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}Rejestracja nowego konta{% endblock %}
  3. {% block body %}
  4.     <div class="uk-grid-collapse" uk-grid>
  5.         <div class="uk-width-1-6">
  6.             &nbsp;
  7.         </div>
  8.         <div class="uk-width-1-6 uk-padding-small">
  9.             <img src="{{ asset ("img/logo.jpg") }}" class="uk-align-right"/>
  10.         </div>
  11.         <div class="uk-width-expand">            
  12.             <nav class="uk-navbar-container" uk-navbar>
  13.                 <div class="uk-navbar-left">
  14.                     <ul class="uk-navbar-nav">
  15.                         <li><a href="#">&nbsp;&nbsp;&nbsp;DOMENY</a></li>
  16.                         <li><a href="#">O FIRMIE</a></li>
  17.                         <li><a href="#">PORTFOLIO</a></li>
  18.                         <li><a href="#">POMOC</a></li>
  19.                         <li><a href="#">PANEL KLIENTA</a></li>
  20.                     </ul>
  21.                 </div>
  22.             </nav>
  23.         </div>
  24.         <div class="uk-width-1-6">
  25.             &nbsp;
  26.         </div>
  27.     </div>
  28.     <div class="uk-grid-collapse" uk-grid>
  29.         <div class="uk-width-1-6">
  30.             &nbsp;
  31.         </div>
  32.         <div class="uk-width-1-6 uk-padding-small">
  33.             <ul class="uk-nav uk-nav-default uk-align-right">
  34.                 {% include 'left_menu.html.twig' %}
  35.                 <li class="uk-align-left" id="cartPreview">
  36.                     {% include 'cart_preview.html.twig' %}
  37.                 </li><br/>
  38.             </ul>
  39.         </div>
  40.         <div class="uk-width-expand">
  41.             <form method="POST" name='form' class="uk-width-expand">
  42.                 <h2>Formularz rejestracyjny</h2>
  43.                 <fieldset class="uk-fieldset uk-width-expand">
  44.                     <legend class="uk-legend">Dane podstawowe</legend>
  45.                     <div>                     
  46.                         <label class="uk-form-label">Login<sup>*</sup></label>
  47.                         <div class="uk-form-controls">
  48.                             <input class="uk-input uk-form-small" type="text" placeholder="login" id="login"/>
  49.                         </div>
  50.                     </div>
  51.                     <div>                     
  52.                         <label class="uk-form-label">Hasło<sup>*</sup></label>
  53.                         <div class="uk-form-controls">
  54.                             <input class="uk-form-small uk-input" type="password" id="pass1"/><br/>
  55.                             <p class="uk-text-meta">
  56.                                 {{ pass_help|raw }}
  57.                             </p>
  58.                         </div>
  59.                     </div>
  60.                     <div>                     
  61.                         <label class="uk-form-label">Powtórz haslo<sup>*</sup></label>
  62.                         <div class="uk-form-controls">
  63.                             <input class="uk-form-small uk-input" type="password" id="pass2"/>
  64.                         </div>
  65.                     </div>
  66.                     <div>                     
  67.                         <label class="uk-form-label">Rofdzaj klienta<sup>*</sup></label>
  68.                         <div class="uk-form-controls">
  69.                             {% for RODZAJ_KLIENTA in rodzaje_klientow %}
  70.                                 <label><input class="uk-radio" type="radio" name="rodzaj_klienta" id="rodzaj_klienta_{{ RODZAJ_KLIENTA.id }}" value="{{ RODZAJ_KLIENTA.id }}" onclick="changeClientType('{{ RODZAJ_KLIENTA.nazwa }}');"{% if RODZAJ_KLIENTA.nazwa == "osoba prywatna" %} checked{% endif %}/> {{ RODZAJ_KLIENTA.nazwa }}</label>&nbsp;&nbsp;&nbsp;
  71.                             {% endfor %}                            
  72.                         </div>
  73.                     </div>
  74.                     <div class="person">
  75.                         <div class="uk-form-controls">
  76.                             <label><input class="uk-checkbox" type="checkbox" id="whois"/> Zgoda na pokazywanie danych WHOIS</label>
  77.                         </div>
  78.                     </div>
  79.                     <div class="person">
  80.                         <label class="uk-form-label">Imię i Nazwisko<sup>*</sup></label>
  81.                         <div class="uk-form-controls">
  82.                             <input class="uk-form-small uk-input" type="text" id="imie_i_nazwisko" placeholder="Imię i Nazwisko"/>
  83.                         </div>
  84.                     </div>
  85.                     <div class="company" style="display: none;">
  86.                         <label class="uk-form-label">Nazwa<sup>*</sup></label>
  87.                         <div class="uk-form-controls">
  88.                             <input class="uk-form-small uk-input" type="text" id="nazwa" placeholder="Nazwa"/>
  89.                         </div>
  90.                     </div>
  91.                     <div class="company" style="display: none;">
  92.                         <label class="uk-form-label">Osoba kontaktowa<sup>*</sup></label>
  93.                         <div class="uk-form-controls">
  94.                             <input class="uk-form-small uk-input" type="text" id="osoba_kontaktowa" placeholder="Osoba kontaktowa"/>
  95.                         </div>
  96.                     </div>
  97.                 </fieldset>
  98.                 <hr/>
  99.                 <fieldset class="uk-fieldset uk-width-expand">
  100.                     <legend class="uk-legend">Adres</legend>
  101.                     <div>                     
  102.                         <label class="uk-form-label">Miejscowość<sup>*</sup></label>
  103.                         <div class="uk-form-controls">
  104.                             <input class="uk-input uk-form-small" type="text" placeholder="Miejscowość" id="miasto"/>
  105.                         </div>
  106.                     </div>
  107.                     <div>                     
  108.                         <label class="uk-form-label">Kod pocztowy<sup>*</sup></label>
  109.                         <div class="uk-form-controls">
  110.                             <input class="uk-form-small uk-input" type="text" placeholder="Kod pocztowy" id="kod_pocztowy"/>
  111.                         </div>
  112.                     </div>
  113.                     <div>                     
  114.                         <label class="uk-form-label">Ulica<sup>*</sup></label>
  115.                         <div class="uk-form-controls">
  116.                             <input class="uk-form-small uk-input" type="text" id="ulica" placeholder="Ulica nr domu i nr lokalu"/>
  117.                         </div>
  118.                     </div>
  119.                     <div>                     
  120.                         <label class="uk-form-label">Kraj<sup>*</sup></label>
  121.                         <div class="uk-form-controls">
  122.                             <select class="uk-input uk-form-small" id="kraj">
  123.                                 {% for KRAJ in kraje %}
  124.                                     <option value="{{ KRAJ.id }}"{% if KRAJ.skrot2|lower == 'pl' %} selected{% endif %}>{{ KRAJ.nazwa }}</option>
  125.                                 {% endfor %}
  126.                             </select>
  127.                         </div>
  128.                     </div>
  129.                     <div>
  130.                         <div class="uk-form-controls">
  131.                             <label><input class="uk-checkbox" type="checkbox" id="adres_koresp" onclick="if (this.checked) {
  132.                                         $('#koresp_addr').fadeIn('slow');
  133.                                     } else {
  134.                                         $('#koresp_addr').fadeOut('slow');
  135.                                     }"/> Inny adres korespondencyjny</label>
  136.                         </div>
  137.                     </div>
  138.                 </fieldset>
  139.                 <hr/>
  140.                 <fieldset class="uk-fieldset uk-width-expand" style="display: none;" id="koresp_addr">
  141.                     <legend class="uk-legend">Adres korespondencyjny</legend>
  142.                     <div>                     
  143.                         <label class="uk-form-label">Miejscowość<sup>*</sup></label>
  144.                         <div class="uk-form-controls">
  145.                             <input class="uk-input uk-form-small" type="text" placeholder="Miejscowość" id="kores_miasto"/>
  146.                         </div>
  147.                     </div>
  148.                     <div>                     
  149.                         <label class="uk-form-label">Kod pocztowy<sup>*</sup></label>
  150.                         <div class="uk-form-controls">
  151.                             <input class="uk-form-small uk-input" type="text" placeholder="Kod pocztowy" id="kores_kod_pocztowy"/>
  152.                         </div>
  153.                     </div>
  154.                     <div>                     
  155.                         <label class="uk-form-label">Ulica<sup>*</sup></label>
  156.                         <div class="uk-form-controls">
  157.                             <input class="uk-form-small uk-input" type="text" id="kores_ulica" placeholder="Ulica nr domu i nr lokalu"/>
  158.                         </div>
  159.                     </div>
  160.                     <div>                     
  161.                         <label class="uk-form-label">Kraj<sup>*</sup></label>
  162.                         <div class="uk-form-controls">
  163.                             <select class="uk-input uk-form-small" id="kores_kraj">
  164.                                 {% for KRAJ in kraje %}
  165.                                     <option value="{{ KRAJ.id }}"{% if KRAJ.skrot2|lower == 'pl' %} selected{% endif %}>{{ KRAJ.nazwa }}</option>
  166.                                 {% endfor %}
  167.                             </select>
  168.                         </div>
  169.                     </div>
  170.                 </fieldset>
  171.                 <hr/>
  172.                 <fieldset class="uk-fieldset uk-width-expand">
  173.                     <legend class="uk-legend">Dane kontaktowe</legend>
  174.                     <div>                     
  175.                         <label class="uk-form-label">Telefon w formacie "+(numer_kierunkowy_kraju) pełny_numer_wewnątrz_kraju"<sup>**</sup></label>
  176.                         <div class="uk-form-controls">
  177.                             <input class="uk-input uk-form-small" type="text" placeholder="Telefon" id="mask_telefon"/>
  178.                             <input class="uk-input uk-form-small" type="hidden" placeholder="Telefon" id="telefon"/>
  179.                         </div>
  180.                     </div>
  181.                     <div>                     
  182.                         <label class="uk-form-label">Telefon komórkowy w formacie "+(numer_kierunkowy_kraju) pełny_numer_wewnątrz_kraju"<sup>**</sup></label>
  183.                         <div class="uk-form-controls">
  184.                             <input class="uk-form-small uk-input" type="text" placeholder="Telefon komórkowy" id="mask_telefon_komorkowy"/>
  185.                             <input class="uk-form-small uk-input" type="hidden" placeholder="Telefon komórkowy" id="telefon_komorkowy"/>
  186.                         </div>
  187.                     </div>
  188.                     <div>                     
  189.                         <label class="uk-form-label">E-mail<sup>*</sup></label>
  190.                         <div class="uk-form-controls">
  191.                             <input class="uk-form-small uk-input" type="text" id="email" placeholder="E-mail"/>
  192.                         </div>
  193.                     </div>
  194.                     <div class="person">          
  195.                         <label class="uk-form-label">PESEL<sup>*</sup></label>
  196.                         <div class="uk-form-controls">
  197.                             <input class="uk-form-small uk-input" type="text" id="pesel" placeholder="PESEL"/>
  198.                         </div>
  199.                     </div>
  200.                     <div class="company" style="display: none;">          
  201.                         <label class="uk-form-label">NIP<sup>*</sup></label>
  202.                         <div class="uk-form-controls">
  203.                             <input class="uk-form-small uk-input" type="text" id="nip" placeholder="NIP"/>
  204.                         </div>
  205.                     </div>
  206.                 </fieldset>
  207.                 <hr/>
  208.                 <div class="uk-text-meta">
  209.                     <sup>*</sup> - Pola oznaczone gwiazdką, są polami wymaganymi.<br/>
  210.                     <sup>**</sup> - Przynajmniej jedno z pól oznaczonych podwójną gwiazdką jest wymagane.
  211.                 </div>
  212.                 <div>
  213.                     <button type="button" class="uk-button uk-button-primary uk-align-right" onclick="checkForm();">Zarejestruj</button>
  214.                 </div>
  215.             </form>
  216.         </div>
  217.         <div class="uk-width-1-6">
  218.             &nbsp;
  219.         </div>
  220.     </div>
  221.     <div id="check-modal" class="uk-flex-top" uk-modal>
  222.         <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
  223.             <div uk-grid>
  224.                 <div class="uk-width-auto">
  225.                     <div uk-spinner id="frmSpinner"></div>
  226.                 </div>
  227.                 <div class="uk-width-expand">
  228.                     <p> Proszę czekać, sprawdzam poprawność wypełnienia formularza rejestracyjnego...</p>
  229.                     <div style="display: none;" id="formAlerts">
  230.                         <hr/>
  231.                     </div>
  232.                 </div>
  233.             </div>
  234.         </div>
  235.     </div>
  236.     <div id="send-modal" class="uk-flex-top" uk-modal>
  237.         <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
  238.             <div uk-grid>
  239.                 <div class="uk-width-auto">
  240.                     <div uk-spinner id="frmSpinner"></div>
  241.                 </div>
  242.                 <div class="uk-width-expand">
  243.                     <p> Proszę czekać, dokonuję rejestracji nowego klienta.</p>
  244.                 </div>
  245.             </div>
  246.         </div>
  247.     </div>
  248. {% endblock %}
  249. {% block javascripts %}
  250.     <script>
  252.         function changeClientType(ct) {
  253.             if (ct == "osoba prywatna") {
  254.                 $(".company").fadeOut("slow", function () {
  255.                     $(".person").fadeIn("slow");
  256.                 });
  257.             } else {
  258.                 $(".person").fadeOut("slow", function () {
  259.                     $(".company").fadeIn("slow");
  260.                 });
  261.             }
  262.         }
  264.         function checkForm() {
  265.             $("#formAlerts").find ("div,button").remove ();
  266.             $("#frmSpinner").show ();
  267.             $("#formAlerts").hide ();
  268.             UIkit.modal(document.getElementById('check-modal')).show();
  269.             var dataForm = {
  270.                     login: $("#login").val (),
  271.                     pass1: $("#pass1").val (),
  272.                     pass2: $("#pass2").val (),
  273.                     {% for RODZAJ_KLIENTA in rodzaje_klientow %}
  274.                         rodzaj_klienta_{{ RODZAJ_KLIENTA.id }}: document.getElementById("rodzaj_klienta_{{ RODZAJ_KLIENTA.id }}").checked,
  275.                     {% endfor %}
  276.                     whois: document.getElementById ("whois").checked,
  277.                     imie_i_nazwisko: $("#imie_i_nazwisko").val (),
  278.                     nazwa: $("#nazwa").val (),
  279.                     osoba_kontaktowa: $("osoba_kontaktowa").val (),
  280.                     miasto: $("#miasto").val (),
  281.                     kod_pocztowy: $("#kod_pocztowy").val (),
  282.                     ulica: $("#ulica").val (),
  283.                     kraj: $("#kraj").val (),
  284.                     adres_koresp: document.getElementById ("adres_koresp").checked,
  285.                     kores_miasto: $("#kores_miasto").val (),
  286.                     kores_kod_pocztowy: $("#kores_kod_pocztowy").val (),
  287.                     kores_ulica: $("#kores_ulica").val (),
  288.                     kores_kraj: $("#kores_kraj").val (),
  289.                     telefon: $("#telefon").val (),
  290.                     telefon_komorkowy: $("#telefon_komorkowy").val (),
  291.                     email: $("#email").val (),
  292.                     pesel: $("#pesel").val (),
  293.                     nip: $("#nip").val (),
  294.                     osoba_kontaktowa: $("#osoba_kontaktowa").val ()
  295.                 };            
  296.             $.ajax ({
  297.                 type: "POST",
  298.                 url: "{{ path("check-form-registration") }}",
  299.                 data: dataForm,
  300.                 success: function (ans) {                    
  301.                     $(".uk-input").removeClass ("uk-form-danger");
  302.                     if (ans.status) {
  303.                         console.log (ans);
  304.                         UIkit.modal(document.getElementById('check-modal')).hide();
  305.                         UIkit.modal(document.getElementById('send-modal')).show();
  306.                         $.ajax ({
  307.                             type: "POST",
  308.                             url: "{{ path ("register-new-user") }}",
  309.                             data: dataForm,
  310.                             success: function (ans) {
  311.                                 console.log (ans);
  312.                                 if (ans.status) {
  313.                                     var URL = "{{ path("register-new-user-activation-info", { klientId: "%KID%" }) }}";
  314.                                     URL = URL.replace ("%25KID%25", ans.klientId);
  315.                                     document.location.href = URL;
  316.                                 } else {
  317.                                     for (var ndx in ans.alerts) {
  318.                                         $("#formAlerts").append ($("<div>").html (ans.alerts[ndx]));
  319.                                     }
  320.                                     $("#formAlerts").append ($("<button>").addClass ("uk-button").addClass ("uk-button-danger").addClass ("uk-align-right").html ("OK").on("click", function () { UIkit.modal(document.getElementById('check-modal')).hide(); }));
  321.                                     $("#formAlerts").fadeIn ("slow");
  322.                                     $("#frmSpinner").hide ();
  323.                                 }                                
  324.                             }
  325.                         });
  326.                     } else {                        
  327.                         for (var ndx in ans.items) {
  328.                             $("#" + ans.items [ndx]).addClass ("uk-form-danger");
  329.                         }
  330.                         for (var ndx in ans.alerts) {
  331.                             $("#formAlerts").append ($("<div>").html (ans.alerts[ndx]));
  332.                         }
  333.                         $("#formAlerts").append ($("<button>").addClass ("uk-button").addClass ("uk-button-danger").addClass ("uk-align-right").html ("OK").on("click", function () { UIkit.modal(document.getElementById('check-modal')).hide(); }));
  334.                         $("#formAlerts").fadeIn ("slow");
  335.                         $("#frmSpinner").hide ();
  336.                     }
  337.                 }
  338.             });
  339.         }
  341.         $(function () {
  342.             $("#mask_telefon").on("keyup change", function () {
  343.                 $("#telefon").val (destroyMask (this.value));
  344.                 this.value = createMask ($("#telefon").val ());
  345.             });
  346.             $("#mask_telefon_komorkowy").on("keyup change", function () {
  347.                 $("#telefon_komorkowy").val (destroyMask (this.value));
  348.                 this.value = createMask ($("#telefon_komorkowy").val ());
  349.             });
  350.         })
  351.         
  352.         function createMask (v) {
  353.             var TEMP = "";
  354.             var POCZATEK = false;
  355.             var CYFRA = false;
  356.             var ZAMYKACZ = false;
  357.             for (var N = 0; N < v.length; N++) {
  358.                 var ZNAK = v.charAt (N);
  359.                 if (ZNAK == "+") {
  360.                     //PLUS
  361.                     if (TEMP == "") TEMP = "+";
  362.                 } else if (ZNAK == "(") {
  363.                     //NAWIAS OTWIERAJĄCY
  364.                     if (TEMP == "+") TEMP = "+(";
  365.                     POCZATEK = true;
  366.                 } else if (ZNAK == ")") {
  367.                     //NAWIAS ZAMYKAJĄCY                    
  368.                     if (CYFRA) {
  369.                         TEMP += ")";
  370.                         ZAMYKACZ = true;
  371.                     }
  372.                 } else if ((ZNAK >= "0") && (ZNAK <= "9")) {
  373.                     //CYFRA
  374.                     if (POCZATEK) {                        
  375.                         CYFRA = true;
  376.                         TEMP += ZNAK;
  377.                     }                    
  378.                 }
  379.             }
  380.             return TEMP;
  381.         }
  382.         
  383.         function destroyMask (v) {
  384.             return v;
  385.         }
  386.         
  387.     </script>
  388. {% endblock %}