{"id":629,"date":"2024-08-01T20:06:13","date_gmt":"2024-08-01T20:06:13","guid":{"rendered":"https:\/\/site.japami.gob.mx\/?page_id=629"},"modified":"2024-08-01T20:27:12","modified_gmt":"2024-08-01T20:27:12","slug":"registro","status":"publish","type":"page","link":"https:\/\/www.japami.gob.mx\/index.php\/registro\/","title":{"rendered":"Registro"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"629\" class=\"elementor elementor-629\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a3f642a e-con-full e-flex e-con e-parent\" data-id=\"a3f642a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c637288 elementor-widget elementor-widget-shortcode\" data-id=\"c637288\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><section class=\"my-5 container\">\r\n    <form id=\"formDatos\" action=\"javascript:void(0);\">\r\n        <div class=\"row justify-content-center\">\r\n            <div class=\"col-md-7 col-12 me-md-3\">\r\n                <div class=\"fondo_gris p-5\">\r\n                    <h2 class=\"fw-bolder fs-5\">Datos Personales<\/h2>\r\n                    <div class=\"row mb-3 justify-content-md-between\">\r\n                        <div class=\"col-md-6 col-12\">\r\n                            <label for=\"nombre\">Nombre<\/label>\r\n                            <input type=\"text\" id=\"nombre\" name=\"nombre\" placeholder=\"Lorem ipsum dolor sit amet,\" class=\"input4\">\r\n                        <\/div>\r\n                        <div class=\"col-md-5 col-12 ms-1\">\r\n                            <label for=\"sexo\">Sexo<\/label>\r\n                            <select id=\"sexo\" name=\"sexo\" class=\"select3\">\r\n                                <option value=\"masculino\">Masculino<\/option>\r\n                                <option value=\"femenino\">Femenino<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"mb-3\">\r\n                        <label for=\"domicilio\">Domicilio<\/label>\r\n                        <input type=\"text\" id=\"domicilio\" name=\"domicilio\" class=\"input4\" placeholder=\"\">\r\n                    <\/div>\r\n                    <div class=\"row mb-3 justify-content-md-between\">\r\n                        <div class=\"col-md-6 col-12\">\r\n                            <label for=\"ciudad\">Ciudad<\/label>\r\n                            <input type=\"text\" id=\"ciudad\" name=\"ciudad\" class=\"input4\" placeholder=\"\">\r\n                        <\/div>\r\n                        <div class=\"col-md-5 col-12 ms-1\">\r\n                            <label for=\"estado\">Estado<\/label>\r\n                            <input type=\"text\" id=\"estado\" name=\"estado\" class=\"input4\" placeholder=\"\">\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"fondo_gris p-5 mt-3\">\r\n                    <h2 class=\"fw-bolder fs-5\">Datos para pago electr\u00f3nico<\/h2>\r\n                    <div class=\"mb-3\">\r\n                        <label for=\"email\">Email<\/label>\r\n                        <input type=\"text\" id=\"email\" name=\"email\" class=\"input4\" placeholder=\"\">\r\n                    <\/div>\r\n                    <div class=\"row mb-3 justify-content-md-between\">\r\n                        <div class=\"col-md-6 col-12\">\r\n                            <label for=\"password\">Contrase\u00f1a<\/label>\r\n                            <input type=\"password\" id=\"password\" name=\"password\" class=\"input4\" placeholder=\"\" minlength=\"6\">\r\n                            <legend class=\"legend2\">Diferente al password de tu email. M\u00ednimo 6 caracteres. Esta ser\u00e1 tu contrase\u00f1a en Japami.<\/legend>\r\n                        <\/div>\r\n                        <div class=\"col-md-5 col-12 ms-1\">\r\n                            <label for=\"confirmacion\">Confirmaci\u00f3n<\/label>\r\n                            <input type=\"password\" id=\"confirmacion\" name=\"confirmacion\" class=\"input4\" placeholder=\"\">\r\n                            <small id=\"errorConfirmacion\" style=\"color: red; display: none;\">Las contrase\u00f1as no son iguales.<\/small>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"col-md-4 col-12 mt-4 mt-md-0 row align-self-stretch\">\r\n                <div class=\"fondo_gris p-5\">\r\n                    <h2 class=\"fw-bolder fs-5\">Informaci\u00f3n de contacto<\/h2>\r\n                    <div class=\"mb-3\">\r\n                        <label for=\"telefono\">Tel\u00e9fono<\/label>\r\n                        <input type=\"text\" id=\"telefono\" name=\"telefono\" class=\"input4\" placeholder=\"\">\r\n                    <\/div>\r\n                    <div class=\"mb-3\">\r\n                        <label for=\"fax\">Fax<\/label>\r\n                        <input type=\"text\" id=\"fax\" name=\"fax\" class=\"input4\" placeholder=\"\">\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"fondo_gris p-5 mt-3\">\r\n                    <h2 class=\"fw-bolder fs-5\">Informaci\u00f3n para recuperar su contrase\u00f1a<\/h2>\r\n                    <div class=\"mb-3\">\r\n                        <label for=\"preguntaSecreta\">Pregunta secreta<\/label>\r\n                        <input type=\"text\" id=\"preguntaSecreta\" name=\"preguntaSecreta\" class=\"input4\" placeholder=\"\">\r\n                    <\/div>\r\n                    <div class=\"mb-3\">\r\n                        <label for=\"respuestaSecreta\">Respuesta<\/label>\r\n                        <input type=\"text\" id=\"respuestaSecreta\" name=\"respuestaSecreta\" class=\"input4\" placeholder=\"\">\r\n                    <\/div>\r\n                    <div>\r\n                        <button id=\"btnEnviar\" class=\"button w-50\">Enviar Datos<\/button>\r\n                        <small id=\"responseMessage\" style=\"display: block; margin-top: 10px;\"><\/small>\r\n                    <\/div>\r\n                <\/div>\r\n\t\t\t\t<div id=\"successMessage\" style=\" display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:white; padding:20px; box-shadow: 4px 13px 37px -10px rgba(0, 0, 0, 0.5); text-align:center;\">\r\n                <p class=\"mb-4\">Se ha completado el registro <\/p>\r\n                <button id=\"goToLogin\" class=\"button\">Ir a inicio de sesi\u00f3n<\/button>\r\n            <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/form>\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    const form = document.getElementById('formDatos');\r\n    const btnEnviar = document.getElementById('btnEnviar');\r\n    const password = document.getElementById('password');\r\n    const confirmacion = document.getElementById('confirmacion');\r\n    const errorConfirmacion = document.getElementById('errorConfirmacion');\r\n    const responseMessage = document.getElementById('responseMessage');\r\n\r\n    \/\/ Evitar que el formulario se env\u00ede con Enter\r\n    form.addEventListener('keypress', function(event) {\r\n        if (event.key === 'Enter') {\r\n            event.preventDefault();\r\n        }\r\n    });\r\n\r\n    \/\/ Validar longitud de la contrase\u00f1a y confirmaci\u00f3n\r\n    function validarFormulario() {\r\n        const contrasenaValida = password.value.length >= 6;\r\n        const contrasenasCoinciden = password.value === confirmacion.value;\r\n\r\n        if (!contrasenasCoinciden) {\r\n            errorConfirmacion.style.display = 'inline';\r\n            btnEnviar.disabled = true;\r\n\t\t\tbtnEnviar.classList.remove('button');\r\n        \tbtnEnviar.classList.add('buttond');\r\n            return false;\r\n        } else {\r\n            errorConfirmacion.style.display = 'none';\r\n\t\t\tbtnEnviar.classList.remove('buttond');\r\n    \tbtnEnviar.classList.add('button');\r\n        }\r\n\r\n        if (!contrasenaValida) {\r\n            btnEnviar.disabled = true;\r\n\t\t\tbtnEnviar.classList.remove('button');\r\n        \tbtnEnviar.classList.add('buttond');\r\n\r\n            return false;\r\n        } \r\n        btnEnviar.disabled = false;\r\n\t\tbtnEnviar.classList.remove('buttond');\r\n    \tbtnEnviar.classList.add('button');\r\n        return true;\r\n    }\r\n\r\n    password.addEventListener('input', validarFormulario);\r\n    confirmacion.addEventListener('input', validarFormulario);\r\n\r\n    \/\/ Manejar el env\u00edo del formulario\r\n    form.addEventListener('submit', function(event) {\r\n        event.preventDefault();\r\n\r\n        if (!validarFormulario()) {\r\n            return;\r\n        }\r\n\r\n        const datos = {\r\n            address: document.getElementById('domicilio').value,\r\n            city: document.getElementById('ciudad').value,\r\n            email: document.getElementById('email').value,\r\n            fax: document.getElementById('fax').value,\r\n            gender: document.getElementById('sexo').value,\r\n            name: document.getElementById('nombre').value,\r\n            password: document.getElementById('password').value,\r\n            secretAnswer: document.getElementById('respuestaSecreta').value,\r\n            secreteQuestion: document.getElementById('preguntaSecreta').value,\r\n            state: document.getElementById('estado').value,\r\n            telephone: document.getElementById('telefono').value\r\n        };\r\n\r\n        fetch('https:\/\/webapi.japami.gob.mx\/client\/register', {\r\n            method: 'POST',\r\n            headers: {\r\n                'Content-Type': 'application\/json',\r\n                'Accept': 'application\/json'\r\n            },\r\n            body: JSON.stringify(datos)\r\n        })\r\n        .then(response => {\r\n            if (response.status === 200) {\r\n                return response.json();\r\n            } else if (response.status === 422) {\r\n                throw new Error('Este correo ya esta registrado');\r\n            } else if (response.status === 503) {\r\n                throw new Error('Service unavailable');\r\n            } else {\r\n\t\t\t\t\r\n\r\n            }\r\n        })\r\n        .then(data => {\r\n            document.getElementById('successMessage').style.display = 'block';\r\n\t\t\tdocument.getElementById('goToLogin').onclick = function() {\r\n\t\t\t\twindow.location.href = 'https:\/\/www.japami.gob.mx\/index.php\/inicio-de-sesion\/';\r\n\t\t\t};\r\n        })\r\n        .catch(error => {\r\n            responseMessage.style.color = 'red';\r\n            responseMessage.innerText = error.message;\r\n        });\r\n    });\r\n});\r\n<\/script>\r\n\r\n\r\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-629","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.japami.gob.mx\/index.php\/wp-json\/wp\/v2\/pages\/629","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.japami.gob.mx\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.japami.gob.mx\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.japami.gob.mx\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.japami.gob.mx\/index.php\/wp-json\/wp\/v2\/comments?post=629"}],"version-history":[{"count":7,"href":"https:\/\/www.japami.gob.mx\/index.php\/wp-json\/wp\/v2\/pages\/629\/revisions"}],"predecessor-version":[{"id":637,"href":"https:\/\/www.japami.gob.mx\/index.php\/wp-json\/wp\/v2\/pages\/629\/revisions\/637"}],"wp:attachment":[{"href":"https:\/\/www.japami.gob.mx\/index.php\/wp-json\/wp\/v2\/media?parent=629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}