templates/about/6-signup.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block stylesheets %}
  4.     {{ parent() }}
  5.     <link rel="stylesheet" type="text/css" href="{{ asset( 'assets/css/snackbar.css' ) }}" />
  7. {% endblock %}
  9. {% block body %}
  10. <main class="mhcc-wrapper">
  11.   <article class="mhcc-sec-page-outer">
  12.     <!--// Main title / navbar wrapper STARTS-->
  13. <div class="mt-0 steps-nav-list-wrapper">
  14.     <header class="light-green-bg sec-page-main-header sec-page-main-header--steps">
  15.         <!--// Main title block STARTS-->
  16.         <div class="main-title-icon-wrapper">
  17.             <h1
  18.                 class="text-left sec-page-main-title--steps sec-page-lead-text--light-blue sec-page-main-title--big main-title-icon-wrapper__title">
  19.                 3. {{ "signup-account"|trans|raw }}
  20.             </h1>
  21.             <figure class="main-title-icon-wrapper__icon">
  22.                 <img src="../assets/img/six_steps_icon3.svg" class="main-title-icon" alt="">
  23.             </figure>
  24.         </div>
  25.         <!--// Main title block ENDS-->
  26.     </header>
  27.     <!--// Steps navbar STARTS-->
  28.     <nav aria-label="List of steps" class="mb-4">
  29.         <div class="list-inline list-unstyled steps-nav-block">   
  30.               <div class="steps-nav-block__item">
  31.                 <a href="{{ path('about_factors') }}" class="btn btn-raised btn-primary steps-nav-block__link">
  32.                   {{ "step"|trans|raw }} 1
  33.                 </a>
  34.               </div>
  35.               <div class="steps-nav-block__item">
  36.                 <a href="{{ path('about_plan') }}" class="btn btn-raised btn-primary steps-nav-block__link">
  37.                   {{ "step"|trans|raw }} 2
  38.                 </a>
  39.               </div>
  40.               <div class="steps-nav-block__item">
  41.                 <span class="active btn btn-raised btn-success steps-nav-block__link">{{ "step"|trans|raw }} 3</span>
  42.               </div>
  43.               <div class="steps-nav-block__item">
  44.                 <a href="{{ path('about_review') }}" class="btn btn-raised btn-primary steps-nav-block__link">
  45.                   {{ "step"|trans|raw }} 4
  46.                 </a>
  47.               </div>
  48.               <div class="steps-nav-block__item">
  49.                 <a href="{{ path('about_results') }}" class="btn btn-raised btn-primary steps-nav-block__link">
  50.                   {{ "step"|trans|raw }} 5
  51.                 </a>
  52.               </div>
  53.               <div class="steps-nav-block__item">
  54.                 <a href="{{ path('about_evaluate') }}" class="btn btn-raised btn-primary steps-nav-block__link">
  55.                   {{ "step"|trans|raw }} 6
  56.                 </a>
  57.               </div>
  58.             </div> 
  59.     </nav>
  60.     <!--// Steps navbar ENDS-->
  61. </div>
  62. <!--// Main title / navbar wrapper ENDS-->  
  63.     <!-- Intro content starts //-->
  64.       <div class="steps-intro-wrapper mhcc-intro-signup-content">
  65.         <p class="mb-4 sec-page-lead-text sec-page-lead-text--big sec-page-lead-text--dark-blue">
  66.           {{ "sign-up-free-caring-healthcare-workers-acct"|trans|raw }}
  67.         </p>
  68.         <p class="mhcc-about-intro-desc">
  69.           {{ "note-organizational-representative"|trans|raw }}
  70.         </p>
  71.         <p class="mhcc-about-intro-desc">
  72.           {{ "login-taken-secured-section"|trans|raw }}
  73.         </p>
  74.         <p class="mb-4 mhcc-about-intro-desc">
  75.           {{ "vital-ensure-people"|trans|raw }}
  76.         </p>
  77.       </div>
  78.     <!-- Intro content ends //-->
  80.     <!--Form block starts //-->
  81.     <section class="mhcc-secondary-bg">
  82.       <header>
  83.         <h1 class="sr-only">{{ "signup"|trans|raw }}</h1>
  84.       </header>
  85.         <!--Form description / form block STARTS //-->
  86.           <div class="dashboard-login-wrapper signup-form-wrapper">
  87.             <div class="dashboard-login-form dashboard-login-form--green signup-form">
  88.               <section class="card card-default shadow-6dp animated fadeIn animation-delay-7">
  89.                 <header class="card-header mhcc-form-header bg-success">
  90.                     <h2 class="text-center no-m pt-4 pb-4 color-white mhcc-form-title">
  91.                       {{ "signup"|trans|raw }}
  92.                     </h2>
  93.                 </header>
  94.                 <div class="card-block mhcc-card-block-form">
  95.                   <form action="{{ path('about_signup' ) }}" method="POST">
  96.                     <fieldset>
  97.                       <legend class="dark-blue-text mb-2 mhcc-form-group">{{ "personal-info"|trans|raw }}</legend>
  98.                       <div class="form-group label-floating mb-3 mhcc-form-group">
  99.                           <label for="firstName" class="control-label">
  100.                             * {{ "first-name"|trans|raw }}
  101.                           </label>
  102.                           <input type="text" name="firstName" id="firstName" value="{{ app.request.get('firstName') }}" class="form-control" required="required" />
  103.                       </div>
  104.                       <div class="form-group label-floating mb-3 mhcc-form-group">
  105.                           <label for="lastName" class="control-label">
  106.                             * {{ "last-name"|trans|raw }}
  107.                           </label>
  108.                           <input type="text" name="lastName" id="lastName" value="{{ app.request.get('lastName') }}" class="form-control" required="required" />
  109.                       </div>
  110.                       <div class="form-group label-floating mb-3 mhcc-form-group">
  111.                           <label for="jobTitle" class="control-label">* {{ "job-title"|trans|raw }}</label>
  112.                           <input type="text" name="jobTitle" id="jobTitle" value="{{ app.request.get('jobTitle') }}" class="form-control" required="required" />
  113.                       </div>
  114.                       <div class="form-group label-floating mb-3 mhcc-form-group">
  115.                           <label for="departmentBranch" class="control-label">* {{ "dept-branch"|trans|raw }}</label>
  116.                           <input type="text" name="department" id="departmentBranch" value="{{ app.request.get('department') }}" class="form-control" />
  117.                       </div>
  118.                       <div class="form-group label-floating mb-3 mhcc-form-group">
  119.                           <label for="phoneSignUp" class="control-label">* {{ "phone"|trans }}</label>
  120.                           <input type="text" name="phoneNumber" id="phoneSignUp" value="{{ app.request.get('phoneNumber') }}" class="form-control" required="required" />
  121.                       </div>
  122.                       <div class="form-group label-floating mb-3 mhcc-form-group">
  123.                           <label for="addressSignUp" class="control-label">* {{ "address"|trans|raw }}</label>
  124.                           <input type="text" name="address" id="addressSignUp" value="{{ app.request.get('address') }}" class="form-control" required="required" />
  125.                       </div>
  126.                       <div class="form-group label-floating mb-3 mhcc-form-group">
  127.                           <label for="citySignUp" class="control-label">* {{ "city"|trans|raw }}</label>
  128.                           <input type="text" name="city" id="citySignUp" value="{{ app.request.get('city') }}" class="form-control" required="required" />
  129.                       </div>
  130.                       <div class="form-group mb-3 mhcc-form-group">
  131.                         <div class="input-group" style="z-index:7; margin-left:-12px;">
  132.                           <span class="input-group-addon"></span>
  133.                           <label for="countrySignUp" class="control-label">* {{ "country"|trans|raw }}</label>
  134.                           <div>
  135.                             <select id="countrySignUp" name="country" class="form-control selectpicker" required>
  136.                                 <option value="">{{ "choose"|trans }}</option>
  137.                                 {% for country in countries %}
  138.                                     <option value="{{ country.iso_code }}"{% if app.request.get('country') == country.iso_code %} selected="selected"{% endif %}>
  139.                                       {{ country.country_name|trans|raw }}
  140.                                     </option>
  141.                                 {% endfor %}
  142.                             </select>
  143.                           </div>
  144.                         </div>
  145.                       </div>
  147.                       <div class="form-group mb-4 mhcc-form-group" id="provinceStateSignUpSection" style="display:none;">
  148.                         <div class="input-group" style="z-index:6;margin-left:-12px;">
  149.                           <span class="input-group-addon" ></span>
  150.                           <label for="provinceStateSignUp" class="control-label">* {{ "province"|trans|raw }}</label>
  151.                           <div>
  152.                             <select id="provinceStateSignUp" name="province" class="form-control selectpicker" required="required">
  153.                                 <option value="">{{ "choose"|trans }}</option>
  154.                                 {% for province in provinces %}
  155.                                     <option value="{{ province.province_code }}"{% if app.request.get('province') == province.province_code %} selected="selected"{% endif %}>{{ province.province_name|trans }}</option>
  156.                                 {% endfor %}
  157.                             </select>
  158.                           </div>
  159.                         </div>
  160.                       </div>
  161.                       <div class="form-group label-floating mb-3 mhcc-form-group">
  162.                           <label for="postalCodeSignUp" class="control-label">
  163.                             * {{ "postal-code"|trans|raw }}
  164.                           </label>
  165.                           <input type="text" name="postalCode" id="postalCodeSignUp" value="{{ app.request.get('postalCode') }}" class="form-control" required="required" />
  166.                       </div>
  167.                     </fieldset>
  170.                     <!--Organization Informtion block//-->
  171.                     <fieldset>
  172.                       <legend class="dark-blue-text mhcc-form-group">{{ "org-info"|trans|raw }}</legend>
  173.                       <div class="form-group label-floating mb-3 mhcc-form-group">
  174.                           <label for="organizationSignUp" class="control-label">
  175.                             * {{ "organization"|trans|raw }}
  176.                           </label>
  177.                           <input type="text" name="organization" id="organizationSignUp" value="{{ app.request.get('organization') }}" class="form-control" required="required"/>
  178.                       </div>
  179.                       <div class="form-group mhcc-form-group">
  180.                         <div class="input-group" style="z-index:5;margin-left:-12px;">
  181.                           <span class="input-group-addon"></span>
  182.                           <label for="numberEmployeesSignUp" class="control-label">* {{ "number-employees"|trans|raw }}</label>
  183.                           <div>
  184.                             <select id="numberEmployeesSignUp" name="employeesInOrg" class="form-control selectpicker" required="required">
  185.                               <option value="">{{ "choose"|trans|raw }}</option>
  186.                               <option value="0-4"{% if app.request.get('employeesInOrg') == "0-4" %} selected="selected"{% endif %}>0-4</option>
  187.                               <option value="5-19"{% if app.request.get('employeesInOrg') == "5-19" %} selected="selected"{% endif %}>5-19</option>
  188.                               <option value="20-49"{% if app.request.get('employeesInOrg') == "20-49" %} selected="selected"{% endif %}>20-49</option>
  189.                               <option value="50-99"{% if app.request.get('employeesInOrg') == "50-99" %} selected="selected"{% endif %}>50-99</option>
  190.                               <option value="100-299"{% if app.request.get('employeesInOrg') == "100-299" %} selected="selected"{% endif %}>100-299</option>
  191.                               <option value="300-499"{% if app.request.get('employeesInOrg') == "300-499" %} selected="selected"{% endif %}>300-499</option>
  192.                               <option value="500+"{% if app.request.get('employeesInOrg') == "500+" %} selected="selected"{% endif %}>500+</option>
  193.                               <option value="no-response"{% if app.request.get('employeesInOrg') == "no-response" %} selected="selected"{% endif %}>{{ "dropdown-no-response"|trans|raw }}</option>
  194.                             </select>
  195.                           </div>
  196.                         </div>
  197.                       </div>
  198.                       <div class="form-group mhcc-form-group">
  199.                         <div class="input-group" style="z-index:4;margin-left:-12px;">
  200.                           <span class="input-group-addon"></span>
  201.                           <label for="orgTypeSignUp" class="control-label">* {{ "profit-nfp"|trans|raw }}</label>
  202.                           <div>
  203.                             <select id="orgTypeSignUp" name="orgType" class="form-control selectpicker" required="required">
  204.                               <option value="">{{ "choose"|trans|raw }}</option>
  205.                               <option value="profit"{% if app.request.get('orgType') == "profit" %} selected="selected"{% endif %}>{{ "dropdown-profit"|trans|raw }}</option>
  206.                               <option value="not-for-profit"{% if app.request.get('orgType') == "not-for-profit" %} selected="selected"{% endif %}>{{ "dropdown-not-for-profit"|trans|raw }}</option>
  207.                               <option value="no-response"{% if app.request.get('orgType') == "no-response" %} selected="selected"{% endif %}>{{ "dropdown-no-response"|trans|raw }}</option>
  208.                             </select>
  209.                           </div>
  210.                         </div>
  211.                       </div>
  212.                       <div class="form-group mhcc-form-group">
  213.                         <div class="input-group" style="z-index:3;margin-left:-12px;">
  214.                           <span class="input-group-addon"></span>
  215.                           <label for="private-public" class="control-label">* {{ "private-public-sector"|trans|raw }}</label>
  216.                           <div>
  217.                             <select id="private-public" name="sector" class="form-control selectpicker" required="required">
  218.                               <option value="">{{ "choose"|trans|raw }}</option>
  219.                               <option value="private"{% if app.request.get('sector') == "private" %} selected="selected"{% endif %}>{{ "dropdown-private-sector"|trans|raw }}</option>
  220.                               <option value="public"{% if app.request.get('sector') == "public" %} selected="selected"{% endif %}>{{ "dropdown-public-sector"|trans|raw }}</option>
  221.                               <option value="no-response"{% if app.request.get('sector') == "no-response" %} selected="selected"{% endif %}>{{ "dropdown-no-response"|trans|raw }}</option>
  222.                             </select>
  223.                           </div>
  224.                         </div>
  225.                       </div>
  226.                       <div class="form-group mhcc-form-group">
  227.                         <div class="input-group" style="z-index:2;margin-left:-12px;">
  228.                           <span class="input-group-addon"></span>
  229.                           <label for="unionStatusId" class="control-label">* {{ "union-non-union-mixed"|trans|raw }}</label>
  230.                           <div>
  231.                             <select id="unionStatusId" name="unionStatus" class="form-control selectpicker" required="required">
  232.                               <option value="">{{ "choose"|trans|raw }}</option>
  233.                               <option value="union"{% if app.request.get('unionStatus') == "union" %} selected="selected"{% endif %}>{{ "dropdown-union"|trans|raw }}</option>
  234.                               <option value="non-union"{% if app.request.get('unionStatus') == "non-union" %} selected="selected"{% endif %}>{{ "dropdown-non-union"|trans|raw }}</option>
  235.                               <option value="mixed"{% if app.request.get('unionStatus') == "mixed" %} selected="selected"{% endif %}>{{ "dropdown-mixed"|trans|raw }}</option>
  236.                               <option value="no-response"{% if app.request.get('unionStatus') == "no-response" %} selected="selected"{% endif %}>{{ "dropdown-no-response"|trans|raw }}</option>
  237.                             </select>
  238.                           </div>
  239.                         </div>
  240.                       </div>
  241.                     </fieldset>
  244.                     <!--Account Informtion block//-->
  245.                     <fieldset class="mb-3">
  246.                       <legend class="dark-blue-text mhcc-form-group">{{ "account-info"|trans|raw }}</legend>
  247.                       <div class="form-group label-floating mb-3 mhcc-form-group">
  248.                           <label class="control-label" for="emailSignUp">* {{ "title-email"|trans|raw }}</label>
  249.                           <input type="email" id="emailSignUp" name="emailAddress" class="form-control" required="required" />
  250.                       </div>
  251.                       <div class="form-group label-floating mb-3 mhcc-form-group">
  252.                           <label class="control-label" for="passSignUp">* {{ "pw"|trans|raw }}</label>
  253.                           <input type="password" id="passSignUp" name="password" class="form-control" required="required" />
  254.                         </div>
  255.                       <div class="form-group label-floating mb-3 mhcc-form-group">
  256.                           <label class="control-label" for="passSignUp-retype">* {{ "retype-pw"|trans|title }}</label>
  257.                           <input type="password" id="passSignUp-retype" name="passwordRetype" class="form-control" required="required" />
  258.                       </div>
  259.                       <div class="form-group mb-3 mhcc-form-group">
  260.                         <div class="checkbox">
  261.                           <label class="agree-on-signup-block">
  262.                             <input type="checkbox" {% if app.request.get('termsAccepted') %} checked="checked"{% endif %} id="hide-cover-check" name="termsAccepted"/>
  263.                               <span class="checkbox-material"></span>
  264.                               <span class="display-block blackish-text agree-on-signup-text" style="margin-top:-7px;">
  265.                                 {{"agree-use-survey-data-research-development"|trans|raw }}
  266.                                 <a data-toggle="modal" data-target="#learnMoreModal" href="#">{{ "learn-more-sign-up"|trans|raw }}</a>
  267.                               </span>
  268.                           </label>
  269.                         </div>
  270.                       </div>
  271.                       <div class="center-block dashboard-form-login-btn-block__btn">
  272.                             <input type="submit" name="submitButton" class="btn btn-raised btn-success btn-block" value="{{ "sign-up"|trans|raw }}" />
  273.                       </div> 
  274.                     </fieldset>
  275.                   </form>
  276.                 </div>
  277.               </section>
  278.             </div>
  279.           </div>
  280.     </section>
  281.     <!--Form block ends //-->
  282.   </article>
  284.   <!-- Modals: Begin -->
  285.     <div class="modal" id="learnMoreModal" tabindex="-1" role="dialog" aria-labelledby="learnMoreModalLabel">
  286.       <div class="modal-dialog animated zoomIn animated-3x" role="document">
  287.           <div class="modal-content">
  288.               <div class="modal-header">
  289.                   <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="zmdi zmdi-close"></i></span></button>
  290.                   <h3 class="modal-title sr-only" id="learnMoreModalLabel">Learn more about my survey data</h3>
  291.               </div>
  292.               <div class="modal-body"><p>{{ "automated-report-based-results-pilot-testing"|trans|raw }}</p></div>
  293.               <div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">{{ "button-close"|trans|raw }}</button></div>
  294.           </div>
  295.       </div>
  296.     </div>
  297. </main> 
  298. {% endblock %}
  300. {% block javascript %}
  301.     {{ parent() }}
  302.     <script src="{{ asset( 'assets/js/component-snackbar.js' ) }}"></script>
  303.     <script>
  304.         {% if msg == "emailAlreadyExists" %}
  305.             Snackbar.show({ showAction: false,
  306.                             pos: 'top-center',
  307.                             text: '<h2><b>Oops</b></h2><h4>{{ "email-already-in-use"|trans }}</h4>', });
  308.         {% endif %}
  310.         var password = document.getElementById("passSignUp")
  311.         var confirm_password = document.getElementById("passSignUp-retype");
  313.         function validatePassword(){
  314.             if(password.value != confirm_password.value) {
  315.                 confirm_password.setCustomValidity("Passwords Don't Match");
  316.             } else {
  317.                 confirm_password.setCustomValidity('');
  318.             }
  319.         }
  321.         password.onchange = validatePassword;
  322.         confirm_password.onkeyup = validatePassword;
  324.         /*Coutnry Selcetion Starts*/
  325.           /* Show province field when country is Canada */
  326.             $("#countrySignUp").on('change', function(e){
  328.               if($(e.target).val() != 'CA'){
  329.                 $('#provinceStateSignUp').val('OTH').change(); // Defult to other when selcting ocuntry other than Canada. Can it be NULL??
  330.                 $('#provinceStateSignUpSection').hide();
  331.                 $('#provinceStateSignUp').prop("required", false);
  332.               }else{
  333.                 $('#provinceStateSignUp').val('').change();
  334.                 $('#provinceStateSignUpSection').show();
  335.                 $('#provinceStateSignUp').prop("required", true);
  336.               }
  337.             });
  339.             $("#countrySignUp").change(); 
  340.             /* Only used when page is postbak*/
  341.               var postBackPRovinceValue = "{{ app.request.get('province') }}"; 
  342.               $('#provinceStateSignUp').val(postBackPRovinceValue).change();
  343.             /* Only used when page is postbak */
  344.         /*Coutnry Selcetion End */
  346.     </script>
  347. {% endblock %}