9555-Login

This commit is contained in:
Pablo Aragon 2023-04-11 12:26:28 +02:00
parent 9da3816a88
commit ba9cdf029d
4 changed files with 260 additions and 49 deletions

View File

@ -13338,7 +13338,7 @@ $.widget( "mobile.textinput", {
},
_handleBlur: function() {
this._removeClass( this._outer, null, "ui-focus" );
// this._removeClass( this._outer, null, "ui-focus" );
if ( this.options.preventFocusZoom ) {
$.mobile.zoom.enable( true );
}
@ -13351,7 +13351,7 @@ $.widget( "mobile.textinput", {
if ( this.options.preventFocusZoom ) {
$.mobile.zoom.disable( true );
}
this._addClass( this._outer, null, "ui-focus" );
// this._addClass( this._outer, null, "ui-focus" );
},
_setOptions: function( options ) {
@ -15410,10 +15410,10 @@ var selectmenu = $.widget( "mobile.selectmenu", [ {
that.button.addClass( "ui-button-active" );
} )
.bind( "focus", function() {
that.button.addClass( "ui-focus" );
// that.button.addClass( "ui-focus" );
} )
.bind( "blur", function() {
that.button.removeClass( "ui-focus" );
// that.button.removeClass( "ui-focus" );
} )
.bind( "focus vmouseover", function() {
that.button.trigger( "vmouseover" );

View File

@ -1076,9 +1076,8 @@ li.ui-btn {
}
.login_logo img {
width: 220px;
width: 80%;
margin-bottom: 10px;
padding-top: 5%;
}
.untiny {
@ -1126,7 +1125,6 @@ li.ui-btn {
.login_logo img {
width: 300px;
margin-bottom: 20px;
padding-top: 5%;
}
.tiny {
@ -1135,7 +1133,7 @@ li.ui-btn {
}
#login_container {
width: 60%;
width: 80%;
margin: 0 auto;
max-width: 300px;
padding-top: 5%;
@ -1535,14 +1533,118 @@ img.os-big-icon[src$=".svg"] {
height: 100px;
}
div.noresizevc.graph.adapted_sparse
div.noresizevc.graph
div.flot-x-axis.flot-x1-axis.xAxis.x1Axis
> div.flot-tick-label.tickLabel:nth-child(odd) {
visibility: hidden !important;
}
div.noresizevc.graph.adapted_sparse
div.noresizevc.graph
div.flot-x-axis.flot-x1-axis.xAxis.x1Axis
> div.flot-tick-label.tickLabel:first-child {
visibility: visible !important;
}
.relative {
position: relative;
}
.container-div-input-password input {
width: 100%;
}
.show-hide-pass {
position: absolute;
right: 0px;
top: 4px;
border: 0;
outline: none;
margin: 0;
height: 30px;
width: 35px;
cursor: pointer;
display: inline-block;
}
div.relative.container-div-input-password > div > input {
background-repeat: no-repeat !important;
background-size: 25px !important;
background-position: right 5px bottom 50% !important;
padding-right: 42px;
}
input[name="login_btn"],
input[name="auth_code_btn"] {
height: 50px;
font-family: Arial, Helvetica, sans-serif;
line-height: 24px;
/* box-shadow: 0px 3px 6px #c7c7c7 !important; */
color: #fff !important;
border: 0px;
border-radius: 15px !important;
font-weight: bold;
background: linear-gradient(90deg, #81b82f 0%, #1d7873 100%);
}
body.login-background {
/* background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2)), */
background: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.1)),
url("../../../images/backgrounds/random_backgrounds/CGI_nodes.jpg") !important;
background-size: cover !important;
background-position: center !important;
}
body.login-background #text-user,
body.login-background #text-password,
body.login-background #text-auth_code {
background-color: #f6f7fb;
border: 0px;
color: #343434;
border-radius: 3px;
width: 100%;
height: 40px;
box-sizing: border-box;
}
body.login-background div#user-container input:-webkit-autofill,
body.login-background div#user-container input:-webkit-autofill:hover,
body.login-background div#user-container input:-webkit-autofill:focus,
body.login-background div#user-container input:-webkit-autofill:active,
body.login-background div#password-container input:-webkit-autofill,
body.login-background div#password-container input:-webkit-autofill:hover,
body.login-background div#password-container input:-webkit-autofill:focus,
body.login-background div#password-container input:-webkit-autofill:active,
body.login-background div#auth_code-container input:-webkit-autofill,
body.login-background div#auth_code-container input:-webkit-autofill:hover,
body.login-background div#auth_code-container input:-webkit-autofill:focus,
body.login-background div#auth_code-container input:-webkit-autofill:active {
transition: background-color 10000s ease-in-out 0s;
-webkit-box-shadow: 0 0 0px 0px transparent inset;
-webkit-text-fill-color: #343434;
border: 0px;
width: 89%;
}
div#ver_num {
color: #fff;
margin-top: 15px;
text-shadow: none;
font-size: smaller;
}
body.login-background a.ui-button[data-icon="ui-icon-back"] {
background-color: var(--secondary-color) !important;
border: 2px solid var(--primary-color) !important;
color: var(--primary-color) !important;
display: flex;
flex-direction: row-reverse;
align-items: center;
margin-top: 2px !important;
padding: 3px 5px !important;
}
body.login-background
a.ui-button[data-icon="ui-icon-back"]
> span.ui-button-icon-space {
width: 5px;
}

View File

@ -511,9 +511,14 @@ class Ui
$html .= "<label for='".$options['id']."'>".$options['label']."</label>\n";
}
// Erase other options and only for the input
// Erase other options and only for the input.
unset($options['label']);
if ($options['type'] === 'password') {
$html .= '<div class="relative container-div-input-password">';
$options['style'] .= 'background-image: url("'.ui_get_full_url('/').'/images/enable.svg");';
}
$html .= '<input ';
foreach ($options as $option => $value) {
$html .= ' '.$option."='".$value."' ";
@ -521,6 +526,26 @@ class Ui
$html .= ">\n";
if ($options['type'] === 'password') {
$html .= '<div class="show-hide-pass" onclick="show_hide_password(event, \''.ui_get_full_url('/').'\')"></div>';
$html .= '</div>';
$html .= '
<script>
function show_hide_password(e, url) {
let inputPass = e.target.previousElementSibling.firstChild;
console.log(inputPass);
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)";
}
}
</script>';
}
$html .= "</fieldset>\n";
$html .= "</div>\n";

View File

@ -366,6 +366,53 @@ class User
$ui->showFooter(false);
$ui->beginContent();
$ui->contentAddHtml(
'
<style>
div.ui-content {
animation: container_login 2s ease;
}
@keyframes container_login {
0% {
transform: scale(.93);
opacity: 0.1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.ui-page-active {
padding-top: 0px !important;
}
.ui-page-theme-a {
background-color: transparent !important;
}
.ui-mobile {
height: 100% !important;
}
</style>
<script>
$(document).ready(function () {
$(".ui-header.ui-bar-inherit.ui-header-fixed.slidedown").remove();
$("div#main_page").css({
"display": "flex",
"flex-direction": "column",
"justify-content": "center"
});
$(".ui-overlay-a").addClass("login-background");
$(".ui-overlay-a").removeClass("ui-overlay-a");
$(".ui-page-theme-a").css({"background-color":"transparent !important"});
});
</script>
'
);
$logo_image = html_print_image(
ui_get_mobile_login_icon(),
true,
@ -389,14 +436,15 @@ class User
'name' => 'user',
'value' => $this->user,
'placeholder' => __('user'),
'label' => __('User'),
// 'autofocus' => 'autofocus',
// 'label' => __('User'),
];
$ui->formAddInputText($options);
$options = [
'name' => 'password',
'value' => '',
'placeholder' => __('password'),
'label' => __('Password'),
// 'label' => __('Password'),
'required' => 'required',
];
$ui->formAddInputPassword($options);
@ -431,6 +479,7 @@ class User
}
$ui->contentAddHtml('</div>');
$ui->contentAddHtml('<div class="center" id="ver_num">'.$pandora_version.'</div>');
$ui->endContent();
$ui->showPage();
@ -465,43 +514,78 @@ class User
$ui->createHeader('', $left_button);
$ui->showFooter(false);
$ui->beginContent();
$ui->contentAddHtml(
'<div class="login_logo center">'.html_print_image(
ui_get_mobile_login_icon(),
true,
[
'alt' => 'logo',
'border' => 0,
],
false,
false,
false,
true
).'</div>'
);
$ui->contentAddHtml('<div id="login_container">');
$ui->beginForm();
$ui->formAddHtml(html_print_input_hidden('action', 'double_auth', true));
$options = [
'name' => 'auth_code',
'value' => '',
'placeholder' => __('Authenticator code'),
'label' => __('Authenticator code'),
];
$ui->formAddInputPassword($options);
$options = [
'value' => __('Check code'),
'icon' => 'arrow-r',
'icon_pos' => 'right',
'name' => 'auth_code_btn',
];
$ui->formAddSubmitButton($options);
$ui->endForm();
$ui->contentAddHtml('</div>');
$ui->endContent();
$ui->showPage();
$this->errorDoubleAuth = false;
$ui->contentAddHtml(
'
<style>
.ui-page-active {
padding-top: 0px !important;
}
.ui-page-theme-a {
background-color: transparent !important;
}
.ui-mobile {
height: 100% !important;
}
</style>
<script>
$(document).ready(function () {
// $(".ui-header.ui-bar-inherit.ui-header-fixed.slidedown").remove();
$(".ui-header.ui-bar-inherit.ui-header-fixed.slidedown").css({"background-color":"transparent"});
$("div#main_page").css({
"display": "flex",
"flex-direction": "column",
"justify-content": "center"
});
$(".ui-overlay-a").addClass("login-background");
$(".ui-overlay-a").removeClass("ui-overlay-a");
$(".ui-page-theme-a").css({"background-color":"transparent !important"});
});
</script>
'
);
$ui->contentAddHtml(
'<div class="login_logo center">'.html_print_image(
ui_get_mobile_login_icon(),
true,
[
'alt' => 'logo',
'border' => 0,
],
false,
false,
false,
true
).'</div>'
);
$ui->contentAddHtml('<div id="login_container">');
$ui->beginForm();
$ui->formAddHtml(html_print_input_hidden('action', 'double_auth', true));
$options = [
'name' => 'auth_code',
'value' => '',
'placeholder' => __('Authenticator code'),
'autofocus' => 'autofocus',
// 'label' => __('Authenticator code'),
];
$ui->formAddInputPassword($options);
$options = [
'value' => __('Check code'),
'icon' => 'arrow-r',
'icon_pos' => 'right',
'name' => 'auth_code_btn',
];
$ui->formAddSubmitButton($options);
$ui->endForm();
$ui->contentAddHtml('</div>');
$ui->contentAddHtml('<div class="center" id="ver_num">'.$pandora_version.'</div>');
$ui->endContent();
$ui->showPage();
$this->errorDoubleAuth = false;
}