437 lines
23 KiB
Plaintext
437 lines
23 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RegistroCliente.aspx.cs" Inherits="SIG.Web.Pages.Security.RegistroCliente" ViewStateEncryptionMode="Always" CodePage="65001" %>
|
|
<%@ Import Namespace="System.Web.Optimization" %>
|
|
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="es">
|
|
<head runat="server">
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Crear cuenta - Plataforma de Desarrolladores</title>
|
|
<%: Styles.Render("~/Metronic/assets/global/css/cssV1") %>
|
|
<style>
|
|
html, body { min-height: 100%; }
|
|
body.registration-page {
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
padding: 42px 18px;
|
|
position: relative;
|
|
font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
|
|
color: #173b70;
|
|
background: #123f6d url('<%= ResolveUrl("~/Imagenes/login-fondo-cerro-campana.jpg") %>') center center / cover fixed no-repeat;
|
|
}
|
|
body.registration-page::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
background: linear-gradient(135deg, rgba(3, 37, 72, .92), rgba(5, 78, 132, .75) 52%, rgba(3, 40, 77, .9));
|
|
pointer-events: none;
|
|
}
|
|
.registration-shell { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; }
|
|
.registration-card {
|
|
overflow: hidden;
|
|
background: #fff;
|
|
border-radius: 24px;
|
|
box-shadow: 0 26px 70px rgba(1, 24, 48, .38);
|
|
}
|
|
.registration-header {
|
|
min-height: 215px;
|
|
padding: 18px 22px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 32px;
|
|
color: #fff;
|
|
position: relative;
|
|
background:
|
|
linear-gradient(100deg, rgba(5, 53, 102, .98), rgba(11, 103, 184, .84)),
|
|
url('<%= ResolveUrl("~/Imagenes/cerro-campana-referencia.jpg") %>') center 47% / cover no-repeat;
|
|
}
|
|
.registration-header::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(circle at 82% 20%, rgba(35, 181, 255, .30), transparent 34%);
|
|
pointer-events: none;
|
|
}
|
|
.registration-brand, .registration-symbol { position: relative; z-index: 1; }
|
|
.registration-brand img { width: 205px; height: auto; margin-bottom: 20px; }
|
|
.registration-brand h1 { margin: 0 0 8px; font-size: 34px; line-height: 1.1; font-weight: 700; }
|
|
.registration-brand p { margin: 0; max-width: 650px; color: rgba(255,255,255,.90); font-size: 16px; line-height: 1.55; }
|
|
.registration-symbol {
|
|
flex: 0 0 112px;
|
|
width: 112px;
|
|
height: 112px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 28px;
|
|
background: rgba(255,255,255,.96);
|
|
box-shadow: 0 12px 30px rgba(0,0,0,.18);
|
|
}
|
|
.registration-symbol img { width: 78px; height: auto; }
|
|
.registration-content { padding: 34px 42px 38px; }
|
|
.steps { display: flex; margin-bottom: 30px; position: relative; }
|
|
.steps::before { content: ""; position: absolute; left: 25%; right: 25%; top: 21px; height: 3px; background: #dbe4ee; }
|
|
.step { flex: 1; position: relative; z-index: 1; text-align: center; color: #7a8ca3; font-size: 14px; font-weight: 600; }
|
|
.step-number {
|
|
width: 44px;
|
|
height: 44px;
|
|
margin: 0 auto 9px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 3px solid #dbe4ee;
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
color: #7a8ca3;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
}
|
|
.step.active { color: #0b67c2; }
|
|
.step.active .step-number { color: #fff; border-color: #1686e2; background: linear-gradient(135deg, #0c63bc, #1b98ef); box-shadow: 0 6px 16px rgba(15,112,205,.28); }
|
|
.registration-message { display: block; margin: 0 0 24px; padding: 13px 16px; border: 0; border-left: 4px solid #d9534f; border-radius: 7px !important; }
|
|
.form-section-title { margin: 0 0 6px; color: #173b70; font-size: 22px; font-weight: 700; }
|
|
.form-section-help { margin: 0 0 24px; color: #718096; }
|
|
.field { margin-bottom: 20px; }
|
|
.field label { display: block; margin-bottom: 8px; color: #27496f; font-size: 14px; font-weight: 700; }
|
|
.field .form-control {
|
|
height: 50px;
|
|
padding: 12px 14px;
|
|
border: 1px solid #d5dfeb;
|
|
border-radius: 10px !important;
|
|
background: #fff;
|
|
color: #173b70;
|
|
box-shadow: none;
|
|
}
|
|
.field .form-control:focus { border-color: #188be3; box-shadow: 0 0 0 3px rgba(24,139,227,.12); }
|
|
.required::after { content: " *"; color: #d9534f; }
|
|
.field .form-control[readonly], .field select.form-control:disabled { background: #eef4fa; color: #365a7d; opacity: 1; }
|
|
.postal-code-control { display: flex; align-items: stretch; gap: 8px; }
|
|
.postal-code-control .form-control { min-width: 0; flex: 1; }
|
|
.postal-refresh {
|
|
width: 50px;
|
|
min-width: 50px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 0;
|
|
border-radius: 10px !important;
|
|
background: #1587e2;
|
|
color: #fff;
|
|
font-size: 17px;
|
|
box-shadow: 0 5px 12px rgba(12,99,188,.20);
|
|
}
|
|
.postal-refresh:hover, .postal-refresh:focus { background: #0c63bc; color: #fff; text-decoration: none; }
|
|
.postal-status { display: block; margin-top: 8px; color: #718096; font-size: 12px; line-height: 1.4; }
|
|
.postal-status.success { color: #278251; }
|
|
.availability-status {
|
|
display: block;
|
|
min-height: 18px;
|
|
margin-top: 8px;
|
|
color: #718096;
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
}
|
|
.availability-status.checking { color: #526b87; }
|
|
.availability-status.available { color: #278251; }
|
|
.availability-status.unavailable { color: #b33a3a; }
|
|
.actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; padding-top: 22px; border-top: 1px solid #e9eef4; }
|
|
.actions .btn { min-width: 140px; padding: 12px 20px; border-radius: 9px !important; font-weight: 700; }
|
|
.actions .btn.blue, .actions .btn.green { border: 0; background: linear-gradient(90deg, #0c63bc, #1587e2) !important; box-shadow: 0 7px 16px rgba(12,99,188,.22); }
|
|
.back-link { color: #526b87 !important; background: #eef3f7 !important; border: 0 !important; }
|
|
.captcha-section { margin: 4px 0 22px; padding: 18px; border: 1px solid #dce6f0; border-radius: 10px; background: #f8fbfe; }
|
|
.captcha-title { display: block; margin-bottom: 12px; color: #27496f; font-size: 14px; font-weight: 700; }
|
|
.captcha-configuration { display: block; margin: 0; color: #a94442; line-height: 1.5; }
|
|
.registration-security { margin-top: 16px; text-align: center; color: rgba(255,255,255,.82); font-size: 13px; }
|
|
@media (max-width: 767px) {
|
|
body.registration-page { padding: 16px 10px; }
|
|
.registration-card { border-radius: 17px; }
|
|
.registration-header { min-height: 0; padding: 27px 24px; }
|
|
.registration-brand img { width: 165px; }
|
|
.registration-brand h1 { font-size: 27px; }
|
|
.registration-symbol { display: none; }
|
|
.registration-content { padding: 27px 20px 28px; }
|
|
.actions { align-items: stretch; flex-direction: column-reverse; }
|
|
.actions .btn { width: 100%; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="registration-page">
|
|
<form id="form1" runat="server">
|
|
<asp:ScriptManager ID="SM" runat="server" EnablePageMethods="true" />
|
|
<div class="registration-shell">
|
|
<div class="registration-card">
|
|
<header class="registration-header">
|
|
<div class="registration-brand">
|
|
<img src="<%= ResolveUrl("~/Imagenes/logo-agua-hermosillo-blanco.png") %>" alt="Agua de Hermosillo" />
|
|
<h1>Registro de empresa</h1>
|
|
<p>Crea el acceso de tu empresa a la Plataforma de Desarrolladores. La información se guardará únicamente después de completar y validar ambos pasos.</p>
|
|
</div>
|
|
<div class="registration-symbol">
|
|
<img src="<%= ResolveUrl("~/Imagenes/icono-desarrolladores-azul_recorte.png") %>" alt="Plataforma de Desarrolladores" />
|
|
</div>
|
|
</header>
|
|
|
|
<main class="registration-content">
|
|
<asp:UpdatePanel ID="UpRegistro" runat="server" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
<div class="steps">
|
|
<div id="StepUser" runat="server" class="step active"><span class="step-number">1</span><span>Datos de usuario</span></div>
|
|
<div id="StepCompany" runat="server" class="step"><span class="step-number">2</span><span>Datos de empresa</span></div>
|
|
</div>
|
|
|
|
<asp:Label ID="LblMessage" runat="server" CssClass="alert alert-danger registration-message" Visible="false" />
|
|
|
|
<asp:MultiView ID="MvRegistration" runat="server" ActiveViewIndex="0">
|
|
<asp:View ID="ViewUser" runat="server">
|
|
<h2 class="form-section-title">Datos para iniciar sesión</h2>
|
|
<p class="form-section-help">El correo será utilizado para verificar y activar la cuenta.</p>
|
|
<div class="row">
|
|
<div class="col-md-6 field"><label class="required">Usuario</label><asp:TextBox ID="TxtUsername" runat="server" CssClass="form-control" MaxLength="100" /></div>
|
|
<div class="col-md-6 field">
|
|
<label class="required">Correo electrónico</label>
|
|
<asp:TextBox
|
|
ID="TxtEmail"
|
|
runat="server"
|
|
CssClass="form-control"
|
|
TextMode="Email"
|
|
MaxLength="255" />
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 field"><label class="required">Contraseña</label><asp:TextBox ID="TxtPassword" runat="server" CssClass="form-control" type="password"/></div>
|
|
<div class="col-md-6 field"><label class="required">Confirmar contraseña</label><asp:TextBox ID="TxtConfirmPassword" runat="server" CssClass="form-control" type="password" /></div>
|
|
</div>
|
|
<div class="actions"><a href="../../Login.aspx" class="btn back-link">Volver al acceso</a><asp:Button ID="BtnNext" runat="server" CssClass="btn blue" Text="Continuar" OnClick="BtnNext_Click" /></div>
|
|
</asp:View>
|
|
|
|
<asp:View ID="ViewCompany" runat="server">
|
|
<h2 class="form-section-title">Información de la empresa</h2>
|
|
<p class="form-section-help">Verificaremos que el RFC no se encuentre registrado antes de crear la cuenta.</p>
|
|
<div class="row"><div class="col-md-6 field"><label class="required">Razón social</label><asp:TextBox ID="TxtBusinessName" runat="server" CssClass="form-control" MaxLength="200" /></div><div class="col-md-6 field"><label>Nombre comercial</label><asp:TextBox ID="TxtTradeName" runat="server" CssClass="form-control" MaxLength="200" /></div></div>
|
|
<div class="row">
|
|
<div class="col-md-6 field">
|
|
<label class="required">RFC</label>
|
|
<asp:TextBox
|
|
ID="TxtRfc"
|
|
runat="server"
|
|
ClientIDMode="Static"
|
|
CssClass="form-control text-uppercase"
|
|
MaxLength="15"
|
|
autocomplete="organization" />
|
|
<span
|
|
id="RfcAvailabilityStatus"
|
|
class="availability-status"
|
|
role="status"
|
|
aria-live="polite"></span>
|
|
</div>
|
|
<div class="col-md-6 field"><label>Teléfono</label><asp:TextBox ID="TxtPhone" runat="server" CssClass="form-control" MaxLength="25" /></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 field">
|
|
<label class="required">Código postal</label>
|
|
<div class="postal-code-control">
|
|
<asp:TextBox ID="TxtPostalCode" runat="server" ClientIDMode="Static" CssClass="form-control" MaxLength="5" inputmode="numeric" autocomplete="postal-code" />
|
|
<asp:LinkButton ID="BtnSearchPostalCode" runat="server" ClientIDMode="Static" CssClass="postal-refresh" OnClick="BtnSearchPostalCode_Click" CausesValidation="false" ToolTip="Actualizar datos del código postal" aria-label="Actualizar datos del código postal"><i class="fa fa-refresh" aria-hidden="true"></i></asp:LinkButton>
|
|
</div>
|
|
<asp:Label ID="LblPostalStatus" runat="server" CssClass="postal-status" Visible="false" />
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4 field"><label>País</label><asp:TextBox ID="TxtCountry" runat="server" CssClass="form-control" MaxLength="50" Text="México" ReadOnly="true" /></div>
|
|
<div class="col-md-4 field"><label class="required">Estado</label><asp:DropDownList ID="DdlState" runat="server" CssClass="form-control" Enabled="false" /></div>
|
|
<div class="col-md-4 field"><label class="required">Ciudad o localidad</label><asp:TextBox ID="TxtCity" runat="server" CssClass="form-control" MaxLength="50" ReadOnly="true" /></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12 field"><label class="required">Dirección</label><asp:TextBox ID="TxtAddress" runat="server" CssClass="form-control" MaxLength="90" /></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-3 field"><label>No. exterior</label><asp:TextBox ID="TxtExterior" runat="server" CssClass="form-control" MaxLength="20" /></div>
|
|
<div class="col-md-3 field"><label>No. interior</label><asp:TextBox ID="TxtInterior" runat="server" CssClass="form-control" MaxLength="50" /></div>
|
|
<div class="col-md-6 field"><label class="required">Colonia</label><asp:DropDownList ID="DdlNeighborhood" runat="server" CssClass="form-control" /></div>
|
|
</div>
|
|
<asp:HiddenField ID="HfCvePais" runat="server" />
|
|
<asp:HiddenField ID="HfCveMunicipio" runat="server" />
|
|
<asp:HiddenField ID="HfCveLocalidad" runat="server" />
|
|
<asp:HiddenField ID="HfResolvedPostalCode" runat="server" />
|
|
<asp:Panel ID="PnlCaptchaSection" runat="server" CssClass="captcha-section">
|
|
<span class="captcha-title">Validación de seguridad</span>
|
|
<asp:Panel ID="PnlCaptcha" runat="server" ClientIDMode="Static" CssClass="g-recaptcha" />
|
|
<asp:Label ID="LblCaptchaConfiguration" runat="server" CssClass="captcha-configuration" Text="La validación No soy un robot todavía no está configurada. Contacta a Sistemas." Visible="false" />
|
|
</asp:Panel>
|
|
<div class="actions"><asp:Button ID="BtnBack" runat="server" CssClass="btn back-link" Text="Regresar" OnClick="BtnBack_Click" CausesValidation="false" /><asp:Button ID="BtnRegister" runat="server" CssClass="btn green" Text="Crear cuenta" OnClick="BtnRegister_Click" /></div>
|
|
</asp:View>
|
|
</asp:MultiView>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
</main>
|
|
</div>
|
|
<div class="registration-security"><i class="fa fa-shield"></i> Tus datos se transmiten de forma segura y no se guardan hasta finalizar el registro.</div>
|
|
</div>
|
|
</form>
|
|
<script>
|
|
var sigPostalCodeTimer = null;
|
|
var sigRfcAvailabilityTimer = null;
|
|
var sigRfcAvailabilityRequest = 0;
|
|
var sigRecaptchaWidgetId = null;
|
|
|
|
function sigMostrarDisponibilidadRfc(message, state) {
|
|
var status = document.getElementById('RfcAvailabilityStatus');
|
|
|
|
if (!status) {
|
|
return;
|
|
}
|
|
|
|
status.textContent = message || '';
|
|
status.className = 'availability-status' + (state ? ' ' + state : '');
|
|
}
|
|
|
|
function sigValidarDisponibilidadRfc() {
|
|
var input = document.getElementById('TxtRfc');
|
|
|
|
if (!input || !window.PageMethods) {
|
|
return;
|
|
}
|
|
|
|
var rfc = input.value.trim().toUpperCase().replace(/\s/g, '');
|
|
input.value = rfc;
|
|
|
|
if (rfc.length < 12) {
|
|
input.setCustomValidity('');
|
|
sigMostrarDisponibilidadRfc(
|
|
rfc.length === 0 ? '' : 'Continúa capturando el RFC para verificarlo.',
|
|
'checking');
|
|
return;
|
|
}
|
|
|
|
var currentRequest = ++sigRfcAvailabilityRequest;
|
|
input.setCustomValidity('');
|
|
sigMostrarDisponibilidadRfc('Verificando RFC...', 'checking');
|
|
|
|
PageMethods.ValidateRfcAvailability(
|
|
rfc,
|
|
function (result) {
|
|
if (currentRequest !== sigRfcAvailabilityRequest) {
|
|
return;
|
|
}
|
|
|
|
input.setCustomValidity(result.Available ? '' : result.Message);
|
|
sigMostrarDisponibilidadRfc(
|
|
result.Message,
|
|
result.Available ? 'available' : 'unavailable');
|
|
},
|
|
function () {
|
|
if (currentRequest !== sigRfcAvailabilityRequest) {
|
|
return;
|
|
}
|
|
|
|
var message = 'No fue posible verificar el RFC. Intenta nuevamente.';
|
|
input.setCustomValidity(message);
|
|
sigMostrarDisponibilidadRfc(message, 'unavailable');
|
|
});
|
|
}
|
|
|
|
function sigInicializarDisponibilidadRfc() {
|
|
var input = document.getElementById('TxtRfc');
|
|
|
|
if (!input || input.getAttribute('data-sig-rfc-availability-initialized') === '1') {
|
|
return;
|
|
}
|
|
|
|
input.addEventListener('input', function () {
|
|
window.clearTimeout(sigRfcAvailabilityTimer);
|
|
sigRfcAvailabilityRequest++;
|
|
this.setCustomValidity('');
|
|
sigMostrarDisponibilidadRfc('', '');
|
|
sigRfcAvailabilityTimer = window.setTimeout(
|
|
sigValidarDisponibilidadRfc,
|
|
650);
|
|
});
|
|
|
|
input.addEventListener('blur', function () {
|
|
window.clearTimeout(sigRfcAvailabilityTimer);
|
|
sigValidarDisponibilidadRfc();
|
|
});
|
|
|
|
input.setAttribute('data-sig-rfc-availability-initialized', '1');
|
|
}
|
|
|
|
function sigSolicitarCodigoPostal() {
|
|
var input = document.getElementById('TxtPostalCode');
|
|
var button = document.getElementById('BtnSearchPostalCode');
|
|
if (!input || !button) return;
|
|
|
|
if (!/^\d{5}$/.test(input.value)) {
|
|
input.setCustomValidity('El código postal debe contener exactamente 5 dígitos.');
|
|
input.reportValidity();
|
|
return;
|
|
}
|
|
|
|
input.setCustomValidity('');
|
|
button.click();
|
|
}
|
|
|
|
function sigInicializarCodigoPostal() {
|
|
var input = document.getElementById('TxtPostalCode');
|
|
var button = document.getElementById('BtnSearchPostalCode');
|
|
if (!input || !button || input.getAttribute('data-sig-cp-inicializado') === '1') return;
|
|
|
|
input.setAttribute('data-sig-cp-inicializado', '1');
|
|
|
|
input.addEventListener('input', function () {
|
|
this.value = this.value.replace(/\D/g, '').substring(0, 5);
|
|
this.setCustomValidity('');
|
|
window.clearTimeout(sigPostalCodeTimer);
|
|
if (this.value.length === 5)
|
|
sigPostalCodeTimer = window.setTimeout(sigSolicitarCodigoPostal, 2000);
|
|
});
|
|
|
|
input.addEventListener('keydown', function (event) {
|
|
if (event.key !== 'Enter' && event.keyCode !== 13) return;
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
window.clearTimeout(sigPostalCodeTimer);
|
|
sigSolicitarCodigoPostal();
|
|
});
|
|
|
|
button.addEventListener('click', function () {
|
|
window.clearTimeout(sigPostalCodeTimer);
|
|
var icon = this.querySelector('.fa-refresh');
|
|
if (icon) icon.classList.add('fa-spin');
|
|
});
|
|
}
|
|
|
|
function sigRenderRecaptcha() {
|
|
var container = document.getElementById('PnlCaptcha');
|
|
if (!container || !window.grecaptcha || container.getAttribute('data-rendered') === '1') return;
|
|
var siteKey = container.getAttribute('data-sitekey');
|
|
if (!siteKey) return;
|
|
sigRecaptchaWidgetId = window.grecaptcha.render(container, { sitekey: siteKey, theme: 'light' });
|
|
container.setAttribute('data-rendered', '1');
|
|
}
|
|
|
|
function sigRecaptchaLoaded() { sigRenderRecaptcha(); }
|
|
|
|
(function () {
|
|
function initializePageControls() {
|
|
sigInicializarCodigoPostal();
|
|
sigInicializarDisponibilidadRfc();
|
|
sigRenderRecaptcha();
|
|
}
|
|
|
|
if (window.Sys && Sys.WebForms) {
|
|
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
|
|
sigRecaptchaWidgetId = null;
|
|
initializePageControls();
|
|
});
|
|
}
|
|
|
|
if (document.readyState === 'loading')
|
|
document.addEventListener('DOMContentLoaded', initializePageControls);
|
|
else
|
|
initializePageControls();
|
|
}());
|
|
</script>
|
|
<script src="https://www.google.com/recaptcha/api.js?onload=sigRecaptchaLoaded&render=explicit&hl=es" async defer></script>
|
|
</body>
|
|
</html>
|