Skip to content

Commit 8a50334

Browse files
Pek5892Pek5892
committed
refactor: miglioria login
1 parent ceee099 commit 8a50334

File tree

3 files changed

+302
-73
lines changed

3 files changed

+302
-73
lines changed

‎include/top.php‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -701,7 +701,9 @@ function checkActiveTab() {
701701
include_once $extra_file;
702702
}
703703

704-
if (!empty($messages['warning']) || !empty($messages['error'])) {
704+
// Non mostrare la card nella pagina di login quando ci sono solo errori
705+
if ((!empty($messages['warning']) || (!empty($messages['error']) && ($pageTitle != tr('Login')))) &&
706+
!($pageTitle == tr('Login') && empty($messages['warning']) && !empty($messages['error']))) {
705707
echo '
706708
<div class="card card-warning card-center card-center-large">
707709
<div class="card-header with-border text-center">
@@ -724,8 +726,8 @@ function checkActiveTab() {
724726
}
725727
}
726728

727-
// Errori
728-
if (!empty($messages['error'])) {
729+
// Errori - non mostrare nella pagina di login
730+
if (!empty($messages['error']) && (Auth::check() || $pageTitle != tr('Login'))) {
729731
foreach ($messages['error'] as $value) {
730732
echo '
731733
<div class="alert alert-danger push">
@@ -746,7 +748,10 @@ function checkActiveTab() {
746748
}
747749
}
748750

749-
if (!Auth::check() && (!empty($messages['info']) || !empty($messages['warning']) || !empty($messages['error']))) {
751+
// Chiusura della card informazioni - non mostrare nella pagina di login quando ci sono solo errori
752+
if (!Auth::check() &&
753+
(!empty($messages['info']) || !empty($messages['warning']) ||
754+
(!empty($messages['error']) && $pageTitle != tr('Login')))) {
750755
echo '
751756
</div>
752757
</div>';

‎index.php‎

Lines changed: 139 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,67 @@
105105

106106
include_once App::filepath('include|custom|', 'top.php');
107107

108+
// Add inline styles for login page enhancement
109+
echo '
110+
<style>
111+
.login-page {
112+
background: linear-gradient(135deg, rgba(245,247,250,1) 0%, rgba(230,233,240,1) 100%);
113+
display: flex;
114+
align-items: center;
115+
justify-content: center;
116+
min-height: 100vh;
117+
}
118+
.login-box {
119+
margin: 0 auto;
120+
}
121+
.card-outline.card-primary {
122+
border-top: 3px solid #007bff;
123+
border-radius: 8px;
124+
overflow: hidden;
125+
}
126+
.form-control-lg {
127+
border-radius: 4px;
128+
transition: all 0.3s ease;
129+
}
130+
.form-control-lg:focus {
131+
border-color: #80bdff;
132+
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
133+
}
134+
.input-group-text {
135+
border-top-right-radius: 4px !important;
136+
border-bottom-right-radius: 4px !important;
137+
}
138+
.btn-primary {
139+
transition: all 0.3s ease;
140+
}
141+
.login-box-msg {
142+
font-size: 1.1rem;
143+
}
144+
.is-invalid {
145+
border-color: #dc3545 !important;
146+
background-image: url("data:image/svg+xml,%3csvg width=\'12\' height=\'12\' fill=\'none\' stroke=\'%23dc3545\' viewBox=\'0 0 12 12\'%3e%3ccircle cx=\'6\' cy=\'6\' r=\'4.5\'/%3e%3cpath stroke-linejoin=\'round\' d=\'M5.8 3.6h.4L6 6.5z\'/%3e%3ccircle cx=\'6\' cy=\'8.2\' r=\'.6\' fill=\'%23dc3545\' stroke=\'none\'/%3e%3c/svg%3e");
147+
background-repeat: no-repeat;
148+
background-position: right calc(0.375em + 0.1875rem) center;
149+
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
150+
}
151+
.invalid-feedback {
152+
display: none;
153+
width: 100%;
154+
margin-top: 0.25rem;
155+
font-size: 0.875rem;
156+
color: #dc3545;
157+
}
158+
.d-block {
159+
display: block !important;
160+
}
161+
@media (max-width: 576px) {
162+
.login-box {
163+
width: 90%;
164+
margin: 0 auto;
165+
}
166+
}
167+
</style>';
168+
108169
// Controllo se è una beta e in caso mostro un warning
109170
if (Update::isBeta()) {
110171
echo '
@@ -118,13 +179,16 @@
118179
// Controllo se è una beta e in caso mostro un warning
119180
if (Auth::isBrute()) {
120181
echo '
121-
<div class="box box-danger" id="brute">
122-
<div class="box-header with-border text-center">
123-
<h3 class="box-title">'.tr('Attenzione').'</h3>
182+
<div class="card card-danger shadow-lg col-md-6 offset-md-3 mt-5" id="brute">
183+
<div class="card-header text-center">
184+
<h3 class="card-title"><i class="fa fa-exclamation-triangle mr-2"></i>'.tr('Attenzione').'</h3>
124185
</div>
125-
<div class="box-body text-center">
126-
<p>'.tr('Sono stati effettuati troppi tentativi di accesso consecutivi!').'</p>
127-
<p>'.tr('Tempo rimanente (in secondi)').': <span id="brute-timeout">'.(Auth::getBruteTimeout() + 1).'</span></p>
186+
<div class="card-body text-center">
187+
<p class="lead">'.tr('Sono stati effettuati troppi tentativi di accesso consecutivi!').'</p>
188+
<div class="alert alert-warning">
189+
<p>'.tr('Tempo rimanente').':</p>
190+
<h3><span id="brute-timeout" class="badge badge-danger">'.(Auth::getBruteTimeout() + 1).'</span> '.tr('secondi').'</h3>
191+
</div>
128192
</div>
129193
</div>
130194
@@ -141,8 +205,9 @@ function brute() {
141205
if(value > 0){
142206
setTimeout(brute, 1000);
143207
} else {
144-
$("#brute").fadeOut();
145-
$(".login-box").fadeIn();
208+
$("#brute").fadeOut(500, function() {
209+
$(".login-box").fadeIn(500);
210+
});
146211
}
147212
}
148213
</script>';
@@ -151,48 +216,72 @@ function brute() {
151216
echo '
152217
<script>
153218
$(document).ready(function(){
219+
// Add shake animation to login box
154220
$(".login-box").addClass("animated shake");
221+
222+
// Add error styling to password field
223+
$(".password-field").addClass("is-invalid");
224+
225+
// Add error message under password field
226+
$(".password-field-container").append(\'<div class="invalid-feedback d-block"><i class="fa fa-exclamation-circle mr-1"></i>'.tr('Credenziali non valide. Riprova.').'</div>\');
227+
228+
// Focus on password field
229+
$("input[name=password]").focus();
230+
231+
// Remove error styling when user starts typing in any field
232+
$("input[name=password], input[name=username]").on("keydown", function() {
233+
$(".password-field").removeClass("is-invalid");
234+
$(".invalid-feedback").fadeOut(300);
235+
});
155236
});
156237
</script>';
157238
}
158239

159240
echo '
160241
<form action="?op=login" method="post" autocomplete="off">
161242
<div class="login-box card-center-medium">
162-
<div class="card card-outline card-orange">
163-
<div class="card-header text-center">
164-
<img src="'.App::getPaths()['img'].'/logo_completo.png" alt="'.tr('OpenSTAManager, il software gestionale open source per assistenza tecnica e fatturazione elettronica').'" class="img-fluid">
243+
<div class="card card-outline card-primary shadow-lg">
244+
<div class="card-header text-center bg-light py-4">
245+
<img src="'.App::getPaths()['img'].'/logo_completo.png" alt="'.tr('OpenSTAManager, il software gestionale open source per assistenza tecnica e fatturazione elettronica').'" class="img-fluid" style="max-width: 85%;">
165246
</div>
166247
167-
<div class="card-body">
168-
<p class="login-box-msg">'.tr('Accedi con le tue credenziali').'</p>
169-
<div class="input-group mb-3">
170-
<input type="text" name="username" autocomplete="username" class="form-control" placeholder="'.tr('Nome utente').'"';
248+
<div class="card-body pt-4">
249+
<p class="login-box-msg text-secondary mb-4"><i class="fa fa-lock mr-2"></i>'.tr('Accedi con le tue credenziali').'</p>
250+
<div class="input-group mb-4">
251+
<input type="text" name="username" autocomplete="username" class="form-control form-control-lg" placeholder="'.tr('Nome utente').'"';
171252
if (isset($username)) {
172253
echo ' value="'.$username.'"';
173254
}
174255

175256
echo ' required>
176257
<div class="input-group-append">
177-
<div class="input-group-text">
178-
<i class="fa fa-user"></i>
258+
<div class="input-group-text bg-light">
259+
<i class="fa fa-user text-primary"></i>
179260
</div>
180261
</div>
181262
</div>
182263
183-
<div class="mb-3">
184-
{[ "type": "password", "name": "password", "autocomplete": "current-password", "placeholder": "'.tr('Password').'" ]}
264+
<div class="mb-4 password-field-container">
265+
{[ "type": "password", "name": "password", "autocomplete": "current-password", "placeholder": "'.tr('Password').'", "class": "form-control-lg password-field" ]}
185266
</div>
186267
187-
<button type="submit" class="btn btn-danger btn-block btn-flat">'.tr('Accedi').'</button>
188-
<br>
189-
<p><a href="'.base_path().'/reset.php">'.tr('Password dimenticata?').'</a></p>';
268+
<button type="submit" class="btn btn-primary btn-block btn-lg shadow-sm" id="login-button">
269+
<i class="fa fa-sign-in mr-2"></i>'.tr('Accedi').'
270+
</button>
271+
272+
<div class="text-center mt-4">
273+
<a href="'.base_path().'/reset.php" class="text-secondary">
274+
<i class="fa fa-question-circle mr-1"></i>'.tr('Password dimenticata?').'
275+
</a>
276+
</div>';
190277
if ($microsoft) {
191278
echo '
192-
<div class="social-auth-links text-center">
193-
<p>- oppure -</p>
194-
195-
<a href="'.base_path().'/oauth2_login.php?id='.$microsoft['id'].'" class="btn btn-block btn-social btn-primary btn-flat"><i class="fa fa-windows"></i>'.tr('Accedi con Microsoft').'</a>
279+
<div class="social-auth-links text-center mt-4 pt-3 border-top">
280+
<p class="text-muted">'.tr('- oppure -').'</p>
281+
282+
<a href="'.base_path().'/oauth2_login.php?id='.$microsoft['id'].'" class="btn btn-block btn-social btn-primary btn-flat shadow-sm">
283+
<i class="fa fa-windows mr-2"></i>'.tr('Accedi con Microsoft').'
284+
</a>
196285
</div>';
197286
}
198287
echo '
@@ -203,17 +292,33 @@ function brute() {
203292
<!-- /.box -->
204293
205294
<script>
206-
$(document).ready( function(){
207-
$("#login").click(function(){
208-
$("#login").text("'.tr('Autenticazione').'...");
209-
});
210-
211-
if( $("input[name=username]").val() == ""){
295+
$(document).ready(function(){
296+
// Focus on first empty field
297+
if($("input[name=username]").val() == ""){
212298
$("input[name=username]").focus();
213-
}
214-
else{
299+
} else {
215300
$("input[name=password]").focus();
216301
}
302+
303+
// Add hover effect to login button
304+
$("#login-button").hover(
305+
function() {
306+
$(this).removeClass("shadow-sm").addClass("shadow");
307+
},
308+
function() {
309+
$(this).removeClass("shadow").addClass("shadow-sm");
310+
}
311+
);
312+
313+
// Show loading text on button click
314+
$("#login-button").click(function(){
315+
$(this).html(\'<i class="fa fa-circle-o-notch fa-spin mr-2"></i> '.tr('Autenticazione').'...\');
316+
});
317+
318+
// Add subtle animation to input fields on focus
319+
$("input").focus(function(){
320+
$(this).parent().animate({marginLeft: "5px"}, 200).animate({marginLeft: "0px"}, 200);
321+
});
217322
});
218323
</script>';
219324

0 commit comments

Comments
 (0)