mirror of
https://github.com/Combodo/iTop.git
synced 2026-02-13 15:34:12 +01:00
N°3913 UI improvements for setup, also remove A LOT of <table> 😬
This commit is contained in:
Stephen Abello
@@ -1016,82 +1016,66 @@ class SetupUtils
|
||||
$sWikiVersion = utils::GetItopVersionWikiSyntax(); //eg : '2_7_0';
|
||||
$sMysqlTlsWikiPageUrl = 'https://www.itophub.io/wiki/page?id='.$sWikiVersion.':install:php_and_mysql_tls';
|
||||
|
||||
$oPage->add('<tr><td colspan="2">');
|
||||
$oPage->add('<fieldset><legend>Database Server Connection</legend>');
|
||||
$oPage->add('<table id="table_db_options">');
|
||||
|
||||
//-- DB connection params
|
||||
$oPage->add('<tbody>');
|
||||
$oPage->add('<tr><td>Server Name:</td><td><input id="db_server" type="text" name="db_server" value="'.htmlentities($sDBServer, ENT_QUOTES, 'UTF-8').'" size="15"/></td><td>E.g. "localhost", "dbserver.mycompany.com" or "192.142.10.23"</td></tr>');
|
||||
$oPage->add('<tr><td>Login:</td><td><input id="db_user" type="text" name="db_user" value="'
|
||||
$oPage->add('<tr><td>Server Name:</td><td><input id="db_server" class="ibo-input" type="text" name="db_server" value="'.htmlentities($sDBServer, ENT_QUOTES, 'UTF-8').'" size="15"/></td><td><i class="fas fa-question-circle setup-input--hint--icon" data-tooltip-content="E.g. \'localhost\', \'dbserver.mycompany.com\' or \'192.142.10.23\'"></i></td></tr>');
|
||||
$oPage->add('<tr><td>Login:</td><td><input id="db_user" class="ibo-input" type="text" name="db_user" value="'
|
||||
.htmlentities($sDBUser, ENT_QUOTES, 'UTF-8')
|
||||
.'" size="15"/></td><td rowspan="2" style="vertical-align:top">The account must have the following privileges on the database: SELECT, INSERT, UPDATE, DELETE, DROP, CREATE, ALTER, CREATE VIEW, SHOW VIEW, LOCK TABLE, SUPER, TRIGGER</td></tr>');
|
||||
$oPage->add('<tr><td>Password:</td><td><input id="db_pwd" autocomplete="off" type="password" name="db_pwd" value="'.htmlentities($sDBPwd, ENT_QUOTES, 'UTF-8').'" size="15"/></td></tr>');
|
||||
$oPage->add('</tbody>');
|
||||
.'" size="15"/></td><td><i class="fas fa-question-circle setup-input--hint--icon" data-tooltip-content="The account must have the following privileges on the database: SELECT, INSERT, UPDATE, DELETE, DROP, CREATE, ALTER, CREATE VIEW, SHOW VIEW, LOCK TABLE, SUPER, TRIGGER"></i></td></tr>');
|
||||
$oPage->add('<tr><td>Password:</td><td><input id="db_pwd" class="ibo-input" autocomplete="off" type="password" name="db_pwd" value="'.htmlentities($sDBPwd, ENT_QUOTES, 'UTF-8').'" size="15"/></td></tr>');
|
||||
$oPage->add('</tbody></table>');
|
||||
|
||||
//-- TLS params (N°1260)
|
||||
$sTlsEnabledChecked = $bTlsEnabled ? ' checked' : '';
|
||||
$sTlsCaDisabled = $bTlsEnabled ? '' : ' disabled';
|
||||
$oPage->add('<tbody id="tls_options" class="collapsable-options">');
|
||||
$oPage->add('<tr><th colspan="3" style="text-align: left; background-color: transparent"><label style="margin: 6em; font-weight: normal; color: #696969"><img style="vertical-align:bottom" id="db_tls_img">Use TLS encrypted connection</label></th></tr>');
|
||||
$oPage->add('<tr style="display:none"><td colspan="3" class="message message-error">Before configuring MySQL with TLS encryption, read the documentation <a href="'.$sMysqlTlsWikiPageUrl.'" target="_blank">on Combodo\'s Wiki</a></td></tr>');
|
||||
$oPage->add('<tr style="display:none"><td colspan="3"><label><input id="db_tls_enabled" type="checkbox"'.$sTlsEnabledChecked.' name="db_tls_enabled" value="1"> Encrypted connection enabled</label></td></tr>');
|
||||
$oPage->add('<tr style="display:none"><td>SSL CA:</td>');
|
||||
$oPage->add('<td><input id="db_tls_ca" autocomplete="off" type="text" name="db_tls_ca" value="'.htmlentities($sTlsCA,
|
||||
ENT_QUOTES, 'UTF-8').'" size="15"'.$sTlsCaDisabled.'></td>');
|
||||
$oPage->add('<td>Path to certificate authority file for SSL</td></tr>');
|
||||
$oPage->add('</tbody>');
|
||||
$oPage->add('<div id="tls_options" class="collapsable-options">');
|
||||
$oPage->add('<span data-role="setup-collapsable-options--toggler"><img id="db_tls_img"><label>Use TLS encrypted connection</label></span>');
|
||||
$oPage->add('<div class="message message-error" style="display:none;">Before configuring MySQL with TLS encryption, read the documentation <a href="'.$sMysqlTlsWikiPageUrl.'" target="_blank">on Combodo\'s Wiki</a></div>');
|
||||
$oPage->add('<label style="display:none;"><input id="db_tls_enabled" type="checkbox" '.$sTlsEnabledChecked.' name="db_tls_enabled" value="1"> Encrypted connection enabled</label>');
|
||||
$oPage->add('<div class="setup-tls--input--container" style="display:none">SSL CA:');
|
||||
$oPage->add('<input id="db_tls_ca" class="ibo-input" autocomplete="off" type="text" name="db_tls_ca" value="'.htmlentities($sTlsCA,
|
||||
ENT_QUOTES, 'UTF-8').'" size="15"'.$sTlsCaDisabled.'>');
|
||||
$oPage->add('Path to certificate authority file for SSL</div>');
|
||||
$oPage->add('</div>');
|
||||
|
||||
$oPage->add('</table>');
|
||||
$oPage->add('</fieldset>');
|
||||
$oPage->add('</td></tr>');
|
||||
|
||||
$oPage->add('<tr><td colspan="2"><div id="db_info"></div></td></tr>');
|
||||
$oPage->add('<div id="db_info"></div>');
|
||||
|
||||
$oPage->add('<tr><td colspan="2">');
|
||||
$oPage->add('');
|
||||
$oPage->add('<fieldset><legend>Database</legend>');
|
||||
$oPage->add('<table>');
|
||||
if ($bIsItopInstall)
|
||||
{
|
||||
$oPage->add('<tr><td><input type="radio" id="create_db" name="create_db" value="yes"/><label for="create_db"> Create a new database:</label></td>');
|
||||
$oPage->add('<td><input id="db_new_name" type="text" name="db_new_name" value="'.htmlentities($sNewDBName, ENT_QUOTES, 'UTF-8').'" size="15" maxlength="32"/><span style="width:20px;" id="v_db_new_name"></span></td></tr>');
|
||||
$oPage->add('<td><input id="db_new_name" class="ibo-input" type="text" name="db_new_name" value="'.htmlentities($sNewDBName, ENT_QUOTES, 'UTF-8').'" size="15" maxlength="32"/><span style="width:20px;" id="v_db_new_name"></span></td></tr>');
|
||||
$oPage->add('<tr><td><input type="radio" id="existing_db" name="create_db" value="no"/><label for="existing_db"> Use the existing database:</label></td>');
|
||||
$oPage->add('<td id="db_name_container"><input id="db_name" name="db_name" size="15" maxlen="32" value="'.htmlentities($sDBName, ENT_QUOTES, 'UTF-8').'"/><span style="width:20px;" id="v_db_name"></span></td></tr>');
|
||||
$oPage->add('</tbody>');
|
||||
$oPage->add('<tbody id="prefix_option" class="collapsable-options">');
|
||||
$oPage->add('<tr><th colspan="3" style="text-align: left; background-color: transparent"><label style="margin: 0.4em; font-weight: normal; color: #696969"><img style="vertical-align:bottom">Use shared database</label></th></tr>');
|
||||
$oPage->add('<tr style="display:none"><td>Use a prefix for the tables:</td><td><input id="db_prefix" type="text" name="db_prefix" value="'.htmlentities($sDBPrefix,
|
||||
ENT_QUOTES, 'UTF-8').'" size="15"/><span style="width:20px;" id="v_db_prefix"></span></td></tr>');
|
||||
$oPage->add('</tbody>');
|
||||
$oPage->add('<td id="db_name_container" class="ibo-input-select-wrapper"><input id="db_name" class="ibo-input ibo-input-select" name="db_name" size="15" maxlen="32" value="'.htmlentities($sDBName, ENT_QUOTES, 'UTF-8').'"/><span style="width:20px;" id="v_db_name"></span></td></tr>');
|
||||
}
|
||||
else
|
||||
{
|
||||
$oPage->add('<tr><td>Database Name:</td><td id="db_name_container"><input id="db_name" name="db_name" size="15" maxlen="32" value="'.htmlentities($sDBName, ENT_QUOTES, 'UTF-8').'"/><span style="width:20px;" id="v_db_name"></span></td></tr>');
|
||||
$oPage->add('</tbody>');
|
||||
$oPage->add('<tbody id="prefix_option" class="collapsable-options">');
|
||||
$oPage->add('<tr><th colspan="3" style="text-align: left; background-color: transparent"><label style="margin: 0.4em; font-weight: normal; color: #696969"><img style="vertical-align:bottom">Use shared database</label></th></tr>');
|
||||
$oPage->add('<tr style="display:none"><td>Use a prefix for the tables:</td><td><input id="db_prefix" type="text" name="db_prefix" value="'.htmlentities($sDBPrefix,
|
||||
ENT_QUOTES, 'UTF-8').'" size="15"/><span style="width:20px;" id="v_db_prefix"></span></td></tr>');
|
||||
$oPage->add('</tbody>');
|
||||
$oPage->add('<tr><td>Database Name:</td><td id="db_name_container" class="ibo-input-select-wrapper"><input id="db_name" class="ibo-input ibo-input-select" name="db_name" size="15" maxlen="32" value="'.htmlentities($sDBName, ENT_QUOTES, 'UTF-8').'"/><span style="width:20px;" id="v_db_name"></span></td></tr>');
|
||||
}
|
||||
$oPage->add('</table>');
|
||||
$oPage->add('<div id="prefix_option" class="collapsable-options">');
|
||||
$oPage->add('<span data-role="setup-collapsable-options--toggler"><label style="font-weight: normal;"><img>Use shared database</label></span>');
|
||||
$oPage->add('<div class="setup-prefix-toggler--input--container" style="display:none">Use a prefix for the tables:<input id="db_prefix" class="ibo-input" type="text" name="db_prefix" value="'.htmlentities($sDBPrefix,
|
||||
ENT_QUOTES, 'UTF-8').'" size="15"/><span style="width:20px;" id="v_db_prefix"></span></div>');
|
||||
$oPage->add('</div>');
|
||||
$oPage->add('</fieldset>');
|
||||
$oPage->add('<tr><td colspan="2"><span id="table_info"> </span></td></tr>');
|
||||
$oPage->add('</td></tr>');
|
||||
$oPage->add('<span id="table_info"></span>');
|
||||
|
||||
// Sub options toggle (TLS, prefix)
|
||||
$oPage->add_script(<<<'JS'
|
||||
function toggleCollapsableOptions($tbody) {
|
||||
$tbody.find("tr").not("tr:first-child").toggle();
|
||||
$tbody.children().not(":first-child").toggle();
|
||||
updateCollapsableImage($tbody);
|
||||
}
|
||||
function updateCollapsableImage($tbody) {
|
||||
$collapsableImg = $tbody.find("tr:first-child>th>label>img");
|
||||
imgPath = "../images/";
|
||||
imgUrl = ($tbody.find("tr:nth-child(2)>td:visible").length > 0)
|
||||
? "minus.gif"
|
||||
: "plus.gif";
|
||||
$collapsableImg.attr("src", imgPath+imgUrl);
|
||||
$tbody.toggleClass('setup-is-opened');
|
||||
}
|
||||
JS
|
||||
);
|
||||
@@ -1101,17 +1085,14 @@ JS
|
||||
}
|
||||
$oPage->add_ready_script(
|
||||
<<<'JS'
|
||||
$("tbody.collapsable-options>tr>th>label").on('click', function() {
|
||||
var $tbody = $(this).closest("tbody");
|
||||
$("[data-role=\"setup-collapsable-options--toggler\"").on('click', function() {
|
||||
var $tbody = $(this).closest("div");
|
||||
toggleCollapsableOptions($tbody);
|
||||
});
|
||||
$("#db_tls_enabled").on('click', function() {
|
||||
var bTlsEnabled = $("#db_tls_enabled").is(":checked");
|
||||
$("#db_tls_ca").prop("disabled", !bTlsEnabled);
|
||||
});
|
||||
$("tbody.collapsable-options").each(function() {
|
||||
updateCollapsableImage($(this));
|
||||
})
|
||||
JS
|
||||
);
|
||||
|
||||
@@ -1206,13 +1187,13 @@ function ValidateField(sFieldId, bUsed)
|
||||
}
|
||||
else
|
||||
{
|
||||
$("#v_"+sFieldId).html('<img src="../images/validation_error.png" title="Only the characters [A-Za-z0-9_] are allowed"/>');
|
||||
$("#v_"+sFieldId).html('<i class="fas fa-exclamation-triangle setup-invalid-field--icon" title="Only the characters [A-Za-z0-9_] are allowed"></i>');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
else if (bMandatory)
|
||||
{
|
||||
$("#v_"+sFieldId).html('<img src="../images/validation_error.png" title="This field cannot be empty"/>');
|
||||
$("#v_"+sFieldId).html('<i class="fas fa-exclamation-triangle setup-invalid-field--icon" title="This field cannot be empty"></i>');
|
||||
return false;
|
||||
}
|
||||
else
|
||||
@@ -1507,7 +1488,7 @@ JS
|
||||
}
|
||||
else
|
||||
{
|
||||
$sDBNameInput = '<select id="db_name" name="db_name">';
|
||||
$sDBNameInput = '<select id="db_name" class="ibo-input ibo-input-select" name="db_name">';
|
||||
foreach ($checks['databases'] as $sDatabaseName)
|
||||
{
|
||||
if ($sDatabaseName != 'information_schema')
|
||||
@@ -1556,7 +1537,7 @@ JS
|
||||
|
||||
public static function GetLanguageSelect($sSourceDir, $sInputName, $sDefaultLanguageCode)
|
||||
{
|
||||
$sHtml = '<select id="'.$sInputName.'" name="'.$sInputName.'">';
|
||||
$sHtml = '<div class="ibo-input-select-wrapper"><select id="'.$sInputName.'" class="ibo-input ibo-input-select" name="'.$sInputName.'">';
|
||||
$sSourceDir = APPROOT.'dictionaries/';
|
||||
$aLanguages = SetupUtils::GetAvailableLanguages($sSourceDir);
|
||||
foreach ($aLanguages as $sCode => $aInfo) {
|
||||
@@ -1564,7 +1545,7 @@ JS
|
||||
$sHtml .= '<option value="'.$sCode.'" '.$sSelected.'>'.htmlentities($aInfo['description'], ENT_QUOTES,
|
||||
'UTF-8').' ('.htmlentities($aInfo['localized_description'], ENT_QUOTES, 'UTF-8').')</option>';
|
||||
}
|
||||
$sHtml .= '</select></td></tr>';
|
||||
$sHtml .= '</select></div>';
|
||||
|
||||
return $sHtml;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user