<!doctype html>
<html>
<head lang="es">
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, user-scalable=no" name="viewport">
    <meta content="ie=edge" http-equiv="x-ua-compatible">
    <link rel="manifest" href="/manifest.json">
    <title>Atom - Access</title>
    <!--icono pagina-->
    <link rel="shortcut icon" type="image/png"
          href="/img/favicon.png"
          sizes="32x32">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="/js/ie8-support/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="/js/ie8-support/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- Sweet Alert -->
    <link href="/_startui_theme/css/lib/bootstrap-sweetalert/sweetalert.css" rel="stylesheet">
    <link href="/_startui_theme/css/separate/vendor/sweet-alert-animations.min.css" rel="stylesheet">
    <link href="/_startui_theme/css/separate/pages/login.min.css" rel="stylesheet">
    <link href="/_startui_theme/css/lib/font-awesome/font-awesome.min.css" rel="stylesheet">
    <link href="/_startui_theme/css/lib/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="/_startui_theme/css/main.css" rel="stylesheet">
    <!-- General Property -->
    <link href="/css/base/general.css" rel="stylesheet">
    <link href="/css/sign-in.css" rel="stylesheet">
    
    <style>
        body {
            background-image: url("/img/blue-background.svg");
            background-color: #0288d1;
            border-top: solid 10px #0288d1;
        }
    </style>
</head>
<body>
<section>
    <div class="page-center">
        <div class="page-center-in">
            <div class="container-fluid">
                <!--update-->
                <div class="contenedor-logo">
                    <img src="/img/blumonpay/white-long.png"
                         alt="logo_empresa" style="width: 100%;">
                </div>
                <form class="sign-box" data-country="mx" id="login_form" name="login_form">
                    <div class="sign-avatar">
                        <img alt="" src="/_startui_theme/img/avatar-sign.png">
                    </div>
                    <H1 class="sign-title">Welcome</H1>
                    <div class="form-group form-control-wrapper form-control-icon-left">
                        <input class="form-control" id="correo_usuario" v-model="mail" maxlength="150"
                               name="correo_usuario" placeholder="Email" type="text">
                        <i class="font-icon font-icon-mail"></i>
                    </div>
                    <div class="form-group form-control-wrapper form-control-icon-left">
                        <input class="form-control" id="contrasena_usuario" v-model="password" maxlength="300"
                               name="contrasena_usuario" placeholder="Password" type="password"
                               autocomplete="off">
                        <i class="font-icon glyphicon glyphicon-lock"></i>
                    </div>
                    <div class="form-group">
                        <div class="float-right reset">
                            <a data-target="#resetPasswordModal" data-toggle="modal">Forgot Password</a>
                        </div>
                        
                    </div>
                    <button class="btn btn-rounded"
                            id="boton-login" type="submit">Log In</button>
                </form>
            </div>
        </div>
    </div>
    <!--.page-center-->
    
</section>
<footer style="color: black; font-size: medium; align-content: center; text-align: center; position: absolute; bottom: 0; width: 100%; height: 40px; position: revert; padding-top: 20px;">
    <template>Copyright © 2020 Diseñado por blumonpay.com</template>
</footer>
<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="resetPasswordModal" role="dialog" tabindex="-1"> 
   <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <form id="formulario-recuperar-contrasena" name="formulario-recuperar-contrasena" style="max-width: 100%;"> 
      <div class="modal-header"> 
       <button aria-label="Close" class="modal-close" data-dismiss="modal" type="button"> <i class="font-icon-close-2"></i> </button> 
       <h4 class="modal-title" id="myModalLabel">Forgot Password</h4> 
      </div> 
      <div class="modal-body"> 
       <header class="modal-description">Input your email address:</header> 
       <div class="form-group form-control-wrapper form-control-icon-left"> 
        <input class="form-control" id="correo_recuperacion" name="correo_recuperacion" placeholder="Email" type="text"> 
        <i class="font-icon font-icon-mail"></i> 
       </div> 
      </div> 
      <div class="modal-footer"> 
       <button class="btn btn-rounded btn-default" data-dismiss="modal" type="button">Cancel</button> 
       <button class="btn btn-rounded btn-primary" type="submit">Send email</button> 
      </div> 
     </form> 
    </div> 
   </div> 
  </div>
<script src="/webjars/jquery/3.6.1/jquery.min.js"></script>
<script src="/_startui_theme/js/lib/tether/tether.min.js"></script>
<script src="/_startui_theme/js/lib/bootstrap/bootstrap.min.js"></script>
<script src="/_startui_theme/js/plugins.js"></script>
<script src="/_startui_theme/js/lib/match-height/jquery.matchHeight.min.js" type="text/javascript"></script>
<script src="/webjars/vue/2.6.11/dist/vue.min.js"></script>
<script src="/webjars/vue-i18n/8.15.5/dist/vue-i18n.js" type="text/javascript"></script>
<script src="/js/i18n-messages.js" type="text/javascript"></script>
<!-- JQuery Validation -->
<script src="/_startui_theme/js/lib/jquery-validation/jquery.validate.min.js"></script>
<!-- Sweet Alert -->
<script src="/_startui_theme/js/lib/bootstrap-sweetalert/sweetalert.min.js"></script>
<script src="/js/show-message.js" type="text/javascript"></script>
<script src="/_startui_theme/js/app.js"></script>
<!-- Password hide/show -->
<script src="/_startui_theme/js/lib/hide-show-password/bootstrap-show-password.min.js"></script>
<script src="/js/forge-sha256.min.js"></script>
<script src="/js/reset-password.js" type="text/javascript"></script>
<script src="/webjars/vue/2.6.11/dist/vue.min.js" type="text/javascript"></script>
<script>

    const vue = new Vue({
        el: 'section',
        data: {
            country: document.querySelector('#login_form').dataset.country,
            mail: '',
            password: ''
        },
        computed: {
            canRegister: function () {
                return this.country === 'mx';
            }
        },
        methods: {
            requestLogin() {
                let data = {
                    country: vue.country,
                    email: this.mail,
                    password: forge_sha256(this.password)
                };
                showLoading();
                matterAjax("/requestLogin", data, () => {
                    location.replace("/index");
                });
            }
        },
        mounted() {
            $('.page-center').matchHeight({
                target: $('html')
            });

            $(window).resize(function () {
                setTimeout(function () {
                    let sel = $('.page-center');
                    sel.matchHeight({remove: true});
                    sel.matchHeight({
                        target: $('html')
                    });
                }, 100);
            });
        }
    });

    function validationError() {
        swal({
            title: i18nPlugin.text('verify'),
            buttonsStyling: false,
            type: "error",
            confirmButtonClass: "mom-btn",
            confirmButtonText: i18nPlugin.text('bbba0a5b-8bd4-4cd0-962b-4839d57cbabf')
        });
    }

    waitForTranslations(function () {

        $.validator.addMethod("correo", function (value, element) {
            return this.optional(element) || /^[-\w.%+]{1,64}@(?:[A-Z0-9-]{1,63}\.){1,125}[A-Z]{2,63}$/i.test(value);
        }, "Correo electrónico no válido");

        let rules = {
            correo_usuario: {
                required: true,
                minlength: 8,
                maxlength: 150
            },
            contrasena_usuario: {
                required: true,
                minlength: 8,
                maxlength: 30
            }
        };

        $('#login_form').validate({
            rules,
            messages: {
                correo_usuario: {
                    required: i18nPlugin.text("8d0ae649-2e57-49ef-8789-fdfbf56227d3"),
                    minlength: i18nPlugin.text('minLength') + " " + rules.correo_usuario.minlength,
                    maxlength: i18nPlugin.text('maxLength') + " " + rules.correo_usuario.maxlength
                },
                contrasena_usuario: {
                    required: i18nPlugin.text("8d0ae649-2e57-49ef-8789-fdfbf56227d3"),
                    minlength: i18nPlugin.text('minLength') + " " + rules.contrasena_usuario.minlength,
                    maxlength: i18nPlugin.text('maxLength') + " " + rules.contrasena_usuario.maxlength
                }
            },
            submitHandler: () => {
                if ($('#login_form').attr('id') === 'login_form') {
                    vue.requestLogin();
                }
            },
            invalidHandler: () => validationError()
        });
    });

    tellTheBack(`Atom requested from ${navigator.platform} platform. Viewport: ${window.innerWidth}x${window.innerHeight}`);

</script>
</body>
</html>
