templates/Project/Partials/sessionTimeoutModal.html.twig line 1

Open in your IDE?
  1. {% if is_granted('IS_AUTHENTICATED_FULLY') %}
  2. <div
  3. {{ stimulus_controller('session-timeout-modal', {'sessionTimeoutMinutes': session_timeout_inactivity_minutes, 'warningSeconds': session_timeout_warning_seconds, 'pollIntervalSeconds': session_timeout_poll_interval_seconds} ) }} class="session-timeout-modal-container">
  4. {# Modal structure - initially hidden #}
  5. <div class="modal fade" id="sessionTimeoutModal" tabindex="-1" role="dialog" data-bs-backdrop="static" data-bs-keyboard="false">
  6. <div class="modal-dialog modal-dialog-centered session-timeout-dialog" role="document">
  7. <div class="modal-content session-timeout-modal-content">
  8. <div
  9. class="modal-body text-center py-5">
  10. {# Header text #}
  11. <div class="session-timeout-header mb-4">
  12. <p class="session-timeout-message-line">Due to session inactivity, you will automatically be signed out in
  13. <span class="session-timeout-seconds-text">
  14. <span data-session-timeout-modal-target="messageSeconds">{{ session_timeout_warning_seconds }}</span>&nbsp;<span data-session-timeout-modal-target="messageSecondsLabel">seconds</span></span>.</p>
  15. </div>
  17. {# Circular countdown timer component #}
  18. <div class="session-timeout-timer-wrapper mb-4" data-session-timeout-modal-target="timerContainer">
  19. <svg
  20. class="session-timeout-timer-svg" viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  21. {# Background circle #}
  22. <circle
  23. class="session-timeout-timer-bg" cx="100" cy="100" r="90"/>
  25. {# Animated progress circle #}
  26. <circle class="session-timeout-timer-progress" cx="100" cy="100" r="90" data-session-timeout-modal-target="timerProgress"/>
  27. </svg>
  29. {# Countdown text in center #}
  30. <div class="session-timeout-timer-text">
  31. <span class="session-timeout-timer-number" data-session-timeout-modal-target="timerNumber">{{ session_timeout_warning_seconds }}</span>
  32. </div>
  33. </div>
  35. {# Subheading #}
  36. <div class="session-timeout-subheader mb-5">
  37. <p class="session-timeout-subheading">Stay logged in?</p>
  38. </div>
  40. {# Action buttons #}
  41. <div class="session-timeout-actions">
  42. <button type="button" class="btn btn-secondary" data-action="session-timeout-modal#signOut" data-session-timeout-modal-target="signOutBtn">
  43. Sign out
  44. </button>
  45. <button type="button" class="btn btn-primary" data-action="session-timeout-modal#continue" data-session-timeout-modal-target="continueBtn">
  46. Continue
  47. </button>
  48. </div>
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. </div>
  54. {% endif %}