Login Page

The login page allows the user to gain access to an application by entering their username and password. Usage scenarios related to the login page include:

  • A user navigates to an application and is presented with a login page as a way to gain access to the application. There are two possible results:
    • Authentication is successful and the user is directed to the application landing page.
    • Authentication fails and the user remains on the login page. If authentication fails, the screen should show an informational or error message about the failure.
  • A user is automatically logged out due to inactivity. In this event, they will be returned to the login page, which will display an informational message explaining what happened. Once the user logs in again, they should be taken back to the page they were previously on before being timed out. Thirty minutes is the suggested duration before a session timeout, but this is subject to change based on your product’s security requirements.
  • A user has forgotten their username and/or password. A link is available to begin the process to reset this information. Once the user clicks on one of these links, the contents of the login page is replaced with fields specific to recovering their username and/or password. There are a number of different ways the user could recover their password. This pattern does not dictate which methods an application should follow. Some options include:
    • The user could provide their e-mail and be sent a temporary password or a link to reset their password.
    • The user could answer a security question.
    • The user could get a message explaining that they have to contact a specific person.

Example Login Page

Image of login page

Login Page

Image of login error

  1. Application Name: The application or project name uses a combination of Open Sans Extra Bold and Open Sans Regular.

  2. Logo: The logo is located in the top right.

  3. Required Fields: The required fields include username (see the Terminology and Wording Style Guide) and password. Labels are left-aligned. Additional fields are optional. Some applications may require additional information beyond username and password (such as a specific server or geo-location). In these cases, the additional fields can appear underneath the password field. The dialog will expand to accommodate the additional fields. The order of the additional fields will have to be addressed on a case-by-case basis, but they should sit between the Password field and the Log In button. Try and limit the number of fields to less than five. Also, you may use progressive disclosure if a field’s value is dependent on a field prior to it.

  4. Checkbox (optional): A “Remember Username” checkbox is located under the fields. For security reasons, we do not recommend allowing the user to remember their password. Check box labels should use sentence style capitalization (see the Terminology and Wording Style Guide for more information regarding capitalization).

  5. Help Link: “Forgot Username or Password?” is a link for users to recover their username or password.

  6. Login Button: The Login button appears underneath the password field. Please note, the label on the button should say “Log In”, a verb, vs Login, a noun or adjective (See the Terminology and Wording Style Guide for more information).

  7. Informational Text (optional): The text only area, located to the right of the fields, is available for additional information such as an introductory message about your application or you may want to include information about the latest release of your product here - such as a version number. Use text sparingly; do not overload this area with too much text.

Notifications

Inline Notifications are displayed below the application name and above the input fields when informational, warning, or errors messages are needed. If there are multiple strings, each message appears on its own line, and the area adjusts as needed to fit these messages.

Examples of these messages include the following:

  1. Error Message: An error is triggered if the user incorrectly types their username or password. In this event, after the information has been submitted, the values entered for the username and other optional fields remains populated however, the value for the password is discarded.

Image of login error

  1. Warning Message: A warning message is triggered if the user has the caps lock turned on. Once the caps lock is turned off, the warning should disappear.

Image of login error

  1. Informational Message: An informational message is triggered if the user is timed out of the application. They will be returned to the login page, which will display an informational message explaining that the session timed out due to inactivity.

Image of login error

View full page example

Reference Markup 

<html class="login-pf">
...
<span id="badge">
  <img src="/patternfly-org/assets/img/logo.svg" alt=" logo" />
</span>
<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div id="brand">
        <img src="/patternfly-org/assets/img/brand.svg" alt="PatternFly Enterprise Application">
      </div><!--/#brand-->
    </div><!--/.col-*-->
    <div class="col-sm-7 col-md-6 col-lg-5 login">
      <form class="form-horizontal" role="form">
        <div class="form-group">
          <label for="inputUsername" class="col-sm-2 col-md-2 control-label">Username</label>
          <div class="col-sm-10 col-md-10">
            <input type="text" class="form-control" id="inputUsername" placeholder="" tabindex="1">
          </div>
        </div>
        <div class="form-group">
          <label for="inputPassword" class="col-sm-2 col-md-2 control-label">Password</label>
          <div class="col-sm-10 col-md-10">
            <input type="password" class="form-control" id="inputPassword" placeholder="" tabindex="2">
          </div>
        </div>
        <div class="form-group">
          <div class="col-xs-8 col-sm-offset-2 col-sm-6 col-md-offset-2 col-md-6">
            <div class="checkbox">
              <label>
                <input type="checkbox" tabindex="3"> Remember username
              </label>
            </div>
            <span class="help-block"> Forgot <a href="#" tabindex="5">username</a> or <a href="#" tabindex="6">password</a>?</span>
          </div>
          <div class="col-xs-4 col-sm-4 col-md-4 submit">
            <button type="submit" class="btn btn-primary btn-lg" tabindex="4">Log In</button>
          </div>
        </div>
      </form>
    </div><!--/.col-*-->
    <div class="col-sm-5 col-md-6 col-lg-7 details">
      <p><strong>Welcome to PatternFly | open interface project!</strong>
        This is placeholder text, only. Use this area to place any information or introductory message about your application that may be relevant for users. For example, you might include news or information about the latest release of your product here&mdash;such as a version number.</p>
    </div><!--/.col-*-->
  </div><!--/.row-->
</div><!--/.container-->

</html>