add styles and scripts for a settings table

src/client/styles/scss/_admin.scss

@@ -126,7 +126,7 @@
     }
   }
 
-  .authentication-settings-table {
+  .settings-table {
     table-layout: fixed;
 
     .item-name {

src/server/views/admin/app.html

@@ -120,7 +120,7 @@
           <p class="well">{{ t('app_setting.Site URL') }}</p>
 
           <div class="col-xs-offset-3">
-            <table class="table">
+            <table class="table settings-table">
               <colgroup>
                 <col class="from-db">
                 <col class="from-env-vars">
@@ -381,6 +381,32 @@
       });
     });
 
+    /**
+     * The following script sets the class name 'unused' to the cell in from-env-vars column
+     * when the value of the corresponding cell from the database is not empty.
+     * It is used to indicate that the system does not use a value from the environment variables by setting a css style.
+     *
+     * TODO The following script is duplicated from saml.html. It is desirable to integrate those in the future.
+     */
+    $('.settings-table tbody tr').each(function(_, element) {
+      const inputElemFromDB      = $('td:nth-of-type(1) input[type="text"], td:nth-of-type(1) textarea', element);
+      const inputElemFromEnvVars = $('td:nth-of-type(2) input[type="text"], td:nth-of-type(2) textarea', element);
+
+      // initialize
+      addClassToUnusedInputElemFromEnvVars(inputElemFromDB, inputElemFromEnvVars);
+
+      // set keyup event handler
+      inputElemFromDB.keyup(function () { addClassToUnusedInputElemFromEnvVars(inputElemFromDB, inputElemFromEnvVars) });
+    });
+
+    function addClassToUnusedInputElemFromEnvVars(inputElemFromDB, inputElemFromEnvVars) {
+      if (inputElemFromDB.val() === '') {
+        inputElemFromEnvVars.parent().removeClass('unused');
+      }
+      else {
+        inputElemFromEnvVars.parent().addClass('unused');
+      }
+    };
   </script>
 
 </div>

src/server/views/admin/widget/passport/saml.html

@@ -67,7 +67,7 @@
     {% endif %}
 
     <h4>Basic Settings</h4>
-    <table class="table authentication-settings-table {% if useOnlyEnvVars %}use-only-env-vars{% endif %}">
+    <table class="table settings-table {% if useOnlyEnvVars %}use-only-env-vars{% endif %}">
       <colgroup>
         <col class="item-name">
         <col class="from-db">
@@ -164,7 +164,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
 
     <h4>Attribute Mapping</h4>
 
-    <table class="table authentication-settings-table {% if useOnlyEnvVars %}use-only-env-vars{% endif %}">
+    <table class="table settings-table {% if useOnlyEnvVars %}use-only-env-vars{% endif %}">
       <colgroup>
         <col class="item-name">
         <col class="from-db">
@@ -384,7 +384,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
    * It is used to indicate that the system does not use a value from the environment variables by setting a css style.
    * This behavior is disabled when the system is in the use-only-env-vars mode.
    */
-  $('.authentication-settings-table:not(.use-only-env-vars) tbody tr').each(function(_, element) {
+  $('.settings-table:not(.use-only-env-vars) tbody tr').each(function(_, element) {
     const inputElemFromDB      = $('td:nth-of-type(1) input[type="text"], td:nth-of-type(1) textarea', element);
     const inputElemFromEnvVars = $('td:nth-of-type(2) input[type="text"], td:nth-of-type(2) textarea', element);