File: //home/arjun/projects/buyercall/buyercall/blueprints/user/templates/user/password_reset.jinja2
{% extends 'layouts/login.jinja2' %}
{% import 'macros/form.jinja2' as f with context %}
{% import 'macros/layout/flash.jinja2' as flash with context %}
{% block title %}Enter a new password{% endblock %}
{% block body %}
<<<<<<< HEAD
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<div class="account-pages my-5 pt-sm-5">
<div class="container">
<div id="app-toast">
<toast></toast>
</div>
<div class="row justify-content-center">
<div class="col-md-8 col-lg-6 col-xl-5">
<div class="card overflow-hidden">
<div class="card-header bg-transparent">
<div class="row">
<div class="col-12 text-center">
<span>
<img {% if partnership %}
{% if partnership.logo %}
src="{{ partnership_logo }}"
{% else %}
src="{{ asset_url_for('images/buyercall-main-logo.png')}}"
{% endif %}
alt="{{ partnership.name }}"
{% else %}
src="{{ asset_url_for('images/buyercall-main-logo.png')}}" alt="BuyerCall"
{% endif %}
class="img-fluid auth-logo" />
</span>
</div>
<div class="col-12">
<div class="p-4">
<h5 class="text-center">Create a new Password!</h5>
<p class="text-center">Enter a new strong & unique password.</p>
</div>
</div>
</div>
</div>
<div class="card-body pt-0">
<div class="p-2">
{% call f.form_tag('user.password_reset', class='form-horizontal custom-validation') %}
{# Password #}
<div class="mb-3">
{% call f.password_form_group(form.password, css_class='form-control', placeholder='Enter password', required='required', **{'aria-label':'Password', 'aria-describedby':'password-addon', pattern='(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,}','data-parsley-errors-container':'#password-errors'}) %}{% endcall %}
<div id="password-errors"></div>
<div id="password-requirements" class="text-muted">
<p>Password must contain:</p>
<ul>
<li id="digit">At least one digit</li>
<li id="lowercase">One lowercase letter</li>
<li id="uppercase">One uppercase letter</li>
<li id="length">At least 8 characters</li>
</ul>
</div>
<div id="password-success" class="text-success" style="display: none;">
<p>Password meets the requirements!</p>
</div>
</div>
<div class="d-flex flex-wrap gap-2">
<div class="mx-auto">
<button type="submit" class="btn btn-primary waves-effect waves-light">
{{ _("Continue") }}
</button>
<a href="{{ url_for('user.login') }}" class="btn btn-light waves-effect">
{{ _("Back to Login") }}
</a>
</div>
</div>
{% endcall %}
</div>
</div>
</div>
<div class="mt-5 text-center">
<div>
{# <p>Don't have an account ? <a href="{{ url_for('user.signup') }}" class="fw-medium text-primary"> Signup now </a> </p> #}
<p>© {{ now.year }} {% if partnership %}{{ partnership.name }}{% else %}BuyerCall{% endif %}. Powered with <i class="text-danger"><iconify-icon icon="mdi:heart" color="#f46a6a" /></i> by BuyerCall LLC</p>
=======
<div class="container">
{{ flash.render() }}
<div class="row">
<div class="col-md-4 col-sm-6 col-md-offset-4 col-sm-offset-3">
{% call f.form_tag('user.password_reset') %}
<div class="card card-login">
<div class="card-header text-center" data-background-color="light-blue">
<h3 class="card-title">Create a new password</h3>
</div>
<div class="card-content">
<div class="row">
<div class="col-xs-12 form-group label-floating">
{% call f.form_group(form.password, css_class='form-control', id='reset_password') %}
{% endcall %}
<div class="progress mt-2" style="display: none;">
<div id="password-strength-bar-reset" class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small id="password-strength-text-reset" class="form-text text-muted" style="display: none;" >
<span id="lowercase-label-reset" class="text-muted"><i class="fa fa-times-circle"></i> At least one lowercase letter</span><br>
<span id="uppercase-label-reset" class="text-muted"><i class="fa fa-times-circle"></i> At least one uppercase letter</span><br>
<span id="number-label-reset" class="text-muted"><i class="fa fa-times-circle"></i> At least one number</span><br>
<span id="special-char-label-reset" class="text-muted"><i class="fa fa-times-circle"></i> At least one special character</span><br>
<span id="length-label-reset" class="text-muted"><i class="fa fa-times-circle"></i> At least 8 characters</span>
</small>
</div>
</div>
<div class="row">
<div class="col-xs-12 text-center">
<button id="reset-submit" type="submit" class="btn btn-fill btn-light-blue">
{{ _('Continue') }}
</button>
<a href="{{ url_for('user.login') }}"
class="btn btn-simple">
{{ _('Back to login') }}
</a>
>>>>>>> 2d4ba41568adf348959bbf7b64ffa061df87d07b
</div>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const passwordInput = document.getElementById('password');
const submitButton = document.getElementById('submit-button');
const digitRequirement = document.getElementById('digit');
const lowercaseRequirement = document.getElementById('lowercase');
const uppercaseRequirement = document.getElementById('uppercase');
const lengthRequirement = document.getElementById('length');
const successMessage = document.getElementById('password-success');
passwordInput.addEventListener('input', function() {
const passwordValue = passwordInput.value;
const hasDigit = /\d/.test(passwordValue);
const hasLowercase = /[a-z]/.test(passwordValue);
const hasUppercase = /[A-Z]/.test(passwordValue);
const hasLength = passwordValue.length >= 8;
digitRequirement.style.color = hasDigit ? 'green' : 'red';
lowercaseRequirement.style.color = hasLowercase ? 'green' : 'red';
uppercaseRequirement.style.color = hasUppercase ? 'green' : 'red';
lengthRequirement.style.color = hasLength ? 'green' : 'red';
if (hasDigit && hasLowercase && hasUppercase && hasLength) {
successMessage.style.display = 'block';
submitButton.removeAttribute('disabled');
} else {
successMessage.style.display = 'none';
submitButton.setAttribute('disabled', 'disabled');
}
});
});
</script>
{% endblock %}