← All changes | assets/src/js/admin/mcp-api-keys.js +193 -199 4.3.9 → 4.4.8 View file →

		@@ -1,199 +1,193 @@
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		-} )();
	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	+} )();