10712-New login
This commit is contained in:
Pablo Aragon
parent
de93dd1c6e
commit
6b140445c3
|
|
@ -29,8 +29,9 @@ require_once __DIR__.'/../include/functions_html.php';
|
|||
|
||||
|
||||
if ($config['visual_animation']) {
|
||||
// form#login_form, div.login_data {
|
||||
echo '<style>
|
||||
div.container_login {
|
||||
div.container_login {
|
||||
animation: container_login 3s ease;
|
||||
}
|
||||
|
||||
|
|
@ -185,7 +186,7 @@ echo '</div>';
|
|||
|
||||
echo '<div class="container_login">';
|
||||
echo '<div class="login_page">';
|
||||
echo '<form method="post" action="'.ui_get_full_url('index.php'.$url).'" ><div class="login_logo_icon">';
|
||||
echo '<form method="post" id="login_form" action="'.ui_get_full_url('index.php'.$url).'" ><div class="login_logo_icon">';
|
||||
echo '<a href="'.$logo_link.'">';
|
||||
if (is_metaconsole() === true) {
|
||||
if (!isset($config['custom_logo_login'])) {
|
||||
|
|
@ -307,8 +308,9 @@ switch ($login_screen) {
|
|||
'',
|
||||
false,
|
||||
'',
|
||||
'autocomplete="off" placeholder="'.__('User').'"'
|
||||
'autocomplete="off" class="input" placeholder=" "'
|
||||
);
|
||||
echo '<label for="nick" class="placeholder">'.__('User').'</label>';
|
||||
echo '</div>';
|
||||
echo '<div class="login_pass">';
|
||||
html_print_input_text_extended(
|
||||
|
|
@ -320,20 +322,18 @@ switch ($login_screen) {
|
|||
'',
|
||||
false,
|
||||
'',
|
||||
'autocomplete="off" placeholder="'.__('Password').'"',
|
||||
'autocomplete="off" class="input" placeholder=" "',
|
||||
false,
|
||||
true
|
||||
);
|
||||
echo '<label for="pass" class="placeholder">'.__('Password').'</label>';
|
||||
echo '</div>';
|
||||
echo '<div class="login_button">';
|
||||
html_print_submit_button(
|
||||
__('Login'),
|
||||
__('Let's go'),
|
||||
'login_button',
|
||||
false,
|
||||
[
|
||||
'fixed_id' => 'submit-login_button',
|
||||
'icon' => 'signin',
|
||||
]
|
||||
['fixed_id' => 'submit-login_button']
|
||||
);
|
||||
echo '</div>';
|
||||
}
|
||||
|
|
@ -350,11 +350,32 @@ switch ($login_screen) {
|
|||
echo '<div>';
|
||||
|
||||
echo '</div>';
|
||||
html_print_input_text_extended('auth_code', '', 'auth_code', '', '', '', false, '', 'class="login login_password" placeholder="'.__('Authentication code').'"', false, true);
|
||||
html_print_input_text_extended(
|
||||
'auth_code',
|
||||
'',
|
||||
'auth_code',
|
||||
'',
|
||||
'',
|
||||
'',
|
||||
false,
|
||||
'',
|
||||
'class="login login_password input" placeholder=" "',
|
||||
false,
|
||||
true
|
||||
);
|
||||
echo '<label for="pass" class="placeholder">'.__('Authentication code').'</label>';
|
||||
echo '</div>';
|
||||
echo '<div class="login_button">';
|
||||
// html_print_submit_button(__('Check code').' >', 'login_button', false, 'class="next_login"');
|
||||
html_print_submit_button(__('Check code').' >', 'login_button', false, [ 'fixed_id' => 'submit-login_button', 'class' => 'next_login']);
|
||||
html_print_submit_button(
|
||||
__('Check code'),
|
||||
'login_button',
|
||||
false,
|
||||
[
|
||||
'fixed_id' => 'submit-login_button',
|
||||
'class' => 'next_login',
|
||||
]
|
||||
);
|
||||
echo '</div>';
|
||||
break;
|
||||
|
||||
|
|
@ -425,33 +446,8 @@ html_print_csrf_hidden();
|
|||
|
||||
echo '</form></div>';
|
||||
echo '<div class="login_data">';
|
||||
echo '<div class ="text_banner_login">';
|
||||
echo '<div><span class="span1">';
|
||||
if (file_exists(ENTERPRISE_DIR.'/load_enterprise.php')) {
|
||||
if ($config['custom_title1_login']) {
|
||||
echo io_safe_output($config['custom_title1_login']);
|
||||
} else {
|
||||
echo __('WELCOME TO %s', get_product_name());
|
||||
}
|
||||
} else {
|
||||
echo __('WELCOME TO %s', get_product_name());
|
||||
}
|
||||
|
||||
echo '</span></div>';
|
||||
echo '<div><span class="span2">';
|
||||
if (file_exists(ENTERPRISE_DIR.'/load_enterprise.php')) {
|
||||
if ($config['custom_title2_login']) {
|
||||
echo io_safe_output($config['custom_title2_login']);
|
||||
} else {
|
||||
echo __('NEXT GENERATION');
|
||||
}
|
||||
} else {
|
||||
echo __('NEXT GENERATION');
|
||||
}
|
||||
|
||||
echo '</span></div>';
|
||||
echo '</div>';
|
||||
echo '<div class ="img_banner_login">';
|
||||
echo '<div class ="img_banner_login">';
|
||||
if (file_exists(ENTERPRISE_DIR.'/load_enterprise.php')) {
|
||||
if (empty($config['custom_splash_login']) === false && $config['custom_splash_login'] !== 'default') {
|
||||
html_print_image(
|
||||
|
|
@ -466,35 +462,61 @@ if (file_exists(ENTERPRISE_DIR.'/load_enterprise.php')) {
|
|||
);
|
||||
} else {
|
||||
echo '
|
||||
<div class="loginimg-container">
|
||||
<div class="lineone"></div>
|
||||
<div class="linetwo"></div>
|
||||
<div class="linethree"></div>
|
||||
<div style="display:flex;">
|
||||
<div class="towerone"></div>
|
||||
<div class="towertwo"></div>
|
||||
<div class="towerthree"></div>
|
||||
<div class="towerfour"></div>
|
||||
<div class="loginimg-container">
|
||||
<div class="lineone"></div>
|
||||
<div class="linetwo"></div>
|
||||
<div class="linethree"></div>
|
||||
<div style="display:flex;">
|
||||
<div class="towerone"></div>
|
||||
<div class="towertwo"></div>
|
||||
<div class="towerthree"></div>
|
||||
<div class="towerfour"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
';
|
||||
';
|
||||
}
|
||||
} else {
|
||||
echo '
|
||||
<div class="loginimg-container">
|
||||
<div class="lineone"></div>
|
||||
<div class="linetwo"></div>
|
||||
<div class="linethree"></div>
|
||||
<div style="display:flex;">
|
||||
<div class="towerone"></div>
|
||||
<div class="towertwo"></div>
|
||||
<div class="towerthree"></div>
|
||||
<div class="towerfour"></div>
|
||||
<div class="loginimg-container">
|
||||
<div class="lineone"></div>
|
||||
<div class="linetwo"></div>
|
||||
<div class="linethree"></div>
|
||||
<div style="display:flex;">
|
||||
<div class="towerone"></div>
|
||||
<div class="towertwo"></div>
|
||||
<div class="towerthree"></div>
|
||||
<div class="towerfour"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
';
|
||||
';
|
||||
}
|
||||
|
||||
echo '</div>';
|
||||
|
||||
echo '<div class ="text_banner_login">';
|
||||
// echo '<div><span class="span1">';
|
||||
// if (file_exists(ENTERPRISE_DIR.'/load_enterprise.php')) {
|
||||
// if ($config['custom_title1_login']) {
|
||||
// echo io_safe_output($config['custom_title1_login']);
|
||||
// } else {
|
||||
// echo __('WELCOME TO %s', get_product_name());
|
||||
// }
|
||||
// } else {
|
||||
// echo __('WELCOME TO %s', get_product_name());
|
||||
// }
|
||||
// echo '</span></div>';
|
||||
echo '<div><span class="span2">';
|
||||
if (file_exists(ENTERPRISE_DIR.'/load_enterprise.php')) {
|
||||
if ($config['custom_title2_login']) {
|
||||
echo io_safe_output($config['custom_title2_login']);
|
||||
} else {
|
||||
echo __('NEXT GENERATION');
|
||||
}
|
||||
} else {
|
||||
echo __('NEXT GENERATION');
|
||||
}
|
||||
|
||||
echo '</span></div>';
|
||||
echo '</div>';
|
||||
echo '</div>';
|
||||
echo '</div>';
|
||||
|
|
|
|||
|
|
@ -83,12 +83,13 @@ div#login_f {
|
|||
|
||||
/* --- Login page - header --- */
|
||||
div#header_login {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
/* background-color: rgba(0, 0, 0, 0.6); */
|
||||
position: absolute;
|
||||
height: 30px;
|
||||
margin-top: 1.04%;
|
||||
margin-left: 1.04%;
|
||||
border-radius: 8px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
div#list_icon_docs_support {
|
||||
|
|
@ -138,26 +139,23 @@ li#li_margin_support {
|
|||
padding-right: 5px;
|
||||
}
|
||||
|
||||
/* --- Login page - form --- */
|
||||
div.container_login {
|
||||
margin-top: 13.89vw;
|
||||
/* margin-left: 19.95vw; */
|
||||
}
|
||||
|
||||
div.login_page {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 8px;
|
||||
width: 363px;
|
||||
height: auto;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
width: 40vw;
|
||||
min-width: 300px;
|
||||
height: 100vh;
|
||||
float: left;
|
||||
margin-left: 19.95vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1280px) {
|
||||
/* @media only screen and (max-width: 1280px) {
|
||||
div.login_page {
|
||||
margin-left: 9.95vw;
|
||||
}
|
||||
}
|
||||
} */
|
||||
|
||||
div.login_logo_icon {
|
||||
margin: 4.18% 5.51% 40px;
|
||||
|
|
@ -166,42 +164,51 @@ div.login_logo_icon {
|
|||
|
||||
div.login_logo_icon img {
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
div.login_double_auth_code,
|
||||
div.login_nick,
|
||||
div.login_pass {
|
||||
margin: 0 auto;
|
||||
width: 70%;
|
||||
width: 300px;
|
||||
height: 40px;
|
||||
margin-bottom: 20px;
|
||||
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 input,
|
||||
div.login_pass input {
|
||||
background-color: #f6f7fb;
|
||||
background: transparent;
|
||||
border: 0px;
|
||||
color: #343434;
|
||||
border-radius: 3px;
|
||||
border-radius: 0px;
|
||||
border-bottom: 1px solid #c5c5c5;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
font-size: 10pt;
|
||||
padding: 0px 0px 0px 8%;
|
||||
font-size: 12pt;
|
||||
padding: 0px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 27px;
|
||||
background-position: right 10px bottom 50%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
div.login_pass > input#pass {
|
||||
background-image: url(../../images/enable.svg);
|
||||
}
|
||||
|
||||
input:not([type="image"]):focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
border: 0px;
|
||||
border-radius: 0px;
|
||||
border-bottom: 1px solid #e7e7e7;
|
||||
}
|
||||
|
||||
div.login_button button {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
|
@ -224,10 +231,15 @@ div.login_pass input:focus {
|
|||
outline: none;
|
||||
}
|
||||
|
||||
div.login_nick,
|
||||
div.login_pass {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div.login_nick {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
#show-hide-pass {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
|
|
@ -256,17 +268,11 @@ div.login_pass input:-webkit-autofill:active {
|
|||
width: 89%;
|
||||
}
|
||||
|
||||
div.login_nick input::-webkit-input-placeholder,
|
||||
div.login_pass input::-webkit-input-placeholder {
|
||||
color: #343434;
|
||||
}
|
||||
|
||||
div.login_button,
|
||||
div.login_button_saml {
|
||||
margin: 0 auto;
|
||||
width: 40%;
|
||||
width: 300px;
|
||||
height: 40px;
|
||||
min-width: 260px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
|
@ -304,7 +310,7 @@ div.login_button_saml input:hover {
|
|||
}
|
||||
|
||||
.login_back {
|
||||
margin-top: 60px !important;
|
||||
margin-top: 30px !important;
|
||||
}
|
||||
|
||||
.login_back input {
|
||||
|
|
@ -318,51 +324,40 @@ div.login_button_saml input:hover {
|
|||
}
|
||||
|
||||
div.login_data {
|
||||
max-width: 40.21vw;
|
||||
max-height: 21.82%;
|
||||
float: left;
|
||||
margin-left: 100px;
|
||||
margin-right: 0px;
|
||||
margin-top: 30px;
|
||||
padding-right: 0px;
|
||||
height: 100vh;
|
||||
padding-left: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
div.text_banner_login {
|
||||
width: 100%;
|
||||
margin-bottom: 60px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.text_banner_login span {
|
||||
width: 100%;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
span.span1 {
|
||||
font-size: 38px;
|
||||
letter-spacing: -0.38px;
|
||||
font-weight: bold;
|
||||
font-family: "lato-bolder";
|
||||
color: white;
|
||||
line-height: 49pt;
|
||||
}
|
||||
|
||||
span.span2 {
|
||||
font-size: 20px;
|
||||
letter-spacing: -0.26px;
|
||||
font-weight: 350;
|
||||
color: #c1ccdc;
|
||||
line-height: 32pt;
|
||||
}
|
||||
|
||||
div.img_banner_login {
|
||||
text-align: center;
|
||||
display: block;
|
||||
width: 700px;
|
||||
font-size: 80pt;
|
||||
line-height: 80pt;
|
||||
font-family: "lato-bolder";
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
div.img_banner_login img {
|
||||
max-width: 70%;
|
||||
min-width: 70%;
|
||||
max-height: 50%;
|
||||
min-height: 50%;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.reset_password {
|
||||
|
|
@ -380,7 +375,7 @@ div.img_banner_login img {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media all and (max-width: 1200px) {
|
||||
@media all and (max-width: 1266px) {
|
||||
span.span1 {
|
||||
font-size: 38px;
|
||||
letter-spacing: -0.38px;
|
||||
|
|
@ -389,11 +384,11 @@ div.img_banner_login img {
|
|||
line-height: 49pt;
|
||||
}
|
||||
span.span2 {
|
||||
font-size: 20px;
|
||||
letter-spacing: -0.26px;
|
||||
font-weight: 350;
|
||||
color: #c1ccdc;
|
||||
line-height: 32pt;
|
||||
width: 550px;
|
||||
font-size: 60pt;
|
||||
line-height: 60pt;
|
||||
font-family: "lato-bolder";
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -502,7 +497,8 @@ div.button_message_alert_form input {
|
|||
background-position: center center;
|
||||
width: 508px;
|
||||
height: 246px;
|
||||
margin-left: 1vw;
|
||||
transform: scale(0.8);
|
||||
margin-left: -50px;
|
||||
}
|
||||
|
||||
/* Horizontal lines */
|
||||
|
|
@ -708,13 +704,13 @@ div.login_pass input:-webkit-autofill,
|
|||
div.login_pass input:-webkit-autofill:hover,
|
||||
div.login_pass input:-webkit-autofill:focus,
|
||||
div.login_pass input:-webkit-autofill:active {
|
||||
background-color: #f6f7fb;
|
||||
-webkit-text-fill-color: #c5c5c5;
|
||||
border: 0px;
|
||||
border-radius: 3px;
|
||||
border-bottom: 1px solid #c5c5c5;
|
||||
border-radius: 0px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
font-size: 10pt;
|
||||
padding: 0px 0px 0px 8%;
|
||||
font-size: 12pt;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 27px;
|
||||
background-position: right 10px bottom 50%;
|
||||
|
|
@ -728,26 +724,75 @@ div.login_pass input:-webkit-autofill:active {
|
|||
background-image: url("../../images/eye-closed-input.png");
|
||||
}
|
||||
|
||||
.content_alert {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
button.submitButton {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
min-width: 110px;
|
||||
height: 42px;
|
||||
height: 50px;
|
||||
font-size: 14px;
|
||||
font-family: "Pandora-Regular";
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
align-items: center;
|
||||
line-height: 24px;
|
||||
box-shadow: 0px 3px 6px #c7c7c7;
|
||||
color: #fff;
|
||||
border: 2px solid var(--primary-color);
|
||||
border-radius: 8px;
|
||||
border: 0px;
|
||||
border-radius: 15px;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
z-index: 100;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.content_alert {
|
||||
margin: 0 !important;
|
||||
button.buttonButton:not(.secondary):not(.link):not(.mini),
|
||||
button.submitButton:not(.secondary):not(.link):not(.mini) {
|
||||
background: linear-gradient(90deg, #81b82f 0%, #1d7873 100%);
|
||||
}
|
||||
|
||||
button.submitButton:hover {
|
||||
background-position: 0 !important;
|
||||
}
|
||||
|
||||
button.submitButton > span {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 15pt;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
height: 50px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #c5c5c5;
|
||||
top: 15px;
|
||||
left: 0px;
|
||||
font-size: 12pt;
|
||||
line-height: 14px;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
/* transform-origin: 0 100%; */
|
||||
/* transition: transform 2000ms, color 2000ms; */
|
||||
}
|
||||
|
||||
/* .input:focus ~ .placeholder,
|
||||
.input:not(:placeholder-shown) ~ .placeholder {
|
||||
transform: translateY(0px) scale(0.75);
|
||||
} */
|
||||
|
||||
.input:not(:placeholder-shown) ~ .placeholder {
|
||||
color: #c5c5c5;
|
||||
font-size: 9pt;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
.input:focus ~ .placeholder {
|
||||
color: #fff;
|
||||
font-size: 9pt;
|
||||
top: -10px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue