Skip Navigation

Sign-In Screen

A sign-in screen is displayed when a user must provide a username, password or other credentials before accessing an application.


When to Use

  • Display a sign-in screen when the user is required to sign in before accessing any part of the application.
  • If there is a non-logged in version of an application that a user can access prior to signing in, consider using the profile sign-in option in the Header of the application.

Examples

Usage

The sign-in screen uses the same page layout as the Splash Screen. The content may vary by application, but required elements are:

In addition, the following options may appear:

  • Progress Indicator: For applications in which a delay occurs between the sign-in action and the display of the application, use the appropriate Progress Indicator.
  • Brief context/text below the application name
  • “Keep me logged in” functionality
  • “Forgot login” link
  • Register/Create an account link
  • Legal text/disclaimers

Examples

Example with Progress Indicator


Developer Notes

Example

<div class="spark-content__wrapper--sticky-footer">

  <article class="spark-splash-screen spark-splash-screen--panel spark-splash-screen--sign-in spark-main--sticky-footer">
    <section class="spark-splash-screen__content">
      <div class="spark-panel spark-splash-screen__center col-xs-12 col-md-8 col-lg-6">
        <div class="spark-panel__content">
          <i class="spark-logo spark-logo--sabre spark-logo--md spark-logo--sabre-red">Sabre</i>
          <h3 class="spark-splash-screen__heading">Enterprise Design Language</h3>
          <form class="spark-splash-screen__form spark-text-left">
            <p class="spark-mar-t-2 spark-mar-b-1">
              Sign In to Product Name.
            </p>
            <label class="spark-input">
              <input class="spark-input__field" name="example1" placeholder="Enter Username..." role="textbox">
              <span class="spark-label">Username</span>
            </label>
            <label class="spark-input">
              <input type="password" class="spark-input__field" name="example1" placeholder="What is your password?" role="textbox" required>
              <span class="spark-label">Password</span>
              <span role="button" aria-label="Show or Hide Password" tabindex="0" class="spark-input__addon spark-input__password-toggle">
                <i class="spark-input__password-show spark-icon--md spark-icon-password-view"></i>
                <i class="spark-input__password-hide spark-icon--md spark-icon-password-hide"></i>
              </span>
            </label>
            <fieldset class="row">
              <label class="col-xs-12 spark-checkbox">
                <input class="spark-checkbox__input" type="checkbox">
                <span class="spark-checkbox__box"></span>
                <span class="spark-label">Stay signed in</span>
              </label>
            </fieldset>
            <div class="row">
              <div class="col-xs-12 spark-mar-t-1">
                <a href="#" class="spark-btn spark-btn--md spark-btn--primary spark-block--lte-sm spark-mar-b-1--md spark-pull-right--gte-sm">Sign In</a>
                <div class="spark-splash-screen__help-container spark-pull-left--gte-sm">
                  <a href="javascript: void(0);" class="spark-splash-screen__help spark-mar-b-.5">Forgot Username or Password?</a>
                  <a href="javascript: void(0);" class="spark-splash-screen__help spark-mar-b-.5">Create a new account</a>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </section>
  </article>

  <footer class="spark-footer">
    <div class="container">
      <a class="spark-footer__logo spark-hidden--lte-sm" title="Sabre"><i class="spark-logo spark-logo--sabre spark-logo--xs"></i></a>
      <div class="spark-footer__content">
        <div class="spark-footer__copyright">
          © 2015-16 Sabre <span class="spark-hidden--lte-md">Curabitur blandit tempus porttitor.</span>
        </div>
        <ul class="spark-footer__list">
          <li class="spark-footer__list-item">
            <a class="spark-footer__list-link" href="javascript: void(0);">
              Legal Policy
            </a>
          </li>
          <li class="spark-footer__list-item">
            <a class="spark-footer__list-link" href="javascript: void(0);">
              Contact Us
            </a>
          </li>
          <li class="spark-footer__list-item">
            <a class="spark-footer__list-link" href="javascript: void(0);">
              Support
            </a>
          </li>
        </ul>
      </div>
      <ul class="spark-footer__list spark-footer__list--right spark-footer__list--icons">
        <li class="spark-footer__list-item">
          <a class="spark-footer__list-link" aria-label="Twitter" title="Twitter">
            <i class="spark-icon-social-twitter spark-icon--fill"></i>
          </a>
        </li>
        <li class="spark-footer__list-item">
          <a class="spark-footer__list-link" aria-label="Facebook" title="Facebook">
            <i class="spark-icon-social-facebook spark-icon--fill"></i>
          </a>
        </li>
        <li class="spark-footer__list-item">
          <a class="spark-footer__list-link" aria-label="LinkedIn" title="LinkedIn">
            <i class="spark-icon-social-linkedin spark-icon--fill"></i>
          </a>
        </li>
        <li class="spark-footer__list-item">
          <a class="spark-footer__list-link" aria-label="Instagram" title="Instagram">
            <i class="spark-icon-social-instagram spark-icon--fill"></i>
          </a>
        </li>
        <li class="spark-footer__list-item">
          <a class="spark-footer__list-link" aria-label="YouTube" title="YouTube">
            <i class="spark-icon-social-youtube spark-icon--fill"></i>
          </a>
        </li>
      </ul>
    </div>
  </footer>

</div>

<style type="text/css">
  
</style>

The sign-in screen is an extension of the splash screen component with the addition of the .spark-splash-screen--sign-in class.

To make use of the view/hide password input toggle, an element with the .spark-input class should have a password input field with a sibling that has a class of .spark-input__addon spark-input__password-toggle. The sibling element should have two children, each having classes of .spark-input__password-show spark-icon-password-view and .spark-input__password-hide spark-icon-password-hide, respectively.

