templates/security/forgot_password.html.twig line 1

Open in your IDE?
  1. {% block body %}
    <!DOCTYPE html>
    <html lang="es">
        <head>
            <base href="../../../"/>
            <title>Damap - Recuperar contraseña</title>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <link rel="shortcut icon" href="assets/media/logos/favicon.ico" />
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700" />
            <link href="{{ asset('assets/plugins/global/plugins.bundle.css') }}" rel="stylesheet" type="text/css" />
            <link href="{{ asset('assets/css/style.bundle.css') }}" rel="stylesheet" type="text/css" />
        </head>
        <body id="kt_body" class="app-blank bgi-size-cover bgi-attachment-fixed bgi-position-center bgi-no-repeat">
            <script>
                var defaultThemeMode = "light";
                var themeMode;
                if (document.documentElement) {
                    if (document.documentElement.hasAttribute("data-bs-theme-mode")) {
                        themeMode = document.documentElement.getAttribute("data-bs-theme-mode");
                    } else if (localStorage.getItem("data-bs-theme") !== null) {
                        themeMode = localStorage.getItem("data-bs-theme");
                    } else {
                        themeMode = defaultThemeMode;
                    }
    
                    if (themeMode === "system") {
                        themeMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
                    }
    
                    document.documentElement.setAttribute("data-bs-theme", themeMode);
                }
            </script>
            <div class="d-flex flex-column flex-root" id="kt_app_root">
                <style>
                    body {
                        background-image: url("{{ asset('assets/media/auth/bg4.jpg') }}");
                    }
    
                    [data-bs-theme="dark"] body {
                        background-image: url("{{ asset('assets/media/auth/bg13-dark.jpg') }}");
                    }
                </style>
                <div class="d-flex flex-column flex-column-fluid flex-lg-row">
                    <div class="d-flex flex-center w-lg-50 pt-15 pt-lg-0 px-10">
                        <div class="d-flex flex-center flex-lg-start flex-column">
                            <a href="https://damap.tech" class="mb-7">
                                <img height="200px" alt="Logo" src="{{ asset('assets/logo.png') }}" />
                            </a>
                        </div>
                    </div>
                    <div class="d-flex flex-column-fluid flex-lg-row-auto justify-content-center justify-content-lg-end p-12 p-lg-20">
                        <div class="bg-body d-flex flex-column align-items-stretch flex-center rounded-4 w-md-600px p-20">
                            <div class="d-flex flex-center flex-column flex-column-fluid px-lg-10 pb-15 pb-lg-20">
                                <form class="form w-100" method="post" novalidate="novalidate" data-loader-form="true">
                                    <div class="text-center mb-11">
                                        <h1 class="text-dark fw-bolder mb-3">Recuperar contraseña</h1>
                                        <div class="text-gray-500 fw-semibold fs-6">Ingresa tu usuario o correo y el dominio con el que accedes.</div>
                                    </div>
    
                                    {% for label, messages in app.flashes %}
                                        {% for message in messages %}
                                            <div class="alert alert-{{ label == 'danger' ? 'danger' : 'success' }} d-flex align-items-center p-5 mb-8">
                                                <i class="ki-duotone ki-information-5 fs-2hx text-{{ label == 'danger' ? 'danger' : 'success' }} me-4">
                                                    <span class="path1"></span><span class="path2"></span><span class="path3"></span>
                                                </i>
                                                <div class="d-flex flex-column">
                                                    <span>{{ message }}</span>
                                                </div>
                                            </div>
                                        {% endfor %}
                                    {% endfor %}
    
                                    {% if not recaptcha_configured %}
                                        <div class="alert alert-warning d-flex align-items-center p-5 mb-8">
                                            <i class="ki-duotone ki-information-5 fs-2hx text-warning me-4">
                                                <span class="path1"></span><span class="path2"></span><span class="path3"></span>
                                            </i>
                                            <div class="d-flex flex-column">
                                                <span>reCAPTCHA todavía no está configurado en el servidor.</span>
                                            </div>
                                        </div>
                                    {% endif %}
    
                                    <div class="separator separator-content my-14">
                                        <span class="w-175px text-gray-500 fw-semibold fs-7">Datos de la cuenta</span>
                                    </div>
    
                                    <div class="fv-row mb-8">
                                        <input
                                            type="text"
                                            tabindex="1"
                                            placeholder="Usuario o correo"
                                            name="identifier"
                                            required
                                            value="{{ form_data.identifier }}"
                                            class="form-control bg-transparent"
                                        />
                                    </div>
    
                                    <div class="fv-row mb-8">
                                        <input
                                            type="text"
                                            tabindex="2"
                                            placeholder="Dominio"
                                            name="domain"
                                            required
                                            value="{{ form_data.domain }}"
                                            class="form-control bg-transparent"
                                        />
                                    </div>
    
                                    <div class="fv-row mb-8 d-flex justify-content-center">
                                        {% if recaptcha_configured %}
                                            <div class="g-recaptcha" data-sitekey="{{ recaptcha_site_key }}"></div>
                                        {% else %}
                                            <div class="form-control bg-light text-gray-500 d-flex align-items-center justify-content-center text-center">
                                                Configura `GOOGLE_RECAPTCHA_SITE_KEY` y `GOOGLE_RECAPTCHA_SECRET_KEY` para habilitar este paso.
                                            </div>
                                        {% endif %}
                                    </div>
    
                                    <div style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;" aria-hidden="true">
                                        <label for="company_name">No completar</label>
                                        <input type="text" id="company_name" name="company_name" tabindex="-1" autocomplete="off" />
                                    </div>
    
                                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('forgot_password') }}"/>
    
                                    <div class="d-grid mb-6">
                                        <button type="submit" tabindex="4" class="btn btn-primary" data-loading-button="true">
                                            <span class="indicator-label">Enviar enlace</span>
                                            <span class="indicator-progress">Enviando...
                                                <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                            </span>
                                        </button>
                                    </div>
    
                                    <div class="text-center">
                                        <a href="{{ path('app_login') }}" class="link-primary fw-semibold">Volver al login</a>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <script>var hostUrl = "assets/";</script>
            <script src="{{ asset('assets/plugins/global/plugins.bundle.js') }}"></script>
            <script src="{{ asset('assets/js/scripts.bundle.js') }}"></script>
            <script>
                document.querySelectorAll('form[data-loader-form="true"]').forEach(function (form) {
                    form.addEventListener('submit', function (event) {
                        if (!form.checkValidity()) {
                            event.preventDefault();
                            form.reportValidity();
                            return;
                        }
    
                        var captchaElement = form.querySelector('.g-recaptcha');
                        if (captchaElement && typeof grecaptcha !== 'undefined' && grecaptcha.getResponse().trim() === '') {
                            event.preventDefault();
                            alert('Completa el reCAPTCHA para continuar.');
                            return;
                        }
    
                        var button = form.querySelector('[data-loading-button="true"]');
                        if (!button) {
                            return;
                        }
    
                        button.setAttribute('data-kt-indicator', 'on');
                        button.disabled = true;
                    });
                });
            </script>
            {% if recaptcha_configured %}
                <script src="https://www.google.com/recaptcha/api.js" async defer></script>
            {% endif %}
        </body>
    </html>
    {% endblock %}