Skip to content

BEG-223: Add session expiry warning modal #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

BEG-223: Add session expiry warning modal #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c879472
BEG-223: Add session expiry warning modal
brettlaishley Oct 7, 2025
a519ccc
BEG-223: Move to ALL admin views, and use ViewModel
brettlaishley Oct 7, 2025
8e8e90a
BEG-223: Delete renamed variable
brettlaishley Oct 7, 2025
ac78bb8
BEG-223: Add view_model to block arguments and update class
brettlaishley Oct 8, 2025
f388141
BEG-223: Improve docblock wording choice
brettlaishley Oct 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions ViewModel/Modal.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<?php

declare(strict_types=1);

namespace Aligent\Pci4Compatibility\ViewModel;

use Magento\Framework\App\Config\ScopeConfigInterface;
use Magento\Framework\View\Element\Block\ArgumentInterface;

class Modal implements ArgumentInterface
{
/**
* Constructor
* @param ScopeConfigInterface $scopeConfig
*/
public function __construct(
private readonly ScopeConfigInterface $scopeConfig,
) {
}

/**
* Returns the duration in ms after refresh when the session expiry warning modal should appear
*
* @return int
*/
public function getModalPopupTimeout(): int
{
// This value is in seconds
$sessionTimeout = $this->scopeConfig->getValue(
'admin/security/session_lifetime',
ScopeConfigInterface::SCOPE_TYPE_DEFAULT
);

// Then we want the popup to appear one minute before timeout
return ($sessionTimeout - 60) * 1000;
}
}
12 changes: 12 additions & 0 deletions view/adminhtml/layout/default.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="page.main.actions">
<block class="Magento\Backend\Block\Template" name="session.expiry.modal" as="modal" template="Aligent_Pci4Compatibility::modal.phtml">
<arguments>
<argument name="view_model" xsi:type="object">Aligent\Pci4Compatibility\ViewModel\Modal</argument>
</arguments>
</block>
</referenceContainer>
</body>
</page>
56 changes: 56 additions & 0 deletions view/adminhtml/templates/modal.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<?php

use CountryCareGroup\Service\ViewModel\Modal;
use Magento\Catalog\Block\Product\View;
use Magento\Framework\Escaper;

/**
* @var View $block
* @var Escaper $escaper
* @var Modal $viewModel
*/
$viewModel = $block->getViewModel();
$modalTimeout = $viewModel->getModalPopupTimeout();

?>

<div id="session-expire-warning-modal">
<p style="font-size:48px;color:#FF0000">&#x26A0;</p>
<p>Your admin session will expire in one minute, please save your changes or refresh the page.</p>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we want to actually give the option to extend the session asynchronously? It would be more user-friendly.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm happy to, but I might need a bit more guidance on how to do that.

Just exploring options now, I added a button to refresh the page, but what would be the best way to refresh the session without refreshing the entire page and potentially losing any unsvaed changes?

So far I just added this to the phtml:

    <button onclick="window.location.reload();">Refresh Page</button>

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The trouble with just reloading the page is that the user is likely to lose whatever changes they've got. We should be able to execute an AJAX request that can renew their session, but remain on the page they're currently on.
Obviously, we'd require testing to make sure that whatever page they're editing remains saveable (no form key issues, etc.)

</div>

<script>
require(
[
'jquery',
'Magento_Ui/js/modal/modal',
],
function(
$,
modal
) {
var options = {
type: 'popup',
innerScroll: true,
title: false,
modalClass:'modal-admintimeout',
buttons: [{
text: $.mage.__('Close'),
class: '',
click: function () {
this.closeModal();
}
}]
};
$(document).ready(function(){
modal(options, $('#session-expire-warning-modal'));
setTimeout(
function() {
$('#session-expire-warning-modal').modal('openModal')
},
<?= $modalTimeout ?>
);
});
}
);
</script>