templates/security/subscription_company_step1.html.twig line 1

Open in your IDE?
  1. {% extends 'base_front.html.twig' %}
  3. {% block style %}
  4.     <style>
  5.         .multisteps-form__progress {
  6.             display: grid;
  7.             grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  8.         }
  10.         .multisteps-form__progress-btn {
  11.             -webkit-transition-property: all;
  12.             transition-property: all;
  13.             -webkit-transition-duration: 0.15s;
  14.             transition-duration: 0.15s;
  15.             -webkit-transition-timing-function: linear;
  16.             transition-timing-function: linear;
  17.             -webkit-transition-delay: 0s;
  18.             transition-delay: 0s;
  19.             position: relative;
  20.             padding-top: 20px;
  21.             color: rgba(108, 117, 125, 0.7);
  22.             text-indent: -9999px;
  23.             border: none;
  24.             background-color: transparent;
  25.             outline: none !important;
  26.             cursor: pointer;
  27.         }
  28.         @media (min-width: 500px) {
  29.             .multisteps-form__progress-btn {
  30.                 text-indent: 0;
  31.             }
  32.         }
  33.         .multisteps-form__progress-btn:before {
  34.             position: absolute;
  35.             top: 0;
  36.             left: 50%;
  37.             display: block;
  38.             width: 13px;
  39.             height: 13px;
  40.             content: '';
  41.             -webkit-transform: translateX(-50%);
  42.             transform: translateX(-50%);
  43.             -webkit-transition: all 0.15s linear 0s, -webkit-transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
  44.             transition: all 0.15s linear 0s, -webkit-transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
  45.             transition: all 0.15s linear 0s, transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
  46.             transition: all 0.15s linear 0s, transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s, -webkit-transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
  47.             border: 2px solid currentColor;
  48.             border-radius: 50%;
  49.             background-color: #fff;
  50.             box-sizing: border-box;
  51.             z-index: 3;
  52.         }
  53.         .multisteps-form__progress-btn:after {
  54.             position: absolute;
  55.             top: 5px;
  56.             left: calc(-50% - 13px / 2);
  57.             -webkit-transition-property: all;
  58.             transition-property: all;
  59.             -webkit-transition-duration: 0.15s;
  60.             transition-duration: 0.15s;
  61.             -webkit-transition-timing-function: linear;
  62.             transition-timing-function: linear;
  63.             -webkit-transition-delay: 0s;
  64.             transition-delay: 0s;
  65.             display: block;
  66.             width: 100%;
  67.             height: 2px;
  68.             content: '';
  69.             background-color: currentColor;
  70.             z-index: 1;
  71.         }
  72.         .multisteps-form__progress-btn:first-child:after {
  73.             display: none;
  74.         }
  75.         .multisteps-form__progress-btn.js-active {
  76.             color: #FF839E;
  77.         }
  78.         .multisteps-form__progress-btn.js-active:before {
  79.             -webkit-transform: translateX(-50%) scale(1.2);
  80.             transform: translateX(-50%) scale(1.2);
  81.             background-color: currentColor;
  82.         }
  83.     </style>
  84. {% endblock %}
  86. {% block body %}
  87.     <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  88.         <div class="modal-dialog modal-lg" role="document">
  89.             <div class="modal-content">
  90.                 <div class="modal-header">
  91.                     <h5 class="modal-title" id="exampleModalLabel">Conditions Générales de vente</h5>
  92.                     <a href="#" class="close" data-dismiss="modal" aria-label="Close">
  93.                         <span aria-hidden="true">×</span>
  94.                     </a>
  95.                 </div>
  96.                 <div class="modal-body">
  97.                     <p>{{ cgv ? cgv.text|raw : "" }}</p>
  98.                 </div>
  99.                 <div class="modal-footer">
  100.                     <a href="#" class="btn btn-secondary" data-dismiss="modal">Fermer</a>
  101.                 </div>
  102.             </div>
  103.         </div>
  104.     </div>
  106.     <div class=" vendor-form">
  107.         <div class="container">
  108.             <div class="row ">
  109.                 <div class="offset-xl-1 col-xl-10 offset-lg-1 col-lg-10 col-md-12 col-sm-12 col-12  ">
  110.                     <!-- vendor head -->
  111.                     <div class="vendor-head">
  112.                         <a href="{{ path('front_home') }}"><img src="{{ asset('images/logo noir.png') }}" alt="logo Providders" style="width:25%"></a>
  113.                     </div>
  114.                     <!-- /.vendor head -->
  115.                     <div class="st-tab">
  116.                         <ul class="nav nav-tabs nav-justified" id="Mytabs" role="tablist">
  117.                             <li class="nav-item">
  118.                                 <a class="nav-link active" id="tab-1" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab-1" aria-selected="true">Inscription étape 1</a>
  119.                             </li>
  120.                         </ul>
  121.                         <div class="tab-content" id="myTabContent">
  122.                             <div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="tab-1">
  123.                                 <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 ">
  124.                                     <div class="col-12 col-lg-8 ml-auto mr-auto mb-4">
  125.                                         <div class="multisteps-form__progress">
  126.                                             <button class="multisteps-form__progress-btn js-active" type="button" title="User Info">Informations</button>
  127.                                            <!-- <button class="multisteps-form__progress-btn" type="button" title="Address">Produit</button> -->
  128.                                             <button class="multisteps-form__progress-btn" type="button" title="Order Info">Confirmation</button>
  129.                                         </div>
  130.                                     </div>
  131.                                     <!-- vendor title -->
  132.                                     {% for message in app.flashes('success') %}
  133.                                         <div class="alert alert-success">
  134.                                             {{ message }}
  135.                                         </div>
  136.                                     {% endfor %}
  137.                                     {% for message in app.flashes('danger') %}
  138.                                         <div class="alert alert-success">
  139.                                             {{ message }}
  140.                                         </div>
  141.                                     {% endfor %}
  142.                                     <!-- register-form -->
  143.                                     {{ form_start(form, {'attr': {'novalidate': 'novalidate', 'id': 'form-subscription'}}) }}
  144.                                     {% if type == constant('App\\Entity\\Company::COMPANY_TYPE_ENTREPRISE') %}
  145.                                     <h4 class="mt-5">Informations sur l'entreprise</h4>
  146.                                     {% else %}
  147.                                     <h4 class="mt-5">Votre localisation</h4>
  148.                                     {% endif %}
  149.                                     {% if type == constant('App\\Entity\\Company::COMPANY_TYPE_ENTREPRISE') %}
  150.                                     <div class="row mb-3">
  151.                                         <div class="col-md-4">
  152.                                             <!-- Text input-->
  153.                                             {{ form_widget(form.companyName) }}
  154.                                             <small style="color:red">{{ form_errors(form.companyName) }}</small>
  155.                                         </div>
  156.                                         <div class="col-md-8">
  157.                                             <!-- Text input-->
  158.                                             {{ form_widget(form.siren) }}
  159.                                             <small style="color:red">{{ form_errors(form.siren) }}</small>
  160.                                         </div>
  161.                                     </div>
  162.                                     {% endif %}
  163.                                     <div class="row">
  164.                                         <div class="col-md-4">
  165.                                             <!-- Text input-->
  166.                                             {{ form_widget(form.adress) }}
  167.                                             <small style="color:red">{{ form_errors(form.adress) }}</small>
  168.                                         </div>
  169.                                         <div class="col-md-4">
  170.                                             <!-- Text input-->
  171.                                             {{ form_widget(form.zipCode) }}
  172.                                             <small style="color:red">{{ form_errors(form.zipCode) }}</small>
  173.                                         </div>
  174.                                         <div class="col-md-4">
  175.                                             <!-- Text input-->
  176.                                             {{ form_widget(form.city) }}
  177.                                             <small style="color:red">{{ form_errors(form.city) }}</small>
  178.                                         </div>
  179.                                     </div>
  180.                                     <div class="row mt-3">
  181.                                         <div class="col-md-6">
  182.                                             <!-- Text input-->
  183.                                             {{ form_widget(form.country, {'attr': {'class': 'w-100'}}) }}
  184.                                             <small style="color:red">{{ form_errors(form.country) }}</small>
  185.                                         </div>
  186.                                     </div>
  187.                                     <hr>
  188.                                     <h4 class="mt-5">Contact</h4>
  189.                                     <div class="row">
  190.                                         <div class="col-md-4">
  191.                                             <!-- Text input-->
  192.                                             {{ form_widget(form.contactName) }}
  193.                                             <small style="color:red">{{ form_errors(form.contactName) }}</small>
  194.                                         </div>
  195.                                         <div class="col-md-4">
  196.                                             <!-- Text input-->
  197.                                             {{ form_widget(form.firstName) }}
  198.                                             <small style="color:red">{{ form_errors(form.firstName) }}</small>
  199.                                         </div>
  200.                                         <div class="col-md-4">
  201.                                             <!-- Text input-->
  202.                                             {{ form_widget(form.contactBirthday) }}
  203.                                             <small style="color:red">{{ form_errors(form.contactBirthday) }}</small>
  204.                                         </div>
  205.                                     </div>
  206.                                     <div class="row mt-3">
  207.                                         <div class="col-md-4">
  208.                                             <!-- Text input-->
  209.                                             {{ form_widget(form.contactPhone) }}
  210.                                             <small style="color:red">{{ form_errors(form.contactPhone) }}</small>
  211.                                         </div>
  212.                                     </div>
  213.                                     <hr>
  214.                                     <h4 class="mt-5">Informations de connexion</h4>
  215.                                     <div class="row">
  216.                                         <div class="col-md-4">
  217.                                             <!-- Text input-->
  218.                                             {{ form_widget(form.email) }}
  219.                                             <small style="color:red">{{ form_errors(form.email) }}</small>
  220.                                         </div>
  221.                                         <div class="col-md-4">
  222.                                             <!-- Text input-->
  223.                                             {{ form_widget(form.password.first, {'attr': {'placeholder': 'Mot de passe'}}) }}
  224.                                             <small style="color:red">{{ form_errors(form.password.first) }}</small>
  225.                                         </div>
  226.                                         <div class="col-md-4">
  227.                                             <!-- Text input-->
  228.                                             {{ form_widget(form.password.second, {'attr': {'placeholder': 'Confirmation mot de passe'}}) }}
  229.                                             <small style="color:red">{{ form_errors(form.password.second) }}</small>
  230.                                         </div>
  231.                                     </div>
  232.                                     <hr>
  233.                                     <h4 class="mt-5 mb-3">Prestations</h4>
  234.                                     <div class="row">
  235.                                         <div class="col-md-12">
  236.                                             {{ form_label(form.type) }}
  237.                                         </div>
  238.                                         <div class="col-md-4 ml-0">
  239.                                             <!-- Text input-->
  240.                                             {% for type in form.type %}
  241.                                                 {{ form_widget(type) }}
  242.                                                 {{ form_label(type) }}<br>
  243.                                             {% endfor %}
  244.                                             <small style="color:red">{{ form_errors(form.type) }}</small>
  245.                                         </div>
  246.                                     </div>
  247.                                     <hr>
  248.                                     <div class="row mt-3">
  249.                                         <div class="col-md-12">
  250.                                             <!-- Text input-->
  251.                                             <label for="company_isAcceptCondition">
  252.                                                 {{ form_widget(form.isAcceptCondition) }}
  253.                                                 <span class="ml-2">J'accepte les <a href="#" class="link-modal" data-toggle="modal" data-target="#exampleModal">
  254.                                                             Conditions Générales
  255.                                                         </a> de Providders</span>
  256.                                             </label>
  257.                                             <small style="color:red">{{ form_errors(form.isAcceptCondition) }}</small>
  258.                                         </div>
  259.                                         {{ form_rest(form) }}
  260.                                         <!-- Button -->
  261.                                         <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 mt-2">
  262.                                             <button type="submit" name="singlebutton" class="btn btn-default">Etape suivante</button>
  263.                                         </div>
  264.                                     </div>
  265.                                     <input type="hidden" name="token-account" id="token-account">
  266.                                     <input type="hidden" name="token-person" id="token-person">
  267.                                     {{ form_end(form) }}
  268.                                 </div>
  269.                             </div>
  270.                         </div>
  271.                     </div>
  272.                 </div>
  273.             </div>
  274.         </div>
  275.     </div>
  276. {% endblock %}
  278. {% block javascript %}
  279. {{ parent() }}
  280. <script>
  281. $("#company_contactBirthday").datepicker({
  282.     maxDate: "-18Y",
  283.     clearText: 'Effacer', clearStatus: '',
  284.     closeText: 'Fermer', closeStatus: 'Fermer sans modifier',
  285.     prevText: '<Préc', prevStatus: 'Voir le mois précédent',
  286.     nextText: 'Suiv>', nextStatus: 'Voir le mois suivant',
  287.     currentText: 'Courant', currentStatus: 'Voir le mois courant',
  288.     monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin',
  289.         'Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
  290.     monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jun',
  291.         'Jul','Aoû','Sep','Oct','Nov','Déc'],
  292.     monthStatus: 'Voir un autre mois', yearStatus: 'Voir un autre année',
  293.     weekHeader: 'Sm', weekStatus: '',
  294.     dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
  295.     dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
  296.     dayNamesMin: ['Di','Lu','Ma','Me','Je','Ve','Sa'],
  297.     dayStatus: 'Utiliser DD comme premier jour de la semaine', dateStatus: 'Choisir le DD, MM d',
  298.     dateFormat: 'dd-mm-yy', firstDay: 0,
  299.     initStatus: 'Choisir la date', isRTL: false
  300. });
  302. $("#company_individual_contactBirthday").datepicker({
  303.     maxDate: "-18Y",
  304.     clearText: 'Effacer', clearStatus: '',
  305.     closeText: 'Fermer', closeStatus: 'Fermer sans modifier',
  306.     prevText: '<Préc', prevStatus: 'Voir le mois précédent',
  307.     nextText: 'Suiv>', nextStatus: 'Voir le mois suivant',
  308.     currentText: 'Courant', currentStatus: 'Voir le mois courant',
  309.     monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin',
  310.         'Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
  311.     monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jun',
  312.         'Jul','Aoû','Sep','Oct','Nov','Déc'],
  313.     monthStatus: 'Voir un autre mois', yearStatus: 'Voir un autre année',
  314.     weekHeader: 'Sm', weekStatus: '',
  315.     dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
  316.     dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
  317.     dayNamesMin: ['Di','Lu','Ma','Me','Je','Ve','Sa'],
  318.     dayStatus: 'Utiliser DD comme premier jour de la semaine', dateStatus: 'Choisir le DD, MM d',
  319.     dateFormat: 'dd-mm-yy', firstDay: 0,
  320.     initStatus: 'Choisir la date', isRTL: false
  321. });
  322. </script>
  323. {% endblock %}