{{define "user/password.html"}}
{{template "user/layout_head" .}}
<div class="ut-shell-page ut-shell-page--narrow">
{{template "user_pagehead" (dict "Icon" "bx-lock-alt" "Title" (Tp "user_password" "user_password_title") "Desc" (Tp "user_password" "user_password_page_hint"))}}

{{with index .Data "OkMsg"}}<div class="alert alert-success alert-dismissible fade show py-2 mb-3"><button type="button" class="btn-close" data-bs-dismiss="alert"></button>{{.}}</div>{{end}}
{{with index .Data "ErrMsg"}}<div class="alert alert-danger alert-dismissible fade show py-2 mb-3"><button type="button" class="btn-close" data-bs-dismiss="alert"></button>{{.}}</div>{{end}}

<div class="ut-section">
  <div class="ut-section__head">
    <div class="ut-section__head-icon ut-section__head-icon--violet"><i class="bx bx-key"></i></div>
    <div class="ut-section__head-text">
      <h2 class="ut-section__head-title">{{Tp "user_password" "user_password_title"}}</h2>
      <p class="ut-section__head-sub mb-0">{{Tp "user_password" "user_password_hint"}}</p>
    </div>
  </div>
  <div class="ut-section__body">
    <form method="post" action="/user/password" class="ut-inline-form" autocomplete="off">
      <div class="mb-3">
        <label class="form-label" for="pwdOld">{{Tp "user_password" "user_password_old"}}</label>
        <input type="password" class="form-control" id="pwdOld" name="old_password" required autocomplete="current-password">
      </div>
      <div class="mb-3">
        <label class="form-label" for="pwdNew">{{Tp "user_password" "user_password_new"}}</label>
        <input type="password" class="form-control" id="pwdNew" name="new_password" required minlength="6" autocomplete="new-password">
      </div>
      <div class="mb-3">
        <label class="form-label" for="pwdNew2">{{Tp "user_password" "user_password_new2"}}</label>
        <input type="password" class="form-control" id="pwdNew2" name="new_password2" required minlength="6" autocomplete="new-password">
      </div>
      <button type="submit" class="btn btn-primary btn-sm"><i class="bx bx-check-shield me-1"></i>{{Tp "user_password" "user_password_submit"}}</button>
    </form>
  </div>
</div>

{{if index .Data "OAuthReady"}}
<div class="ut-section mt-3" id="user-oauth-bind">
  <div class="ut-section__head">
    <div class="ut-section__head-icon ut-section__head-icon--indigo"><i class="bx bx-link-alt"></i></div>
    <div class="ut-section__head-text">
      <h2 class="ut-section__head-title">{{T "oauth.bind_title"}}</h2>
      <p class="ut-section__head-sub mb-0">{{T "oauth.bind_hint"}}</p>
    </div>
  </div>
  <div class="ut-section__body">
    <div id="oauthBindFlash" class="mb-2"></div>
    <div class="d-flex flex-wrap align-items-center gap-2">
      {{if index .Data "OAuthLinked"}}
      <span class="text-success" id="oauthBindStatus"><i class="bx bx-check-circle"></i> {{T "oauth.status_linked"}}{{if index .Data "OAuthProvider"}} — {{index .Data "OAuthProvider"}}{{end}}</span>
      <button type="button" class="btn btn-outline-danger btn-sm" id="btnOAuthUnlink">{{T "oauth.unlink_action"}}</button>
      {{else}}
      <span class="text-muted" id="oauthBindStatus">{{T "oauth.status_none"}}</span>
      <button type="button" class="btn btn-primary btn-sm" id="btnOAuthBind" data-href="/oauth/start?intent=link&amp;redirect={{urlquery "/user/password"}}">{{T "oauth.bind_action"}}</button>
      {{end}}
    </div>
  </div>
