Update setlang to display confirmation dialog to change language

setlang will now display a dialog to confirm with the user that
they would like to change their interface language. The preferred
language will only be updated if the user confirms.

The dialog will be displayed if the setlang parameter is present in
the query string and,

* A user is logged in, and their preferred language is not the same
  as the one passed via setlang.
* For an anonymous user if the wgULSAnonCanChangeLanguage is true,
  and the current interface language is not the same as the one
  passed via setlang.

Bug: T63115
Change-Id: I882297d99a594fd82fd0aec3b4664e8bfd1eac3a

resources/css/ext.uls.dialog.less

@@ -0,0 +1,40 @@
+@uls-dialog-width: 480px;
+
+.uls-dialog {
+	position: absolute;
+	z-index: 500;
+	display: none;
+	background-color: #fff;
+	border: 1px solid #ccc;
+	border-color: rgba( 0, 0, 0, 0.2 );
+	box-shadow: 0 5px 10px rgba( 0, 0, 0, 0.2 );
+	background-clip: padding-box;
+	width: @uls-dialog-width;
+	top: 30%;
+	left: 50%;
+	margin-left: -( @uls-dialog-width / 2 );
+	margin-top: -40px;
+	padding: 16px;
+
+	@media screen and ( max-width: 599px ) {
+		width: 100%;
+		left: 0;
+		margin-left: 0;
+		box-sizing: border-box;
+	}
+}
+
+.uls-overlay {
+	height: 100vh;
+	width: 100vw;
+	background-color: #54595d;
+	opacity: 0.87;
+	display: none;
+	z-index: 300;
+	position: absolute;
+	top: 0;
+}
+
+.uls-no-overflow {
+	overflow: hidden;
+}

resources/css/ext.uls.setlang.less

@@ -0,0 +1,24 @@
+.uls-setlang-dialog {
+	h4 {
+		margin-bottom: 1em;
+		margin-top: 0;
+		text-align: center;
+	}
+
+	p {
+		line-height: 1.6;
+	}
+
+	.language-setlang-buttons {
+		text-align: right;
+		margin-top: 20px;
+
+		@media screen and ( max-width: 599px ) {
+			text-align: center;
+		}
+	}
+
+	.language-setlang-buttons button {
+		margin-left: 16px;
+	}
+}

resources/js/ext.uls.dialog.js

@@ -0,0 +1,62 @@
+( function () {
+	'use strict';
+
+	var ULSDialog = function ( options ) {
+		var $dialog = options.container,
+			hasOverlay = options.hasOverlay,
+			$overlay;
+
+		function showOverlay() {
+			if ( $overlay ) {
+				$overlay.show();
+				$( document.body ).addClass( 'uls-no-overflow' );
+			}
+		}
+
+		function hideOverlay() {
+			if ( $overlay ) {
+				$overlay.hide();
+				$( document.body ).removeClass( 'uls-no-overflow' );
+			}
+		}
+
+		function open() {
+			$dialog.show();
+			showOverlay();
+		}
+
+		function close() {
+			$dialog.hide();
+			hideOverlay();
+		}
+
+		function elem() {
+			return $dialog;
+		}
+
+		function addOverlay() {
+			// Check if overlay is already there.
+			if ( !$overlay ) {
+				$overlay = $( '<div>' )
+					.addClass( 'uls-overlay' )
+					.on( 'click', close )
+					.appendTo( document.body );
+			}
+		}
+
+		$dialog.addClass( 'uls-dialog' );
+
+		if ( hasOverlay ) {
+			addOverlay();
+		}
+
+		return {
+			open: open,
+			close: close,
+			elem: elem
+		};
+	};
+
+	mw.uls = mw.uls || {};
+	mw.uls.Dialog = ULSDialog;
+}() );

resources/js/ext.uls.setlang.js

