Set Password Form

When invited to Straight Through Contents, the Set Password page is the first page users will encounter when they click the link in their email invitation.

The Set Password form is composed of a password <input> and a confirm password <input>. Both are required and must meet the minimum requirements outlined on the Password Requirements list molecule.

We show the user's email address because it is a known data point, and we want them to recognize that they will log in with that same email address whenever they ever need to return to the site.

Design Sample

Email Address

Email Address*

Password

This password does not meet the minimum requirements below Password*

Confirm Password

Your passwords do not match Confirm Password*

Terms & Conditions

You must check this box to continue I agree to this site's Terms & Conditions

Notes

As with other components in the design system, it is possible to add validation conditions to any <input>. Simply add a .valid or .invalid class to the .field class.

html

<form class="sm">
  <fieldset>
    <legend>Email Address</legend>
    <div class="field"> <!-- change to 'field valid' or 'field invalid' as necessary -->
      <span class="error-message"></span>
      <input type="email" name="email-address" id="email-address" class="email-address" value="{Email_Address}" disabled>
      <label for="email-address">Email Address&#42;</label>
    </div>
  </fieldset>
  <fieldset>
    <legend>Password</legend>
    <div class="field"> <!-- change to 'field valid' or 'field invalid' as necessary -->
      <span class="error-message">This password does not meet the minimum requirements below</span>
      <input type="password" name="password" id="password" placeholder="Choose a password" maxlength="50" minlength="8" autocomplete="new-password">
      <label for="password">Password&#42;</label>
      <span toggle="#password" class="la la-eye-slash show-hide-password"></span>
      <span class="valid password"><i class="la la-check-circle-o"></i></span>
    </div>
  </fieldset>
  <fieldset>
    <legend>Confirm Password</legend>
    <div class="field"> <!-- change to 'field valid' or 'field invalid' as necessary -->
      <span class="error-message">Your passwords do not match</span>
      <input type="password" name="confirm-password" id="confirm-password" placeholder="Confirm your password" maxlength="50" minlength="8" autocomplete="new-password">
      <label for="password">Confirm Password&#42;</label>
      <span toggle="#confirm-password" class="la la-eye-slash show-hide-password"></span>
      <span class="valid password"><i class="la la-check-circle-o"></i></span>
    </div>
  </fieldset>
  <fieldset>
    <legend>Terms &amp; Conditions</legend>
    <div class="field"> <!-- change class to 'field valid' or 'field invalid' as necessary -->
      <span class="error-message checkbox">You must check this box to continue</span>
      <input type="checkbox" name="terms" id="terms">
      <label class="checkbox" for="terms"><span>I agree to this site's&nbsp;<a href="../../policies/terms/index.html">Terms &amp; Conditions</a></span></label>
    </div>
  </fieldset>
  <div class="button-box">
    <button class="button color-one"><span class="button-label">Set Password<span class="post"><span class="processing"><i class="la la-refresh la-spin"></i></span></span></span></button>
  </div>
</form>