{{define "user/password.html"}}
{{template "user/layout_head" .}}
{{template "user_pagehead" (dict "Icon" "bx-lock-alt" "Title" (T "user.password.title") "Desc" "")}}
{{if index .Data "Ok"}}<div class="alert alert-success">{{index .Data "Ok"}}</div>{{end}}
{{if index .Data "Err"}}<div class="alert alert-danger">{{index .Data "Err"}}</div>{{end}}
<form method="post" class="card border-0 shadow-sm p-3 mb-3" style="max-width:28rem">
  <div class="mb-3"><label class="form-label">{{T "user.password.old"}}</label><input type="password" name="old_password" class="form-control" required></div>
  <div class="mb-3"><label class="form-label">{{T "user.password.new"}}</label><input type="password" name="new_password" class="form-control" required minlength="6"></div>
  <div class="mb-3"><label class="form-label">{{T "user.password.confirm"}}</label><input type="password" name="new_password2" class="form-control" required></div>
  <button type="submit" class="btn btn-primary">{{T "user.password.save"}}</button>
</form>
{{if index .Data "OAuthReady"}}
<div class="card border-0 shadow-sm p-3" style="max-width:28rem" id="user-oauth-bind">
  <h3 class="h6 mb-2"><i class="bx bx-link-alt me-1"></i>{{T "oauth.bind_title"}}</h3>
  <p class="text-muted small mb-2">{{T "oauth.bind_hint"}}</p>
  <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>
<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.BootstrapModal && typeof window.BootstrapModal.load === 'function') return window.BootstrapModal.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.BootstrapModal && typeof window.BootstrapModal.close === 'function') { window.BootstrapModal.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}}
{{template "user/layout_foot" .}}
{{end}}