extends layout.pug

block content
  if !loggedIn
    .col-lg-6.col-lg-offset-3.col-md-6.col-md-offset-3
      .alert.alert-danger.messagebox.center
        strong Authorization Required
        p You must be <a href="/login">logged in</a> to view this page.
  else
    .col-lg-6.col-lg-offset-3.col-md-6.col-md-offset-3
      if successMessage
        .alert.alert-success.center
          p= successMessage
      else if errorMessage
        .alert.alert-danger.center
          p= errorMessage
      h3 Change Password
      form(action="/account/edit", method="post", onsubmit="return validatePasswordChange()")
        input(type="hidden", name="_csrf", value=csrfToken)
        input(type="hidden", name="action", value="change_password")
        .form-group
          label.control-label(for="username") Username
          input#username.form-control(type="text", name="name", value=loginName, disabled=true)
        .form-group
          label.control-label(for="oldpassword") Current Password
          input#oldpassword.form-control(type="password", name="oldpassword")
        .form-group
          label.control-label(for="newpassword") New Password
          input#newpassword.form-control(type="password", name="newpassword")
        .form-group
          label.control-label(for="newpassword_confirm") Confirm New Password
          input#newpassword_confirm.form-control(type="password", name="newpassword_confirm")
        button#changepassbtn.btn.btn-danger.btn-block(type="submit") Change Password
      hr
      h3 Change Email
      form(action="/account/edit", method="post", onsubmit="return submitEmail()")
        input(type="hidden", name="_csrf", value=csrfToken)
        input(type="hidden", name="action", value="change_email")
        .form-group
          label.control-label(for="username2") Username
          input#username2.form-control(type="text", name="name", value=loginName, disabled=true)
        .form-group
          label.control-label(for="password2") Password
          input#password2.form-control(type="password", name="password")
        .form-group
          label.control-label(for="email") New Email
          input#email.form-control(type="email", name="email")
        button#changeemailbtn.btn.btn-danger.btn-block(type="submit") Change Email

append footer
  script(type="text/javascript").
    function validatePasswordChange() {
      var pw = $("#newpassword").val();
      var pwc = $("#newpassword_confirm").val();
      $("#passwordempty").remove();
      $("#passwordmismatch").remove();

      if (pw === '') {
        $("#newpassword").parent().addClass("has-error");
        $("<p/>").addClass("text-danger")
          .attr("id", "passwordempty")
          .text("Password must not be empty")
          .insertAfter($("#newpassword"));
        return false;
      } else {
        if (pw !== pwc) {
          $("#newpassword_confirm").parent().addClass("has-error");
          $("#newpassword").parent().addClass("has-error");
          $("<p/>").addClass("text-danger")
            .attr("id", "passwordmismatch")
            .text("Passwords do not match")
            .insertAfter($("#newpassword_confirm"));
          return false;
        } else {
          $("#username").attr("disabled", false);
          return true;
        }
      }
    }
    function submitEmail() {
      $("#username2").attr("disabled", false);
      return true;
    }