| 1 |
import * as lpUtils from '../utils.js'; |
| 2 |
|
| 3 |
( function() { |
| 4 |
'use strict'; |
| 5 |
|
| 6 |
const cfg = window.lpMcpApiKeysSettings || {}; |
| 7 |
if ( ! cfg.is_mcp_keys_section ) { |
| 8 |
return; |
| 9 |
} |
| 10 |
|
| 11 |
const ajaxHandle = window.lpAJAXG; |
| 12 |
if ( ! ajaxHandle || typeof ajaxHandle.fetchAJAX !== 'function' ) { |
| 13 |
return; |
| 14 |
} |
| 15 |
|
| 16 |
const elSubmit = document.querySelector( '#lp-mcp-key-submit' ); |
| 17 |
const elStatus = document.querySelector( '#lp-mcp-key-status' ); |
| 18 |
const elReveal = document.querySelector( '#lp-mcp-key-reveal' ); |
| 19 |
const elConsumerKey = document.querySelector( '#lp-mcp-consumer-key' ); |
| 20 |
const elConsumerSecret = document.querySelector( '#lp-mcp-consumer-secret' ); |
| 21 |
|
| 22 |
const lpDataAdmin = window.lpDataAdmin || {}; |
| 23 |
const i18n = cfg.i18n || lpDataAdmin.i18n || {}; |
| 24 |
const actions = cfg.actions || {}; |
| 25 |
|
| 26 |
const setStatus = ( message = '', isError = false ) => { |
| 27 |
if ( ! elStatus ) { |
| 28 |
return; |
| 29 |
} |
| 30 |
|
| 31 |
elStatus.textContent = message; |
| 32 |
elStatus.style.color = isError ? '#b32d2e' : '#1e1e1e'; |
| 33 |
}; |
| 34 |
|
| 35 |
const setLoadingState = ( el, isLoading ) => { |
| 36 |
if ( ! el ) { |
| 37 |
return; |
| 38 |
} |
| 39 |
|
| 40 |
el.disabled = !! isLoading; |
| 41 |
el.classList.toggle( 'loading', !! isLoading ); |
| 42 |
}; |
| 43 |
|
| 44 |
const refreshKeysTable = async () => { |
| 45 |
const currentList = document.querySelector( '.lp-mcp-key-list' ); |
| 46 |
if ( ! currentList ) { |
| 47 |
return; |
| 48 |
} |
| 49 |
|
| 50 |
try { |
| 51 |
const response = await fetch( window.location.href, { |
| 52 |
method: 'GET', |
| 53 |
credentials: 'same-origin', |
| 54 |
cache: 'no-store', |
| 55 |
} ); |
| 56 |
if ( ! response.ok ) { |
| 57 |
return; |
| 58 |
} |
| 59 |
|
| 60 |
const html = await response.text(); |
| 61 |
const parser = new DOMParser(); |
| 62 |
const doc = parser.parseFromString( html, 'text/html' ); |
| 63 |
const newList = doc.querySelector( '.lp-mcp-key-list' ); |
| 64 |
|
| 65 |
if ( newList && currentList.parentNode ) { |
| 66 |
currentList.replaceWith( newList ); |
| 67 |
} |
| 68 |
} catch { |
| 69 |
// Keep current UI state when table refresh fails. |
| 70 |
} |
| 71 |
}; |
| 72 |
|
| 73 |
const renderCredentials = ( keyData ) => { |
| 74 |
if ( |
| 75 |
! keyData || |
| 76 |
! keyData.consumer_key || |
| 77 |
! keyData.consumer_secret || |
| 78 |
! elConsumerKey || |
| 79 |
! elConsumerSecret || |
| 80 |
! elReveal |
| 81 |
) { |
| 82 |
return; |
| 83 |
} |
| 84 |
|
| 85 |
elConsumerKey.value = keyData.consumer_key; |
| 86 |
elConsumerSecret.value = keyData.consumer_secret; |
| 87 |
elReveal.style.display = 'block'; |
| 88 |
}; |
| 89 |
|
| 90 |
const runRequest = ( dataSend, callbacks = {} ) => { |
| 91 |
ajaxHandle.fetchAJAX( dataSend, { |
| 92 |
success: ( response ) => { |
| 93 |
if ( typeof callbacks.success === 'function' ) { |
| 94 |
callbacks.success( response ); |
| 95 |
} |
| 96 |
}, |
| 97 |
error: ( error ) => { |
| 98 |
if ( typeof callbacks.error === 'function' ) { |
| 99 |
callbacks.error( error ); |
| 100 |
} |
| 101 |
}, |
| 102 |
completed: () => { |
| 103 |
if ( typeof callbacks.completed === 'function' ) { |
| 104 |
callbacks.completed(); |
| 105 |
} |
| 106 |
}, |
| 107 |
} ); |
| 108 |
}; |
| 109 |
|
| 110 |
const onSubmitKey = () => { |
| 111 |
if ( ! elSubmit ) { |
| 112 |
return; |
| 113 |
} |
| 114 |
|
| 115 |
const elUser = document.querySelector( '#lp-mcp-key-user' ); |
| 116 |
const elDescription = document.querySelector( '#lp-mcp-key-description' ); |
| 117 |
const elPermissions = document.querySelector( '#lp-mcp-key-permissions' ); |
| 118 |
|
| 119 |
const dataSend = { |
| 120 |
action: actions.create || 'mcp_create_api_key', |
| 121 |
user_id: elUser ? elUser.value : '', |
| 122 |
description: elDescription ? elDescription.value : '', |
| 123 |
permissions: elPermissions ? elPermissions.value : 'read', |
| 124 |
}; |
| 125 |
|
| 126 |
setLoadingState( elSubmit, true ); |
| 127 |
setStatus( i18n.processing || 'Processing...', false ); |
| 128 |
|
| 129 |
runRequest( dataSend, { |
| 130 |
success: ( response ) => { |
| 131 |
const status = response?.status || ''; |
| 132 |
const message = response?.message || i18n.request_failed || 'Request failed.'; |
| 133 |
|
| 134 |
if ( status !== 'success' ) { |
| 135 |
setStatus( message, true ); |
| 136 |
return; |
| 137 |
} |
| 138 |
|
| 139 |
setStatus( message, false ); |
| 140 |
renderCredentials( response?.data?.key || null ); |
| 141 |
|
| 142 |
refreshKeysTable(); |
| 143 |
}, |
| 144 |
error: () => setStatus( i18n.request_failed || 'Request failed.', true ), |
| 145 |
completed: () => setLoadingState( elSubmit, false ), |
| 146 |
} ); |
| 147 |
}; |
| 148 |
|
| 149 |
const onCopy = async ( elCopy ) => { |
| 150 |
const targetId = elCopy?.dataset?.target || ''; |
| 151 |
if ( ! targetId ) { |
| 152 |
return; |
| 153 |
} |
| 154 |
|
| 155 |
const input = document.querySelector( `#${ targetId }` ); |
| 156 |
if ( ! input ) { |
| 157 |
return; |
| 158 |
} |
| 159 |
|
| 160 |
try { |
| 161 |
if ( navigator.clipboard?.writeText ) { |
| 162 |
await navigator.clipboard.writeText( input.value ); |
| 163 |
} else { |
| 164 |
input.select(); |
| 165 |
input.setSelectionRange( 0, 99999 ); |
| 166 |
document.execCommand( 'copy' ); |
| 167 |
} |
| 168 |
|
| 169 |
setStatus( i18n.copy_success || 'Copied.', false ); |
| 170 |
} catch { |
| 171 |
setStatus( i18n.copy_fallback || 'Copy this value manually.', false ); |
| 172 |
} |
| 173 |
}; |
| 174 |
|
| 175 |
lpUtils.eventHandlers( 'click', [ |
| 176 |
{ |
| 177 |
selector: '.lp-mcp-copy', |
| 178 |
callBack: ( args ) => { |
| 179 |
const { target } = args; |
| 180 |
const elCopy = target.closest( '.lp-mcp-copy' ); |
| 181 |
if ( elCopy ) { |
| 182 |
onCopy( elCopy ); |
| 183 |
} |
| 184 |
}, |
| 185 |
}, |
| 186 |
{ |
| 187 |
selector: '#lp-mcp-key-submit', |
| 188 |
callBack: () => { |
| 189 |
onSubmitKey(); |
| 190 |
}, |
| 191 |
}, |
| 192 |
] ); |
| 193 |
} )(); |
| 194 |
|
