templates/registration/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Sign Up{% endblock %}
  5. {% block body %}
  6. <div class="container overflow-hidden">
  7.     <div class="row align-items-center justify-content-center min-vh-100">
  8.         <div class="col-12 col-lg-8 align-items-center d-block py-5 my-5">
  9.             <div class="row mb-4">
  10.                 <div class="col-sm-12">
  11.                     <img src="/build/images/logo.png" class="img-fluid logo mb-3"/>
  12.                     <h1 class="h3 mb-2 fw-bold">Register New Account</h1>
  13.                     <p>Click <a href="/">here</a> if you have an account</p>
  14.                 </div>
  15.             </div>
  16.             
  17.             {{ form_start(form, {'attr': {'id': 'form_registration'}}) }}
  18.                 {% for message in app.flashes('notice') %}
  19.                     <div class="alert alert-danger" role="alert">{{ message }}</div>
  20.                 {% endfor %}
  21.                 
  22.                 <div class="form-group hide_honey_pot">
  23.                     {{ form_label(form.fullName, 'honey_pot_label'|trans) }}
  24.                     {{ form_widget(form.fullName, {attr: {class: 'form-control', style: 'display:none !important', tabindex: '-1', autocomplete: 'off', ref: 'initHoneyPot'}}) }}
  26.                     {{ form_label(form.emailAddress, 'honey_pot_label'|trans) }}
  27.                     {{ form_widget(form.emailAddress, {attr: {class: 'form-control', style: 'display:none !important', tabindex: '-1', autocomplete: 'off', ref: 'initHoneyPot'}}) }}
  28.                 </div>
  30.                 <div class="tab">
  31.                     <div class="form-group">
  32.                         <div class="row mb-4">
  33.                             <div class="col-sm-12">
  34.                                 <label for="roles" class="fw-bold text-uppercase">Select all that apply:</label>
  35.                                 <div class="row justify-content-between">
  36.                                     {{ form_widget(form.roles, {'attr': {'class': 'form-control'}}) }}
  37.                                 </div>
  38.                                 <p class="fw-bold messages"></p>
  39.                             </div>
  40.                         </div>
  41.                     </div>
  42.                 </div>
  44.                 <div class="tab" style="display: none;">
  45.                     <div class="form-group">
  46.                         <div class="row mb-4">
  47.                             <div class="col-sm-12">
  48.                                 <label for="email" class="fw-bold text-uppercase">Email<span class="text-danger">*</span></label>
  49.                                 {{ form_widget(form.email, {'attr': {'class': 'form-control'}}) }}
  50.                                 <p class="fw-bold messages"></p>
  51.                             </div>
  52.                         </div>
  53.                     </div>
  55.                     <div class="row mb-4">
  56.                         <div class="col-sm-6">
  57.                             <div class="form-group">
  58.                                 <label for="first_password" class="fw-bold text-uppercase">Password<span class="text-danger">*</span></label>
  59.                                 {{ form_widget(form.password.first, {'attr': {'class': 'form-control'}}) }}
  60.                                 <p class="fw-bold messages"></p>
  61.                             </div>
  62.                         </div>
  63.                         <div class="col-sm-6">
  64.                             <div class="form-group">
  65.                                 <label for="second_password" class="fw-bold text-uppercase">Confirm Password<span class="text-danger">*</span></label>
  66.                                 {{ form_widget(form.password.second, {'attr': {'class': 'form-control'}}) }}
  67.                                 <p class="fw-bold messages"></p>
  68.                             </div>
  69.                         </div>
  70.                     </div>    
  72.                     <div class="row mb-4">
  73.                         <div class="col-sm-6">
  74.                             <div class="form-group">
  75.                                 <label for="name" class="fw-bold text-uppercase">First Name <span class="text-danger">*</span></label>
  76.                                 {{ form_widget(form.firstName, {'attr': {'class': 'form-control'}}) }}
  77.                                 <p class="fw-bold messages"></p>
  78.                             </div>
  79.                         </div>
  80.                         <div class="col-sm-6">
  81.                             <div class="form-group">
  82.                                 <label for="name" class="fw-bold text-uppercase">Last Name <span class="text-danger">*</span></label>
  83.                                 {{ form_widget(form.lastName, {'attr': {'class': 'form-control'}}) }}
  84.                                 <p class="fw-bold messages"></p>
  85.                             </div>
  86.                         </div>
  87.                     </div>
  89.                     <div class="row mb-4">
  90.                         <div class="col-sm-12 form-group">
  91.                             <label for="name" class="fw-bold text-uppercase">Organisation</label>
  92.                             {{ form_widget(form.organisation, {'attr': {'class': 'form-control'}}) }}
  93.                             <p class="fw-bold messages"></p>
  94.                         </div>
  95.                     </div>
  97.                     <div class="form-group">
  98.                         <div class="row mb-4">
  99.                             <div class="col-sm-12 form-group">
  100.                                 <label for="name" class="fw-bold text-uppercase">Phone <span class="text-danger">*</span></label>
  101.                                 {{ form_widget(form.phone, {'attr': {'class': 'form-control'}}) }}
  102.                                 <p class="fw-bold messages"></p>
  103.                             </div>
  104.                         </div>
  105.                     </div>
  107.                     <div class="row mb-2">
  108.                         <div class="col-sm-12">
  109.                             <h4 class="fw-bold">Address Details</h4>
  110.                         </div>
  111.                     </div>
  113.                     <div class="row mb-4">
  114.                         <div class="col-sm-6 form-group">
  115.                             <label for="name" class="fw-bold text-uppercase">Number and Street <span class="text-danger">*</span></label>
  116.                             {{ form_widget(form.street, {'attr': {'class': 'form-control'}}) }}
  117.                             <p class="fw-bold messages"></p>
  118.                         </div>
  119.                         <div class="col-sm-6 form-group">
  120.                             <label for="name" class="fw-bold text-uppercase">City <span class="text-danger">*</span></label>
  121.                             {{ form_widget(form.city, {'attr': {'class': 'form-control'}}) }}
  122.                             <p class="fw-bold messages"></p>
  123.                         </div>
  124.                     </div>
  126.                     <div class="row mb-4">
  127.                         <div class="col-sm-4 form-group">
  128.                             <label for="name" class="fw-bold text-uppercase">State <span class="text-danger">*</span></label>
  129.                             {{ form_widget(form.state, {'attr': {'class': 'form-control'}}) }}
  130.                             <p class="fw-bold messages"></p>
  131.                         </div>
  132.                         <div class="col-sm-4 form-group">
  133.                             <label for="name" class="fw-bold text-uppercase">Postcode <span class="text-danger">*</span></label>
  134.                             {{ form_widget(form.postcode, {'attr': {'class': 'form-control'}}) }}
  135.                             <p class="fw-bold messages"></p>
  136.                         </div>
  137.                         <div class="col-sm-4 form-group">
  138.                             <label for="name" class="fw-bold text-uppercase">Country <span class="text-danger">*</span></label>
  139.                             {{ form_widget(form.country, {'attr': {'class': 'form-control'}}) }}
  140.                             <p class="fw-bold messages"></p>
  141.                         </div>
  142.                     </div>
  144.                     <div class="row mb-2">
  145.                         <div class="col-sm-12">
  146.                             <h4 class="fw-bold">Additional Information</h4>
  147.                         </div>
  148.                     </div>
  150.                     <div class="row mb-4" id="user-categories-section">
  151.                         <div class="col-sm-12">
  152.                             <div class="form-group">
  153.                                 <label for="name" class="fw-bold text-uppercase">Are you (select all that apply)</label>
  154.                                 {{ form_widget(form.categories, {'attr': {'class': 'form-control tomselected'}}) }}
  155.                                 <p class="fw-bold messages"></p>
  156.                             </div>
  157.                         </div>
  158.                     </div>
  160.                     <div class="row mb-4" id="user-filmmaker-roles">
  161.                         <div class="col-sm-12">
  162.                             <div class="form-group">
  163.                                 <label for="name" class="fw-bold text-uppercase">Filmmaker Roles</label>
  164.                                 {{ form_widget(form.userRoles, {'attr': {'class': 'form-control tomselected'}}) }}
  165.                                 <p class="fw-bold messages"></p>
  166.                             </div>
  167.                         </div>
  168.                     </div>
  170.                     <div class="row mb-4">
  171.                         <div class="col-sm-12">
  172.                             <div class="form-group">
  173.                                 <label for="name" class="fw-bold text-uppercase">Please select the issue areas that are of interest to you</label>
  174.                                 {{ form_widget(form.areaInterest, {'attr': {'class': 'form-control  border-0 ps-0'}}) }}
  175.                                 <p class="fw-bold messages"></p>
  176.                             </div>
  177.                         </div>
  178.                     </div>
  180.                     <div class="row mb-4" id="user-gender">
  181.                         <div class="col-sm-12">
  182.                             <div class="form-group">
  183.                                 <label for="name" class="fw-bold text-uppercase">Gender</label>
  184.                                 {{ form_widget(form.gender, {'attr': {'class': 'form-control'}}) }}
  185.                                 <p class="fw-bold messages"></p>
  186.                             </div>
  187.                         </div>
  188.                     </div>
  190.                     <div class="row mb-4" id="user-other-questions">
  191.                         <div class="col-sm-6">
  192.                             <div class="form-group">
  193.                                 <label for="name" class="fw-bold text-uppercase">Do you identify as Aboriginal and/or Torres Strait Islander?</label>
  194.                                 {{ form_widget(form.isAborigin, {'attr': {'class': 'form-control'}}) }}
  195.                                 <p class="fw-bold messages"></p>
  196.                             </div>
  197.                         </div>
  198.                         <div class="col-sm-6">
  199.                             <div class="form-group">
  200.                                 <label for="name" class="fw-bold text-uppercase">Do you identify as culturally and/or linguistically diverse?</label>
  201.                                 {{ form_widget(form.isDiverse, {'attr': {'class': 'form-control'}}) }}
  202.                                 <p class="fw-bold messages"></p>
  203.                             </div>
  204.                         </div>
  205.                     </div>
  206.                 </div>
  207.                 
  208.                 <div class="row pt-4 mb-4">
  209.                     <div class="col-12">
  210.                         <div class="d-flex justify-content-between">
  211.                             <button type="button" class="rounded-pill gap-2 btn btn-lg btn-primary text-uppercase" id="prevBtn" style="display: none;">Previous</button>
  212.                             <button type="button" class="ms-auto rounded-pill gap-2 btn btn-lg btn-primary text-uppercase" id="nextBtn">Next</button>
  213.                             <button class="ms-auto rounded-pill gap-2 btn btn-lg btn-primary text-uppercase" id="submitBtn" type="submit" style="display: none;">Sign up</button>
  214.                         </div>
  215.                     </div>                    
  216.                 </div>
  218.             {{ form_end(form) }}
  219.         </div>
  220.     </div>
  221. </div>
  222. {% endblock %}