Information and media Panel - warning

Overview

There are three different types of warning panels:

• standard warning panel
• warning with session expiry timeout
• branded warning panel

To highlight important text to users, use the information panel.

To deliver a message that is not related to the content of a page, use the announcement banner.

To inform the user of an error, use the error details and error summary components.

Standard warning panel

Use the standard warning panel when you need to warn users about something important, such as legal consequences.

{% from "components/panel/_macro.njk" import onsPanel %}

{%
    call onsPanel({
        "variant": 'warn'
    })
%}
    All of the information about this person will be deleted
{% endcall %}

<div class="ons-panel ons-panel--warn ons-panel--no-title">
  <span class="ons-panel__icon" aria-hidden="true">!</span>
  <span class="ons-panel__assistive-text ons-u-vh">Warning: </span>
  <div class="ons-panel__body"> All of the information about this person will be deleted </div>
</div>

Warning panel with session expiry timeout

Use a warning panel with session expiry timeout when a service sets a session expiry time to protect the user’s information.

{% from "components/timeout-panel/_macro.njk" import onsTimeoutPanel %}

{{
    onsTimeoutPanel ({
        "id": "countdown",
        "redirectUrl": "#!",
        "minutesTextSingular":"minute",
        "minutesTextPlural":"minutes",
        "secondsTextSingular":"second",
        "secondsTextPlural":"seconds",
        "countdownText":"For security, your answers will only be available to view for another",
        "nojsText": "For security, your answers will only be available to view for another 1 minute",
        "countdownExpiredText": "You are being signed out"
    })
}}

<div class="ons-panel ons-panel--warn ons-panel--no-title ons-js-panel-with-countdown" data-redirect-url="#!"
  data-server-session-expires-at=""
  data-countdown-text="For security, your answers will only be available to view for another"
  data-countdown-expired-text="You are being signed out" data-minutes-text-singular="minute"
  data-minutes-text-plural="minutes" data-seconds-text-singular="second" data-seconds-text-plural="seconds"
  data-full-stop="" aria-describedby="timeout-time-remaining" id="countdown">
  <span class="ons-panel__icon" aria-hidden="true">!</span>
  <span class="ons-panel__assistive-text ons-u-vh">Warning: </span>
  <div class="ons-panel__body">
    <noscript>
      <p class="ons-js-nojs-text">For security, your answers will only be available to view for another 1 minute</p>
    </noscript>
    <p class="ons-js-timeout-timer" aria-hidden="true" aria-relevant="additions"></p>
    <p class="ons-js-timeout-timer-acc ons-u-vh" role="status" id="timeout-time-remaining"></p>
  </div>
</div>

How this component works

When the session expiry timer reaches zero, the countdownExpiredText message will be displayed and the browser will redirect to the URL set for a session timed out error page.

The content of the warning panel is set using the parameters shown in the Nunjucks macro options table.

You will also need to set the parameters:

• sessionExpiresAt with the current expiry time in ISO format on page load
• serverSessionExpiryEndpoint with a relative URL to the server’s API endpoint for the component to send requests to
• redirectUrl with a URL so that when the session has timed out the user is directed to the session timed out error page

If the current URL is set, the page will reload.

Server requirements

The timeout panel requires an API endpoint that handles GET request methods and returns a JSON object containing the key expires_at with a value for the session expiry time in ISO format.

A request for the current expiry time

When a request using a GET method is received, the response should contain the current expiry time.

The request is made to check if the same session is being interacted with in another tab.

A request to get the current expiry time will be sent:

• at 20-second intervals after the page loads
• before the page starts to redirect

Failure responses from the server

If the response status does not have a successful 200 code, the component will handle the response as a session expiry and redirect the user to the URL set in the redirectUrl parameter.

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss the ‘Panel’ component on GitHub (opens in a new tab)