---
title: 'Example: Access code error'
layout: ~
---

{% extends "layout/_template.njk" %}
{% from "components/access-code/_macro.njk" import onsAccessCode %}
{% from "components/button/_macro.njk" import onsButton %}
{% from "components/panel/_macro.njk" import onsPanel %}
{% from "components/details/_macro.njk" import onsDetails %}
{%
    set pageConfig = {
        "title": "Study title"
    }
%}

{% block main %}
    {%
        call onsPanel({
            "title": "There is a problem with this page",
            "variant": "error"
        })
    %}
        {% from "components/list/_macro.njk" import onsList %}
        {{
            onsList({
                "element": "ol",
                "itemsList": [
                    {
                        "text": "Enter an access code",
                        "url": "#access-code-error",
                        "variants": "inPageLink"
                    }
                ]
            })
        }}
    {% endcall %}

    <h1 class="ons-u-mt-2xl">Start study</h1>

    {{
        onsAccessCode({
            "id": "access-code",
            "name": "access-code",
            "postTextboxLinkText": "Where to find your access code",
            "postTextboxLinkUrl": "#0",
            "label": {
                "text": "Enter your 16-character access code",
                "description": "Keep this code safe. You will need to enter it every time you access your survey"
            },
            "securityMessage": "Your personal information is protected by law and will be kept confidential",
            "error": {
                "id": "access-code-error",
                "text": "Enter an access code"
            }
        })
    }}

    {{
        onsButton({
            "text": "Access study",
            "classes": "ons-u-mb-2xl ons-u-mt-s"
        })
    }}

    <h2>If you do not have an access code</h2>
    <p>
        If you have lost or not received an access code, you can <a href="#0">request a new access code</a>. This can be sent to you by text
        or post.
    </p>

    {% set content %}
        <p>If you need to answer separately from the people you live with, you can <a href="#0">request an individual access code</a>.</p>
        {%
            call onsPanel({
                "variant": "warn"
            })
        %}
            Someone in your household must still complete a study using this household access code
        {% endcall %}
    {% endset %}

    {%
        call onsDetails({
            "id": "details-access-code-error",
            "title": "Need to answer separately from your household?"
        })
    %}
        {{ content | safe }}
    {% endcall %}
{% endblock %}