<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="WebIntranet._Default" Async="true" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/Site.css?v=2" rel="stylesheet" />

    <script type="text/javascript" src="/Scripts/jquery.min.js"></script>
    <script type="text/javascript" src="/Scripts/popper.min.js"></script>
    <script type="text/javascript" src="/Scripts/bootstrap.min.js"></script>

    <style>
        @font-face {
            font-family: 'Satoshi';
            src: url('FUENTES/Satoshi-Regular.otf') format('opentype');
        }

        body {
            padding-top: 0px;
            height: 100vh;
            text-align: center;
        }

        #Contrasena {
            margin-bottom: 1rem !important;
        }

        #LoadingHome {
            width: 100px;
        }

        #divLoadingHome {
            display: none;
            position: absolute;
            top: 125px;
            left: calc(50% - 70px);
            background-color: white;
            padding: 20px;
            border-radius: 25px;
            z-index: 9999;
        }

        .cajaDatos {
            margin-inline: auto;
            width: 400px;
        }

        @media (max-width: 991px) {
            body {
                min-height: 100vh;
                font-size: 2rem;
            }

            .form-control {
                font-size: 2rem;
            }

            .btnOAAFBlack {
                font-size: 2rem;
                width: 500px !important;
            }

            .cajaDatos {
                width: 500px;
            }
        }
    </style>
</head>
<body style="background-image: url('../Content/images/fondoOAAF.png'); background-size: cover; background-position-x: right; background-position-y: bottom;">
    <form id="form1" runat="server">
        <div class="d-flex flex-column justify-content-center" style="height: 100vh;">
            <div>
                <div class="cajaDatos">
                    <p id="mensajeError" style="color: red; word-break: break-word" runat="server"></p>

                    <div style="margin-inline:auto">
                        <h1 style="font-family:'Satoshi';color:white; margin-bottom: 40px;">PORTAL DEL EMPLEADO OAAF</h1>
                    </div>

                    <div>
                        <label style="text-align: center; min-width: 100%; margin-bottom: 0px; color: #ffffff; font-family: 'Satoshi'">Usuario</label>
                        <input type="text" class="inputBonito form-control mb-2" id="Usuario" placeholder="" runat="server" />

                        <label style="text-align: center; min-width: 100%; margin-bottom: 0px; color: #ffffff; font-family: 'Satoshi'">Contraseña</label>
                        <input id="Contrasena" runat="server" type="password" class="form-control inputBonito" name="password" />
                    </div>
                </div>

                <div style="margin: auto;display:flex;flex-direction:column;align-items: center;gap: 10px;">
                    <dx:BootstrapButton ID="btnAcceso" runat="server" Text="Acceder" Width="400px" CssClasses-Control="btnOAAFBlack">
                    </dx:BootstrapButton>

                    <input type="button" class="btnOAAFBlack" style="width:400px" value="Acceder con FNMT" onclick="iniciarSesionConCertificado()" />
                </div>
            </div>

            <div id="divLoadingHome" runat="server">
                <img id="loadingHome" runat="server" class="Loading" style="display: flex" src="../Content/images/cargaOAAF.gif" />
            </div>
        </div>

<script>
    function ocultarLoading() {
        $('#divLoadingHome').css("display", "none");
    }

    function mostrarError(msg) {
        ocultarLoading();
        $("#mensajeError").html(msg || "Se produjo un error");
    }

    $('#btnAcceso').on('click', function () {
        $('#divLoadingHome').css("display", "block");
        $("#mensajeError").html("");
    });

    $(document).ready(function () {
        localStorage.setItem('listUsuarios', "");
    });

    function iniciarSesionConCertificado() {
        $('#divLoadingHome').css("display", "flex");
        $("#mensajeError").html("");

        var parentOrigin = window.location.origin;
        var certLoginBaseUrl = "<%= ConfigurationManager.AppSettings("UrlCertLogin") %>";

        if (!certLoginBaseUrl) {
            mostrarError("No se ha configurado la URL pública del login por certificado.");
            return;
        }

        var state = (window.crypto && window.crypto.randomUUID)
            ? window.crypto.randomUUID()
            : ("cert-" + new Date().getTime() + "-" + Math.random().toString(36).slice(2));

        var callbackUrl = parentOrigin + "/LoginCertCallback.aspx";
        var separator = certLoginBaseUrl.indexOf('?') >= 0 ? '&' : '?';
        var url = certLoginBaseUrl +
            separator +
            "returnUrl=" + encodeURIComponent(callbackUrl) +
            "&state=" + encodeURIComponent(state) +
            "&_ts=" + new Date().getTime();

        window.location = url;
    }
</script>
    </form>
</body>
</html>
