From 697685e2682d975a4a581ac38824bdff1a948d45 Mon Sep 17 00:00:00 2001
From: FabioL <1647128+loviuz@users.noreply.github.com>
Date: Fri, 17 May 2024 17:27:12 +0200
Subject: [PATCH] Migliorie grafiche login e preloader

---
 assets/src/css/style.css                   |  4 +++
 assets/src/js/base/custom.js               |  5 ++++
 index.php                                  | 35 ++++++++++++----------
 src/HTMLBuilder/Handler/DefaultHandler.php |  5 ++++
 src/HTMLBuilder/Wrapper/HTMLWrapper.php    | 17 +++++++----
 5 files changed, 45 insertions(+), 21 deletions(-)

diff --git a/assets/src/css/style.css b/assets/src/css/style.css
index 500d44e5d..0d824210e 100755
--- a/assets/src/css/style.css
+++ b/assets/src/css/style.css
@@ -30,6 +30,10 @@
         url('../fonts/sourcesanspro-regular-webfont.svg') format('svg');
 }
 
+.preloader{
+    background-color: #f4f6f9de !important;
+}
+
 html {
     font-size: 13px;
     height: 100%;
diff --git a/assets/src/js/base/custom.js b/assets/src/js/base/custom.js
index 7e8ac7518..6d3c9e29b 100644
--- a/assets/src/js/base/custom.js
+++ b/assets/src/js/base/custom.js
@@ -16,6 +16,11 @@
  * along with this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
+// Aggiunta dell'ingranaggio all'unload della pagina
+$(window).on("beforeunload", function () {
+    $("#main_loading").css('height', '100vh').find('img').show().removeClass('animation__shake').addClass('animation__shake');
+});
+
 // Fix multi-modal
 $(document).on('hidden.bs.modal', '.modal', function () {
     $(this).remove();
diff --git a/index.php b/index.php
index 7e6d16928..ca180ce62 100755
--- a/index.php
+++ b/index.php
@@ -158,29 +158,34 @@ if (!empty(flash()->getMessage('error'))) {
 echo '
 			<form action="?op=login" method="post" autocomplete="off">
 				<div class="login-box">
-                    <div class="login-logo">
-					    <img src="'.App::getPaths()['img'].'/logo_completo.png" alt="'.tr('OpenSTAManager, il software gestionale open source per assistenza tecnica e fatturazione elettronica').'" style="max-width: 100%; max-height: 100%;">
-                    </div>
+                    <div class="card card-outline card-orange">
+                        <div class="card-header text-center">
+                            <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">
+                        </div>
 
-                    <div class="login-box-body">
-                        <p class="login-box-msg">'.tr('Accedi con le tue credenziali').'</p>
-                        <div class="form-group has-feedback">
-                            <input type="text" name="username" autocomplete="username" class="form-control" placeholder="'.tr('Nome utente').'"';
+                        <div class="card-body">
+                            <p class="login-box-msg">'.tr('Accedi con le tue credenziali').'</p>
+                            <div class="input-group mb-3">
+                                <input type="text" name="username" autocomplete="username" class="form-control" placeholder="'.tr('Nome utente').'"';
 if (isset($username)) {
     echo ' value="'.$username.'"';
 }
 
 echo ' required>
-                            <span class="form-control-feedback"><i class="fa fa-user"></i> </span>
-					    </div>
+                                <div class="input-group-append">
+                                    <div class="input-group-text">
+                                        <i class="fa fa-user"></i>
+                                    </div>
+                                </div>
+                            </div>
 
-                        <div class="form-group has-feedback">
-					        {[ "type": "password", "name": "password", "autocomplete": "current-password", "placeholder": "'.tr('Password').'" ]}
-                        </div>
+                            <div class="input-group mb-3">
+                                {[ "type": "password", "name": "password", "autocomplete": "current-password", "placeholder": "'.tr('Password').'" ]}
+                            </div>
 
-                        <button type="submit" class="btn btn-danger btn-block btn-flat">'.tr('Accedi').'</button>
-                        <br>
-                        <p><a href="'.base_path().'/reset.php">'.tr('Password dimenticata?').'</a></p>';
+                            <button type="submit" class="btn btn-danger btn-block btn-flat">'.tr('Accedi').'</button>
+                            <br>
+                            <p><a href="'.base_path().'/reset.php">'.tr('Password dimenticata?').'</a></p>';
 if ($microsoft) {
     echo '
                         <div class="social-auth-links text-center">
diff --git a/src/HTMLBuilder/Handler/DefaultHandler.php b/src/HTMLBuilder/Handler/DefaultHandler.php
index 4c0864a7b..5ac3f0283 100755
--- a/src/HTMLBuilder/Handler/DefaultHandler.php
+++ b/src/HTMLBuilder/Handler/DefaultHandler.php
@@ -101,6 +101,7 @@ class DefaultHandler implements HandlerInterface
      */
     protected function password(&$values, &$extras)
     {
+
         $result = '
     <script>
         const characters ="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!$£%-()*[]";
@@ -197,6 +198,10 @@ class DefaultHandler implements HandlerInterface
         }
 
         // Delega al metodo "text", per la generazione del codice HTML
+        $values['icon-after'] = '
+<div class="input-group-text">
+    <span class="fa fa-eye-slash clickable" id="'.$values['id'].'_toggle" onclick="togglePassword_'.$values['id'].'();"></span>
+</div>';
         $result .= $this->text($values, $extras);
 
         return $result;
diff --git a/src/HTMLBuilder/Wrapper/HTMLWrapper.php b/src/HTMLBuilder/Wrapper/HTMLWrapper.php
index 981efa4b5..c576f7092 100755
--- a/src/HTMLBuilder/Wrapper/HTMLWrapper.php
+++ b/src/HTMLBuilder/Wrapper/HTMLWrapper.php
@@ -39,8 +39,10 @@ class HTMLWrapper implements WrapperInterface
         $values['icon-before'] = isset($values['icon-before']) ? $this->parser($values, $extras, $values['icon-before']) : null;
         $values['icon-after'] = isset($values['icon-after']) ? $this->parser($values, $extras, $values['icon-after']) : null;
 
-        $result .= '
-<div class="form-group '.$extra_class.'">';
+        if (!empty($extra_class)) {
+            $result .= '
+<div class="'.$extra_class.'">';
+        }
 
         // Generazione dell'etichetta
         if (!empty($values['label'])) {
@@ -71,14 +73,14 @@ class HTMLWrapper implements WrapperInterface
         if (!empty($values['icon-before']) || !empty($values['icon-after']) || !empty($values['validation'])) {
             if (!empty($values['icon-after'])) {
                 $result .= '
-                <span class="input-group-addon after'.(!empty($values['icon-custom']) ? ' '.$values['icon-custom'] : '').'">'.$values['icon-after'].'</span>';
+                <span class="input-group-append after'.(!empty($values['icon-custom']) ? ' '.$values['icon-custom'] : '').'">'.$values['icon-after'].'</span>';
             }
 
             if (!empty($values['validation'])) {
                 $result .= '
-                <span class="input-group-addon after" id="'.$pseudo_id.'_validation">
+                <div class="input-group-append after" id="'.$pseudo_id.'_validation">
                     <span class="tip" title="'.tr('Validazione').'"><i class="fa fa-question-circle "></i></span>
-                </span>';
+                </div>';
             }
 
             $result .= '
@@ -102,8 +104,11 @@ class HTMLWrapper implements WrapperInterface
         $result .= '
         <div id="'.$values['id'].$rand.'-errors"></div>';
 
-        $result .= '
+        if ($values['type'] == 'checkbox') {
+            $result .= '
     </div>';
+        }
+        
         if (!empty($values['label'])) {
             unset($values['label']);
         }