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

extension.json

@@ -34,7 +34,8 @@
 	},
 	"APIModules": {
 		"languagesearch": "ApiLanguageSearch",
-		"ulslocalization": "ApiULSLocalization"
+		"ulslocalization": "ApiULSLocalization",
+		"ulssetlang": "ApiULSSetLanguage"
 	},
 	"MessagesDirs": {
 		"UniversalLanguageSelector": [
@@ -45,6 +46,7 @@
 	"AutoloadClasses": {
 		"ApiLanguageSearch": "includes/api/ApiLanguageSearch.php",
 		"ApiULSLocalization": "includes/api/ApiULSLocalization.php",
+		"ApiULSSetLanguage": "includes/api/ApiULSSetLanguage.php",
 		"FontRepoCompiler": "includes/FontRepoCompiler.php",
 		"LanguageNameSearch": "data/LanguageNameSearch.php",
 		"LanguageNameSearchData": "data/LanguageNameSearchData.php",
@@ -340,6 +342,33 @@
 			},
 			"remoteExtPath": "UniversalLanguageSelector/resources"
 		},
+		"ext.uls.setlang": {
+			"styles": [
+				"css/ext.uls.dialog.less",
+				"css/ext.uls.setlang.less"
+			],
+			"scripts": [
+				"js/ext.uls.dialog.js",
+				"js/ext.uls.setlang.js"
+			],
+			"dependencies": [
+				"mediawiki.api",
+				"mediawiki.ui.button",
+				"mediawiki.notify",
+				"mediawiki.Uri"
+			],
+			"messages": [
+				"ext-uls-setlang-error",
+				"ext-uls-setlang-unknown-error",
+				"ext-uls-setlang-heading",
+				"ext-uls-setlang-message",
+				"ext-uls-setlang-accept",
+				"ext-uls-setlang-cancel",
+				"ext-uls-setlang-loading"
+			],
+			"localBasePath": "resources",
+			"remoteExtPath": "UniversalLanguageSelector/resources"
+		},
 		"ext.uls.webfonts": {
 			"scripts": "js/ext.uls.webfonts.js",
 			"dependencies": [

i18n/api/en.json

@@ -19,5 +19,9 @@
 	"apihelp-ulslocalization-summary": "Get the localization of ULS in the given language.",
 	"apihelp-ulslocalization-param-language": "Language code.",
 	"apihelp-ulslocalization-example-1": "Get Tamil localization",
-	"apihelp-ulslocalization-example-2": "Get Hindi localization"
+	"apihelp-ulslocalization-example-2": "Get Hindi localization",
+	"apihelp-ulssetlang-description": "Update user's preferred interface language.",
+	"apihelp-ulssetlang-summary": "Update user's preferred interface language.",
+	"apihelp-ulssetlang-param-languagecode": "The preferred language code.",
+	"apierror-ulssetlang-anon-notallowed": "Anonymous users are not allowed to change the interface language."
 }

i18n/api/qqq.json

@@ -18,5 +18,9 @@
 	"apihelp-ulslocalization-summary": "{{doc-apihelp-summary|ulslocalization}}",
 	"apihelp-ulslocalization-param-language": "{{doc-apihelp-param|ulslocalization|language}}\n{{Identical|Language code}}",
 	"apihelp-ulslocalization-example-1": "{{doc-apihelp-example|ulslocalization}}",
-	"apihelp-ulslocalization-example-2": "{{doc-apihelp-example|ulslocalization}}"
+	"apihelp-ulslocalization-example-2": "{{doc-apihelp-example|ulslocalization}}",
+	"apihelp-ulssetlang-description": "{{doc-apihelp-description|ulssetlang}}",
+	"apihelp-ulssetlang-summary": "{{doc-apihelp-summary|ulssetlang}}",
+	"apihelp-ulssetlang-param-languagecode": "{{doc-apihelp-param|ulssetlang|languagecode}}",
+	"apierror-ulssetlang-anon-notallowed": "{{doc-apierror}}"
 }

i18n/en.json

@@ -65,5 +65,12 @@
 	"ext-uls-compact-link-info": "All languages (initial selection from common choices by you and others)",
 	"prefs-languages": "Languages",
 	"ext-uls-compact-language-links-preference":  "Use a [[$1|compact language list]], with languages relevant to you.",
-	"ext-uls-compact-no-results": "This page is not available in the language you searched for."
+	"ext-uls-compact-no-results": "This page is not available in the language you searched for.",
+	"ext-uls-setlang-error": "There was an error while updating your preferred language. Error: $1",
+	"ext-uls-setlang-unknown-error": "Unknown error",
+	"ext-uls-setlang-message": "The link you followed requested the interface to be shown in <strong>$1 ($2)</strong>",
+	"ext-uls-setlang-heading": "Change interface language?",
+	"ext-uls-setlang-accept": "Accept change",
+	"ext-uls-setlang-loading": "Applying...",
+	"ext-uls-setlang-cancel": "Don't change"
 }

