Merge branch 'ent-3616-Pantalla-de-login' into 'develop'

Ent 3616 pantalla de login

See merge request artica/pandorafms!2248

Former-commit-id: c6e02af2b50a12933ec31cd5496fafb10a646c7a
This commit is contained in:
Alejandro Fraguas 2019-03-12 17:23:04 +01:00
commit cb1fc5dc67
15 changed files with 145 additions and 151 deletions

View File

@ -82,42 +82,30 @@ if (!empty($page) && !empty($sec)) {
} }
$login_body_style = ''; $login_body_style = '';
// Overrides the default background with the defined by the user // Overrides the default background with the defined by the user.
if (!empty($config['login_background'])) { if (!empty($config['login_background'])) {
$background_url = 'images/backgrounds/'.$config['login_background']; $background_url = 'images/backgrounds/'.$config['login_background'];
$login_body_style = "style=\"background-image: url('$background_url');\""; $login_body_style = "style=\"background:linear-gradient(74deg, #02020255 36%, transparent 36%), url('".$background_url."');\"";
} }
// Get the custom icons // Get the custom icons.
$docs_logo = ui_get_docs_logo(); $docs_logo = ui_get_docs_logo();
$support_logo = ui_get_support_logo(); $support_logo = ui_get_support_logo();
echo '<div id="login_body" '.$login_body_style.'>'; echo '<div id="login_body" '.$login_body_style.'>';
echo '<div id="header_login">'; echo '<div id="header_login">';
echo '<div id="icon_custom_pandora">';
if (file_exists(ENTERPRISE_DIR.'/load_enterprise.php')) { echo '<div id="list_icon_docs_support"><ul>';
if (isset($config['custom_logo'])) {
echo '<img src="enterprise/images/custom_logo/'.$config['custom_logo'].'" alt="monitoring_console">';
} else {
echo '<img src="images/custom_logo/pandora_logo_head_4.png" alt="monitoring_console">';
}
} else {
echo '<img src="images/custom_logo/pandora_logo_head_3.png" alt="monitoring_console">';
}
echo '</div>';
echo '<div id="list_icon_docs_support"><ul style="line-height: 36px;">';
if ($docs_logo !== false) { if ($docs_logo !== false) {
echo '<li><a href="'.$config['custom_docs_url'].'" target="_blank"><img src="'.$docs_logo.'" alt="docs"></a></li>'; echo '<li><a href="'.$config['custom_docs_url'].'" target="_blank"><img src="'.$docs_logo.'" alt="docs"></a></li>';
} }
echo '<li><a style="color: white; font-size:inherit;" href="'.$config['custom_docs_url'].'" target="_blank">'.__('Docs').'</li>'; echo '<li><a href="'.$config['custom_docs_url'].'" target="_blank">'.__('Docs').'</li>';
if (file_exists(ENTERPRISE_DIR.'/load_enterprise.php')) { if (file_exists(ENTERPRISE_DIR.'/load_enterprise.php')) {
if ($support_logo !== false) { if ($support_logo !== false) {
echo '<li id="li_margin_left"><a href="'.$config['custom_support_url'].'" target="_blank"><img src="'.$support_logo.'" alt="support"></a></li>'; echo '<li id="li_margin_left"><a href="'.$config['custom_support_url'].'" target="_blank"><img src="'.$support_logo.'" alt="support"></a></li>';
} }
echo '<li><a style="color: white; font-size:inherit;" href="'.$config['custom_support_url'].'" target="_blank">'.__('Support').'</li>'; echo '<li><a href="'.$config['custom_support_url'].'" target="_blank">'.__('Support').'</li>';
} else { } else {
echo '<li id="li_margin_left"><a href="https://pandorafms.com/monitoring-services/support/" target="_blank"><img src="'.$support_logo.'" alt="support"></a></li>'; echo '<li id="li_margin_left"><a href="https://pandorafms.com/monitoring-services/support/" target="_blank"><img src="'.$support_logo.'" alt="support"></a></li>';
echo '<li>'.__('Support').'</li>'; echo '<li>'.__('Support').'</li>';
@ -151,7 +139,8 @@ if (defined('METACONSOLE')) {
html_print_image('images/custom_logo_login/'.$config['custom_logo_login'], false, ['class' => 'login_logo', 'alt' => 'logo', 'border' => 0, 'title' => $logo_title], false, true); html_print_image('images/custom_logo_login/'.$config['custom_logo_login'], false, ['class' => 'login_logo', 'alt' => 'logo', 'border' => 0, 'title' => $logo_title], false, true);
} }
echo "<br><span style='font-size:120%;color:white;top:10px;position:relative;'>Community edition</span>"; // I comment this in case in the future we put a logo without text.
// echo "<br><span style='font-size:120%;color:white;top:10px;position:relative;'>Community edition</span>";.
} }
echo '</a></div>'; echo '</a></div>';
@ -167,9 +156,6 @@ switch ($login_screen) {
if ($config['auth'] == 'saml') { if ($config['auth'] == 'saml') {
echo '<div id="log_nick" class="login_nick" style="display: none;">'; echo '<div id="log_nick" class="login_nick" style="display: none;">';
echo '<div>';
html_print_image('/images/usuario_login.png', false);
echo '</div>';
html_print_input_text_extended( html_print_input_text_extended(
'nick', 'nick',
'', '',
@ -184,9 +170,6 @@ switch ($login_screen) {
echo '</div>'; echo '</div>';
echo '<div id="log_pass" class="login_pass" style="display: none;">'; echo '<div id="log_pass" class="login_pass" style="display: none;">';
echo '<div>';
html_print_image('/images/candado_login.png', false);
echo '</div>';
html_print_input_text_extended( html_print_input_text_extended(
'pass', 'pass',
'', '',
@ -202,54 +185,48 @@ switch ($login_screen) {
); );
echo '</div>'; echo '</div>';
echo '<div id="log_button" class="login_button" style="display: none; margin-bottom: 20px;">'; echo '<div id="log_button" class="login_button" style="display: none;">';
html_print_submit_button(__('Login as admin'), 'login_button', false, 'class="sub next_login"'); html_print_submit_button(__('Login as admin'), 'login_button', false, 'class="sub next_login"');
echo '</div>'; echo '</div>';
echo '<div class="login_button" id="remove_button" style="margin-bottom: 20px;">'; echo '<div class="login_button" id="remove_button">';
echo '<input type="button" id="input_saml" value="Login as admin" onclick="show_normal_menu()">'; echo '<input type="button" id="input_saml" value="Login as admin" onclick="show_normal_menu()">';
echo '</div>'; echo '</div>';
echo '<div class="login_button">'; echo '<div class="login_button login_button_saml">';
html_print_submit_button(__('Login with SAML'), 'login_button_saml', false, ''); html_print_submit_button(__('Login with SAML'), 'login_button_saml', false, '');
echo '</div>'; echo '</div>';
} else { } else {
echo '<div class="login_nick">'; echo '<div class="login_nick">';
echo '<div>'; html_print_input_text_extended(
html_print_image('/images/usuario_login.png', false); 'nick',
echo '</div>'; '',
html_print_input_text_extended( 'nick',
'nick', '',
'', '',
'nick', '',
'', false,
'', '',
'', 'autocomplete="off" placeholder="'.__('User').'"'
false, );
'',
'autocomplete="off" placeholder="'.__('User').'"'
);
echo '</div>'; echo '</div>';
echo '<div class="login_pass">'; echo '<div class="login_pass">';
echo '<div>'; html_print_input_text_extended(
html_print_image('/images/candado_login.png', false); 'pass',
echo '</div>'; '',
html_print_input_text_extended( 'pass',
'pass', '',
'', '',
'pass', '',
'', false,
'', '',
'', 'autocomplete="off" placeholder="'.__('Password').'"',
false, false,
'', true
'autocomplete="off" placeholder="'.__('Password').'"', );
false,
true
);
echo '</div>'; echo '</div>';
echo '<div class="login_button">'; echo '<div class="login_button">';
html_print_submit_button(__('Login'), 'login_button', false, 'class="sub next_login"'); html_print_submit_button(__('Login'), 'login_button', false, 'class="sub next_login"');
echo '</div>'; echo '</div>';
} }
break; break;
@ -289,9 +266,9 @@ switch ($login_screen) {
if ($config['enterprise_installed']) { if ($config['enterprise_installed']) {
if ($config['reset_pass_option']) { if ($config['reset_pass_option']) {
$reset_pass_link = 'reset_pass.php'; $reset_pass_link = 'reset_pass.php';
// Reset password link // Reset password link.
echo '<div style="width:70%; height:40px; margin-right:auto; margin-left:auto; margin-top:20px; text-align:center;">'; echo '<div class="reset_password">';
echo '<a style="color: white !important;" href="index.php?reset=true&first=true">'.__('Forgot your password?'); echo '<a href="index.php?reset=true&first=true">'.__('Forgot your password?');
echo '</a>'; echo '</a>';
echo '</div>'; echo '</div>';
} }
@ -544,7 +521,7 @@ ui_require_jquery_file('jquery-ui.min');
?> ?>
<?php <?php
// Hidden div to forced title // Hidden div to forced title.
html_print_div(['id' => 'forced_title_layer', 'class' => 'forced_title_layer', 'hidden' => true]); html_print_div(['id' => 'forced_title_layer', 'class' => 'forced_title_layer', 'hidden' => true]);
// html_print_div(array('id' => 'modal_alert', 'hidden' => true)); // html_print_div(array('id' => 'modal_alert', 'hidden' => true));

Binary file not shown.

After

Width:  |  Height:  |  Size: 213 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 286 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 172 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 690 B

After

Width:  |  Height:  |  Size: 476 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 8.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 305 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 276 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 459 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 561 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 669 B

After

Width:  |  Height:  |  Size: 454 B

View File

@ -1828,11 +1828,11 @@ function config_process_config()
} }
if (!isset($config['custom_title1_login'])) { if (!isset($config['custom_title1_login'])) {
config_update_value('custom_title1_login', __('WELCOME TO PANDORA FMS')); config_update_value('custom_title1_login', __('PANDORA FMS'));
} }
if (!isset($config['custom_title2_login'])) { if (!isset($config['custom_title2_login'])) {
config_update_value('custom_title2_login', __('NEXT GENERATION')); config_update_value('custom_title2_login', __('ONE TOOL TO MONITOR THEM ALL'));
} }
if (!isset($config['custom_docs_url'])) { if (!isset($config['custom_docs_url'])) {

View File

@ -29,41 +29,11 @@ div#error_buttons a {
width: 100%; width: 100%;
z-index: -9999; z-index: -9999;
position: absolute; position: absolute;
background-image: url("../../images/backgrounds/background_pandora_console_keys.jpg"); background: linear-gradient(74deg, #02020255 36%, transparent 36%),
url("../../images/backgrounds/background_pandora_console_keys.jpg");
background-repeat: repeat; background-repeat: repeat;
} }
/*@media screen and (max-width: 1024px) { /* Specific to this particular image */
/* #login_body {
left: 50%;
margin-left: -512px; /* 50% */
/* }
}
@media screen and (max-width: 1100px) { /* Specific to this particular image */
/* #login_body {
background-image: url("../../images/backgrounds/background_pandora_console_keys.jpg");
background-repeat: repeat;
}
}
@media screen and (max-width: 1400px) { /* Specific to this particular image */
/* #login_body {
background-image: url("../../images/backgrounds/background_pandora_console_keys.jpg");
background-repeat: repeat;
}
}
@media screen and (max-width: 2000px) { /* Specific to this particular image */
/* #login_body {
background-image: url("../../images/backgrounds/background_pandora_console_keys.jpg");
background-repeat: repeat;
}
}
@media screen and (min-width: 2000px) { /* Specific to this particular image */
/* #login_body {
background-image: url("../../images/backgrounds/background_pandora_console_keys.jpg");
background-repeat: repeat;
}
}*/
p.log_in { p.log_in {
color: #fff !important; color: #fff !important;
padding: 0px 10px; padding: 0px 10px;
@ -77,7 +47,6 @@ h1#log_f {
} }
div#error_login { div#error_login {
text-align: center;
margin-top: 5px; margin-top: 5px;
margin-left: 5px; margin-left: 5px;
width: 75%; width: 75%;
@ -104,8 +73,11 @@ div#login_f {
width: 100%; width: 100%;
position: absolute; position: absolute;
bottom: 10px; bottom: 10px;
color: #fff; color: #878787;
text-align: center; text-align: center;
font-family: "Open Sans", sans-serif;
font-weight: 700;
font-size: 8.5pt;
} }
/* /*
@ -118,23 +90,17 @@ div#login_f {
div#header_login { div#header_login {
width: 100%; width: 100%;
height: 65px; height: 65px;
background-color: rgba(255, 255, 255, 0.06);
}
div#icon_custom_pandora {
float: left;
margin-top: 5px;
margin-left: 4%;
} }
div#list_icon_docs_support { div#list_icon_docs_support {
float: right; float: left;
margin-top: 8px; margin-top: 25px;
margin-right: 4%; margin-left: 5%;
} }
div#list_icon_docs_support ul { div#list_icon_docs_support ul {
margin-top: 5px; margin-top: 5px;
line-height: 36px;
} }
div#list_icon_docs_support ul li { div#list_icon_docs_support ul li {
@ -145,6 +111,11 @@ div#list_icon_docs_support ul li {
font-size: 10pt; font-size: 10pt;
} }
div#list_icon_docs_support ul li a {
color: #979797;
font-size: 10pt;
}
li#li_margin_left { li#li_margin_left {
margin-left: 30px; margin-left: 30px;
} }
@ -162,14 +133,6 @@ div.login_page {
float: left; float: left;
} }
div.login_page form {
border-right: 1px solid #868686;
padding-top: 30px;
padding-bottom: 50px;
min-width: 400px;
max-height: 600px;
}
div.login_logo_icon { div.login_logo_icon {
margin-bottom: 40px; margin-bottom: 40px;
text-align: center; text-align: center;
@ -177,7 +140,7 @@ div.login_logo_icon {
div.login_logo_icon img { div.login_logo_icon img {
margin: 0 auto; margin: 0 auto;
width: 150px; max-width: 70%;
} }
div.login_double_auth_code, div.login_double_auth_code,
@ -186,27 +149,36 @@ div.login_pass {
margin: 0 auto; margin: 0 auto;
width: 70%; width: 70%;
height: 40px; height: 40px;
background-color: rgba(255, 255, 255, 0.2) !important;
margin-bottom: 25px; margin-bottom: 25px;
min-width: 260px; min-width: 260px;
background-color: #fff;
opacity: 0.77;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
border-radius: 3px;
} }
div.login_nick img, div.login_nick input {
div.login_pass img { background-image: url("../../images/usuario_login.png");
vertical-align: middle; }
margin: 3px;
div.login_pass input {
background-image: url("../../images/candado_login.png");
} }
div.login_nick input, div.login_nick input,
div.login_pass input { div.login_pass input {
background-color: rgba(255, 255, 255, 0) !important;
border: 0px !important; border: 0px !important;
color: white !important; color: #343434;
border-radius: 0px; border-radius: 3px;
width: 89%; width: 100%;
height: 40px; height: 40px;
font-size: 9pt; font-size: 10pt;
padding: 0px !important; padding: 0px 0px 0px 35px !important;
background-repeat: no-repeat;
background-size: 27px;
background-position: left center;
font-family: "Open Sans", sans-serif;
box-sizing: border-box;
} }
div.login_nick input:focus, div.login_nick input:focus,
@ -224,46 +196,76 @@ div.login_pass input:-webkit-autofill:focus,
div.login_pass input:-webkit-autofill:active { div.login_pass input:-webkit-autofill:active {
transition: background-color 10000s ease-in-out 0s; transition: background-color 10000s ease-in-out 0s;
-webkit-box-shadow: 0 0 0px 0px transparent inset !important; -webkit-box-shadow: 0 0 0px 0px transparent inset !important;
-webkit-text-fill-color: white !important; -webkit-text-fill-color: #343434 !important;
border: 0px; border: 0px;
width: 89%; width: 89%;
} }
div.login_nick input::-webkit-input-placeholder, div.login_nick input::-webkit-input-placeholder,
div.login_pass input::-webkit-input-placeholder { div.login_pass input::-webkit-input-placeholder {
color: white; color: #343434;
} }
div.login_pass img, div.login_button,
div.login_nick img { div.login_button_saml {
width: 30px;
}
div.login_pass div,
div.login_nick div {
float: left;
width: 11%;
}
div.login_button {
margin: 0 auto; margin: 0 auto;
width: 70%; width: 40%;
height: 40px; height: 40px;
background-color: rgb(25, 25, 25);
border: 1px solid white;
min-width: 260px; min-width: 260px;
margin-bottom: 20px;
} }
div.login_button input { div.login_button input {
width: 100%; width: 100%;
background-color: rgb(25, 25, 25) !important; background-color: #82b92e !important;
text-align: center; text-align: center;
border: 0px;
border-radius: 0px;
height: 40px; height: 40px;
padding: 0px; padding: 0px;
font-size: 9pt; font-size: 11pt;
color: white; color: #fff !important;
border: 1px solid #82b92e;
border-radius: 3px;
}
div.login_button_saml input {
border: 1px solid #fff;
background-color: #fff !important;
color: #000 !important;
background-image: url("../../images/saml_login.png");
background-repeat: no-repeat;
background-position: right 5% center;
}
div.login_button input:hover {
background-color: #fff !important;
color: #000 !important;
border: 1px solid #fff !important;
}
div.login_button_saml input:hover {
background-image: url("../../images/saml_login_hover.png");
background-color: transparent !important;
color: #fff !important;
border: 1px solid #fff !important;
}
#remove_button input {
background-image: url("../../images/user_login.png") !important;
background-repeat: no-repeat;
background-position: right 5% center;
}
#remove_button input:hover {
background-image: url("../../images/user_login_hover.png") !important;
}
.login_back input {
background-image: url("../../images/back_login.png") !important;
background-position: left 5% center !important;
}
.login_back input:hover {
background-image: url("../../images/back_login_hover.png") !important;
} }
div.login_data { div.login_data {
@ -307,6 +309,21 @@ div.img_banner_login img {
min-height: 50%; min-height: 50%;
} }
.reset_password {
width: 70%;
height: 40px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
text-align: center;
}
.reset_password a {
color: #ddd !important;
font-family: "Open Sans", sans-serif;
font-size: 8.5pt;
}
@media all and (max-width: 1200px) { @media all and (max-width: 1200px) {
span.span1 { span.span1 {
font-size: 30pt; font-size: 30pt;