Skip to Main Content

Pelican Design System icon Pelican Design System Change Password

Change Password

The Change Password form allows the user to manage their password.

Edit on GitHub

On this page:

Best Practices

  • MyLa should be used to allow users to manage their password. If not, use this form.
  • Put the form into a column to size as necessary.
  • Change the heading level when appropriate.

Usage

Change Password

You’re about to change your password. Be sure to follow our guidelines to make a strong password. But first, enter your current password.

If there’s an asterisk we have to get that information.

Want help making a Password?
  • Don’t use a password from any of your other accounts.
  • You must use letters and numbers.
  • Make some letters uppercase, make letters some lowercase.
  • Use some of these symbols too:
    { [ ( < ! # , $ % ^ @ : \ | / & * - _ +=;> ) ] } 
<div class="card">
  <div class="card-body">
    <h3 class="form-title">
        <span class="icon fas fa-user-shield text-primary-10 me-1" aria-hidden="true"></span>Change Password
    </h3>
    <p>You&rsquo;re about to change your password. Be sure to follow our guidelines to make a strong password. But first, enter your current password.</p><p class="small">If there’s an asterisk <span class="icon fas fa-asterisk text-danger me-1" aria-hidden="true"></span> we have to get that information.</p>
<div class="row">
      <div class="col-12">
        <div class="form-group">
          <label for="PasswordCurrent">
            <span class="icon fas fa-asterisk text-danger me-1" aria-hidden="true"></span>Current Password
          </label>
          <input type="password" class="form-control" id="PasswordCurrent">
          <div class="form-check form-switch">
            <input type="checkbox" class="form-check-input" id="showPasswords">
            <label class="form-check-label" for="showPasswords">Show Passwords</label>
          </div>
        </div>
        <div class="form-group">
          <label for="PasswordNew">
            <span class="icon fas fa-asterisk text-danger me-1" aria-hidden="true"></span>New Password
          </label>
          <input type="password" class="form-control" id="PasswordNew"><details class="mt-2">
  <summary class="text-ui-priority">
    Want help making a Password?
  </summary>

  <ul class="list-group mt-2">
    <li class="list-group-item">
      <div class="media">
        <span class="icon fas fa-times-circle text-danger" aria-hidden="true"></span>
        <div class="media-body ms-1">Don’t use a password from any of your other accounts.</div>
      </div>
    </li>
    <li class="list-group-item">
      <div class="media">
        <span class="icon fas fa-check-circle text-success" aria-hidden="true"></span>
        <div class="media-body ms-1">You must use letters and numbers.</div>
      </div>
    </li>
    <li class="list-group-item">
      <div class="media">
        <span class="icon fas fa-check-circle text-success" aria-hidden="true"></span>
        <div class="media-body ms-1">Make some letters uppercase, make letters some lowercase.</div>
      </div>
    </li>
    <li class="list-group-item">
      <div class="media">
        <span class="icon fas fa-check-circle text-success" aria-hidden="true"></span>
        <div class="media-body ms-1">Use some of these symbols too: <br><kbd> { [ ( &lt; ! # , $ % ^ @ : \ | / &amp; * - _ +=;&gt; ) ] } </kbd></div>
      </div>
    </li>
  </ul>
</details>
</div>
        <div class="form-group">
          <label for="PasswordNewConfirm">
            <span class="icon fas fa-asterisk text-danger me-1" aria-hidden="true"></span>Confirm New Password
          </label>
          <input type="password" class="form-control" id="PasswordNewConfirm">
        </div>
        <button class="btn btn-primary">
          <span class="icon fas fa-check me-1" aria-hidden="true"></span>Update Password 
        </button>
      </div>
    </div>
  </div>
</div>
Previous
Next
Page top