<!doctype html>
[#escape x as (x)!?html]
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>账户设置 - ${site.title}</title>
  <meta name="_csrf" content="${_csrf.token}"/>
  <meta name="_csrf_header" content="${_csrf.headerName}"/>
  [#include 'includes_meta.html'/]
  [#include 'includes_css.html'/]
  [#include 'includes_js.html'/]
  [#include 'includes_js_validation.html'/]
  <script src="${files}/vendor/crypto-js/crypto-js.min.js"></script>
  <script src="${files}/vendor/sm-crypto/dist/sm2.js"></script>
</head>
<body>
[#assign headerShadow=true/]
[#include 'includes_header.html'/]
<div class="container mt-3">
  <div class="row">
    <div class="col-sm-3">
      <div class="list-group mt-2">
        [#assign settings = 'account'/]
        [#include 'mem_settings_left.html'/]
      </div>
    </div>
    <div class="col-sm-9">
      <h3 class="py-3 border-bottom">修改密码</h3>
      <div class="alert alert-danger d-none" id="passwordFormError" role="alert"></div>
      <form class="mt-3" id="passwordForm" action="${api}/update-password?_method=put" method="post">
        <!-- 如没有设置密码（通过 oauth 注册），则不显示输入旧密码 -->
        [#if user.passwordExist]
          <div class="form-group">
            <label for="password">原密码</label>
            <input type="password" class="form-control" id="password" name="password" required>
          </div>
        [/#if]
        <div class="form-group">
          <label for="newPassword">新密码</label>
          <input type="password" class="form-control" id="newPassword" name="newPassword" required>
        </div>
        <div class="form-group">
          <label for="confirmNewPassword">确认新密码</label>
          <input type="password" class="form-control" id="confirmNewPassword" required data-rule-equalTo="#newPassword" data-msg-equalTo="两次输入不相同">
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
      </form>
      <h3 class="py-3 mt-3 border-bottom">修改邮箱地址</h3>
      <div class="alert alert-danger d-none" id="emailFormError" role="alert"></div>
      <form class="mt-3" id="emailForm" action="${api}/settings/email?_method=put" method="post">
        [#if user.email??]
          <div class="form-group">
            <label for="oldEmail">原邮箱地址</label>
            <input type="text" class="form-control" id="oldEmail" name="oldEmail" value="${user.email}" readonly disabled>
          </div>
        [/#if]
        <div class="form-group">
          <label for="newEmail">新邮箱地址</label>
          <input type="text" class="form-control" id="newEmail" name="email" autocomplete="off" required title="请填写邮箱地址"
                 data-rule-email="true" data-msg-email="请填写有效的邮箱地址" data-rule-remote="${api}/user/email-not-exist" data-msg-remote="邮箱地址已存在">
        </div>
        <div class="form-group">
          <label for="emailMessageValue">邮件验证码</label>
          <div class="input-group">
            <input type="text" class="form-control" id="emailMessageValue" name="emailMessageValue" autocomplete="off" required title="请填写邮件验证码" data-msg-remote="邮件验证码不正确">
            <input type="hidden" id="emailMessageId" name="emailMessageId">
            <span class="input-group-append"><button class="btn btn-secondary" id="emailMessageButton" type="button">获取邮件验证码</button></span>
          </div>
        </div>
        <!-- 如没有设置密码（通过 oauth 注册），则不显示输入旧密码 -->
        [#if user.password != '0']
          <div class="form-group">
            <label for="emailPassword">密码</label>
            <input type="password" class="form-control" id="emailPassword" name="password" required>
          </div>
        [/#if]
        <button type="submit" class="btn btn-primary">提交</button>
      </form>
      <h3 class="py-3 mt-3 border-bottom">修改手机号码</h3>
      <div class="alert alert-danger d-none" id="mobileFormError" role="alert"></div>
      <form class="mt-3" id="mobileForm" action="${api}/settings/mobile?_method=put" method="post">
        [#if user.mobile??]
          <div class="form-group">
            <label for="oldMobile">原手机号码</label>
            <input type="text" class="form-control" id="oldMobile" name="oldMobile" value="${user.mobile}" readonly disabled>
          </div>
        [/#if]
        <div class="form-group">
          <label for="newMobile">新手机号码</label>
          <input type="text" class="form-control" id="newMobile" name="mobile" required title="请填写手机号码"
                 data-rule-pattern="^1\d{10}$" data-msg-pattern="请填写有效的手机号码" data-rule-remote="${api}/user/mobile-not-exist" data-msg-remote="手机号码已存在">
        </div>
        <div class="form-group">
          <label for="mobileMessageValue">短信验证码</label>
          <div class="input-group">
            <input type="text" class="form-control" id="mobileMessageValue" name="mobileMessageValue" autocomplete="off" required title="请填写短信验证码" data-msg-remote="短信验证码不正确">
            <input type="hidden" id="mobileMessageId" name="mobileMessageId">
            <span class="input-group-append"><button class="btn btn-secondary" id="mobileMessageButton" type="button">获取短信验证码</button></span>
          </div>
        </div>
        <!-- 如没有设置密码（通过 oauth 注册），则不显示输入旧密码 -->
        [#if user.password != '0']
          <div class="form-group">
            <label for="mobilePassword">密码</label>
            <input type="password" class="form-control" id="mobilePassword" name="password" required>
          </div>
        [/#if]
        <button type="submit" class="btn btn-primary">提交</button>
      </form>
    </div>
  </div>
</div>
[#include 'includes_footer.html'/]
[#include 'includes_message_box.html'/]
[#include 'includes_short_message.html'/]
<script>
  var publicKey;
  axios.get('${api}/env/client-public-key').then(function (response) {
    publicKey = response.data;
  });

  function sm2Encrypt(message) {
    return CryptoJS.enc.Base64.stringify(CryptoJS.enc.Hex.parse('04' + sm2.doEncrypt(message, publicKey)));
  }

  $(function () {
    $('#passwordForm').validate({
      submitHandler: function (form) {
        var body = $(form).serializeJSON();
        if (body.password) {
          body.password = sm2Encrypt(body.password);
        }
        body.newPassword = sm2Encrypt(body.newPassword);
        request.post(form.action, body).then(function (response) {
          var data = response.data;
          if (data === null) return;
          var $passwordFromError = $('#passwordFormError');
          if (data.status !== 0) {
            $passwordFromError.text(data.message);
            $passwordFromError.removeClass('d-none');
            return;
          }
          $passwordFromError.addClass('d-none');
          showSuccess();
          location.reload();
        });
      }
    });

    var emailFormValidator = $('#emailForm').validate({
      rules: {
        emailMessageValue: {
          remote: {
            url: '${api}/sms/email/try', data: {
              emailMessageId: function () {
                return $('#emailMessageId').val();
              },
              email: function () {
                return $('#newEmail').val();
              }
            }
          }
        }
      },
      submitHandler: function (form) {
        var body = $(form).serializeJSON();
        if (body.password) {
          body.password = sm2Encrypt(body.password);
        }
        request.post(form.action, body).then(function (response) {
          var data = response.data;
          if (data === null) return;
          var $emailFormError = $('#emailFormError');
          if (data.status !== 0) {
            $emailFormError.text(data.message);
            $emailFormError.removeClass('d-none');
            return;
          }
          $emailFormError.addClass('d-none');
          showSuccess();
          location.reload();
        });
      }
    });
    $('#emailMessageButton').click(function () {
      sendEmailMessage(emailFormValidator, $('#newEmail'), $('#emailMessageId'), $(this), 6);
    });

    var mobileFormValidator = $('#mobileForm').validate({
      rules: {
        mobileMessageValue: {
          remote: {
            url: '${api}/sms/mobile/try', data: {
              mobileMessageId: function () {
                return $('#mobileMessageId').val();
              },
              mobile: function () {
                return $('#newMobile').val();
              }
            }
          }
        }
      },
      submitHandler: function (form) {
        var body = $(form).serializeJSON();
        if (body.password) {
          body.password = sm2Encrypt(body.password);
        }
        request.post(form.action, body).then(function (response) {
          var data = response.data;
          if (data == null) return;
          showSuccess();
          location.reload();
        });
      }
    });
    $('#mobileMessageButton').click(function () {
      sendMobileMessage(mobileFormValidator, $('#newMobile'), $('#mobileMessageId'), $(this), 5);
    });
  });
</script>
</body>
</html>
[/#escape]
