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