From 61f2507ead1fb90f3d9cba2c1f1b038b9127dcbf Mon Sep 17 00:00:00 2001
From: Cayo Puigdefabregas <cayo@ribaguifi.com>
Date: Wed, 26 Oct 2022 18:04:16 +0200
Subject: [PATCH] new login style

---
 ...ogo_transparent_noicon-y-purple-120x41.png | Bin 0 -> 8263 bytes
 .../templates/ereuse_devicehub/base_site.html |  11 +++--
 .../ereuse_devicehub/user_login.html          |  45 ++++++++++++------
 3 files changed, 37 insertions(+), 19 deletions(-)
 create mode 100644 ereuse_devicehub/static/img/usody_logo_transparent_noicon-y-purple-120x41.png

diff --git a/ereuse_devicehub/static/img/usody_logo_transparent_noicon-y-purple-120x41.png b/ereuse_devicehub/static/img/usody_logo_transparent_noicon-y-purple-120x41.png
new file mode 100644
index 0000000000000000000000000000000000000000..8753c69ade9e305de846a42565090ad2cc143242
GIT binary patch
literal 8263
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
I9p{Mu0bdBw3;+NC

literal 0
HcmV?d00001

diff --git a/ereuse_devicehub/templates/ereuse_devicehub/base_site.html b/ereuse_devicehub/templates/ereuse_devicehub/base_site.html
index a4deb465..57e13f3a 100644
--- a/ereuse_devicehub/templates/ereuse_devicehub/base_site.html
+++ b/ereuse_devicehub/templates/ereuse_devicehub/base_site.html
@@ -302,11 +302,12 @@
     &copy; Copyright <strong><span>Usody</span></strong>. All Rights Reserved
   </div>
   <div class="credits">
-    <!-- All the links in the footer should remain intact. -->
-    <!-- You can delete the links only if you purchased the pro version. -->
-    <!-- Licensing information: https://bootstrapmade.com/license/ -->
-    <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/ -->
-    Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a> // DeviceHub {{ version }}
+    <a href="https://help.usody.com/en/" target="_blank">Help</a> | 
+    <a href="https://pangea.org/es/politica-de-privacidad/" target="_blank">Privacy</a> | 
+    <a href="https://pangea.org/aviso-legal/" target="_blank">Terms</a>
+  </div>
+  <div class="credits">
+    DeviceHub {{ version }}
   </div>
 </footer><!-- End Footer -->
 
diff --git a/ereuse_devicehub/templates/ereuse_devicehub/user_login.html b/ereuse_devicehub/templates/ereuse_devicehub/user_login.html
index da621992..97e2c6cb 100644
--- a/ereuse_devicehub/templates/ereuse_devicehub/user_login.html
+++ b/ereuse_devicehub/templates/ereuse_devicehub/user_login.html
@@ -12,8 +12,8 @@
           <div class="col-lg-4 col-md-6 d-flex flex-column align-items-center justify-content-center">
 
             <div class="d-flex justify-content-center py-4">
-              <a href="{{ url_for('core.login') }}" class="logo d-flex align-items-center w-auto">
-                <img src="{{ url_for('static', filename='img/logo_usody_clock.png') }}" alt="">
+              <a href="{{ url_for('core.login') }}" class="d-flex align-items-center w-auto">
+                <img src="{{ url_for('static', filename='img/usody_logo_transparent_noicon-y-purple-120x41.png') }}" alt="">
               </a>
             </div><!-- End Logo -->
 
@@ -22,8 +22,7 @@
               <div class="card-body">
 
                 <div class="pt-4 pb-2">
-                  <h5 class="card-title text-center pb-0 fs-4">Login to Your Account</h5>
-                  <p class="text-center small">Enter your username & password to login</p>
+                  <h5 class="card-title text-center pb-0 fs-4 help">Sign in</h5>
                   {% if form.form_errors %}
                   <p class="text-danger">
                     {% for error in form.form_errors %}
@@ -37,14 +36,16 @@
                   {{ form.csrf_token }}
 
                   <div class="col-12">
-                    <label for="yourEmail" class="form-label">Email</label>
-                    <input type="email" name="email" class="form-control" id="yourEmail" required value="{{ form.email.data|default('', true) }}">
+                    <input type="email" placeholder="Email" name="email" class="form-control" id="yourEmail" required value="{{ form.email.data|default('', true) }}">
                     <div class="invalid-feedback">Please enter your email.</div>
                   </div>
 
                   <div class="col-12">
-                    <label for="yourPassword" class="form-label">Password</label>
-                    <input type="password" name="password" class="form-control" id="yourPassword" required>
+                    <div class="input-group">
+                    <input type="password" placeholder="Password" name="password" class="form-control" id="id_password" required>
+                    <i class="input-group-text bi bi-eye" id="togglePassword" style="cursor: pointer">
+                    </i>
+                    </div>
                     <div class="invalid-feedback">Please enter your password!</div>
                   </div>
 
@@ -57,7 +58,7 @@
                   </div>
                   -->
                   <div class="col-12">
-                    <button class="btn btn-primary w-100" type="submit">Login</button>
+                    <button class="btn btn-primary w-100" type="submit">Next</button>
                   </div>
                   <div class="col-12">
                     <p class="small mb-0">Don't have account? <a href="{{ url_for('core.user-registration') }}">Create an account</a></p>
@@ -68,11 +69,9 @@
             </div>
 
             <div class="credits">
-              <!-- All the links in the footer should remain intact. -->
-              <!-- You can delete the links only if you purchased the pro version. -->
-              <!-- Licensing information: https://bootstrapmade.com/license/ -->
-              <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/ -->
-              Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
+              <a href="https://help.usody.com/en/getting-started/login-usody/" target="_blank">Help</a> | 
+              <a href="https://pangea.org/es/politica-de-privacidad/" target="_blank">Privacy</a> | 
+              <a href="https://pangea.org/aviso-legal/" target="_blank">Terms</a>
             </div>
 
           </div>
@@ -97,4 +96,22 @@
     </div>
   </div>
 </div> <!-- End register modal -->
+<script>
+const togglePassword = document.querySelector('#togglePassword');
+const password = document.querySelector('#id_password');
+
+togglePassword.addEventListener('click', function (e) {
+    // toggle the type attribute
+    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
+    // toggle the eye slash icon
+    if(type == "password"){
+    this.classList.remove('bi-eye-slash');
+    this.classList.add('bi-eye');
+    } else if(type == "text"){
+    this.classList.remove('bi-eye');
+    this.classList.add('bi-eye-slash');
+    }
+    password.setAttribute('type', type);
+});
+</script>
 {% endblock body %}