new login style

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. -->
+    <a href="https://help.usody.com/en/" target="_blank">Help</a> | 
-    <!-- You can delete the links only if you purchased the pro version. -->
+    <a href="https://pangea.org/es/politica-de-privacidad/" target="_blank">Privacy</a> | 
-    <!-- Licensing information: https://bootstrapmade.com/license/ -->
+    <a href="https://pangea.org/aviso-legal/" target="_blank">Terms</a>
-    <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/ -->
+  </div>
-    Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a> // DeviceHub {{ version }}
+  <div class="credits">
+    DeviceHub {{ version }}
   </div>
 </footer><!-- End Footer -->
 

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">
+              <a href="{{ url_for('core.login') }}" class="d-flex align-items-center w-auto">
-                <img src="{{ url_for('static', filename='img/logo_usody_clock.png') }}" alt="">
+                <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>
+                  <h5 class="card-title text-center pb-0 fs-4 help">Sign in</h5>
-                  <p class="text-center small">Enter your username & password to login</p>
                   {% 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" placeholder="Email" name="email" class="form-control" id="yourEmail" required value="{{ form.email.data|default('', true) }}">
-                    <input type="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>
+                    <div class="input-group">
-                    <input type="password" name="password" class="form-control" id="yourPassword" required>
+                    <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. -->
+              <a href="https://help.usody.com/en/getting-started/login-usody/" target="_blank">Help</a> | 
-              <!-- You can delete the links only if you purchased the pro version. -->
+              <a href="https://pangea.org/es/politica-de-privacidad/" target="_blank">Privacy</a> | 
-              <!-- Licensing information: https://bootstrapmade.com/license/ -->
+              <a href="https://pangea.org/aviso-legal/" target="_blank">Terms</a>
-              <!-- 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>
             </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 %}