Login Page

The login page allows a user to gain access to an application by entering their username and password or by authenticating using a social media login. For additional login methods, see:

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.

Basic Login Page

This is a general layout of a common login screen. A user can input the username and the password together to log in.

Image of basic login page

Social Login

Social login will allow a user to sign in with their social networks or IdPs accounts.

Please refer to branding guidelines when using logos for social login page. The following are examples of some of the more frequently used but you may use others as your needs require.

Image of social login

Login Page

Jump to Login Pages, Login Pages | Responsive State, Error Messages, or Notifications

Login Pages

Basic Login Page

Image of basic login page

  1. Logotype: The product logo is placed at the top.
  2. Description (optional): Description of the website can be placed here.
  3. Title: The title is located at the top of the login card.
  4. Language Selector (optional): The language selector is located in the top right of the login card.
  5. Required Fields: Username and password are the required fields while additional fields are optional. Some applications may require additional fields such as a specific server or geo-location. When additional fields are required, they should be ordered on a case-by-case basis and placed directly below the password field. The login card will expand to accommodate the additional fields. Try to limit the total number of fields to less than five. Also, you may use progressive disclosure if the field value have dependency on the previous relevant field.
  6. Checkbox (optional): A checkbox is located under the required (and any additional) fields, and is labeled based on the needs of the application. Checkbox labels should use sentence style capitalization according to the Terminology and Wording Style Guide.
  7. Help Link (optional): A help link should take users to a page where they can recover their password.
  8. Login Button: The button should be labeled “Log In”. See “Common Terms and Words” on the Terminology and Wording Style Guide for more information.
  9. Sign up (optional): The page will jump to the sign up flow after clicking the “Sign up” link.
  10. Links (optional): You may add any additional links to pages where the user can get more information or help.

Social Login

Image of social login

  1. Social Media Buttons: When the number of buttons is four or less, display all buttons in one column. Otherwise, use a two-column layout.
  2. More Button: When there are more than 8 buttons, just show first 7 of them. User can click the More Button to expand the list and view all the buttons as followed screen.

Image of social login

Login Pages | Responsive State

This section describes how the login pages should look on small screens.

Image of responsive state

  1. When the screen gets smaller, the help link will automatically move to the next line if there isn’t enough space for the checkbox and the help link to be placed in the same line.
  2. Social media buttons follow the same rule as in desktop size.

Error Messages

User input can be validated on the client or on the server. With client-side validation, error message will be presented before the form is submitted. It could happen when a text field gains focus, loses focus, or when user clicks the action button (without calling backend authenticator). With server-side validation, error message will only be presented when the page is reloaded with the data user submitted.

Jump to Client-side Errors or Server-side Errors

Client-side Errors

In most cases, client-side validations are performed as inline validations for each field. Some common conditions are as follows.

Field(s) is empty

Image of empty fields

  1. When to Show: When the user clicks the action button (Log In/Next), the errors must be corrected before the form can be submitted, and an error message will be displayed below any empty field.
  2. When to Hide: When the user fills the empty field, the error message will disappear when the field loses focus.
  3. Recommended Message:
    • When the username field is empty, we recommend to show “Enter your username”. “Username” can be replaced by “email” or other words if username is restricted to specific types of words.
    • When the password field is empty, we recommend to show “Enter your password” if a password is needed.

Invalid Characters

Image of invalid characters

  1. When to Show: When user clicks the action button (Log in/Next), the login form can’t be submitted and error message will show (below the username field) if there are invalid characters in username.
  2. When to Hide: After user modified the field, the error message will disappear when the field loses focus.
  3. Recommended Message:
    • What characters are invalid determined by the username type: email address, phone number or custom username.
    • If the username can only be email address and/or phone number, we recommend to show “That doesn’t look like an email address or phone number” when there are invalid characters.
    • If the username can also be customized, when there are invalid characters, show “Invalid characters”.

Caps lock is on

Image of caps lock

  1. When to Show: When the password field gets focus as well as caps lock is on, an error message will show up to warn users to avoid making mistake.
  2. When to Hide: Once the caps lock turns off, the warning message should disappear.
  3. Recommended Message: “Caps lock is currently on. This may cause you to type an incorrect password.”

Server-side Errors

When users submit the form, the entire page is reloaded if there are validation errors. At the same time, the password field should be cleared due to the security reason. Error messages can appear as inline errors for each field or as inline notifications. Inline Notifications are displayed below the application name and above the input fields. If there are multiple messages, each message appears on its own line, and the area adjusts as needed to fit these messages.

Account doesn’t exist/password is wrong

If the user input a wrong account name which do not exist or if the user input a wrong password, we provide two solutions to show error messages:

  1. Directly tell the user that the account doesn’t exist or the password is wrong. Although this approach is useful and clear for user, it’s not recommended if protecting identity of valid users is important. Image of account or password errors
    • When username is wrong (doesn’t exist), we recommend to show:
    • “The account doesn’t exist. Try again.”
    • “The account doesn’t exist. Try again or Sign up for PatternFly.” for the products supporting signing up. The “Sign up for PatternFly” should be a link to help users creating a new account more easier. “PatternFly” can be replaced with other product names.
    • When password is wrong, we recommend to show “Incorrect password, please try again.” If the user inputs an old password (they may have changed the password recently), we can show an error message alerting them that the password has changed instead of stating “the password is wrong” only. Image of old password error
  2. For security reasons, just tell user that the username and the password don’t match. Image of account or password errors

Other Examples of Error Messages

Image of other error messages

Notifications

Except for error messages, notifications can also be informational messages. An informational message can be triggered by system level events or triggered if the user is timed out of the application. The user can dismiss the notification by clicking on the close icon.

Image of notifications

PatternFly Core Example

View full page example

Reference Markup

<html class="login-pf">
...
<span id="badge">
  <img src="/assets/img/logo.svg" alt=" logo" />
</span>
<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div id="brand">
        <img src="/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>