← All changes | assets/src/js/admin/mcp-api-keys.js +36 -42 4.4.0 → 4.4.8 View file →

		@@ -1,4 +1,6 @@
	1	+import * as lpUtils from '../utils.js';
	2	+
1	3	( function() {
2	4	'use strict';
3	5
4	6	const cfg = window.lpMcpApiKeysSettings || {};
		@@ -10,13 +12,13 @@
10	12	if ( ! ajaxHandle || typeof ajaxHandle.fetchAJAX !== 'function' ) {
11	13	return;
12	14	}
13	15
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' );
	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' );
19	21
20	22	const lpDataAdmin = window.lpDataAdmin || {};
21	23	const i18n = cfg.i18n || lpDataAdmin.i18n || {};
22	24	const actions = cfg.actions || {};
		@@ -62,9 +64,9 @@
62	64
63	65	if ( newList && currentList.parentNode ) {
64	66	currentList.replaceWith( newList );
65	67	}
66		- } catch ( e ) {
	68	+ } catch {
67	69	// Keep current UI state when table refresh fails.
68	70	}
69	71	};
70	72
		@@ -109,11 +111,11 @@
109	111	if ( ! elSubmit ) {
110	112	return;
111	113	}
112	114
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' );
	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' );
116	118
117	119	const dataSend = {
118	120	action: actions.create || 'mcp_create_api_key',
119	121	user_id: elUser ? elUser.value : '',
		@@ -125,13 +127,10 @@
125	127	setStatus( i18n.processing || 'Processing...', false );
126	128
127	129	runRequest( dataSend, {
128	130	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.';
	131	+ const status = response?.status || '';
	132	+ const message = response?.message || i18n.request_failed || 'Request failed.';
134	133
135	134	if ( status !== 'success' ) {
136	135	setStatus( message, true );
137	136	return;
		@@ -137,13 +136,9 @@
137	136	return;
138	137	}
139	138
140	139	setStatus( message, false );
141		- renderCredentials(
142		- response && response.data && response.data.key
143		- ? response.data.key
144		- : null
145		- );
	140	+ renderCredentials( response?.data?.key || null );
146	141
147	142	refreshKeysTable();
148	143	},
149	144	error: () => setStatus( i18n.request_failed || 'Request failed.', true ),
		@@ -151,23 +146,20 @@
151	146	} );
152	147	};
153	148
154	149	const onCopy = async ( elCopy ) => {
155		- const targetId =
156		- elCopy && elCopy.dataset && elCopy.dataset.target
157		- ? elCopy.dataset.target
158		- : '';
	150	+ const targetId = elCopy?.dataset?.target || '';
159	151	if ( ! targetId ) {
160	152	return;
161	153	}
162	154
163		- const input = document.getElementById( targetId );
	155	+ const input = document.querySelector( `#${ targetId }` );
164	156	if ( ! input ) {
165	157	return;
166	158	}
167	159
168	160	try {
169		- if ( navigator.clipboard && navigator.clipboard.writeText ) {
	161	+ if ( navigator.clipboard?.writeText ) {
170	162	await navigator.clipboard.writeText( input.value );
171	163	} else {
172	164	input.select();
173	165	input.setSelectionRange( 0, 99999 );
		@@ -174,26 +166,28 @@
174	166	document.execCommand( 'copy' );
175	167	}
176	168
177	169	setStatus( i18n.copy_success || 'Copied.', false );
178		- } catch ( e ) {
	170	+ } catch {
179	171	setStatus( i18n.copy_fallback || 'Copy this value manually.', false );
180	172	}
181	173	};
182	174
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		- } );
	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	+ ] );
199	193	} )();