templates/base.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. {# main template for portal #}
  4.     <head>
  5.         <meta charset="UTF-8" />
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.         <title>{% block title %}Welcome!{% endblock %}</title>
  8.         <link href="https://fonts.googleapis.com/css?family=Lato:100,400" rel="stylesheet">
  9.         <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  10.         <link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
  11.         <link rel="stylesheet" href="/node_modules/bootstrap-tour/build/css/bootstrap-tour-standalone.min.css">
  12.         <link rel="stylesheet" href="/bundles/portal{{ asset('build/portal.css') }}">
  13.         {% block stylesheets %}{% endblock %}
  14.         {% block headjs %}{%  endblock %}
  15.         <link rel="icon" type="image/x-icon" href="https://access-program.org/crm/themes/SuiteP/images/sugar_icon.ico" />
  16.         <script async type="module" type="text/javascript">
  17.             import { trackPageView } from '/assets/components/Analytics/GoogleAnalytics.js';
  18.             trackPageView('access');
  19.         </script>
  20.         <script type="module" type="text/javascript">
  21.             import { setupHeader } from "/assets/components/Layout/Header.js";
  22.             import { setupFooter } from "/assets/components/Layout/Footer.js";
  23.             // fallback - load header for any page that doesn't use Portal/Default/Header.html.twig
  24.             const oldPortalHeader = document.querySelector('.nav-bar');
  25.             const oldFormHeader = !oldPortalHeader && document.querySelector('.header.section');
  26.             if (oldPortalHeader) setupHeader({node: oldPortalHeader, displayName: "{{ app.user.preferredName ?? app.user.firstName ?? '' }}"});
  27.             if (oldFormHeader) setupHeader({node: oldFormHeader, options: {fixed:  true}});
  28.             
  29.             // load footer
  30.             setupFooter();
  31.         </script>
  32.     </head>
  33.     <body>
  34.         <div id="timeout-modal" class="modal">
  35.             <div class="modal__content">
  36.             <span class="modal__close">&times;</span>
  37.                 <div class="modal__header">
  38.                     <p>Session timeout warning</p>
  39.                 </div>
  40.                 <div class="modal__body">
  41.                         <p>You session will expire soon.<br>
  42.                         Do you want to extend your session?</p>
  43.                     <p>Time left <span id="timer"></span></p>
  44.                     </div>
  45.                     <div class="modal__footer">
  46.                     <form action="{{ path('extend_session') }}" class="modal-action">
  47.                         <!--<a class="modal__button button button--grey" href="{{ path('logout') }}">Log Out</a>-->
  48.                         <a href="#" class="modal__button button button--mint js-link">Stay Connected</a>
  49.                     </form>
  50.                  </div>
  51.             </div>
  52.         </div>
  53.         <div id="help-desk-modal" class="modal selection__modal">
  54.             <div class="modal__content help-desk-modal">
  55.                 <span class="modal__close">&times;</span>
  56.                 <div class="modal__header">
  57.                     <p>Access Help Desk</p>
  58.                 </div>
  59.                 <div class="modal__body">
  60.                     <p class="form__label">Subject <input type="text" id="help-subject" name="help-subject" value="" autocomplete="off"></p>
  61.                     <p class="form__label">What can we do for you?<br>
  62.                         <textarea id="help-question" name="help-question" rows="12" cols="60"></textarea>
  63.                     </p>
  64.                     <p class="form"><span class="form__error" id="help-desk_err"></span></p>
  65.                     <p class="form"><span class="form__success" id="help-desk_success"></span></p>
  66.                 </div>
  67.                 <div class="modal__footer">
  68.                     <a href="#" class="modal__button button button--mint send__message" onclick="sendMessageHelpDesk();">Send message</a>
  69.                     <a class="modal__button button button--grey" href="#" id="modal__close">Close</a>
  70.                 </div>
  71.             </div>
  72.         </div>
  73.         {% if 'dev.' in  app.request.getSchemeAndHttpHost() %}
  74.             <div id="hostnameHeader">{{ app.request.getSchemeAndHttpHost()|replace({'https://': ''},{'http://': ''}) }}</div>
  75.         {% endif %}
  76.         {% block body %}{% endblock %}
  77.         {% block javascripts %}
  78.             <script src="/node_modules/jquery/dist/jquery.min.js"></script>
  79.             <script src="/node_modules/bootstrap-tour/build/js/bootstrap-tour-standalone.min.js"></script>
  80.             <script src="/bundles/portal{{ asset('build/portal-base.js') }}"></script>
  81.             <script src="/crm/custom/assets/js/tour.js"></script>
  82.             <script type="text/javascript">
  83.                 var myTimeout = null;
  84.                 var timeoutInterval = null;
  85.                 function startTimer() {
  86.                     var presentTime = document.getElementById('timer').innerHTML;
  87.                     var timeArray = presentTime.split(/[:]+/);
  88.                     var m = timeArray[0];
  89.                     var s = checkSecond((timeArray[1] - 1));
  90.                     if (s === '59') {
  91.                         m = m - 1
  92.                     }
  93.                     if((m==0 && s=='00') || m<0){
  94.                         clearTimeout(myTimeout);
  95.                         $.ajax({
  96.                             method: "POST",
  97.                             url: "{{ path('logout') }}"
  98.                         }).done(function (res) {
  99.                             $("#timeout-modal").hide();
  100.                             location.reload();
  101.                         });
  102.                     }
  103.                     document.getElementById('timer').innerHTML = m + " : " + s;
  104.                     myTimeout = setTimeout(startTimer, 1000);
  105.                 }
  106.                 function checkSecond(sec) {
  107.                     if (sec < 10 && sec >= 0) {
  108.                         sec = "0" + sec
  109.                     } // add zero in front of numbers < 10
  110.                     if (sec < 0) {
  111.                         sec = "59"
  112.                     }
  113.                     return sec;
  114.                 }
  115.                 // The the timeout modal appears, call the extend_session route if user wants to Stay Connected
  116.                 $(".js-link").click(function(e){
  117.                     $.ajax({
  118.                         method: "POST",
  119.                         url: "{{ path('extend_session') }}"
  120.                     }).done(function (res) {
  121.                         $("#timeout-modal").hide();
  122.                         clearTimeout(myTimeout);
  123.                         timeoutInterval = setInterval(function(){
  124.                             checkSession();
  125.                             if(!$("#timeout-modal").is(":hidden")){
  126.                                 clearInterval(timeoutInterval);
  127.                             }
  128.                         }, 300000);
  129.                     })
  130.                 });
  131.                 // Every time the page load, if it's within 15 minutes before session time out, diplay the Session Timeout Modal window
  132.                 {% for message in app.flashes('timeout-modal') %}
  133.                     if($("#timeout-modal").is(":hidden")) {
  134.                         $("#timeout-modal").show();
  135.                         $(".modal__close").hide();
  136.                         var seconds_before_expire = {{ message }};
  137.                         minutes = parseInt((seconds_before_expire / 60) % 60);
  138.                         seconds = parseInt(seconds_before_expire % 60);
  139.                         document.getElementById('timer').innerHTML = minutes + " : " + seconds;
  140.                         startTimer();
  141.                     }
  142.                 {% endfor %}
  143.                 // Close Session Timeout Modal if user click on the X button
  144.                 $(".modal__close").click(function(e){
  145.                     clearTimeout(myTimeout);
  146.                     $(".modal").hide();
  147.                 });
  148.                 // Every x number of minutes, use AJAX to display the Session Timeout Modal window even if user doesn't take any action
  149.                 timeoutInterval = setInterval(function(){
  150.                     checkSession();
  151.                     if(!$("#timeout-modal").is(":hidden")){
  152.                         clearInterval(timeoutInterval);
  153.                     }
  154.                 }, 300000);  //check every 5 minutes
  155.                 function checkSession(){
  156.                     $.ajax({
  157.                         method: "POST",
  158.                         url: "{{ path('check_session') }}"
  159.                     }).done(function (res) {
  160.                         // If Session Timeout modal was already showing due to user action, then don't show again with AJAX
  161.                         if(res !== 'false' && $.isNumeric(res)){
  162.                             if($("#timeout-modal").is(":hidden")){
  163.                                 $("#timeout-modal").show();
  164.                                 $(".modal__close").hide();
  165.                                 var seconds_before_expire = res;
  166.                                 minutes = parseInt((seconds_before_expire / 60) % 60);
  167.                                 seconds = parseInt(seconds_before_expire % 60);
  168.                                 document.getElementById('timer').innerHTML = minutes + " : " + seconds;
  169.                                 startTimer();
  170.                                 clearInterval(timeoutInterval);
  171.                             }
  172.                         }
  173.                     });
  174.                 }
  175.                 //send message to help desk
  176.                 function sendMessageHelpDesk(){
  177.                     $("#help-desk_err").html('');
  178.                     $("#help-desk_success").html('');
  179.                     var subject = $("#help-subject").val();
  180.                     var question = $("#help-question").val();
  181.                     if(subject!='' && question!='') {
  182.                         $.ajax({
  183.                             method: "POST",
  184.                             url: "/help/submit",
  185.                             data: 'subject='+subject+'&question='+question+'&from_ajax=true'
  186.                         }).done(function (res) {
  187.                             $("#help-subject").val('');
  188.                             $("#help-question").val('');
  189.                             $(".help-desk-modal").find('.form__label').hide();
  190.                             $(".send__message").hide();
  191.                             $("#help-desk_success").html('Thank you for your message. It has been sent successfully and we will reply as soon as possible.');
  192.                             //$(".modal").hide();
  193.                         });
  194.                     }else{
  195.                         $("#help-desk_err").html('Please provide the details');
  196.                     }
  197.                 }
  198.                 $( document ).ready(function() {
  199.                     /*
  200.                     * Enable User dropdown
  201.                     */
  202.                     var dd_options = {closeOnClick: true};
  203.                     if($('#user-profile-dropdown').length > 0) {
  204.                         var user_profile_dropdown = new Foundation.Dropdown($('#user-profile-dropdown'), dd_options);
  205.                     }
  206.                     /*
  207.                     * Animate error bar
  208.                     */
  209.                     $('.alert').addClass('animate');
  210.                     $('.alert__close').click(function(el){
  211.                         $(el.target).closest('.alert').hide();
  212.                     });
  213.                     //bind the access help link to show the modal
  214.                     $('#access_help_desk').click(function(el){
  215.                         $("#help-subject").val('');
  216.                         $("#help-question").val('');
  217.                         $("#help-desk_err").html('');
  218.                         $("#help-desk_success").html('');
  219.                         $(".help-desk-modal").find('.form__label').show();
  220.                         $(".send__message").show();
  221.                         $("#help-desk-modal").show();
  222.                     });
  223.                     $("#modal__close").click(function(){
  224.                         $(".modal").hide();
  225.                     });
  226.                 });
  227.             </script>
  228.         {% endblock %}
  229.         {% include 'Portal/Default/portal-footer.html.twig' %}
  230.     </body>
  231. </html>