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