University of Leeds Design System v1.0.14.2

Form widget: Log in with form error

No notes defined.

{% extends '@uol-widget' %}

{% block widget_content %}
  {% render '@uol-form-pattern', { form: form } %}
{% endblock %}
 
<div class="uol-widget-container">
    <div class="uol-widget">

        <div class="uol-widget__content">

            <div class="uol-form__container uol-form-container--centered  ">

                <div class="uol-form__inner-wrapper">

                    <h2 class="uol-form__title">Log in</h2>

                    <div class="uol-rich-text">
                        <div class="uol-form__additional-content uol-form__additional-content--before">
                            <p>Not signed up? <a href="/">Register</a></p>
                            <p>Forgot password? <a href="/">Reset password</a></p>
                        </div>
                    </div>

                    <div id="formErrorId" class="uol-form__form-error" aria-label="Error" role="alert" aria-live="polite" tabindex="-1" data-form-error="true">

                        <div class="uol-form__form-error__text">
                            <p>Incorrect username or password combination, please check your details</p>
                        </div>
                    </div>

                    <form class="uol-form" action="/example-form-action">

                        <div class="uol-form__input-group  uol-form__input-group--block">

                        </div>

                        <div class="uol-form--button-block">

                            <div class="uol-form__inputs-wrapper">

                                <div class="uol-form__input-container 
">

                                    <label class="uol-form__input-label" for="usernameID">
                                        <span class="uol-form__input-label__text">Username or email (required)</span>

                                    </label>

                                    <div class="uol-form__input-wrapper
               uol-form__input-wrapper--text
              " data-field-invalid=true>

                                        <!--  -->

                                        <input class="uol-form__input  uol-form__input--text" type="text" id="usernameID" name="usernameName" aria-invalid="true" value="" autocomplete="username" required>

                                        <!--  -->
                                    </div>

                                </div>

                                <div class="uol-form__input-container 
">

                                    <label class="uol-form__input-label" for="passwordID">
                                        <span class="uol-form__input-label__text">Password (required)</span>

                                        <span class="uol-form__input__requirements" aria-hidden="true">

                                            <span>Must be at least 8 characters </span>

                                            <span>Must contain at least 1 uppercase letter </span>

                                        </span>
                                        <span class="hide-accessible">
                                            Must be at least 8 characters, Must contain at least 1 uppercase letter,
                                        </span>

                                    </label>

                                    <div class="uol-form__input-wrapper
               uol-form__input-wrapper--password
              " data-field-invalid=true>

                                        <!--  -->

                                        <input class="uol-form__input  uol-form__input--password" type="password" id="passwordID" name="passwordName" aria-invalid="true" value="" autocomplete="current-password" required>

                                        <button type="button" class="uol-form__input--password-toggle" aria-controls="passwordID" data-password-visible="false" hidden></button>

                                        <!--  -->
                                    </div>

                                </div>

                            </div>

                            <div class="uol-form__button-wrapper">
                                <button class="uol-button uol-button--primary
    " type="submit">Log in</button>

                            </div>

                        </div>

                    </form>

                </div>

            </div>

        </div>
    </div>
</div>
 
{
  "form": {
    "heading_level": "h2",
    "form_centered": true,
    "action": "/example-form-action",
    "title": "Log in",
    "lead": null,
    "additional_info_before": "<p>Not signed up? <a href=\"/\">Register</a></p><p>Forgot password? <a href=\"/\">Reset password</a></p>",
    "button": {
      "content": "Log in",
      "type": "submit",
      "style": "primary"
    },
    "fields": [
      {
        "type": "text",
        "label": "Username or email",
        "autocomplete": "username",
        "required": true,
        "invalid": true,
        "id": "usernameID",
        "name": "usernameName"
      },
      {
        "type": "password",
        "label": "Password",
        "requirements": [
          {
            "item": "Must be at least 8 characters"
          },
          {
            "item": "Must contain at least 1 uppercase letter"
          }
        ],
        "autocomplete": "current-password",
        "required": true,
        "invalid": true,
        "id": "passwordID",
        "name": "passwordName"
      }
    ],
    "form_error": "<p>Incorrect username or password combination, please check your details</p>",
    "form_error_id": "formErrorId"
  }
}