new login style

This commit is contained in:
Cayo Puigdefabregas 2022-10-26 18:04:16 +02:00
parent eb1649f506
commit 61f2507ead
3 changed files with 37 additions and 19 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

View File

@ -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 -->

View File

@ -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 %}