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

Ent 3616 pantalla de login

See merge request artica/pandorafms!2248

Former-commit-id: c6e02af2b50a12933ec31cd5496fafb10a646c7a

pandora_console/general/login_page.php

@@ -82,42 +82,30 @@ if (!empty($page) && !empty($sec)) {
 }
 
 $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'])) {
     $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();
 $support_logo = ui_get_support_logo();
 echo '<div id="login_body" '.$login_body_style.'>';
 echo '<div id="header_login">';
-    echo '<div id="icon_custom_pandora">';
 
-if (file_exists(ENTERPRISE_DIR.'/load_enterprise.php')) {
-    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;">';
+        echo '<div id="list_icon_docs_support"><ul>';
 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 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 ($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><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 {
     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>';
@@ -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);
     }
 
-    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>';
@@ -167,9 +156,6 @@ switch ($login_screen) {
 
         if ($config['auth'] == 'saml') {
             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(
                     'nick',
                     '',
@@ -184,9 +170,6 @@ switch ($login_screen) {
             echo '</div>';
 
             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(
                     'pass',
                     '',
@@ -202,22 +185,19 @@ switch ($login_screen) {
                 );
             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"');
             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 '</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, '');
             echo '</div>';
         } else {
             echo '<div class="login_nick">';
-            echo '<div>';
-                html_print_image('/images/usuario_login.png', false);
-            echo '</div>';
                 html_print_input_text_extended(
                     'nick',
                     '',
@@ -231,9 +211,6 @@ switch ($login_screen) {
                 );
             echo '</div>';
             echo '<div class="login_pass">';
-            echo '<div>';
-                html_print_image('/images/candado_login.png', false);
-            echo '</div>';
                 html_print_input_text_extended(
                     'pass',
                     '',
@@ -289,9 +266,9 @@ switch ($login_screen) {
 if ($config['enterprise_installed']) {
     if ($config['reset_pass_option']) {
         $reset_pass_link = 'reset_pass.php';
-        // Reset password link
-        echo '<div style="width:70%; height:40px; margin-right:auto; margin-left:auto; margin-top:20px; text-align:center;">';
-        echo '<a style="color: white !important;" href="index.php?reset=true&first=true">'.__('Forgot your password?');
+        // Reset password link.
+        echo '<div class="reset_password">';
+        echo '<a href="index.php?reset=true&first=true">'.__('Forgot your password?');
         echo '</a>';
         echo '</div>';
     }
@@ -544,7 +521,7 @@ ui_require_jquery_file('jquery-ui.min');
 ?>
 
 <?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(array('id' => 'modal_alert', 'hidden' => true));

pandora_console/include/functions_config.php

@@ -1828,11 +1828,11 @@ function config_process_config()
     }
 
     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'])) {
-        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'])) {

pandora_console/include/styles/login.css

@@ -29,41 +29,11 @@ div#error_buttons a {
   width: 100%;
   z-index: -9999;
   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;
 }
 
-/*@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 {
   color: #fff !important;
   padding: 0px 10px;
@@ -77,7 +47,6 @@ h1#log_f {
 }
 
 div#error_login {
-  text-align: center;
   margin-top: 5px;
   margin-left: 5px;
   width: 75%;
@@ -104,8 +73,11 @@ div#login_f {
   width: 100%;
   position: absolute;
   bottom: 10px;
-  color: #fff;
+  color: #878787;
   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 {
   width: 100%;
   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 {
-  float: right;
-  margin-top: 8px;
-  margin-right: 4%;
+  float: left;
+  margin-top: 25px;
+  margin-left: 5%;
 }
 
 div#list_icon_docs_support ul {
   margin-top: 5px;
+  line-height: 36px;
 }
 
 div#list_icon_docs_support ul li {
@@ -145,6 +111,11 @@ div#list_icon_docs_support ul li {
   font-size: 10pt;
 }
 
+div#list_icon_docs_support ul li a {
+  color: #979797;
+  font-size: 10pt;
+}
+
 li#li_margin_left {
   margin-left: 30px;
 }
@@ -162,14 +133,6 @@ div.login_page {
   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 {
   margin-bottom: 40px;
   text-align: center;
@@ -177,7 +140,7 @@ div.login_logo_icon {
 
 div.login_logo_icon img {
   margin: 0 auto;
-  width: 150px;
+  max-width: 70%;
 }
 
 div.login_double_auth_code,
@@ -186,27 +149,36 @@ div.login_pass {
   margin: 0 auto;
   width: 70%;
   height: 40px;
-  background-color: rgba(255, 255, 255, 0.2) !important;
   margin-bottom: 25px;
   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_pass img {
-  vertical-align: middle;
-  margin: 3px;
+div.login_nick input {
+  background-image: url("../../images/usuario_login.png");
+}
+
+div.login_pass input {
+  background-image: url("../../images/candado_login.png");
 }
 
 div.login_nick input,
 div.login_pass input {
-  background-color: rgba(255, 255, 255, 0) !important;
   border: 0px !important;
-  color: white !important;
-  border-radius: 0px;
-  width: 89%;
+  color: #343434;
+  border-radius: 3px;
+  width: 100%;
   height: 40px;
-  font-size: 9pt;
-  padding: 0px !important;
+  font-size: 10pt;
+  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,
@@ -224,46 +196,76 @@ div.login_pass input:-webkit-autofill:focus,
 div.login_pass input:-webkit-autofill:active {
   transition: background-color 10000s ease-in-out 0s;
   -webkit-box-shadow: 0 0 0px 0px transparent inset !important;
-  -webkit-text-fill-color: white !important;
+  -webkit-text-fill-color: #343434 !important;
   border: 0px;
   width: 89%;
 }
 
 div.login_nick input::-webkit-input-placeholder,
 div.login_pass input::-webkit-input-placeholder {
-  color: white;
+  color: #343434;
 }
 
-div.login_pass img,
-div.login_nick img {
-  width: 30px;
-}
-
-div.login_pass div,
-div.login_nick div {
-  float: left;
-  width: 11%;
-}
-
-div.login_button {
+div.login_button,
+div.login_button_saml {
   margin: 0 auto;
-  width: 70%;
+  width: 40%;
   height: 40px;
-  background-color: rgb(25, 25, 25);
-  border: 1px solid white;
   min-width: 260px;
+  margin-bottom: 20px;
 }
 
 div.login_button input {
   width: 100%;
-  background-color: rgb(25, 25, 25) !important;
+  background-color: #82b92e !important;
   text-align: center;
-  border: 0px;
-  border-radius: 0px;
   height: 40px;
   padding: 0px;
-  font-size: 9pt;
-  color: white;
+  font-size: 11pt;
+  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 {
@@ -307,6 +309,21 @@ div.img_banner_login img {
   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) {
   span.span1 {
     font-size: 30pt;