File: docs/templates/hero/user.edit_password.html.twig

{% extends 'base.html.twig' %}
{% block body %}
    <div class="row d-flex justify-content-center align-items-center h-100">
        <div class="col-md-9 col-lg-6 col-xl-5">
            <img src="{{ main_url }}/themes/{{ theme }}/img/profile.png" class="img-fluid" alt="profile image">
        </div>
        <div class="col-md-8 col-lg-6 col-xl-4 offset-xl-1">
            <form method="post">
                <input type="hidden" name="action" value="change_password"/>
                <!-- Old password input -->
                <div class="form-outline mb-3">
                    <label class="form-label" for="old_password">{{ langs.trans('CurrentPassword') }}
                        <input name="old_password" type="password" id="old_password" class="form-control form-control-lg" placeholder="{{ langs.trans('EnterPassword') }}"/>
                    </label>
                </div>
                <!-- New input -->
                <div class="form-outline mb-3">
                    <label class="form-label" for="new_password">{{ langs.trans('NewPassword') }}
                        <input name="new_password" type="password" id="new_password" class="form-control form-control-lg" placeholder="{{ langs.trans('EnterPassword') }}"/>
                    </label>
                </div>
                <!-- Confirm New Password input -->
                <div class="form-outline mb-3">
                    <label class="form-label" for="confirm_password">{{ langs.trans('ConfirmNewPassword') }}
                        <input name="confirm_password" type="password" id="confirm_password" class="form-control form-control-lg"
                               placeholder="{{ langs.trans('ConfirmPassword') }}"/>
                    </label>
                </div>
                <div class="text-center text-lg-start mt-3 pt-2">
                    <input class="btn btn-primary btn-lg me-3 pe-3 ps-3" type="submit" name="submit" value="{{ langs.trans('Confirm') }}"/>
                    <input type="button" class="btn btn-primary btn-lg btn-danger me-3 pe-3 ps-3" value="{{ langs.trans('Cancel') }}" onclick="javascript:history.go(-1)">
                </div>
            </form>
        </div>
    </div>
{% endblock %}