formha/templates/h_tmp_usr/f_change_pswd.html

60 lines
2.2 KiB
HTML

{% extends 'h_tmp_usr/z_tmp.html' %}
{% block css %}
<link rel="stylesheet" href="{{ url_for('static', filename='f_contact/form.css') }}">
<link rel="stylesheet" href="{{ url_for( 'static', filename='g_login/see_hide_pswd.css' ) }}">
<link rel="stylesheet" href="{{ url_for( 'static', filename='h_tmp_user/f_change_pswd/change_pswd.css' ) }}">
{% endblock css %}
{% block body %}
<div class="form-container" data-aos="fade-down" data-aos-delay="0" data-aos-duration="800" data-aos-easing="ease-in-out">
<div class="form-header">
<h2>Cambio de Contraseña</h2>
</div>
<form method="POST" action="{{ url_for('change_pswd') }}" class="login-form">
{{ form.hidden_tag() }}
<div class="form-row password-wrapper">
{{ form.cur_pswd(class_="form-control", placeholder="Contraseña actual", id="cur_pswd", maxlength="60", autocomplete="new-password", type="password") }}
<button type="button" class="password-toggle"><i class="bi bi-eye-slash"></i></button>
</div>
<div class="form-row password-wrapper">
{{ form.new_pswd(class_="form-control", placeholder="Nueva Contraseña", id="new_pswd", maxlength="60", autocomplete="new-password", type="password") }}
<button type="button" class="password-toggle"><i class="bi bi-eye-slash"></i></button>
</div>
<ul style="list-style-type:none;">
<li><span id="lengt10"></span> Al menos 10 caracteres.</li>
<li><span id="atl1num"></span> Al menos un número.</li>
<li><span id="atl1mayusc"></span> Al menos una mayúscula.</li>
<li><span id="atl1chrspe"></span> Al menos un caracter especial: <b><i>/[!@#$%&*()_+\-=[\]{};':"\\|,.<>\/?¡¿]/</i></b>.</li>
</ul>
<button type="submit" class="btn btn-primary">
<i class="bi bi-lock-fill"></i> Cambiar de Contraseña
</button>
</form>
</div>
{% endblock body %}
{% block js %}
<script type="module" src="{{ url_for( 'static', filename='h_tmp_user/change_pswd.js' ) }}"></script>
<!-- {# aos script #} -->
{% include 'z_comps/aos_script.html' %}
<!-- {# if flash #} -->
{% include 'z_comps/if_flash.html' %}
{% endblock js %}