Change Password

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

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.

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.

  • 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="h3 mb-6 text-primary">
        <span class="fas fa-user-shield text-primary-10 mr-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="font-weight-bold"><span class="fas fa-asterisk text-danger mr-1" aria-hidden="true"></span></span>we have to get that information.</p>
<div class="row">
      <div class="col-12">
        <div class="form-group">
          <label for="PasswordCurrent">
            <span class="fas fa-asterisk text-danger mr-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="fas fa-asterisk text-danger mr-1" aria-hidden="true"></span>New Password
          </label>
          <input type="password" class="form-control" id="PasswordNew"><p class="mt-1">
  <button class="btn btn-link btn-sm bg-transparent shadow-none border-0 text-decoration-none" type="button" data-toggle="collapse" data-target="#collapsePasswordTips" aria-expanded="true" aria-controls="collapsePasswordTips" aria-haspopup="true"><span class="fas fa-lightbulb mr-1" aria-hidden="true"></span>Want help making a Password?</button>
</p>
<div class="collapse show" id="collapsePasswordTips">
  <ul class="list-group">
    <li class="list-group-item">
      <div class="media">
        <span class="fas fa-times-circle text-danger mr-2" aria-hidden="true"></span>
        <div class="media-body">Don’t use a password from any of your other accounts.</div>
      </div>
    </li>
    <li class="list-group-item">
      <div class="media">
        <span class="fas fa-check-circle text-success mr-2" aria-hidden="true"></span>
        <div class="media-body">You must use letters and numbers.</div>
      </div>
    </li>
    <li class="list-group-item">
      <div class="media">
        <span class="fas fa-check-circle text-success mr-2" aria-hidden="true"></span>
        <div class="media-body">Make some letters uppercase, make letters some lowercase.</div>
      </div>
    </li>
    <li class="list-group-item">
      <div class="media">
        <span class="fas fa-check-circle text-success mr-2" aria-hidden="true"></span>
        <div class="media-body">Use some of these symbols too: <br><kbd> { [ ( &lt; ! # , $ % ^ @ : \ | / &amp; * - _ +=;&gt; ) ] } </kbd></div>
      </div>
    </li>
  </ul>
</div>
</div>
        <div class="form-group">
          <label for="PasswordNewConfirm">
            <span class="fas fa-asterisk text-danger mr-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="fas fa-check-circle mr-1" aria-hidden="true"></span>Update Password 
        </button>
      </div>
    </div>
  </div>
</div>
Previous page
Next page