fixes #2355 implement API key management system

- Added API key get, creation, editing, and revocation methods. - Updated the profile template to include API key management features. - Updated the database schema to support the new API key system, including additional fields for key management. - Added client-side JavaScript functionality to handle API key operations and display responses. - Update tools/htm.ws with the new way to authenticate. - Restriction of certain api methods when used with an api key - Backward compatibility with older apps
2026-06-02 04:15:05 +02:00 · 2025-06-09 20:35:57 +02:00
parent 2624be1c90
commit ae740ba3af
20 changed files with 1937 additions and 102 deletions
@@ -10,23 +10,14 @@ $(function() {
      // close
      element.style.maxHeight = element.scrollHeight + 'px';
      void element.offsetHeight;
-      element.style.maxHeight = '0px';
+      element.style.maxHeight = '1px';
      selector.removeClass('open');
      $(this).addClass('close');
    } else {
      // open
      selector.addClass('open');
-      element.style.maxHeight = element.scrollHeight + 'px';
+      resetSection(display);
      $(this).removeClass('close');
-      if ('account-display' !== display) {
-        setTimeout(() => {
-          const el = $(`#${display.split('-')[0]}-section`).get(0);
-          el.scrollIntoView({
-              behavior: 'smooth',
-              block: 'start'
-            });
-          }, 200);
-      }
    }
  });