</div>
<script>
(function ($) {
  var i18n = {
    unlinkConfirm: {{jsString (T "oauth.unlink_confirm")}},
    unlinkOk: {{jsString (T "oauth.unlink_ok")}},
    bindOk: {{jsString (T "oauth.bind_ok")}},
    binding: {{jsString (T "oauth.binding")}},
    unlinking: {{jsString (T "oauth.unlinking")}},
    failed: {{jsString (T "oauth.err_failed")}}
  };
  function flash(msg, ok) {
    var $box = $('#oauthBindFlash');
    if (!$box.length || !msg) return;
    $box.html('<div class="alert alert-' + (ok ? 'success' : 'danger') + ' py-2 mb-0"></div>');
    $box.find('.alert').text(msg);
  }
  function stripQ() {
    if (!window.history || !window.history.replaceState) return;
    var u = new URL(window.location.href);
    if (!u.searchParams.has('oauth_link') && !u.searchParams.has('oauth_err')) return;
    u.searchParams.delete('oauth_link');
    u.searchParams.delete('oauth_err');
    var q = u.searchParams.toString();
    window.history.replaceState({}, '', u.pathname + (q ? ('?' + q) : '') + (u.hash || ''));
  }
  function loadMask() {
    if (window.myModal && typeof window.myModal.load === 'function') return window.myModal.load();
    if (window.layer && typeof window.layer.load === 'function') return window.layer.load(2);
    return null;
  }
  function closeMask(id) {
    if (id == null) return;
    if (window.myModal && typeof window.myModal.close === 'function') { window.myModal.close(id); return; }
    if (window.layer && typeof window.layer.close === 'function') window.layer.close(id);
  }
  {{if index .Data "OAuthBindOk"}}
  $(function () {
    if (window.showUserToast) showUserToast(true, i18n.bindOk);
    flash(i18n.bindOk, true);
    stripQ();
  });
  {{end}}
  {{if index .Data "OAuthErrMsg"}}
  $(function () {
    var errMsg = {{jsString (index .Data "OAuthErrMsg")}};
    if (window.showUserToast) showUserToast(false, errMsg);
    flash(errMsg, false);
    stripQ();
  });
  {{end}}
  $('#btnOAuthBind').on('click', function () {
    var href = $(this).attr('data-href');
    if (!href) return;
    $(this).prop('disabled', true);
    flash(i18n.binding, true);
    loadMask();
    window.setTimeout(function () { window.location.href = href; }, 120);
  });
  $('#btnOAuthUnlink').on('click', function () {
    var runUnlink = function () {
      var $btn = $('#btnOAuthUnlink').prop('disabled', true);
      flash(i18n.unlinking, true);
      var lid = loadMask();
      $.ajax({
        url: '/api/user/oauth/unlink',
        type: 'POST',
        dataType: 'json',
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
      }).done(function (res) {
        closeMask(lid);
        if (res && res.success) {
          if (window.showUserToast) showUserToast(true, res.message || i18n.unlinkOk);
          flash(res.message || i18n.unlinkOk, true);
          window.setTimeout(function () { window.location.reload(); }, 450);
        } else {
          $btn.prop('disabled', false);
          var m = (res && res.message) || i18n.failed;
          if (window.showUserToast) showUserToast(false, m);
          flash(m, false);
        }
      }).fail(function (xhr) {
        closeMask(lid);
        $btn.prop('disabled', false);
        var m = (xhr.responseJSON && xhr.responseJSON.message) || i18n.failed;
        if (window.showUserToast) showUserToast(false, m);
        flash(m, false);
      });
    };
    var Modal = window.SupfileModal || window.myModal || window.POModal || window.BootstrapModal || window.layer;
    if (Modal && typeof Modal.confirm === 'function') {
      Modal.confirm(i18n.unlinkConfirm, { icon: 3 }).then(function (ok) { if (ok) runUnlink(); });
    }
  });
})(jQuery);
</script>
{{end}}
</div>
{{template "user/layout_foot" .}}
{{end}}