i18n/qqq.json

@@ -69,5 +69,12 @@
 	"ext-uls-compact-link-info": "A tooltip for a button that shows all available languages next to a short list of relevant languages.",
 	"prefs-languages": "Field set legend for user preferences regarding display of language lists\n{{Identical|Language}}",
 	"ext-uls-compact-language-links-preference": "Label for compact language links user preference",
-	"ext-uls-compact-no-results": "Message shown when the language search does not have any results."
+	"ext-uls-compact-no-results": "Message shown when the language search does not have any results.",
+	"ext-uls-setlang-error": "Error message shown to the user when saving the preferred language fails. Parameters:\n* $1 - Error information from the API. If none provided, then {{msg-mw|ext-uls-setlang-unknown-error}} is shown.",
+	"ext-uls-setlang-unknown-error": "Error message shown when the API does not return error information. \n\nPreceded by the notification message {{msg-mw|ext-uls-setlang-error}}.",
+	"ext-uls-setlang-message": "Message shown to the user on the set language preference dialog. Parameters:\n* $1 - Language name\n* $2 - Language code",
+	"ext-uls-setlang-heading": "Message shown as heading to the user on the set language preference dialog. Parameters:\n* $1 - Language name",
+	"ext-uls-setlang-accept": "Button label for accepting the suggested language in language preference dialog.",
+	"ext-uls-setlang-loading": "Button label displayed while the API call is in progress after the user clicks on the accept button. See {{msg-mw|ext-uls-setlang-accept}}.",
+	"ext-uls-setlang-cancel": "Button label for cancel on the language preference dialog."
 }

includes/UniversalLanguageSelectorHooks.php

@@ -18,6 +18,8 @@
  * @license MIT
  */
 