Example with Progress Indicator

<div class="spark-content__wrapper--sticky-footer">

  <article class="spark-splash-screen spark-splash-screen--panel spark-splash-screen--sign-in spark-main--sticky-footer" id="sign-in-progress-bar-example">
    <section class="spark-splash-screen__content">
      <div class="spark-panel spark-splash-screen__center col-xs-12 col-md-10 col-lg-8 col-xl-6">
        <div class="spark-panel__content">
          <i class="spark-logo spark-logo--sabre spark-logo--md spark-logo--sabre-red">Sabre</i>
          <h3 class="spark-splash-screen__heading">Enterprise Design Language</h3>

          <div class="spark-progress spark-progress--integrated spark-progress--lg spark-splash-screen__progress" role="progressbar" data-progress-defer>
            <progress value="0"></progress>
            <span class="spark-progress__text">
              <span class="spark-progress__value" role="status">0%</span>
              <ul class="spark-progress__states" role="note">
                <li data-value="0" class="active">Applying Policy Rules</li>
                <li data-value="20">Sorting Options</li>
                <li data-value="40">Generating Jobs</li>
                <li data-value="60">Perturbing Matrices</li>
                <li data-value="80">Reticulating Splines</li>
                <li data-value="100">All done!</li>
              </ul>
            </span>
            <span class="spark-progress__meter"></span>
          </div>

          <form class="spark-splash-screen__form spark-text-left">
            <p class="spark-mar-t-2 spark-mar-b-1">
              Sign In to Product Name.
            </p>
            <label class="spark-input">
              <input class="spark-input__field" name="example1" placeholder="Enter Username..." role="textbox">
              <span class="spark-label">Username</span>
            </label>
            <label class="spark-input">
              <input type="password" class="spark-input__field" name="example1" placeholder="What is your password?" role="textbox" required>
              <span class="spark-label">Password</span>
              <span role="button" aria-label="Show or Hide Password" tabindex="0" class="spark-input__addon spark-input__password-toggle">
                <i class="spark-input__password-show spark-icon--md spark-icon-password-view"></i>
                <i class="spark-input__password-hide spark-icon--md spark-icon-password-hide"></i>
              </span>
            </label>
            <fieldset class="row">
              <label class="col-xs-12 spark-checkbox">
                <input class="spark-checkbox__input" type="checkbox">
                <span class="spark-checkbox__box"></span>
                <span class="spark-label">Stay signed in</span>
              </label>
            </fieldset>
            <div class="row">
              <div class="col-xs-12 spark-mar-t-1">
                <a href="#" class="spark-btn spark-btn--md spark-btn--primary spark-block--lte-sm spark-mar-b-1--md spark-pull-right--gte-sm">Sign In</a>
                <div class="spark-splash-screen__help-container spark-pull-left--gte-sm">
                  <a href="javascript: void(0);" class="spark-splash-screen__help spark-mar-b-.5">Forgot Username or Password?</a>
                  <a href="javascript: void(0);" class="spark-splash-screen__help spark-mar-b-.5">Create a new account</a>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </section>
  </article>

  <footer class="spark-footer">
    <div class="container">
      <a class="spark-footer__logo spark-hidden--lte-sm" title="Sabre"><i class="spark-logo spark-logo--sabre spark-logo--xs"></i></a>
      <div class="spark-footer__content">
        <div class="spark-footer__copyright">
          © 2015-16 Sabre <span class="spark-hidden--lte-md">Curabitur blandit tempus porttitor.</span>
        </div>
        <ul class="spark-footer__list">
          <li class="spark-footer__list-item">
            <a class="spark-footer__list-link" href="javascript: void(0);">
              Legal Policy
            </a>
          </li>
          <li class="spark-footer__list-item">
            <a class="spark-footer__list-link" href="javascript: void(0);">
              Contact Us
            </a>
          </li>
          <li class="spark-footer__list-item">
            <a class="spark-footer__list-link" href="javascript: void(0);">
              Support
            </a>
          </li>
        </ul>
      </div>
      <ul class="spark-footer__list spark-footer__list--right spark-footer__list--icons">
        <li class="spark-footer__list-item">
          <a class="spark-footer__list-link" aria-label="Twitter" title="Twitter">
            <i class="spark-icon-social-twitter spark-icon--fill"></i>
          </a>
        </li>
        <li class="spark-footer__list-item">
          <a class="spark-footer__list-link" aria-label="Facebook" title="Facebook">
            <i class="spark-icon-social-facebook spark-icon--fill"></i>
          </a>
        </li>
        <li class="spark-footer__list-item">
          <a class="spark-footer__list-link" aria-label="LinkedIn" title="LinkedIn">
            <i class="spark-icon-social-linkedin spark-icon--fill"></i>
          </a>
        </li>
        <li class="spark-footer__list-item">
          <a class="spark-footer__list-link" aria-label="Instagram" title="Instagram">
            <i class="spark-icon-social-instagram spark-icon--fill"></i>
          </a>
        </li>
        <li class="spark-footer__list-item">
          <a class="spark-footer__list-link" aria-label="YouTube" title="YouTube">
            <i class="spark-icon-social-youtube spark-icon--fill"></i>
          </a>
        </li>
      </ul>
    </div>
  </footer>

</div>

<style type="text/css">
  
</style>

The sign-in screen with progress indicator is the same as the splash screen component with the addition of the spark-progress component.

To make use of the progress indicator on a sign-in screen, add the appropriate Progress Indicator as a child of the splash screen component.