@@ -0,0 +1,124 @@
+( function () {
+	'use strict';
+	var $cancelBtn, $acceptBtn;
+
+	function getHeading( languageName ) {
+		return $( '<h4>' ).text(
+			mw.msg( 'ext-uls-setlang-heading', languageName )
+		);
+	}
+
+	function getMessage( languageName, languageCode ) {
+		return $( '<p>' ).html(
+			mw.message(
+				'ext-uls-setlang-message',
+				languageName,
+				languageCode
+			).parse()
+		);
+	}
+
+	function getButtons() {
+		$cancelBtn = $( '<button>' )
+			.addClass( 'mw-ui-button uls-setlang-cancel' )
+			.text( mw.msg( 'ext-uls-setlang-cancel' ) );
+
+		$acceptBtn = $( '<button>' )
+			.addClass( 'mw-ui-button mw-ui-progressive active uls-setlang-apply' )
+			.text( mw.msg( 'ext-uls-setlang-accept' ) );
+
+		return $( '<div>' )
+			.addClass( 'language-setlang-buttons' )
+			.append(
+				$cancelBtn,
+				$acceptBtn
+			);
+	}
+
+	function toggleLoading( $btnSubmit, isLoading ) {
+		if ( isLoading ) {
+			$btnSubmit.text( mw.msg( 'ext-uls-setlang-loading' ) );
+		} else {
+			$btnSubmit.text( mw.msg( 'ext-uls-setlang-accept' ) );
+		}
+
+		$btnSubmit.prop( 'disabled', isLoading );
+	}
+
+	function removeParam( key ) {
+		var uri = new mw.Uri();
+		delete uri.query[ key ];
+		return uri.toString();
+	}
+
+	function updateLanguage( langCode ) {
+		var api = new mw.Api();
+		return api.postWithToken( 'csrf', {
+			action: 'ulssetlang',
+			languagecode: langCode,
+			formatversion: 2
+		} ).done( function () {
+			location.replace( removeParam( 'setlang' ) );
+		} ).fail( function ( code, result ) {
+			var apiErrorInfo = mw.msg( 'ext-uls-setlang-unknown-error' );
+			if ( result.error && result.error.info ) {
+				apiErrorInfo = result.error.info;
+			}
+			mw.notify(
+				mw.msg( 'ext-uls-setlang-error', apiErrorInfo ),
+				{
+					type: 'error',
+					tag: 'uls-setlang-error'
+				}
+			);
+		} );
+	}
+
+	function createSetLangDialog( languageName, languageCode ) {
+		return $( '<div>' )
+			.addClass( 'uls-setlang-dialog' )
+			.append(
+				getHeading( languageName ),
+				getMessage( languageName, languageCode ),
+				getButtons()
+			).appendTo( document.body );
+	}
+
+	function addSetLangDialogEvents( ulsDialog ) {
+		$acceptBtn.on( 'click', function () {
+			toggleLoading( $acceptBtn, true );
+			updateLanguage( mw.config.get( 'wgULSSetLangCode' ) ).fail( function () {
+				toggleLoading( $acceptBtn, false );
+			} );
+		} );
+
+		$cancelBtn.on( 'click', function () {
+			var urlWithoutSetlang = removeParam( 'setlang' );
+			history.pushState( null, 'no-setlang-url', urlWithoutSetlang );
+			ulsDialog.close();
+		} );
+	}
+
+	$( function () {
+		var setLangCode = mw.config.get( 'wgULSSetLangCode' ),
+			setLangName = mw.config.get( 'wgULSSetLangName' ),
+			currentLangCode = mw.config.get( 'wgULSCurrentLangCode' ),
+			$ulsDialog, ulsSetLangDialog;
+
+		if ( currentLangCode === setLangCode ) {
+			return;
+		}
+
+		// Setup and show the dialog
+		$ulsDialog = createSetLangDialog( setLangName, setLangCode );
+		ulsSetLangDialog = new mw.uls.Dialog( {
+			container: $ulsDialog,
+			hasOverlay: true
+		} );
+
+		addSetLangDialogEvents( ulsSetLangDialog );
+
+		setTimeout( ulsSetLangDialog.open );
+	} );
+
+}() );