From 16d2d5174e1951db55c90b2f81af6e9a77d458f4 Mon Sep 17 00:00:00 2001
From: Tim Otten <totten@civicrm.org>
Date: Wed, 8 Jul 2020 18:21:36 -0700
Subject: [PATCH] Setup UI - Support client-side validator (jQuery)

---
 setup/res/installer.js                 | 31 ++++++++++++++++++++++++++
 setup/res/template.css                 | 11 +++++++++
 setup/src/Setup/UI/SetupController.php |  1 +
 3 files changed, 43 insertions(+)
 create mode 100644 setup/res/installer.js

diff --git a/setup/res/installer.js b/setup/res/installer.js
new file mode 100644
index 0000000000..801c34c2b3
--- /dev/null
+++ b/setup/res/installer.js
@@ -0,0 +1,31 @@
+(function($){
+  /**
+   * Enable or disable an error message.
+   *
+   * <p id="my-error-message">The world is one fire.</p>
+   * Ex: $('#my-error-message').toggleError(false)
+   *
+   * @param bool isError
+   */
+  $.fn.toggleError = function (isError) {
+    this.toggleClass('install-validate-ok', !isError)
+      .toggleClass('install-validate-bad', isError)
+      .toggleClass('error', isError);
+
+    var errors = $('.install-validate-bad');
+    $('#install_button').prop('disabled', errors.length > 0);
+    return this;
+  };
+
+  /**
+   * Ex: $('.watch-these').useValidator(function(){
+   *   $('#some-error-message').toggleError(booleanExpression);
+   * })
+   * @param cb
+   */
+  $.fn.useValidator = function(cb) {
+    cb();
+    this.on('change', cb);
+    return this;
+  };
+})($);
\ No newline at end of file
diff --git a/setup/res/template.css b/setup/res/template.css
index 240843a602..5a2b3ea106 100644
--- a/setup/res/template.css
+++ b/setup/res/template.css
@@ -130,6 +130,13 @@ body {
   font-size: 80%;
 }
 
+.civicrm-setup-body .install-validate-ok {
+  display: none;
+}
+
+.civicrm-setup-body .install-validate-bad {
+}
+
 .civicrm-setup-body .reqTable {
   border-collapse: collapse;
   width: 100%;
@@ -223,6 +230,10 @@ body {
 .civicrm-setup-body input[type=submit]:hover {
   background: #60A237;
 }
+.civicrm-setup-body input[type=submit]:disabled {
+  background: #888;
+  cursor: not-allowed;
+}
 
 .civicrm-setup-body .settingsTable input[type=text] { width: 80%; }
 
diff --git a/setup/src/Setup/UI/SetupController.php b/setup/src/Setup/UI/SetupController.php
index 74fd0d4341..a0434fa401 100644
--- a/setup/src/Setup/UI/SetupController.php
+++ b/setup/src/Setup/UI/SetupController.php
@@ -191,6 +191,7 @@ class SetupController implements SetupControllerInterface {
     $r->body = $body;
     $r->assets = [
       ['type' => 'script-url', 'url' => $this->getUrl('jquery.js')],
+      ['type' => 'script-url', 'url' => $this->urls['res'] . "installer.js"],
       ['type' => 'script-code', 'code' => 'window.csj$ = jQuery.noConflict();'],
       ['type' => 'style-url', 'url' => $this->urls['res'] . "template.css"],
       ['type' => 'style-url', 'url' => $this->getUrl('font-awesome.css')],
-- 
2.25.1