templates/user/registration/index.html.twig line 1

Open in your IDE?
  1. {% extends 'fe/base.html.twig' %}
  2. {% block title %}{{ "signup_txt"|trans }}{% endblock %}
  3. {% import 'fe/macros.html.twig' as macros %}
  4. {% block stylesheets %}
  5. {{ parent() }}
  6. {{ macros.assetCSS(asset('pages-assets/sign-up/sign-up.styles.css')) }}
  7. {% endblock %}
  9. {% block content %}
  10. {% include "fe/_pages_header.html.twig" with {"pageTitle": "signup_txt"|trans } %}
  12. <div class="l-container sign-form centered">
  13. <br>
  14. <br>
  15. <div>
  16. <div data-l-product-list-grid-products-container="true">
  17. <div class="l-product-list-grid-col-products-header">
  18. <div class="l-flex-row">
  19. <div class="l-flex-col-lg-6">
  20. {% include "fe/_breadcrumb.html.twig" %}
  21. </div>
  22. <div class="l-flex-col-lg-6">
  23. </div>
  24. </div>
  25. </div>
  26. <br>
  27. <br>
  28. {{ form_start(form, {"attr": {"data-form-validate":"true", "data-sign-form":"true", "id": "signup-form"}}) }}
  30. <div class="l-flex-row">
  31. <div class="l-flex-col-xl-4">
  32. <h2 class="title">{{ "signup_txt"|trans }}</h2>
  33. <p class="subtitle"></p>
  34. </div>
  35. <div class="l-flex-col-xl-8">
  36. </div>
  37. <div class="l-flex-col-xl-6">
  38. <div class="form-input-box" data-form-validate-input-box="true">
  39. <label class="stack-input stack-input-icon stack-input-block" data-stack-input="true">
  40. <div class="stack-input stack-input-inner stack-input-block">
  41. <span class="label"
  42. data-stack-input-label="true">{{ form.fullName.vars.label|trans }}</span>
  43. {{ form_widget(form.fullName) }}
  44. </div>
  45. <div class="stack-input-prefix">
  46. <svg width="20" height="24" viewBox="0 0 20 24" fill="none"
  47. xmlns="http://www.w3.org/2000/svg">
  48. <path d="M16.7063 11.7525C16.6235 11.6679 16.5248 11.6006 16.4158 11.5546C16.3068 11.5086 16.1897 11.4847 16.0714 11.4844C15.9531 11.4841 15.8359 11.5073 15.7266 11.5527C15.6174 11.5982 15.5182 11.6649 15.435 11.749C15.3518 11.8331 15.2862 11.933 15.242 12.0427C15.1977 12.1525 15.1758 12.2699 15.1774 12.3882C15.1791 12.5066 15.2042 12.6234 15.2515 12.7319C15.2987 12.8403 15.367 12.9383 15.4525 13.0202C16.209 13.7645 16.8091 14.6524 17.2177 15.6319C17.6264 16.6113 17.8352 17.6625 17.8321 18.7237C17.8321 19.8143 14.7062 21.3986 9.80768 21.3986C4.90912 21.3986 1.78325 19.8135 1.78325 18.722C1.78025 17.668 1.98633 16.6239 2.38957 15.6501C2.79282 14.6764 3.3852 13.7922 4.13245 13.049C4.21696 12.9665 4.28428 12.8682 4.33048 12.7596C4.37669 12.6509 4.40087 12.5342 4.40161 12.4162C4.40236 12.2982 4.37967 12.1812 4.33484 12.072C4.29001 11.9628 4.22395 11.8636 4.14049 11.7801C4.05702 11.6966 3.95781 11.6306 3.84862 11.5857C3.73942 11.5409 3.62241 11.5182 3.50438 11.519C3.38634 11.5197 3.26963 11.5439 3.16101 11.5901C3.05239 11.6363 2.95403 11.7036 2.87163 11.7881C1.95811 12.6968 1.23393 13.7778 0.741021 14.9683C0.248108 16.1588 -0.00374551 17.4352 4.20941e-05 18.7237C4.20941e-05 21.6193 5.05276 23.1818 9.80768 23.1818C14.5626 23.1818 19.6153 21.6193 19.6153 18.7237C19.6193 17.4265 19.364 16.1416 18.8644 14.9445C18.3649 13.7473 17.6311 12.6621 16.7063 11.7525Z"
  49. fill="#929292"/>
  50. <path d="M9.80763 12.4825C11.042 12.4825 12.2487 12.1164 13.2751 11.4306C14.3014 10.7448 15.1014 9.77008 15.5738 8.62964C16.0462 7.48921 16.1698 6.23431 15.9289 5.02363C15.6881 3.81295 15.0937 2.70087 14.2208 1.82802C13.348 0.955164 12.2359 0.360745 11.0252 0.119926C9.81456 -0.120893 8.55965 0.00270422 7.41922 0.475088C6.27878 0.947472 5.30404 1.74743 4.61824 2.77379C3.93245 3.80015 3.56641 5.00683 3.56641 6.24123C3.56832 7.89592 4.22649 9.48229 5.39653 10.6523C6.56657 11.8224 8.15294 12.4805 9.80763 12.4825ZM9.80763 1.78321C10.6893 1.78321 11.5513 2.04467 12.2844 2.53452C13.0175 3.02438 13.5889 3.72062 13.9263 4.53522C14.2637 5.34982 14.352 6.24617 14.18 7.11095C14.008 7.97572 13.5834 8.77006 12.9599 9.39353C12.3365 10.017 11.5421 10.4416 10.6773 10.6136C9.81258 10.7856 8.91622 10.6973 8.10162 10.3599C7.28703 10.0225 6.59078 9.45109 6.10093 8.71797C5.61107 7.98485 5.34961 7.12294 5.34961 6.24123C5.35101 5.05932 5.82114 3.92621 6.65687 3.09047C7.49261 2.25473 8.62572 1.7846 9.80763 1.78321Z"
  51. fill="#929292"/>
  52. </svg>
  53. </div>
  54. </label>
  55. <ul class="form-input-errors" data-validate-input-errors="name">
  56. {{ form_errors(form.fullName) }}
  57. </ul>
  58. </div>
  59. </div>
  60. <div class="l-flex-col-xl-6">
  61. <div class="form-input-box" data-form-validate-input-box="true">
  62. <label class="stack-input stack-input-icon stack-input-block" data-stack-input="true">
  63. <div class="stack-input stack-input-inner stack-input-block">
  64. <span class="label"
  65. data-stack-input-label="true">{{ form.phone.vars.label|trans }}</span>
  66. {{ form_widget(form.phone) }}
  67. </div>
  68. <div class="stack-input-prefix">
  69. <svg width="16" height="27" viewBox="0 0 16 27" fill="none"
  70. xmlns="http://www.w3.org/2000/svg">
  71. <path d="M15.4814 2.83378C15.4814 1.2686 14.2129 0 12.6477 0H2.83399C1.26881 0 0 1.2686 0 2.83378V24.0905C0 25.6557 1.26881 26.9243 2.83399 26.9243H12.6477C14.2129 26.9243 15.4814 25.6557 15.4814 24.0905V2.83378ZM1.34621 4.91368H14.1352V20.5971H1.34621V4.91368ZM2.82032 1.34621H12.6613C13.4815 1.34621 14.1352 2.02984 14.1352 2.85018V3.56746H1.34621V2.85018C1.34621 2.02984 2.00018 1.34621 2.82032 1.34621ZM12.6613 25.578H2.82032C2.01175 25.5839 1.35189 24.9327 1.34621 24.1241V21.9433H14.1352V24.1069C14.1392 24.9155 13.4872 25.574 12.6786 25.578H12.6613Z"
  72. fill="#929292"/>
  73. <path d="M9.05769 23.0879H6.42311C6.05122 23.0879 5.75 23.3891 5.75 23.761C5.75 24.1329 6.05122 24.4341 6.42311 24.4341H9.05769C9.42937 24.4341 9.73079 24.1329 9.73079 23.761C9.73079 23.3891 9.42937 23.0879 9.05769 23.0879Z"
  74. fill="#929292"/>
  75. </svg>
  76. </div>
  77. </label>
  78. <ul class="form-input-errors" data-validate-input-errors="phone">
  79. {{ form_errors(form.phone) }}
  80. </ul>
  81. </div>
  82. </div>
  83. <div class="l-flex-col-xl-6">
  84. <div class="form-input-box" data-form-validate-input-box="true">
  85. <label class="stack-input stack-input-icon stack-input-block" data-stack-input="true">
  86. <div class="stack-input stack-input-inner stack-input-block">
  87. <span class="label"
  88. data-stack-input-label="true">{{ form.email.vars.label|trans }}</span>
  89. {{ form_widget(form.email) }}
  90. </div>
  91. <div class="stack-input-prefix">
  92. <svg width="25" height="18" viewBox="0 0 25 18" fill="none"
  93. xmlns="http://www.w3.org/2000/svg">
  94. <path d="M22.8027 0H2.19727C0.988184 0 0 0.983838 0 2.19727V15.3809C0 16.5947 0.988818 17.5781 2.19727 17.5781H22.8027C24.0118 17.5781 25 16.5943 25 15.3809V2.19727C25 0.983545 24.0113 0 22.8027 0ZM22.4653 1.46484C21.7549 2.17759 13.4104 10.5493 13.0676 10.8933C12.7812 11.1805 12.2189 11.1807 11.9324 10.8933L2.53467 1.46484H22.4653ZM1.46484 15.1116V2.46655L7.76685 8.78906L1.46484 15.1116ZM2.53467 16.1133L8.80098 9.82656L10.895 11.9274C11.7531 12.7883 13.2473 12.7879 14.1051 11.9274L16.1991 9.82661L22.4653 16.1133H2.53467ZM23.5352 15.1116L17.2332 8.78906L23.5352 2.46655V15.1116Z"
  95. fill="#929292"/>
  96. </svg>
  97. </div>
  98. </label>
  99. <ul class="form-input-errors" data-validate-input-errors="email">
  100. {{ form_errors(form.email) }}
  101. </ul>
  102. </div>
  103. </div>
  104. {% if form.plainPassword is defined %}
  105. <div class="l-flex-col-xl-6">
  106. <div class="form-input-box" data-form-validate-input-box="true">
  107. <label class="stack-input stack-input-icon stack-input-block" data-stack-input="true">
  108. <div class="stack-input stack-input-inner stack-input-block">
  109. <span class="label"
  110. data-stack-input-label="true">{{ form.plainPassword.vars.label|trans }}</span>
  111. {{ form_widget(form.plainPassword) }}
  112. </div>
  113. <button class="btn stack-input-prefix" type="button" tabindex="-1">
  114. <svg width="28" height="24" viewBox="0 0 28 24" fill="none"
  115. xmlns="http://www.w3.org/2000/svg"
  116. data-ui-form-password-btn="sign-password"
  117. >
  118. <path d="M17.4761 12.4391L19.0664 10.7042C19.1821 11.1765 19.25 11.6702 19.25 12.1819C19.25 15.34 16.8949 17.9091 14 17.9091C13.531 17.9091 13.0784 17.8352 12.6455 17.7089L14.2358 15.974C15.9746 15.8447 17.3575 14.336 17.4761 12.4391ZM27.8897 11.7182C27.7821 11.507 26.2556 8.58921 23.2719 6.11647L21.9985 7.50556C24.1742 9.25071 25.5528 11.286 26.0955 12.1833C25.0584 13.906 20.9901 19.8182 14 19.8182C12.9517 19.8182 11.977 19.6719 11.0598 19.4385L9.62191 21.0071C10.9438 21.4493 12.3967 21.7273 14 21.7273C23.1597 21.7273 27.7009 13.0161 27.8897 12.6455C28.0367 12.357 28.0367 12.0067 27.8897 11.7182ZM24.2436 2.35676L4.99361 23.3567C4.82277 23.5431 4.59877 23.6364 4.37499 23.6364C4.15121 23.6364 3.92721 23.5431 3.75637 23.3567C3.41446 22.9837 3.41446 22.3797 3.75637 22.007L6.20548 19.3352C2.24612 16.7276 0.234281 12.8892 0.11025 12.6455C-0.0367499 12.357 -0.0367499 12.0065 0.11025 11.718C0.29903 11.3476 4.84027 2.63644 14 2.63644C16.3684 2.63644 18.4198 3.22587 20.1735 4.09737L23.0063 1.00704C23.3482 0.634048 23.9019 0.634048 24.2436 1.00704C24.5852 1.38002 24.5855 1.98401 24.2436 2.35676ZM7.51032 17.9118L9.7256 15.4951C9.11376 14.5587 8.74998 13.4168 8.74998 12.1819C8.74998 9.02376 11.105 6.45461 14 6.45461C15.132 6.45461 16.1787 6.85146 17.0371 7.51869L18.8284 5.5645C17.4131 4.9462 15.8049 4.54553 14 4.54553C7.00983 4.54553 2.94152 10.4577 1.90465 12.1804C2.56309 13.2691 4.45571 16.0249 7.51032 17.9118ZM10.9959 14.1091L15.7666 8.90468C15.2462 8.5694 14.647 8.3637 14 8.3637C12.0702 8.3637 10.5 10.0766 10.5 12.1819C10.5 12.8878 10.6885 13.5414 10.9959 14.1091Z"
  119. fill="#929292"></path>
  120. </svg>
  121. </button>
  122. </label>
  123. <ul class="form-input-errors" data-validate-input-errors="password">
  124. {{ form_errors(form.plainPassword) }}
  125. </ul>
  126. </div>
  127. </div>
  128. {% endif %}
  129. <div class="l-flex-col-xl-12">
  130. <div class="form-input-box checkbox-wrapper" data-form-validate-input-box="true">
  131. <br>
  132. <input class="l-form-checkbox ui-form-checkbox ui-form-checkbox--color-light ui-form-checkbox--rounded-lg"
  133. type="checkbox" data-validate-input="terms" data-form-validate-input-rules="required"
  134. name="terms" id="terms"
  135. value="1"
  136. {{ app.request.request.has("terms")? "checked" }}
  137. >
  138. <label
  139. class="l-form-checkbox-label l-form-checkbox-label--spacing-6 ui-form-checkbox-label ui-form-checkbox-label--lg"
  140. for="terms"
  141. >
  142. {{ "i_accept_the_txt"|trans }}
  143. <a href="{{ path('fe_terms_condition') }}" target="_blank">
  144. {{ "terms_and_conditions_txt"|trans }}
  145. </a>
  146. </label>
  147. <br>
  148. <ul class="form-input-errors" data-validate-input-errors="terms">
  149. </ul>
  150. </div>
  151. </div>
  152. <div class="l-flex-col-xl-12">
  153. <br>
  154. <br>
  155. <div class="buttons">
  156. <button
  157. class="btn btn-primary btn-lg btn-block g-recaptcha"
  158. disabled
  159. data-sign-up-submit="true"
  160. type="button"
  161. data-sitekey="{{ google_recaptcha_site_key }}"
  162. data-callback="onSubmit"
  163. data-action="submit"
  164. >
  165. {{ "create_account_txt"|trans }}
  166. </button>
  167. {# <a class="btn btn-outline-light btn-lg btn-block social-btn"
  168. href="{{ path('connect_facebook_start') }}">
  169. {% include "fe/icons/facebook.svg" %}
  170. &nbsp;
  171. &nbsp;
  172. {{ "login_with_facebook_txt"|trans }}
  173. </a> #}
  174. <a class="btn btn-outline-light btn-lg btn-block social-btn"
  175. href="{{ path('connect_google_start') }}">
  176. {% include "fe/icons/google.svg" %}
  177. &nbsp;
  178. &nbsp;
  179. {{ "login_with_google_txt"|trans }}
  180. </a>
  181. </div>
  182. </div>
  183. </div>
  184. {{ form_end(form) }}
  185. <br>
  186. <br>
  187. <br>
  188. </div>
  189. </div>
  190. </div>
  192. {% endblock %}
  193. {% block javascripts %}
  194. {{ parent() }}
  195. {{ macros.assetCSS(asset('pages-assets/sign-up/sign-up.lazy.styles.css'), true) }}
  197. {{ macros.assetJS(asset('pages-assets/sign-up/sign-up.js')) }}
  198. {{ macros.assetJS(asset('pages-assets/sign-up/sign-up.lazy.js'), true) }}
  199. <script src='//google.com/recaptcha/api.js'></script>
  200. <script>
  201. function onSubmit(token) {
  202. console.log(token);
  203. document.getElementById("signup-form").submit();
  204. }
  205. </script>
  206. {% endblock %}