@@ -85,7 +76,6 @@ $(function() {
  });

  standardSaveSelector.forEach((selector, i) => {
-    // console.log(i, selector);
    $(selector).on('click', function() {
      const values = {};
      $(`#${i}-section`).find('input, textarea, select').each((i, element) => {
@@ -126,9 +116,79 @@ $(function() {
    $('#opt_comment').prop('checked', preferencesDefaultValues.opt_comment);
    $('#opt_hits').prop('checked', preferencesDefaultValues.opt_hits);
  });
+
+  // API KEY BELOW
+  if (!can_manage_api) {
+    $('.can-manage').hide();
+    $('#cant_manage_api').show();
+    return;
+  };  
+  $('#new_apikey').on('click', function() {
+    openApiModal();
+  });
+  
+  $('#close_api_modal, #cancel_apikey').on('click', function() {
+    closeApiModal();
+  });
+
+  $('#close_api_modal_edit').on('click', function() {
+    closeApiEditModal();
+  });
+
+  $('#close_api_modal_revoke, #cancel_api_revoke').on('click', function() {
+    closeApiRevokeModal();
+  });
+
+  $('#show_expired_list').on('click', function() {
+    const api_list_expired = $('#api_key_list_expired');
+    const isOpen = $(this).data('show');
+    if(!isOpen) {
+      api_list_expired.get(0).style.maxHeight = 'max-content';
+      $(this).text(str_hide_expired);
+    } else {
+      api_list_expired.get(0).style.maxHeight = '0';
+      $(this).text(str_show_expired);
+    }
+
+    $(this).data('show', !isOpen);
+
+    resetSection('apikey-display', false, true);
+  });
+  
+  $(window).on('keydown', function(e) {
+    const haveApiModal = $('#api_modal').is(':visible');
+    const haveApiEditModal = $('#api_modal_edit').is(':visible');
+    const haveApiRevokeModal = $('#api_modal_revoke').is(':visible');
+    if (haveApiModal && e.key === 'Escape') {
+      closeApiModal();
+    }
+    if (haveApiEditModal && e.key === 'Escape') {
+      closeApiEditModal();
+    }
+    if (haveApiRevokeModal && e.key === 'Escape') {
+      closeApiRevokeModal();
+    }
+  });
+  
+  $('select[name="api_expiration"]').on('change', function() {
+    const custom_date = $('#api_custom_date');
+    const value = $(this).val();
+    if ('custom' === value) {
+      custom_date.css('display', 'flex');
+    } else {
+      custom_date.css('display', 'none');
+    }
+    $('#error_api_key_date').hide();
+  });
+
+  $('#api_expiration_date').on('change', function() {
+    $('#error_api_key_date').hide();
+  });
+  
+  getAllApiKeys();
 });

-function setInfos(params, method='pwg.users.setMyInfo') {
+function setInfos(params, method='pwg.users.setMyInfo', callback=null, errCallback=null) {
  // for debug
  // console.log('setInfos', params);
  const all_params = {
@@ -142,15 +202,359 @@ function setInfos(params, method='pwg.users.setMyInfo') {
    data: all_params,
    success: (data) => {
      if (data.stat == 'ok') {
+        if (typeof callback === 'function') {
+          callback(data.result);
+          return;
+        };
        pwgToaster({ text: data.result, icon: 'success' });
      } else if (data.stat == 'fail') {
        pwgToaster({ text: data.message, icon: 'error' });
      } else {
-        pwgToaster({ text: 'Error try later...', icon: 'error' });
+        pwgToaster({ text: str_handle_error, icon: 'error' });
+      }
+      if (typeof callback === 'function') {
+        errCallback(data);
+        return;
      }
    },
    error: function (e) {
-      pwgToaster({ text: e.responseJSON?.message ?? 'Server Internal Error try later...', icon: 'error' });
+      pwgToaster({ text: e.responseJSON?.message ?? str_handle_error, icon: 'error' });
+      if (typeof callback === 'function') {
+        errCallback(e);
+        return;
+      }
    },
  });
-}
+}
+
+function getAllApiKeys(reset = false) {
+  $.ajax({
+    url: 'ws.php?format=json&method=pwg.users.api_key.get',
+    type: "POST",
+    dataType: 'json',
+    data: {
+      pwg_token: PWG_TOKEN
+    },
+    success: function(res) {
+      if (res.stat == 'ok') {
+        if (typeof res.result === 'string') {
+          // No keys
+        } else {
+          AddApiLine(res.result, reset);
+        }
+      }
+    },
+    error: function(e) {
+      pwgToaster({ text: e.responseJSON?.message ?? str_handle_error + 'getAllApiKeys', icon: 'error' });
+    }
+  });
+}
+
+function AddApiLine(lines, reset) {
+  const api_list = $('#api_key_list');
+  const api_list_expired = $('#api_key_list_expired');
+
+  $('#api_key_list .api-tab-line:not(.template-api), #api_key_list .api-tab-collapse:not(.template-api)').remove();
+  $('#api_key_list_expired .api-tab-line:not(.template-api), #api_key_list_expired .api-tab-collapse:not(.template-api)').remove();
+
+  lines.forEach((line, i) => {
+    const api_line = $('#api_line').clone();
+    const api_collapse = $('#api_collapse').clone();
+    const tmp_id = line.auth_key.slice(24, 34);
+
+    api_line.removeClass('template-api').addClass('api-tab');
+    api_line.attr('id', `api_${tmp_id}`);
+    api_line.find('.icon-collapse').data('api', tmp_id);
+    api_line.find('.api_name').text(line.apikey_name).attr('title', line.apikey_name);
+    api_line.find('.api_creation').text(line.created_on_format);
+    api_line.find('.api_last_use').text(line.last_used_on_since).attr('title', line.last_used_on_since);
+    api_line.find('.api_expiration').text(line.expiration);
+    api_line.find('.api-icon-action').attr('data-api', `api_${tmp_id}`);
+    api_line.find('.api-icon-action').attr('data-pkid', line.auth_key);
+
+    api_collapse.attr('id', `api_collapse_${tmp_id}`);
+    api_collapse.removeClass('template-api');
+    api_collapse.find('.api_key').text(line.auth_key);
+    api_collapse.find('.icon-clone').attr({
+      'data-copy': line.auth_key,
+      'data-success': `api_copy_success_${tmp_id}`
+    });
+    api_collapse.find('.api-copy').attr('id', `api_copy_success_${tmp_id}`);
+
+    if (!line.revoked_on && !line.is_expired) {
+      api_list.append(api_line);
+      api_line.after(api_collapse);
+    } else {
+      api_list_expired.append(api_line);
+      api_line.after(api_collapse);
+      api_line.find('.api-icon-action').remove();
+      if (line.is_expired) {
+        api_line.find('.api_expiration').html(`<i class="gallery-icon-skull api-skull"></i> <span data-tooltip="${line.expired_on_format}">${line.expired_on_since}</span>`);
+      } else {
+        api_line.find('.api_expiration').html(`<i class="gallery-icon-skull api-skull"></i> <span>${/\d/.test(line.revoked_on_since) ? line.revoked_on_since : no_time_elapsed}</span> <i data-tooltip="${line.revoked_on_message}" class="icon-info-circled-1 api-info"></i>`);
+      }
+    }
+    
+  });
+
+  apiLineEvent();
+  if (reset) {
+    resetSection('apikey-display');
+  }
+}
+
+function apiLineEvent() {
+  $('.icon-collapse').off('click').on('click', function() {
+    const api_collapse = $(`#api_collapse_${$(this).data('api')}`);
+    const api_line = $(`#api_${$(this).data('api')}`);
+
+    if (api_collapse.is(':visible')) {
+      api_collapse.removeClass('open');
+      api_line.removeClass('open');
+      api_line.find('.icon-collapse').addClass('close');
+      api_collapse.css('display', 'none');
+      api_collapse.find('.api-copy').addClass('api-hide');
+    } else {
+      api_collapse.addClass('open');
+      api_line.addClass('open');
+      api_line.find('.icon-collapse').removeClass('close');
+      api_collapse.css('display', 'grid');
+    }
+
+    resetSection('apikey-display', false, true);
+  });
+
+  $('.api-tab-collapse .icon-clone').off('click').on('click', function() {
+    const data_to_copy = $(this).data('copy');
+    const selector = $(this).data('success');
+    copyToClipboard(data_to_copy, str_copy_key_id, `#${selector}`);
+  });
+
+  $('.api-tab-line .edit-mode').off('click').on('click', function() {
+    const selector = $(this).parent().data('api');
+    openApiEditModal(`#${selector}`);
+  });
+
+  $('.api-tab-line .delete-mode').off('click').on('click', function() {
+    const selector = $(this).parent().data('api');
+    openApiRevokeModal(`#${selector}`);
+  });
+
+}
+
+function resetSection(selector, scroll = true, maxContent = false) {
+  const el = $(`#${selector}`);
+  const element = el.get(0);
+  const scrollH = maxContent ? 'max-content' : element.scrollHeight + 'px';
+  element.style.maxHeight = scrollH;
+
+  if ('account-display' !== selector && scroll) {
+    setTimeout(() => {
+      const el = $(`#${selector.split('-')[0]}-section`).get(0);
+      el.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start'
+      });
+    }, 200);
+  }
+}
+
+function openApiModal() {
+  $('#api_modal').fadeIn();
+  $('#api_key_name').trigger('focus');
+  saveApiKeyEvent();
+}
+
+function closeApiModal() {
+  $('#api_modal').fadeOut(() => {
+    $('#api_key_name').val('');
+    $('select[name="api_expiration"]').val(selected_date).trigger('change');
+    $('#api_expiration_date').val('');
+
+    $('#api_secret_key').val('');
+    $('#retrieves_keyapi').hide();
+    $('#generate_keyapi').show();
+    $('#done_apikey').attr('disabled', true);
+    $('#api_key_copy_success, #api_id_copy_success').addClass('api-hide');
+  });
+  unbindApiKeyEvents();
+}
+
+function successApiModal(secret, id) {
+  $('#api_secret_key').val(secret);
+  $('#api_id_key').val(id);
+
+  $('#generate_keyapi').hide();
+  $('#retrieves_keyapi').fadeIn();
+
+  $('#api_secret_copy').off('click').on('click', function() {
+    const copy = copyToClipboard(secret, str_copy_key_secret, '#api_key_copy_success');
+    
+    $('#done_apikey').removeAttr('disabled');
+    $('#done_apikey').on('click', closeApiModal);
+  });
+
+  $('#api_id_copy').off('click').on('click', function() {
+    const copy = copyToClipboard(id, str_copy_key_id, '#api_id_copy_success');
+  });
+}
+
+//api edit modal
+function openApiEditModal(selector) {
+  const value = $(selector).find('.api_name').text();
+  const pkid = $(selector).find('.api-icon-action').data('pkid');
+  $('#api_key_edit').val(value);
+  $('#api_modal_edit').fadeIn();
+  $('#api_key_edit').trigger('focus');
+  saveApiEditEvents(pkid);
+}
+
+function closeApiEditModal() {
+  $('#api_modal_edit').fadeOut(() => {
+    $('#api_key_edit').val('');
+    unbindApiEditEvents();
+  });
+}
+
+function saveApiEditEvents(pkid) {
+  $('#save_api_edit').on('click', function() {
+    const value = $('#api_key_edit').val();
+
+    if ('' == value) {
+      $('#error_api_key_edit').show();
+      return;
+    }
+    setInfos(
+      {
+        pkid,
+        key_name: value,
+      },
+      'pwg.users.api_key.edit', 
+      (res) => {
+        pwgToaster({ text: str_api_edited, icon: 'success' });
+        getAllApiKeys(true);
+        closeApiEditModal();
+      }
+    );
+  });
+}
+
+function unbindApiEditEvents() {
+  $('#save_api_edit').off('click');
+}
+
+// api revoke modal
+function openApiRevokeModal(selector) {
+  const apiName = $(selector).find('.api_name').text();
+  const pkid = $(selector).find('.api-icon-action').data('pkid');
+  const text = sprintf(str_revoke_key, apiName);
+  $('#api_modal_revoke_title').text(text);
+
+  $('#api_modal_revoke').fadeIn();
+  saveApiRevokeEvents(pkid);
+}
+
+function closeApiRevokeModal() {
+  $('#api_modal_revoke').fadeOut(() => {
+    $('#api_modal_revoke_title').text('');
+    unbindApiRevokeEvents();
+  });
+}
+
+function saveApiRevokeEvents(pkid) {
+  $('#revoke_api_key').on('click', function() {
+    setInfos(
+      {
+        pkid,
+      },
+      'pwg.users.api_key.revoke', 
+      (res) => {
+        pwgToaster({ text: str_api_revoked, icon: 'success' });
+        getAllApiKeys(true);
+        closeApiRevokeModal();
+      }
+    );
+  });
+}
+
+function unbindApiRevokeEvents() {
+  $('#revoke_api_key').off('click');
+}
+
+function copyToClipboard(copy, message, selector = null) {
+  if (window.isSecureContext && navigator.clipboard) {
+    navigator.clipboard.writeText(copy);
+    if (selector) {
+      $(selector).removeClass('api-hide');
+      // auto hide
+      // setTimeout(() => {
+      //   $(selector).addClass('api-hide');
+      // }, 1000);
+    } else {
+      pwgToaster({ text: message, icon: 'success' });
+    }
+    return true;
+  } else {
+    pwgToaster({ text: str_cant_copy, icon: 'error' });
+    return false;
+  }
+}
+
+function saveApiKeyEvent() {
+  const handler = () => {
+    const api_name = $('#api_key_name').val();
+    let api_duration = $('select[name="api_expiration"]').val();
+    
+    if (api_name == '') {
+      $('#error_api_key_name').show();
+      return;
+    }
+
+    if ('custom' === api_duration && !$('#api_expiration_date').val()) {
+      $('#error_api_key_date').show();
+      return;
+    }
+
+
+    unbindApiKeyEvents();
+
+    if ('custom' === api_duration) {
+      const today = new Date();
+      const custom_date = new Date($('#api_expiration_date').val());
+      const one_day = 1000 * 60 * 60 * 24;
+      const days = Math.ceil((custom_date.getTime() - today.getTime() ) / (one_day));
+      api_duration = days;
+    } else {
+      api_duration = Number(api_duration) ?? 1;
+    }
+
+    setInfos(
+      {
+        key_name: api_name,
+        duration: api_duration
+      },
+      'pwg.users.api_key.create', 
+      (res) => {
+        pwgToaster({ text: str_api_added, icon: 'success' });
+        getAllApiKeys(true);
+        successApiModal(res.apikey_secret, res.auth_key);
+      },
+      (err) => {
+        saveApiKeyEvent();
+      }
+    );
+  }
+
+  $('#save_apikey').on('click.apikey', handler);
+  $(window).on('keydown.apikey', function(e) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handler();
+    }
+  })
+}
+
+function unbindApiKeyEvents() {
+  $('#api_modal').find('*').addBack().off('.apikey');
+  $(window).off('.apikey');
+}