Replace default validation strings with custom strings to enable localization for validation messages with jquery.

Signed-Off-By: Piyush Vijay <piyushvijay.1997@gmail.com>

js/common_params.php

@@ -28,10 +28,8 @@ if (!defined('TESTSUITE')) {
 // But this one is needed for Sanitize::escapeJsString()
 use PhpMyAdmin\Header;
 use PhpMyAdmin\Sanitize;
-// use PhpMyAdmin\Scripts;
 
 $header = new Header();
-// $scripts = new Scripts();
 
 echo "var common_params = new Array();\n";
 foreach ($header->getJsParams() as $name => $value) {

js/messages.php

@@ -793,26 +793,24 @@ echo 'var maxInputVars = '
 /* for old js code */
 
 /* for new js code */
-/* extending jquery-ui-timepicker-addon if ($.datepicker)
-$.extend($.datepicker._defaults, $.datepicker.regional['']); */
-
-echo "var timePicker = new Array();\n";
+echo "datePicker = new Array();\n";
+echo "timePicker = new Array();\n";
 /* l10n: Display text for calendar close link */
-Sanitize::printJsValue("timePicker['closeText']", __('Done'));
+Sanitize::printJsValue("datePicker['closeText']", __('Done'));
 /* l10n: Display text for previous month link in calendar */
 Sanitize::printJsValue(
-    "timePicker['prevText']",
+    "datePicker['prevText']",
     _pgettext('Previous month', 'Prev')
 );
 /* l10n: Display text for next month link in calendar */
 Sanitize::printJsValue(
-    "timePicker['nextText']",
+    "datePicker['nextText']",
     _pgettext('Next month', 'Next')
 );
 /* l10n: Display text for current month link in calendar */
-Sanitize::printJsValue("timePicker['currentText']", __('Today'));
+Sanitize::printJsValue("datePicker['currentText']", __('Today'));
 Sanitize::printJsValue(
-    "timePicker['monthNames']",
+    "datePicker['monthNames']",
     array(
         __('January'),
         __('February'),
@@ -829,7 +827,7 @@ Sanitize::printJsValue(
     )
 );
 Sanitize::printJsValue(
-    "timePicker['monthNamesShort']",
+    "datePicker['monthNamesShort']",
     array(
         /* l10n: Short month name */
         __('Jan'),
@@ -858,9 +856,9 @@ Sanitize::printJsValue(
     )
 );
 Sanitize::printJsValue(
-    "timePicker['dayNames']",
+    "datePicker['dayNames']",
     array(
-        __('Sundayada'),
+        __('Sunday'),
         __('Monday'),
         __('Tuesday'),
         __('Wednesday'),
@@ -870,7 +868,7 @@ Sanitize::printJsValue(
     )
 );
 Sanitize::printJsValue(
-    "timePicker['dayNamesShort']",
+    "datePicker['dayNamesShort']",
     array(
         /* l10n: Short week day name */
         __('Sun'),
@@ -889,7 +887,7 @@ Sanitize::printJsValue(
     )
 );
 Sanitize::printJsValue(
-    "timePicker['dayNamesMin']",
+    "datePicker['dayNamesMin']",
     array(
         /* l10n: Minimal week day name */
         __('Su'),
@@ -908,10 +906,10 @@ Sanitize::printJsValue(
     )
 );
 /* l10n: Column header for week of the year in calendar */
-Sanitize::printJsValue("timePicker['weekHeader']", __('Wk'));
+Sanitize::printJsValue("datePicker['weekHeader']", __('Wk'));
 
 Sanitize::printJsValue(
-    "timePicker['showMonthAfterYear']",
+    "datePicker['showMonthAfterYear']",
     /* l10n: Month-year order for calendar, use either "calendar-month-year"
     * or "calendar-year-month".
     */
@@ -920,7 +918,7 @@ Sanitize::printJsValue(
 /* l10n: Year suffix for calendar, "none" is empty. */
 $year_suffix = _pgettext('Year suffix', 'none');
 Sanitize::printJsValue(
-    "timePicker['yearSuffix']",
+    "datePicker['yearSuffix']",
     ($year_suffix == 'none' ? '' : $year_suffix)
 );
 Sanitize::printJsValue("timePicker['timeText']", __('Time'));
@@ -1075,10 +1073,8 @@ $.extend($.timepicker._defaults, $.timepicker.regional['']);
 <?php
 /* for new js code */
 /* Form validation */
-/* extending jquery form validation $.extend($.validator.messages, obj) */
-
 /* Default validation functions */
-echo "var validationMessage = {\n";
+echo "validationMessage = {\n";
     Sanitize::printJsValueForFormValidation('required', __('This field is required'));
     Sanitize::printJsValueForFormValidation('remote', __('Please fix this field'));
     Sanitize::printJsValueForFormValidation('email', __('Please enter a valid email address'));
@@ -1099,7 +1095,7 @@ echo "var validationMessage = {\n";
         __('Please enter the same value again')
     );
 echo "\n};\n";
-echo "var validateFormat = {\n";
+echo "validationFormat = {\n";
     Sanitize::printJsValueForFormValidation(
         'maxlength',
         __('Please enter no more than {0} characters')

js/src/utils/extend_jquery.js

@@ -6,7 +6,10 @@ import 'jquery-mousewheel';
 import 'jquery.event.drag';
 import 'jquery-validation';
 import { methods } from './menu_resizer';
-import { GlobalVariables, timePicker, validations } from '../variables/export_variables';
+// TODO: To use this import for replacing variables used in this file for
+// extending various strings for localization.
+// import { GlobalVariables, timePicker, validations } from '../variables/export_variables';
+import { PMA_Messages as PMA_messages } from '../variables/export_variables';
 
 /**
  * Comes from menu_resizer.js
@@ -143,8 +146,51 @@ $.fn.getPostData = function () {
     return dataPost;
 };
 
-for (var key in timePicker) {
-    $.datepicker.regional[''][key] = timePicker[key];
+/**
+ * Replacing default datepicker strings for localization
+ */
+if ($.datepicker) {
+    // Creating copy of datepicker strings object
+    var datePicker = Object.assign(window.datePicker);
+    // Deleting datepicker variable from window as it is of no use now
+    delete window.datePicker;
+
+    for (let key in datePicker) {
+        $.datepicker.regional[''][key] = datePicker[key];
+    }
+}
+
+/**
+ * Replacing default timepicker strings for localozation
+ */
+if ($.timePicker) {
+    // Creating copy of timepicker strings object
+    var timePicker = Object.assign(window.timePicker);
+    // Deleting timepicker variable from window as it is of no use now
+    delete window.timePicker;
+
+    for (let key in timePicker) {
+        $.timepicker.regional[''][key] = timePicker[key];
+    }
+}
+
+export function extendingValidatorMessages () {
+    // Creating copy of validationMessage strings object
+    var validateMessage = Object.assign(window.validationMessage);
+    // Deleting validationMessage variable from window as it is of no use now
+    delete window.validationMessage;
+    // Replacing default validation messages forr localization
+    $.extend($.validator.messages, validateMessage);
+
+    // Creating copy of validationFormat strings object
+    var validateFormat = Object.assign(window.validationFormat);
+    // Deleting validationFormat variable from window as it is of no use now
+    delete window.validationFormat;
+    for (let i in validateFormat) {
+        validateFormat[i] = $.validator.format(validateFormat[i]);
+    }
+    // Replacing default validation messages forr localization
+    $.extend($.validator.messages, validateFormat);
 }
 
 window.jQ = $;

js/src/variables/import_variables.js

@@ -2,13 +2,16 @@ import { Variables } from './global_variables';
 import { PMA_commonParams } from './common_params';
 
 var jqueryValidations = {
-    validateFormat: window.validateFormat,
+    validationFormat: window.validateFormat,
     validationMessage: window.validationMessage
 };
 // console.log('random');
 // console.log(window.PMA_messages);
 Variables.setAllMessages(window.PMA_messages);
-Variables.setTimePickerVars(window.timePicker);
+Variables.setTimePickerVars({
+    datePicker: window.datePicker,
+    timePicker: window.timePicker
+});
 Variables.setValidatorMessages(jqueryValidations);
 Variables.setGlobalVars(window.globalVars);
 // console.log(Variables.getMessages());