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

Launcher

Launcher Menu

Application Launcher

  1. Launcher Icon: The “fa-th” icon from the Font Awesome icon library should be used to represent the launcher. Clicking on the icon will open a menu allowing the user to select a different interface to launch.
  2. Menu Items: The menu is triggered by clicking on the launcher icon. The menu displays the available user interfaces. The presentation of this menu may vary. In this example, user interfaces are represented with a label (UI name) and associated icon (optional) however, you could also use a list. The current interface being used should not show up in the menu. Home is optional, but when used should send the user to the Launcher Home.
  3. Selecting: When a user hovers over the UI Name or Icon, both should be highlighted as links, with a button border appearing as well. Clicking the option will launch the selected UI in a new browser window or browser tab, based on the browser preferences of the user.
  4. Tooltip: As a user hovers over the UI Name or Icon, a Tooltip should be available to explain what the action will do.

Launcher Menu Without Icons

Application Launcher without icons

Launcher Home

  • The Launcher Home can be used as a landing page between the Login Screen and the main application functionality when multiple interfaces exist. It may also be navigated to through a link in the Launcher Menu.

Application Launcher Icon

  1. Page Title: Give the page a name that encompasses all interface options.
  2. Description (optional): Welcome users to the application and give a brief description of the menu items presented.
  3. Menu Items: All available interfaces are represented with a label (UI name) and associated icon (optional). No more than four menu items should be displayed using the Launcher Home pattern.
  4. Action Buttons Place an action button under each menu item to allow for launching each user interface. See the Action Labels section for more information about terminology and wording specific to action labels.
  5. Footer (optional) Provide links to any additional resources associated with the application that may be helpful to the user. Resources in the footer may include documentation, tutorials, guides, etc, and may be organized using vertical separators as needed.

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>