SDC Pattern Library

Timeout

Rationale

Javascript only component to handle session timeout.

SessionTimeoutUI javascript variables

  • scopeEl - Define the scope of the entire component
  • promptTime - Time limit in seconds of when to prompt user with SessionTimeoutUI
  • continueRetryLimit - The amount of times the script attempt to notify the server of user continuing session
  • sessionExpiredUrl - URL of where to take the user after session has expired
  • expireSessionUrl - URL to notify server of session timeout
  • sessionContinueUrl - URL of where to notify server of session continuation
  • animation - Countable-type animation instance
  • handleSave - Event handler to handle user click sign out
<div class="dialog js-dialog js-timeout-container" id="dialog" aria-hidden="true">
    <!-- <div class="dialog js-dialog" id="dialog" aria-hidden="true" {helpers.track('visible', 'Timeout', 'Timeout window visible')}> -->
    <div class="dialog__overlay" tabindex="-1"></div>

    <div class="dialog__body" role="dialog" aria-labelledby="dialog-title">
        <div role="document">

            <div class="mars u-mb-s">Survey or Service name</div>
            <h1 class="saturn dialog__title" id="dialog-title" tabindex="0">Your session is about to expire</h1>

            <div class="time js-timeout">

                <svg class="time__visual" width="80px" height="80px" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <circle cx="40" cy="40" r="40" stroke="#D3D3D3" stroke-width="6" fill="none"></circle>
          <circle class="time__circle js-timeout-circle" cx="40" cy="40" r="40" transform="rotate(-90 40 40)" fill="none" stroke="red" stroke-width="6" stroke-linecap="round"></circle>
        </svg>

                <div class="time__text venus js-timeout-time">0:00</div>

            </div>

            <form class="" action="/" method="post">
                <button class="btn js-timeout-continue" type="button" data-loading-msg="Continuing&hellip;">Continue survey</button>
                <br/>
                <button class="btn btn--secondary js-timeout-save" type="submit">Save and sign out</button>
            </form>
        </div>
    </div>
</div>
 
{
  "survey_title": "Survey or Service name",
  "width": "40",
  "widthDouble": "80"
}