<!DOCTYPE html>
<html lang="en">
{# main template for portal #}
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Welcome!{% endblock %}</title>
<link href="https://fonts.googleapis.com/css?family=Lato:100,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bootstrap-tour/build/css/bootstrap-tour-standalone.min.css">
<link rel="stylesheet" href="/bundles/portal{{ asset('build/portal.css') }}">
{% block stylesheets %}{% endblock %}
{% block headjs %}{% endblock %}
<link rel="icon" type="image/x-icon" href="https://access-program.org/crm/themes/SuiteP/images/sugar_icon.ico" />
<script async type="module" type="text/javascript">
import { trackPageView } from '/assets/components/Analytics/GoogleAnalytics.js';
trackPageView('access');
</script>
<script type="module" type="text/javascript">
import { setupHeader } from "/assets/components/Layout/Header.js";
import { setupFooter } from "/assets/components/Layout/Footer.js";
// fallback - load header for any page that doesn't use Portal/Default/Header.html.twig
const oldPortalHeader = document.querySelector('.nav-bar');
const oldFormHeader = !oldPortalHeader && document.querySelector('.header.section');
if (oldPortalHeader) setupHeader({node: oldPortalHeader, displayName: "{{ app.user.preferredName ?? app.user.firstName ?? '' }}"});
if (oldFormHeader) setupHeader({node: oldFormHeader, options: {fixed: true}});
// load footer
setupFooter();
</script>
</head>
<body>
<div id="timeout-modal" class="modal">
<div class="modal__content">
<span class="modal__close">×</span>
<div class="modal__header">
<p>Session timeout warning</p>
</div>
<div class="modal__body">
<p>You session will expire soon.<br>
Do you want to extend your session?</p>
<p>Time left <span id="timer"></span></p>
</div>
<div class="modal__footer">
<form action="{{ path('extend_session') }}" class="modal-action">
<!--<a class="modal__button button button--grey" href="{{ path('logout') }}">Log Out</a>-->
<a href="#" class="modal__button button button--mint js-link">Stay Connected</a>
</form>
</div>
</div>
</div>
<div id="help-desk-modal" class="modal selection__modal">
<div class="modal__content help-desk-modal">
<span class="modal__close">×</span>
<div class="modal__header">
<p>Access Help Desk</p>
</div>
<div class="modal__body">
<p class="form__label">Subject <input type="text" id="help-subject" name="help-subject" value="" autocomplete="off"></p>
<p class="form__label">What can we do for you?<br>
<textarea id="help-question" name="help-question" rows="12" cols="60"></textarea>
</p>
<p class="form"><span class="form__error" id="help-desk_err"></span></p>
<p class="form"><span class="form__success" id="help-desk_success"></span></p>
</div>
<div class="modal__footer">
<a href="#" class="modal__button button button--mint send__message" onclick="sendMessageHelpDesk();">Send message</a>
<a class="modal__button button button--grey" href="#" id="modal__close">Close</a>
</div>
</div>
</div>
{% if 'dev.' in app.request.getSchemeAndHttpHost() %}
<div id="hostnameHeader">{{ app.request.getSchemeAndHttpHost()|replace({'https://': ''},{'http://': ''}) }}</div>
{% endif %}
{% block body %}{% endblock %}
{% block javascripts %}
<script src="/node_modules/jquery/dist/jquery.min.js"></script>
<script src="/node_modules/bootstrap-tour/build/js/bootstrap-tour-standalone.min.js"></script>
<script src="/bundles/portal{{ asset('build/portal-base.js') }}"></script>
<script src="/crm/custom/assets/js/tour.js"></script>
<script type="text/javascript">
var myTimeout = null;
var timeoutInterval = null;
function startTimer() {
var presentTime = document.getElementById('timer').innerHTML;
var timeArray = presentTime.split(/[:]+/);
var m = timeArray[0];
var s = checkSecond((timeArray[1] - 1));
if (s === '59') {
m = m - 1
}
if((m==0 && s=='00') || m<0){
clearTimeout(myTimeout);
$.ajax({
method: "POST",
url: "{{ path('logout') }}"
}).done(function (res) {
$("#timeout-modal").hide();
location.reload();
});
}
document.getElementById('timer').innerHTML = m + " : " + s;
myTimeout = setTimeout(startTimer, 1000);
}
function checkSecond(sec) {
if (sec < 10 && sec >= 0) {
sec = "0" + sec
} // add zero in front of numbers < 10
if (sec < 0) {
sec = "59"
}
return sec;
}
// The the timeout modal appears, call the extend_session route if user wants to Stay Connected
$(".js-link").click(function(e){
$.ajax({
method: "POST",
url: "{{ path('extend_session') }}"
}).done(function (res) {
$("#timeout-modal").hide();
clearTimeout(myTimeout);
timeoutInterval = setInterval(function(){
checkSession();
if(!$("#timeout-modal").is(":hidden")){
clearInterval(timeoutInterval);
}
}, 300000);
})
});
// Every time the page load, if it's within 15 minutes before session time out, diplay the Session Timeout Modal window
{% for message in app.flashes('timeout-modal') %}
if($("#timeout-modal").is(":hidden")) {
$("#timeout-modal").show();
$(".modal__close").hide();
var seconds_before_expire = {{ message }};
minutes = parseInt((seconds_before_expire / 60) % 60);
seconds = parseInt(seconds_before_expire % 60);
document.getElementById('timer').innerHTML = minutes + " : " + seconds;
startTimer();
}
{% endfor %}
// Close Session Timeout Modal if user click on the X button
$(".modal__close").click(function(e){
clearTimeout(myTimeout);
$(".modal").hide();
});
// Every x number of minutes, use AJAX to display the Session Timeout Modal window even if user doesn't take any action
timeoutInterval = setInterval(function(){
checkSession();
if(!$("#timeout-modal").is(":hidden")){
clearInterval(timeoutInterval);
}
}, 300000); //check every 5 minutes
function checkSession(){
$.ajax({
method: "POST",
url: "{{ path('check_session') }}"
}).done(function (res) {
// If Session Timeout modal was already showing due to user action, then don't show again with AJAX
if(res !== 'false' && $.isNumeric(res)){
if($("#timeout-modal").is(":hidden")){
$("#timeout-modal").show();
$(".modal__close").hide();
var seconds_before_expire = res;
minutes = parseInt((seconds_before_expire / 60) % 60);
seconds = parseInt(seconds_before_expire % 60);
document.getElementById('timer').innerHTML = minutes + " : " + seconds;
startTimer();
clearInterval(timeoutInterval);
}
}
});
}
//send message to help desk
function sendMessageHelpDesk(){
$("#help-desk_err").html('');
$("#help-desk_success").html('');
var subject = $("#help-subject").val();
var question = $("#help-question").val();
if(subject!='' && question!='') {
$.ajax({
method: "POST",
url: "/help/submit",
data: 'subject='+subject+'&question='+question+'&from_ajax=true'
}).done(function (res) {
$("#help-subject").val('');
$("#help-question").val('');
$(".help-desk-modal").find('.form__label').hide();
$(".send__message").hide();
$("#help-desk_success").html('Thank you for your message. It has been sent successfully and we will reply as soon as possible.');
//$(".modal").hide();
});
}else{
$("#help-desk_err").html('Please provide the details');
}
}
$( document ).ready(function() {
/*
* Enable User dropdown
*/
var dd_options = {closeOnClick: true};
if($('#user-profile-dropdown').length > 0) {
var user_profile_dropdown = new Foundation.Dropdown($('#user-profile-dropdown'), dd_options);
}
/*
* Animate error bar
*/
$('.alert').addClass('animate');
$('.alert__close').click(function(el){
$(el.target).closest('.alert').hide();
});
//bind the access help link to show the modal
$('#access_help_desk').click(function(el){
$("#help-subject").val('');
$("#help-question").val('');
$("#help-desk_err").html('');
$("#help-desk_success").html('');
$(".help-desk-modal").find('.form__label').show();
$(".send__message").show();
$("#help-desk-modal").show();
});
$("#modal__close").click(function(){
$(".modal").hide();
});
});
</script>
{% endblock %}
{% include 'Portal/Default/portal-footer.html.twig' %}
</body>
</html>