Convert Extension:UserAgreement to use OOUI

Bug: T209191
Change-Id: Ia230db0495f5ada1596041fa54a378eea5fe22aa

extension.json

@@ -30,6 +30,9 @@
 			"scripts": [
 				"/resources/renderUserAgreement.js"
 			],
+			"dependencies": [
+				"oojs-ui-core"
+			],
 			"messages": [
 				"useragreement-dialog-message"
 			]

i18n/en.json

@@ -6,7 +6,7 @@
 	},
 	"useragreement-desc": "Renders the user agreement after login.",
 	"useragreement": "",
-	"useragreement-dialog-message": "Check box to consent to the conditions above",
+	"useragreement-dialog-message": "Yes, I agree",
 	"apihelp-uaAcceptAgreement-description": "Accept the user agreement",
 	"apihelp-uaAcceptAgreement-summary": "Accept the user agreement"
 }

i18n/qqq.json

@@ -6,7 +6,7 @@
 	},
 	"useragreement-desc": "{{desc|name=User Agreement|url=https://www.mediawiki.org/wiki/Extension:User_Agreeent}}",
 	"useragreement": "User agreement text to be displayed to the user (default is blank)",
-	"useragreement-dialog-message": "User acceptance checkbox description to the user",
+	"useragreement-dialog-message": "User acceptance button description to the user",
 	"apihelp-uaAcceptAgreement-description": "{{doc-apihelp-description|uaAcceptAgreement}}",
 	"apihelp-uaAcceptAgreement-summary": "{{doc-apihelp-summary|uaAcceptAgreement}}"
 }

resources/renderUserAgreement.js

@@ -20,49 +20,52 @@
  * DEALINGS IN THE SOFTWARE.
  */
 
-( function( mw, $ ) {
+( function ( mw, $ ) {
 	/**
 	 * Gobal function to display a user agreement.
 	 */
-	window.renderUserAgreement = function( useragreement ) {
+	window.renderUserAgreement = function ( useragreement ) {
 		( {
 			/**
 			 * Render the user agreement on the page.
 			 */
-			render: function( useragreement ) {
-				var useragreementHtml =
-					"<div id='uaModal'>" +
-					JSON.parse(useragreement).ua +
-					"<div id='uaAcceptInput'> \
-					<input id='uaAccept' type='checkbox'>" +
-					mw.message( 'useragreement-dialog-message' ) +
-					"</input> \
+			render: function ( useragreement ) {
+				var submitButton = new OO.ui.ButtonInputWidget( {
+						id: 'uaAccept',
+						label: mw.msg( 'useragreement-dialog-message' ),
+						icon: 'check'
+					} ),
+				useragreementHtml =
+					'<div id="uaModal">' +
+					JSON.parse( useragreement ).ua +
+					'<div id="uaAcceptInput"> \
 					</div> \
-					</div>";
+					</div>';
 
-				$(function () {
-					$("body").html(useragreementHtml);
-					$("#uaAccept").click( function () {
+				$( function () {
+					$( 'body' ).html( useragreementHtml );
+					$( '#uaAcceptInput' ).append( submitButton.$element );
+					submitButton.$input.click( function () {
 						var api = new mw.Api();
-						api.post({
+						api.post( {
 							action: 'uaAcceptAgreement',
 							token: mw.user.tokens.get( 'editToken' ),
-						}).done(function(data) {
-							location.reload(true);
-						}).fail(function(data) {
-							console.error("[UserAgreement] Failed to accept user agreement for the current user.");
-						});
-					});
-				});
+						} ).done( function ( data ) {
+							location.reload( true );
+						} ).fail( function ( data ) {
+							console.error( '[UserAgreement] Failed to accept user agreement for the current user.' );
+						} );
+					} );
+				} );
 			},
 		} )
 		.render( useragreement );
 	};
 }( mediaWiki, jQuery ) );
 
-$( function() {
+$( function () {
 	if ( mw.config.exists( 'UserAgreement' ) ) {
 		var uaData = mw.config.get( 'UserAgreement' );
 		renderUserAgreement( uaData.useragreement );
 	}
-});
+} );