+use MediaWiki\MediaWikiServices;
+
 class UniversalLanguageSelectorHooks {
 
 	/**
@@ -134,6 +136,38 @@ class UniversalLanguageSelectorHooks {
 		if ( $out->getTitle()->isSpecial( 'Preferences' ) ) {
 			$out->addModuleStyles( 'ext.uls.preferencespage' );
 		}
+
+		self::handleSetLang( $out );
+	}
+
+	/**
+	 * Handle setlang query parameter; and decide if the setlang related scripts
+	 * have to be loaded.
+	 * @param OutputPage $out
+	 * @return void
+	 */
+	protected static function handleSetLang( OutputPage $out ): void {
+		$languageToSet = self::getSetLang( $out );
+
+		if ( !$languageToSet ) {
+			return;
+		}
+
+		MediaWikiServices::getInstance()->getStatsdDataFactory()
+				->increment( 'uls.setlang_used' );
+
+		$user = $out->getUser();
+		if ( $user->isAnon() && !$out->getConfig()->get( 'ULSAnonCanChangeLanguage' ) ) {
+			// User is anon, and cannot change language, return.
+			return;
+		}
+
+		if ( $out->getLanguage()->getCode() === $languageToSet ) {
+			// If we are already using the preferred language, don't bother.
+			return;
+		}
+
+		$out->addModules( 'ext.uls.setlang' );
 	}
 
 	/**
@@ -236,42 +270,18 @@ class UniversalLanguageSelectorHooks {
 
 		$request = $context->getRequest();
 
-		$languageToSave = $request->getText( 'setlang' );
-		if ( !$languageToSave && $request->getText( 'uselang' ) ) {
+		if (
 			// uselang can be used for temporary override of language preference
-			// when setlang is not provided
+			$request->getText( 'uselang' ) ||
+			// Registered user: use preferences
+			!$user->isAnon()
+		) {
 			return;
 		}
 
-		// Registered users - simple
-		if ( !$user->isAnon() ) {
-			// Language change
-			if ( Language::isSupportedLanguage( $languageToSave ) ) {
-				// Apply immediately
-				$updateUser = $user->getInstanceForUpdate();
-				$updateUser->setOption( 'language', $languageToSave );
-				$code = $languageToSave;
-				// Promise to sync the DB on post-send
-				DeferredUpdates::addCallableUpdate( function () use ( $updateUser ) {
-					$updateUser->saveSettings();
-				} );
-			}
-
-			// Otherwise just use what is stored in preferences
-			return;
-		}
-
-		// If using cookie storage for anons is OK, read/write from that
+		// If using cookie storage for anons is OK, read from that
 		if ( $wgULSAnonCanChangeLanguage ) {
-			// Language change
-			if ( Language::isSupportedLanguage( $languageToSave ) ) {
-				$request->response()->setCookie( 'language', $languageToSave );
-				$code = $languageToSave;
-
-				return;
-			}
-
-			// Try cookie
+			// Try to set the language based on the cookie
 			$languageToUse = $request->getCookie( 'language', null, '' );
 			if ( Language::isSupportedLanguage( $languageToUse ) ) {
 				$code = $languageToUse;
@@ -341,15 +351,12 @@ class UniversalLanguageSelectorHooks {
 	 * @param OutputPage $out
 	 */
 	public static function addVariables( array &$vars, OutputPage $out ) {
-		global $wgULSAnonCanChangeLanguage;
-
 		// Place request context dependent stuff here
-
 		$user = $out->getUser();
 		$loggedIn = $user->isLoggedIn();
 
 		// Do not output accept languages if there is risk it will get cached across requests
-		if ( $wgULSAnonCanChangeLanguage || $loggedIn ) {
+		if ( $out->getConfig()->get( 'ULSAnonCanChangeLanguage' ) || $loggedIn ) {
 			$vars['wgULSAcceptLanguageList'] = array_keys( $out->getRequest()->getAcceptLang() );
 		}
 
@@ -367,6 +374,13 @@ class UniversalLanguageSelectorHooks {
 		// An optimization to avoid loading all of uls.data just to get the autonym
 		$langCode = $out->getLanguage()->getCode();
 		$vars['wgULSCurrentAutonym'] = Language::fetchLanguageName( $langCode );
+
+		$setLangCode = self::getSetLang( $out );
+		if ( $setLangCode ) {
+			$vars['wgULSCurrentLangCode'] = $langCode;
+			$vars['wgULSSetLangCode'] = $setLangCode;
+			$vars['wgULSSetLangName'] = Language::fetchLanguageName( $setLangCode );
+		}
 	}
 
 	public static function onGetPreferences( $user, array &$preferences ) {
@@ -461,4 +475,13 @@ class UniversalLanguageSelectorHooks {
 			$context->getOutput()->addModules( 'ext.uls.webfonts.mobile' );
 		}
 	}
+
+	private static function getSetLang( OutputPage $out ): ?string {
+		$setLangCode = $out->getRequest()->getText( 'setlang' );
+		if ( $setLangCode && Language::isSupportedLanguage( $setLangCode ) ) {
+			return $setLangCode;
+		}
+
+		return null;
+	}
 }

includes/api/ApiULSSetLanguage.php

@@ -0,0 +1,73 @@
+<?php
+/**
+ * Update user's preferred language.
+ *
+ * Copyright (C) 2012 Alolita Sharma, Amir Aharoni, Arun Ganesh, Brandon Harris,
+ * Niklas Laxström, Pau Giner, Santhosh Thottingal, Siebrand Mazeland and other
+ * contributors. See CREDITS for a list.
+ *
+ * UniversalLanguageSelector is dual licensed GPLv2 or later and MIT. You don't
+ * have to do anything special to choose one license or the other and you don't
+ * have to notify anyone which license you are using. You are free to use
+ * UniversalLanguageSelector in commercial projects as long as the copyright
+ * header is left intact. See files GPL-LICENSE and MIT-LICENSE for details.
+ *
+ * @file
+ * @ingroup Extensions
+ * @license GPL-2.0-or-later
+ * @license MIT
+ */
+
+/**
+ * @ingroup API
+ */
+class ApiULSSetLanguage extends ApiBase {
+	public function execute() {
+		$request = $this->getRequest();
+		if ( !$request->wasPosted() ) {
+			$this->dieWithError( [ 'apierror-mustbeposted', $request->getText( 'action' ) ] );
+		}
+
+		$languageCode = $request->getText( 'languagecode' );
+		if ( !Language::isSupportedLanguage( $languageCode ) ) {
+			$this->dieWithError(
+				[ 'apierror-invalidlang', $this->encodeParamName( 'languagecode' ) ]
+			);
+		}
+
+		$user = $this->getUser();
+		if ( $user->isAnon() ) {
+			if ( $this->getConfig()->get( 'ULSAnonCanChangeLanguage' ) ) {
+				// Anonymous users can change language.
+				$request->response()->setCookie( 'language', $languageCode );
+				return;
+			}
+
+			$this->dieWithError( [ 'apierror-ulssetlang-anon-notallowed' ] );
+		}
+
+		$updateUser = $user->getInstanceForUpdate();
+		$updateUser->setOption( 'language', $languageCode );
+		// Sync the DB on post-send
+		DeferredUpdates::addCallableUpdate( function () use ( $updateUser ) {
+			$updateUser->saveSettings();
+		} );
+	}
+
+	public function getAllowedParams() {
+		return [
+			'languagecode' => [
+				ApiBase::PARAM_REQUIRED => true,
+			]
+		];
+	}
+
+	public function isInternal() {
+		// Try to scare people away from using this externally
+		return true;
+	}
+
+	public function needsToken() {
+		return 'csrf';
+	}
+}

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 );
+	} );
+
+}() );