% layout 'mainlayout';

% my $uses_cram = config->{session}{secure} eq 'cram';

<div id=login class="jwm-base">

  <h1>
    JWebmail – <%= ucfirst l 'login' %>
  </h1>

% if (my $msg = flash('message') || stash('warning')) {
  <p class="jwm-warning">
    %= $msg
  </p>
% }

  %= form_for login => (name => 'login1') => (method => 'post') => (class => 'pure-form pure-form-aligned jwm-round') => begin
    <fieldset>
      <div class="pure-control-group">
        %= label_for userid => ucfirst l 'userid'
        %= text_field 'userid' => '' => (required => '')
      </div>
      <div class="pure-control-group">
        %= label_for password => ucfirst l 'password'
        %= password_field 'password' => (required => '')
      </div>
% if ($uses_cram) {
      %= hidden_field challenge => rand
% }
      <div class="pure-controls">
        %= submit_button ucfirst l('login') => (class => 'pure-button pure-button-primary') => (name => 'submit_button') => $uses_cram ? (disabled => '') : ()
      </div>
    </fieldset>
  % end

</div>

% if ($uses_cram) {
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"
  integrity="sha512-E8QSvWZ0eCLGk4km3hxSsNmGWbLtSCSUcewDQPQWZF6pEU8GlT8a5fF32wOl1i8ftdMhssTrF/OhyGWwonTcXA=="
  crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/hmac-md5.min.js"
  integrity="sha512-gy8JaBxTrtIxNLe1FfMAXey61VjQk3Af4EyY/EpVfmWPH16iCgdRZMHEFgKIyxMrarlc6+rDf6WneGL4SWqnpg=="
  crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
  document.login1.submit_button.disabled = false;

  document.forms.login1.addEventListener("formdata", (form_data_evt) => {
    const form_data = form_data_evt.formData;
    const res = CryptoJS.HmacMD5(form_data.get("challenge"), form_data.get("password"))
    form_data.set("password", res)
  });
</script>
% }

%= javascript begin
  if (!document.login1.userid.value) {
    document.login1.userid.focus();
  } else {
    document.login1.password.focus();
  }
% end