<section class="col-12">
  <h1>{{ pageHeader }}</h1>

  <form id="formValues" action="#" method="post" accept-charset="utf-8">
    <div class="form-group row">
      <label class="col-3 form-control-label" for="username">{{ msgUsername }}</label>
      <div class="col-9">
        <input class="form-control" type="text" name="username" id="username" required autofocus />
      </div>
    </div>

    <div class="form-group row">
      <label class="col-3 form-control-label" for="email">{{ msgEmail }}</label>
      <div class="col-9">
        <input class="form-control" type="email" name="email" id="email" required />
      </div>
    </div>

    <div class="form-group row">
      <div class="col-sm-12 text-right">
        <button class="btn btn-primary" type="submit" id="changepassword">{{ msgSubmit }}</button>
      </div>
    </div>
  </form>

  <div id="loader"></div>
  <div id="changepasswords"></div>

  <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', () => {
      'use strict';
      $('#changepassword').on('click', () => {
        saveFormValues('changepassword', 'changepassword');
      });
      $('form#formValues').submit(() => {
        return false;
      });
    });
  </script>
</section>