mediawiki.special.block: Set up "Additional details" fields

Added "Additional details" fields.

Added 'block' function that will be responsible for submitting to API:Block

Modified userLook field so that the value is the username since the API
needs a username rather than a userid.

Bug: T361148
Change-Id: I1e77a63133b8c8ea043c680ddb8af0e044a6fb31

languages/i18n/en.json

@@ -2878,6 +2878,7 @@
 	"block-details-description": "What actions do you want to block?",
 	"block-expiry": "Expiration:",
 	"block-options": "Additional options:",
+	"block-options-description": "These options may help you monitor this user, in order to prevent further issues.",
 	"block-reason": "Reason:",
 	"block-user-label": "Which user do you want to block?",
 	"block-user-description": "A user can be a username, IP address, or an IP range.",

languages/i18n/qqq.json

@@ -3136,6 +3136,7 @@
 	"block-details-description": "Description for the checkboxes for specifying the sitewide block details on [[Special:Block]]",
 	"block-expiry": "Label for the input for specifying the expiry time of a block on [[Special:Block]]",
 	"block-options": "Label for the checkboxes for specifying additional options for a block on [[Special:Block]]",
+	"block-options-description": "Description for the checkboxes for specifying additional options for a block on [[Special:Block]]",
 	"block-reason": "Label for the input for specifying the reason for a block on [[Special:Block]]\n{{Identical|Reason}}",
 	"block-user-label": "Label for the input for specifying the user of a block on [[Special:Block]]",
 	"block-user-description": "Description for the input for specifying the user of a block on [[Special:Block]]",

resources/Resources.php

@@ -2227,6 +2227,8 @@ return [
 		'messages' => [
 			'block-details',
 			'block-details-description',
+			'block-options',
+			'block-options-description',
 			'block-user-label',
 			'block-user-description',
 			'block-user-placeholder',
@@ -2234,7 +2236,10 @@ return [
 			'htmlform-optional-flag',
 			'ipbcreateaccount',
 			'ipbemailban',
-			'ipb-disableusertalk'
+			'ipb-disableusertalk',
+			'ipbenableautoblock',
+			'ipbwatchuser',
+			'ipb-hardblock'
 		],
 	],
 	'mediawiki.special.changeslist' => [

resources/src/mediawiki.special.block/SpecialBlock.vue

@@ -12,11 +12,16 @@
 			:label="$i18n( 'block-details' ).text()"
 			:description="$i18n( 'block-details-description' ).text()"
 		></block-details-field>
+		<block-details-field
+			v-model="additionalDetailsSelected"
+			:checkboxes="additionalDetailsOptions"
+			:label="$i18n( 'block-options' ).text()"
+			:description="$i18n( 'block-options-description' ).text()"
+		></block-details-field>
 		<cdx-button
 			action="progressive"
 			weight="primary"
-			@click="saveBlock"
-		>
+			@click="handleSubmit">
 			{{ $i18n( 'block-save' ).text() }}
 		</cdx-button>
 	</div>
@@ -47,7 +52,6 @@ module.exports = defineComponent( {
 		CdxButton
 	},
 	setup() {
-		const form = document.querySelector( '.mw-htmlform' );
 		const targetUser = ref( '' );
 		const blockAllowsUTEdit = mw.config.get( 'blockAllowsUTEdit' ) || false;
 		const blockEmailBan = mw.config.get( 'blockAllowsEmailBan' ) || false;
@@ -73,14 +77,86 @@ module.exports = defineComponent( {
 			} );
 		}
 
-		function saveBlock() {
-			form.submit();
+		const additionalDetailsSelected = ref( [] );
+		const additionalDetailsOptions = [
+			{
+				label: mw.message( 'ipbenableautoblock' ),
+				value: 'wpAutoBlock',
+				disabled: false
+			},
+			{
+				label: mw.message( 'ipbwatchuser' ),
+				value: 'wpWatch',
+				disabled: false
+			},
+			{
+				label: mw.message( 'ipb-hardblock' ),
+				value: 'wpHardBlock',
+				disabled: false
+			}
+		];
+
+		function handleSubmit( event ) {
+			event.preventDefault();
+
+			// TODO: Implement validation
+
+			block();
+		}
+
+		/*
+		 * Send block.
+		 *
+		 * @return {jQuery.Promise}
+		 */
+		function block() {
+
+			const params = {
+				action: 'block',
+				format: 'json',
+				user: targetUser.value,
+				expiry: '2025-02-25T07:27:50Z',
+				reason: 'API Test'
+			};
+
+			if ( blockDetailsSelected.value.indexOf( 'wpCreateAccount' ) !== -1 ) {
+				params.nocreate = 1;
+			}
+
+			if ( blockDetailsSelected.value.indexOf( 'wpDisableEmail' ) !== -1 ) {
+				params.noemail = 1;
+			}
+
+			if ( blockDetailsSelected.value.indexOf( 'wpDisableUTEdit' ) !== -1 ) {
+				params.allowusertalk = 1;
+			}
+
+			if ( additionalDetailsSelected.value.indexOf( 'wpAutoBlock' ) !== -1 ) {
+				params.autoblock = 1;
+			}
+
+			if ( additionalDetailsSelected.value.indexOf( 'wpWatch' ) !== -1 ) {
+				params.watchuser = 1;
+			}
+
+			if ( additionalDetailsSelected.value.indexOf( 'wpHardBlock' ) !== -1 ) {
+				params.nocreate = 1;
+			}
+
+			const api = new mw.Api();
+
+			return api.postWithToken( 'csrf', params )
+				.done( () => {
+
+				} );
 		}
 		return {
 			targetUser,
-			saveBlock,
+			handleSubmit,
+			blockDetailsOptions,
 			blockDetailsSelected,
-			blockDetailsOptions
+			additionalDetailsOptions,
+			additionalDetailsSelected
 		};
 	}
 } );

resources/src/mediawiki.special.block/components/BlockDetailsOptions.vue

@@ -5,6 +5,7 @@
 			:key="'checkbox-' + checkbox.value"
 			v-model="wrappedModel"
 			:input-value="checkbox.value"
+			:disabled="checkbox.disabled"
 		>
 			{{ checkbox.label }}
 		</cdx-checkbox>

resources/src/mediawiki.special.block/components/UserLookup.vue

@@ -99,7 +99,7 @@ module.exports = defineComponent( {
 					const results = data.allusers.map( ( result ) => {
 						return {
 							label: result.name,
-							value: result.userid
+							value: result.name
 						};
 					} );