diff --git a/pandora_console/include/functions_html.php b/pandora_console/include/functions_html.php index d51e83c940..ff02de3639 100644 --- a/pandora_console/include/functions_html.php +++ b/pandora_console/include/functions_html.php @@ -2478,6 +2478,7 @@ function html_print_input_text_extended( $autocomplete='off', $disabled=false ) { + global $config; static $idcounter = 0; if ($maxlength === 0) { @@ -2542,12 +2543,19 @@ function html_print_input_text_extended( $output .= 'disabled="disabled" '; } + $hasClass = false; if (is_array($attributes)) { foreach ($attributes as $attribute => $attr_value) { - if (! in_array($attribute, $valid_attrs)) { + if (in_array($attribute, $valid_attrs) === false) { continue; } + // Only for password inputs. + if (($attribute === 'class') && ($password === true)) { + $attr_value .= ' show-hide-pass-background'; + $hasClass = true; + } + $output .= $attribute.'="'.$attr_value.'" '; } } else { @@ -2555,6 +2563,10 @@ function html_print_input_text_extended( $attributes = []; } + if (($hasClass === false) && ($password === true)) { + $output .= 'class="show-hide-pass-background" '; + } + if (!empty($alt)) { $output .= 'alt="'.$alt.'" '; } @@ -2603,6 +2615,17 @@ function html_print_input_text_extended( $output .= $function.'/>'; + if ($password === true) { + $output .= html_print_div( + [ + 'id' => 'show-hide-'.$id, + 'class' => 'show-hide-pass', + 'onClick' => 'show_hide_password(event, \''.$config['homeurl'].'\')', + ], + true + ); + } + if (!$return) { echo $output; } @@ -2637,10 +2660,11 @@ function html_print_div( 'style', 'class', 'title', + 'onClick', ]; - if (isset($options['hidden'])) { - if (isset($options['style'])) { + if (isset($options['hidden']) === true) { + if (isset($options['style']) === true) { $options['style'] .= 'display:none;'; } else { $options['style'] = 'display:none;'; @@ -2648,7 +2672,7 @@ function html_print_div( } foreach ($attrs as $attribute) { - if (isset($options[$attribute])) { + if (isset($options[$attribute]) === true) { $output .= ' '.$attribute.'="'.io_safe_input_html($options[$attribute]).'"'; } } @@ -2659,7 +2683,7 @@ function html_print_div( $output .= ''; - if ($return) { + if ($return === true) { return $output; } else { echo $output; diff --git a/pandora_console/include/javascript/pandora.js b/pandora_console/include/javascript/pandora.js index 49afd629f6..03c7308faf 100644 --- a/pandora_console/include/javascript/pandora.js +++ b/pandora_console/include/javascript/pandora.js @@ -2340,3 +2340,15 @@ function autoclose_info_box(id, autoCloseTime) { close_info_box(id); }, autoCloseTime); } + +function show_hide_password(e, url) { + let inputPass = e.target.previousElementSibling; + + if (inputPass.type === "password") { + inputPass.type = "text"; + inputPass.style.backgroundImage = "url(" + url + "/images/disable.svg)"; + } else { + inputPass.type = "password"; + inputPass.style.backgroundImage = "url(" + url + "/images/enable.svg)"; + } +} diff --git a/pandora_console/include/styles/pandora.css b/pandora_console/include/styles/pandora.css index e81f4d4c6d..2745ca7f00 100644 --- a/pandora_console/include/styles/pandora.css +++ b/pandora_console/include/styles/pandora.css @@ -9908,9 +9908,9 @@ input, textarea, select { background-color: #f6f7fb; - height: 42px; - border: 1px solid #c0ccdc; - border-radius: 8px; + height: 38px; + border: 2px solid #c0ccdc; + border-radius: 6px; padding-left: 12px; font: normal normal normal 14px Pandora-Light; color: #2b3332; @@ -9937,7 +9937,7 @@ select:disabled, input:not([type="image"]):focus, textarea:focus, select:focus { - border: 1px solid #8a96a6; + border: 2px solid #8a96a6; } :focus { @@ -10424,15 +10424,15 @@ button.ui-button.ui-widget.submit-cancel:active { } .moduleIdBox { - height: 40px; - border-top-right-radius: 8px; - border-bottom-right-radius: 8px; + height: 36px; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; margin-left: -56px; - border: 1px solid #c0ccdc; + border: 2px solid #c0ccdc; background-color: #f6f7fb; padding: 0 16px; z-index: 0; - line-height: 42px; + line-height: 40px; } /* Custom Checkbox Style */ @@ -10567,14 +10567,14 @@ tr.bring_next_field { vertical-align: middle; text-align: left; min-width: 150px !important; - z-index: 10002; + z-index: 60; } .select2-container .select2-selection--single, .select2-container .select2-selection--multiple { background-color: #f6f7fb !important; - border: 1px solid #c0ccdc !important; - border-radius: 8px !important; + border: 2px solid #c0ccdc !important; + border-radius: 6px !important; color: #2b3332 !important; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; @@ -10584,7 +10584,7 @@ tr.bring_next_field { } .select2-container .select2-selection--single { - height: 42px !important; + height: 38px !important; padding-left: 4px !important; display: block; user-select: none; @@ -10592,7 +10592,7 @@ tr.bring_next_field { } .select2-container .select2-selection--multiple { - height: 42px !important; + height: 38px !important; padding-left: 0px !important; } @@ -10621,7 +10621,7 @@ tr.bring_next_field { border: 0 !important; height: 20px !important; margin-left: -8px !important; - margin-top: 10px !important; + margin-top: 8px !important; position: absolute !important; width: 20px !important; background: url(../../images/dropdown-down.svg) no-repeat content-box !important; @@ -10642,7 +10642,7 @@ tr.bring_next_field { text-overflow: ellipsis; white-space: nowrap; color: #444 !important; - line-height: 42px !important; + line-height: 36px !important; } .select2-container--default.select2-container--open.select2-container--below @@ -10808,7 +10808,7 @@ tr.bring_next_field { position: absolute; left: 0; top: 0; - height: 58px; + height: 62px; border: 1px solid #e5e9ed; background-color: #fff; /*z-index: 10000;*/ @@ -11214,3 +11214,22 @@ form#satellite_conf_edit > fieldset.full-column { .inputs_date_details > input { margin: 5px; } + +.show-hide-pass { + position: relative; + right: 38px; + top: 0px; + border: 0; + outline: none; + margin: 0; + height: 40px; + width: 40px; + cursor: pointer; +} + +.show-hide-pass-background { + background-position: center right 15px; + background-repeat: no-repeat; + background-size: 24px; + background-image: url("../../images/enable.svg"); +}