Gå til sidens indhold
Det Fælles Designsystem

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Eksempler

Session udløber

Session udløber vises, inden brugeren automatisk logges af en løsning. Dialogen giver brugeren mulighed for at tage stilling til, om de vil logge af eller forblive i løsningen.

Eksempel på session udløb
Vis HTML for eksempel på udløb af session 
<div class="fds-modal" id="example-sesssion-udloeber" aria-hidden="true" role="dialog"
    aria-modal="true" aria-labelledby="example-sesssion-udloeber-heading"
    data-modal-forced-action>
    <div class="modal-content">
        <div class="modal-header">
            <h2 class="modal-title" id="example-sesssion-udloeber-heading">
                Du er ved at blive logget af
            </h2>

        </div>
        <div class="modal-body">
            <p>Din session udløber snart. Du logges automatisk af om <span
                    role='timer'><strong class='bold session-timeout-countdown-minutes'>5 min.</strong><strong class='bold session-timeout-countdown-seconds'></strong></span>
            </p>
        </div>

        <div class="modal-footer">
            <button class="button button-primary" data-modal-close>
                Forbliv logget på
            </button><button class="button button-secondary" data-modal-close>
                Log af
            </button>
        </div>

    </div>
</div>

<button class="button button-tertiary" data-module="modal"
    data-target="example-sesssion-udloeber" aria-haspopup="dialog">
    Åbn modal
</button>

Sådan bruges Session udløber

Anvendes til

Dialogen anvendes, når en bruger er ved at blive logget af en løsning automatisk, dvs. når deres session udløber.

Anvendes ikke til

Dialogen anvendes ikke, når en bruger selv har trykket på en log af-knap. Hvis brugeren er ved at logge af en løsning, hvor der er foretaget ændringer, som ikke er gemt, så anvend i stedet dialogen Er du sikker på, du vil forlade siden?

Vejledning

Til dette mønster anvendes komponenten Modalvindue, som kræver handling.

Dialogen vises ca. 5 minutter før, brugeren automatisk bliver logget af. Således kan brugeren nå at handle på informationen og fx vælge at forblive logget ind. En kortere tid for dialogen kan vælges af sikkerhedsmæssige årsager, dog må brugeren aldrig få mindre end 20 sekunders varsel af hensyn til tilgængelighed (Timing Adjustable: Understanding SC 2.2.1).

En nedtælling i dialogen kan hjælpe brugeren med at forstå, hvor lang tid de har til at reagere. Hvis dialogen “Session udløber” fx vises 5 minutter før, brugeren automatisk logges af, så tælles der ned fra 5 minutter.

Hvis sessionens udløb vil resultere i, at ændringer, som brugere har foretaget, vil gå tabt, bør dialogen gøre opmærksom på dette. Det kan fx være, hvis brugeren er i gang med at udfylde en formular.

Hvis brugeren har foretaget ændringer, og disse er gemt automatisk, bør dialogen gøre opmærksom på dette.

Når brugeren logges af automatisk, tages de til en dedikeret log af-side, som kan være myndighedens egen log af-side. Se eksempel på, hvordan en ‘log af’-side kan se ud med FDS. Den kan ydermere informere brugeren om ekstra sikkerhed.

Tiden der går, før brugeren logges af en løsning automatisk, defineres i forhold til login-systemet og sikkerhedsmæssige forhold.

Varianter

Når ændringerne ikke er gemt

Eksempel på session udløb med ændringer der ikke er gemt
Vis HTML for eksempel på udløb af session med ændringer, der ikke er gemt 
<div class="fds-modal" id="example-sesssion-udloeber-ikke-gemt" aria-hidden="true"
    role="dialog" aria-modal="true"
    aria-labelledby="example-sesssion-udloeber-ikke-gemt-heading" data-modal-forced-action>
    <div class="modal-content">
        <div class="modal-header">
            <h2 class="modal-title" id="example-sesssion-udloeber-ikke-gemt-heading">
                Du er ved at blive logget af
            </h2>

        </div>
        <div class="modal-body">
            <p>Din session udløber snart. Du logges automatisk af om <span
                    role='timer'><strong class='bold session-timeout-countdown-minutes'>5 min.</strong><strong class='bold session-timeout-countdown-seconds'></strong></span>
            </p>
            <p><strong>Ændringer, der ikke er gemt, vil gå tabt.</strong></p>
        </div>

        <div class="modal-footer">
            <button class="button button-primary" data-modal-close>
                Forbliv logget på
            </button><button class="button button-secondary" data-modal-close>
                Log af
            </button>
        </div>

    </div>
</div>

<button class="button button-tertiary" data-module="modal"
    data-target="example-sesssion-udloeber-ikke-gemt" aria-haspopup="dialog">
    Åbn modal
</button>

Når ændringerne er gemt

Eksempel på session udløb med gemte ændringer
Vis HTML for eksempel på udløb af session med gemte ændringer 
<div class="fds-modal" id="example-sesssion-udloeber-gemt" aria-hidden="true" role="dialog"
    aria-modal="true" aria-labelledby="example-sesssion-udloeber-gemt-heading"
    data-modal-forced-action>
    <div class="modal-content">
        <div class="modal-header">
            <h2 class="modal-title" id="example-sesssion-udloeber-gemt-heading">
                Du er ved at blive logget af
            </h2>

        </div>
        <div class="modal-body">
            <p>Din session udløber snart. Du logges automatisk af om <span
                    role='timer'><strong class='bold session-timeout-countdown-minutes'>5 min.</strong><strong class='bold session-timeout-countdown-seconds'></strong></span>
            </p>
            <p>Dine indtastede data er gemt.</p>
        </div>

        <div class="modal-footer">
            <button class="button button-primary" data-modal-close>
                Forbliv logget på
            </button><button class="button button-secondary" data-modal-close>
                Log af
            </button>
        </div>

    </div>
</div>

<button class="button button-tertiary" data-module="modal"
    data-target="example-sesssion-udloeber-gemt" aria-haspopup="dialog">
    Åbn modal
</button>

Referencer