templates/pages/auth/signup.html.twig line 1

  1. {% extends "#{theme.getParameter('KT_THEME_LAYOUT_DIR')}/_auth.html.twig" %}
  3. {% block page_title %}Signup{% endblock %}
  5. {% block content %}
  7.     <!--begin::Form-->
  8.         <!--begin::Heading-->
  9.         <div class="text-center mb-11">
  10.             <!--begin::Title-->
  11.             <h1 class="text-dark fw-bolder mb-3">
  12.                 Sign Up
  13.             </h1>
  14.             <!--end::Title-->
  15.         </div>
  16.         <!--begin::Heading-->
  18.         {{ form_start(registrationForm, {'attr': {'id': 'kt_sign_up_form'}}) }}
  20.         {% if not registrationForm.vars.valid %}
  21.             <div class="alert bg-light-danger d-flex align-items-center p-5 mb-10">
  22.                 {{ theme.getIcon('information-5', 'fs-2hx text-danger me-4') | raw }}
  23.                 <div class="d-flex flex-column">
  24.                     <h4 class="fw-semibold">The following errors were noticed</h4>
  25.                     {{ form_errors(registrationForm) }}
  26.                     {{ form_errors(registrationForm.email) }}
  27.                     {{ form_errors(registrationForm.plainPassword) }}
  28.                     {{ form_errors(registrationForm.agreeTerms) }}
  29.                 </div>
  30.             </div>
  31.         {% endif %}
  34.         <!--begin::Input group--->
  35.         <div class="fv-row mb-8">
  36.             <!--begin::Email-->
  37.             {{ form_widget(registrationForm.email, {'attr': {'class': 'form-control bg-transparent', 'autocomplete': 'off', 'placeholder': 'Email'}, }) }}
  38.             <!--end::Email-->
  39.         </div>
  41.         <!--begin::Input group-->
  42.         <div class="fv-row mb-8" data-kt-password-meter="true">
  43.             <!--begin::Wrapper-->
  44.             <div class="mb-1">
  45.                 <!--begin::Input wrapper-->
  46.                 <div class="position-relative mb-3">
  47.                     {{ form_widget(registrationForm.plainPassword, {'attr': {'class': 'form-control bg-transparent', 'autocomplete': 'off', 'placeholder': 'Password'}, }) }}
  49.                     <span class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2" data-kt-password-meter-control="visibility">
  50.                         <i class="bi bi-eye-slash fs-2"></i>
  51.                         <i class="bi bi-eye fs-2 d-none"></i>
  52.                     </span>
  53.                 </div>
  54.                 <!--end::Input wrapper-->
  56.                 <!--begin::Meter-->
  57.                 <div class="d-flex align-items-center mb-3" data-kt-password-meter-control="highlight">
  58.                     <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
  59.                     <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
  60.                     <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
  61.                     <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px"></div>
  62.                 </div>
  63.                 <!--end::Meter-->
  64.             </div>
  65.             <!--end::Wrapper-->
  67.             <!--begin::Hint-->
  68.             <div class="text-muted">
  69.                 Use 8 or more characters with a mix of letters, numbers & symbols.
  70.             </div>
  71.             <!--end::Hint-->
  72.         </div>
  73.         <!--end::Input group--->
  75.         <!--end::Input group--->
  76.         <div class="fv-row mb-8">
  77.             <!--begin::Repeat Password-->
  78.             <input placeholder="Repeat Password" name="confirm-password" type="password" autocomplete="off" class="form-control bg-transparent"/>
  79.             <!--end::Repeat Password-->
  80.         </div>
  81.         <!--end::Input group--->
  83.         <!--begin::Accept-->
  84.         <div class="fv-row mb-8">
  85.             <label class="form-check form-check-inline">
  86.                 {{ form_widget(registrationForm.agreeTerms, {'attr': {'class': 'form-check-input'}, }) }}
  87.                 <span class="form-check-label fw-semibold text-gray-700 fs-base ms-1">
  88.                     I Accept the <a href="#" class="ms-1 link-primary">Terms</a>
  89.                 </span>
  90.             </label>
  91.         </div>
  92.         <!--end::Accept-->
  94.         <!--begin::Submit button-->
  95.         <div class="d-grid mb-10">
  96.             <button type="submit" id="kt_sign_up_submit" class="btn btn-primary">
  97.                 {% include 'partials/general/_button-indicator.html.twig' with {label: 'Sign Up'} %}
  98.             </button>
  99.         </div>
  100.         <!--end::Submit button-->
  102.         <!--begin::Sign up-->
  103.         <div class="text-gray-500 text-center fw-semibold fs-6">
  104.             Already have an Account?
  106.             <a href="/signin" class="link-primary fw-semibold">
  107.                 Sign in
  108.             </a>
  109.         </div>
  110.         <!--end::Sign up-->
  111.     <!--end::Form-->
  112.     {{ form_end(registrationForm) }}
  114. {% endblock %}