429 lines
23 KiB
HTML
429 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>Crear cuenta — Moraworld Imports</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
|
|
<style>
|
|
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
|
:root{
|
|
--primary:#0057FF;--primary-d:#003FC7;--accent:#FF6B00;
|
|
--dark:#0D1117;--gray-900:#111827;--gray-700:#374151;
|
|
--gray-500:#6B7280;--gray-200:#E5E7EB;--gray-100:#F3F4F6;
|
|
--white:#fff;--green:#10B981;--red:#EF4444;
|
|
}
|
|
body{font-family:'Inter',sans-serif;background:var(--gray-100);min-height:100vh;display:flex;flex-direction:column}
|
|
a{text-decoration:none;color:inherit}
|
|
|
|
nav{background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--gray-200);padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
|
|
.nav-logo{font-size:1.2rem;font-weight:800;color:var(--primary)}
|
|
.nav-logo span{color:var(--accent)}
|
|
.nav-back{font-size:.85rem;color:var(--gray-500);display:flex;align-items:center;gap:6px;transition:color .2s}
|
|
.nav-back:hover{color:var(--primary)}
|
|
|
|
.reg-wrapper{flex:1;display:grid;grid-template-columns:1fr 1fr}
|
|
|
|
/* LEFT */
|
|
.reg-left{
|
|
background:linear-gradient(135deg,#0D1117 0%,#0D2150 100%);
|
|
display:flex;flex-direction:column;justify-content:center;padding:60px 56px;
|
|
position:relative;overflow:hidden;
|
|
}
|
|
.reg-left::before{
|
|
content:'';position:absolute;inset:0;
|
|
background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%230057FF' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
|
}
|
|
.reg-left-content{position:relative;z-index:1;max-width:420px}
|
|
.al-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.3);color:#6EE7B7;font-size:.8rem;font-weight:600;padding:6px 14px;border-radius:999px;margin-bottom:32px}
|
|
.al-badge span{width:8px;height:8px;border-radius:50%;background:#6EE7B7;animation:pulse 2s infinite}
|
|
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
|
|
.reg-left h2{font-size:2rem;font-weight:800;color:#fff;line-height:1.2;margin-bottom:12px}
|
|
.reg-left h2 em{color:var(--accent);font-style:normal}
|
|
.reg-left p{color:#9CA3AF;font-size:.95rem;line-height:1.7;margin-bottom:36px}
|
|
.steps-list{display:flex;flex-direction:column;gap:0}
|
|
.reg-step{display:flex;gap:14px;align-items:flex-start}
|
|
.rs-connector{width:2px;background:rgba(255,255,255,.1);min-height:24px;margin:4px 0 4px 19px}
|
|
.rs-num{width:40px;height:40px;border-radius:50%;background:var(--primary);color:#fff;font-size:.85rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
|
|
.rs-text{padding-top:8px;padding-bottom:20px}
|
|
.rs-text strong{display:block;color:#fff;font-size:.9rem;margin-bottom:2px}
|
|
.rs-text span{color:#6B7280;font-size:.82rem}
|
|
.address-preview{
|
|
background:rgba(0,87,255,.15);border:1px solid rgba(0,87,255,.3);
|
|
border-radius:10px;padding:16px 20px;margin-top:24px;
|
|
font-family:'Courier New',monospace;font-size:.82rem;color:#A5B4FC;line-height:1.8;
|
|
}
|
|
.address-preview .suite{color:var(--accent);font-weight:700;font-size:.95rem}
|
|
|
|
/* RIGHT */
|
|
.reg-right{display:flex;align-items:flex-start;justify-content:center;padding:48px 24px;background:var(--white);overflow-y:auto}
|
|
.reg-box{width:100%;max-width:460px}
|
|
.reg-box h1{font-size:1.7rem;font-weight:800;color:var(--gray-900);margin-bottom:8px}
|
|
.reg-box .subtitle{color:var(--gray-500);font-size:.9rem;margin-bottom:32px}
|
|
.reg-box .subtitle a{color:var(--primary);font-weight:600}
|
|
|
|
/* Progress */
|
|
.progress-bar{display:flex;gap:0;margin-bottom:32px}
|
|
.prog-step{flex:1;height:4px;background:var(--gray-200);border-radius:4px;transition:background .3s}
|
|
.prog-step.done{background:var(--green)}
|
|
.prog-step.active{background:var(--primary)}
|
|
.prog-labels{display:flex;justify-content:space-between;font-size:.72rem;color:var(--gray-500);margin-top:6px;margin-bottom:28px}
|
|
.prog-labels span.active{color:var(--primary);font-weight:600}
|
|
.prog-labels span.done{color:var(--green)}
|
|
|
|
.form-group{margin-bottom:18px}
|
|
.form-group label{display:block;font-size:.85rem;font-weight:600;color:var(--gray-700);margin-bottom:5px}
|
|
.form-group input,.form-group select{
|
|
width:100%;padding:12px 16px;border:2px solid var(--gray-200);
|
|
border-radius:8px;font-size:.93rem;font-family:inherit;
|
|
transition:border-color .2s;outline:none;background:var(--white);
|
|
}
|
|
.form-group input:focus,.form-group select:focus{border-color:var(--primary)}
|
|
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
|
|
.input-wrap{position:relative}
|
|
.input-wrap input{padding-right:44px}
|
|
.toggle-pass{position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;font-size:.95rem;color:var(--gray-500);background:none;border:none;padding:0}
|
|
|
|
.pass-strength{margin-top:6px;display:flex;gap:4px}
|
|
.ps-bar{flex:1;height:3px;border-radius:2px;background:var(--gray-200);transition:background .3s}
|
|
.ps-label{font-size:.72rem;color:var(--gray-500);margin-top:4px}
|
|
|
|
.terms-check{display:flex;gap:10px;align-items:flex-start;font-size:.83rem;color:var(--gray-700);margin-bottom:24px;cursor:pointer}
|
|
.terms-check input{accent-color:var(--primary);width:16px;height:16px;flex-shrink:0;margin-top:2px}
|
|
.terms-check a{color:var(--primary)}
|
|
|
|
.btn-submit{width:100%;padding:14px;background:var(--primary);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;font-family:inherit;transition:all .2s}
|
|
.btn-submit:hover{background:var(--primary-d);transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,87,255,.3)}
|
|
.btn-outline{width:100%;padding:13px;background:transparent;color:var(--gray-700);border:2px solid var(--gray-200);border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s;margin-top:10px}
|
|
.btn-outline:hover{border-color:var(--primary);color:var(--primary)}
|
|
|
|
/* Step panels */
|
|
.step-panel{display:none}
|
|
.step-panel.active{display:block}
|
|
|
|
/* Success */
|
|
.success-box{text-align:center;padding:20px 0}
|
|
.success-icon{font-size:4rem;margin-bottom:16px}
|
|
.success-box h2{font-size:1.5rem;font-weight:800;margin-bottom:10px}
|
|
.success-box p{color:var(--gray-500);font-size:.9rem;line-height:1.7;margin-bottom:24px}
|
|
.suite-display{
|
|
background:var(--dark);border-radius:10px;padding:20px;
|
|
font-family:'Courier New',monospace;font-size:.85rem;color:#A5B4FC;
|
|
line-height:2;margin-bottom:24px;text-align:left;
|
|
}
|
|
.suite-display .suite-num{color:var(--accent);font-weight:700;font-size:1.1rem}
|
|
|
|
.alert{padding:12px 16px;border-radius:8px;font-size:.85rem;margin-bottom:16px;display:none}
|
|
.alert.show{display:flex;gap:10px;align-items:center}
|
|
.alert-error{background:#FEE2E2;color:#991B1B;border:1px solid #FCA5A5}
|
|
|
|
@media(max-width:768px){
|
|
.reg-wrapper{grid-template-columns:1fr}
|
|
.reg-left{display:none}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<nav>
|
|
<a href="index.html" class="nav-logo">Moraworld<span>.</span>Imports</a>
|
|
<a href="index.html" class="nav-back">← Volver al inicio</a>
|
|
</nav>
|
|
|
|
<div class="reg-wrapper">
|
|
|
|
<!-- LEFT -->
|
|
<div class="reg-left">
|
|
<div class="reg-left-content">
|
|
<div class="al-badge"><span></span> Registro gratuito — 2 minutos</div>
|
|
<h2>Abre tu <em>Suite</em> en<br/>New Jersey hoy</h2>
|
|
<p>Compra en Amazon, eBay, Walmart y más. Te asignamos una dirección personalizada en nuestra bodega de NJ y enviamos a Ecuador.</p>
|
|
<div class="steps-list">
|
|
<div class="reg-step">
|
|
<div class="rs-num">1</div>
|
|
<div class="rs-text"><strong>Crea tu cuenta</strong><span>Datos personales y contraseña segura</span></div>
|
|
</div>
|
|
<div class="rs-connector"></div>
|
|
<div class="reg-step">
|
|
<div class="rs-num">2</div>
|
|
<div class="rs-text"><strong>Verifica tu correo</strong><span>Código de 6 dígitos a tu bandeja</span></div>
|
|
</div>
|
|
<div class="rs-connector"></div>
|
|
<div class="reg-step">
|
|
<div class="rs-num">3</div>
|
|
<div class="rs-text"><strong>Configura MFA</strong><span>Activa la autenticación en dos pasos</span></div>
|
|
</div>
|
|
<div class="rs-connector"></div>
|
|
<div class="reg-step">
|
|
<div class="rs-num">4</div>
|
|
<div class="rs-text"><strong>¡Listo!</strong><span>Tu Suite queda disponible de inmediato</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="address-preview">
|
|
<div>150 N Day St,</div>
|
|
<div class="suite">Suite EC-XXXXX,</div>
|
|
<div>City of Orange, NJ 07050</div>
|
|
<div>United States 🇺🇸</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RIGHT -->
|
|
<div class="reg-right">
|
|
<div class="reg-box">
|
|
|
|
<!-- Progress -->
|
|
<div class="progress-bar" id="progress-bar">
|
|
<div class="prog-step active" id="pb-1"></div>
|
|
<div class="prog-step" id="pb-2"></div>
|
|
<div class="prog-step" id="pb-3"></div>
|
|
</div>
|
|
<div class="prog-labels">
|
|
<span class="active" id="pl-1">Datos personales</span>
|
|
<span id="pl-2">Verificación</span>
|
|
<span id="pl-3">Seguridad MFA</span>
|
|
</div>
|
|
|
|
<div class="alert alert-error" id="alert-error">
|
|
<span>⚠️</span><span id="alert-msg"></span>
|
|
</div>
|
|
|
|
<!-- ─── STEP 1: Datos ─── -->
|
|
<div class="step-panel active" id="s1">
|
|
<h1>Crear cuenta gratis</h1>
|
|
<p class="subtitle">¿Ya tienes cuenta? <a href="login.html">Inicia sesión aquí →</a></p>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>Nombre</label>
|
|
<input type="text" id="nombre" placeholder="Juan"/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Apellido</label>
|
|
<input type="text" id="apellido" placeholder="Pérez"/>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Correo electrónico</label>
|
|
<input type="email" id="email" placeholder="correo@ejemplo.com"/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Teléfono (WhatsApp)</label>
|
|
<input type="tel" id="telefono" placeholder="+593 99 123 4567"/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Ciudad en Ecuador</label>
|
|
<select id="ciudad">
|
|
<option value="">Selecciona tu ciudad</option>
|
|
<option>Cuenca</option>
|
|
<option>Quito</option>
|
|
<option>Guayaquil</option>
|
|
<option>Ambato</option>
|
|
<option>Loja</option>
|
|
<option>Riobamba</option>
|
|
<option>Manta</option>
|
|
<option>Otra ciudad</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Cédula / Pasaporte</label>
|
|
<input type="text" id="cedula" placeholder="Ej: 0102030405"/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Contraseña</label>
|
|
<div class="input-wrap">
|
|
<input type="password" id="password" placeholder="Mínimo 8 caracteres" oninput="checkStrength(this.value)"/>
|
|
<button class="toggle-pass" onclick="togglePassword('password',this)" type="button">👁️</button>
|
|
</div>
|
|
<div class="pass-strength" id="ps">
|
|
<div class="ps-bar" id="psb1"></div>
|
|
<div class="ps-bar" id="psb2"></div>
|
|
<div class="ps-bar" id="psb3"></div>
|
|
<div class="ps-bar" id="psb4"></div>
|
|
</div>
|
|
<div class="ps-label" id="ps-label"></div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Confirmar contraseña</label>
|
|
<div class="input-wrap">
|
|
<input type="password" id="password2" placeholder="Repite la contraseña"/>
|
|
<button class="toggle-pass" onclick="togglePassword('password2',this)" type="button">👁️</button>
|
|
</div>
|
|
</div>
|
|
<label class="terms-check">
|
|
<input type="checkbox" id="terms"/>
|
|
Acepto los <a href="#">Términos de uso</a> y la <a href="#">Política de privacidad</a> de Moraworld Imports (LOPDP Ecuador).
|
|
</label>
|
|
<button class="btn-submit" onclick="goStep2()">Continuar →</button>
|
|
</div>
|
|
|
|
<!-- ─── STEP 2: Verificación correo ─── -->
|
|
<div class="step-panel" id="s2">
|
|
<h1>Verifica tu correo</h1>
|
|
<p class="subtitle" style="margin-bottom:28px;">Enviamos un código de 6 dígitos a <strong id="email-display"></strong>. Revisa tu bandeja de entrada.</p>
|
|
<div style="display:flex;gap:10px;margin-bottom:24px">
|
|
<input type="text" maxlength="1" class="otp-digit" style="flex:1;text-align:center;font-size:1.6rem;font-weight:700;padding:14px 4px;border:2px solid var(--gray-200);border-radius:8px;font-family:inherit;outline:none;transition:border-color .2s" oninput="otpMove(this,0)"/>
|
|
<input type="text" maxlength="1" class="otp-digit" style="flex:1;text-align:center;font-size:1.6rem;font-weight:700;padding:14px 4px;border:2px solid var(--gray-200);border-radius:8px;font-family:inherit;outline:none;transition:border-color .2s" oninput="otpMove(this,1)"/>
|
|
<input type="text" maxlength="1" class="otp-digit" style="flex:1;text-align:center;font-size:1.6rem;font-weight:700;padding:14px 4px;border:2px solid var(--gray-200);border-radius:8px;font-family:inherit;outline:none;transition:border-color .2s" oninput="otpMove(this,2)"/>
|
|
<input type="text" maxlength="1" class="otp-digit" style="flex:1;text-align:center;font-size:1.6rem;font-weight:700;padding:14px 4px;border:2px solid var(--gray-200);border-radius:8px;font-family:inherit;outline:none;transition:border-color .2s" oninput="otpMove(this,3)"/>
|
|
<input type="text" maxlength="1" class="otp-digit" style="flex:1;text-align:center;font-size:1.6rem;font-weight:700;padding:14px 4px;border:2px solid var(--gray-200);border-radius:8px;font-family:inherit;outline:none;transition:border-color .2s" oninput="otpMove(this,4)"/>
|
|
<input type="text" maxlength="1" class="otp-digit" style="flex:1;text-align:center;font-size:1.6rem;font-weight:700;padding:14px 4px;border:2px solid var(--gray-200);border-radius:8px;font-family:inherit;outline:none;transition:border-color .2s" oninput="otpMove(this,5)"/>
|
|
</div>
|
|
<button class="btn-submit" onclick="goStep3()">Verificar y continuar →</button>
|
|
<button class="btn-outline" onclick="goStep1()">← Volver</button>
|
|
<p style="text-align:center;margin-top:16px;font-size:.82rem;color:var(--gray-500)">¿No recibiste el código? <a href="#" style="color:var(--primary);font-weight:600" onclick="return false">Reenviar código</a></p>
|
|
</div>
|
|
|
|
<!-- ─── STEP 3: MFA Setup ─── -->
|
|
<div class="step-panel" id="s3">
|
|
<h1>Activar MFA</h1>
|
|
<p class="subtitle" style="margin-bottom:24px;">Escanea este código QR con <strong>Google Authenticator</strong> o <strong>Authy</strong> para activar la verificación en dos pasos.</p>
|
|
<div style="background:var(--gray-100);border-radius:12px;padding:24px;text-align:center;margin-bottom:24px">
|
|
<!-- QR placeholder -->
|
|
<div style="width:160px;height:160px;background:#fff;margin:0 auto 16px;border-radius:8px;border:2px solid var(--gray-200);display:flex;align-items:center;justify-content:center;font-size:2.5rem">🔲</div>
|
|
<p style="font-size:.78rem;color:var(--gray-500);margin-bottom:8px">O ingresa esta clave manual:</p>
|
|
<code style="background:var(--dark);color:#A5B4FC;padding:8px 16px;border-radius:6px;font-size:.82rem;letter-spacing:.1em">MORA-XXXX-YYYY-ZZZZ</code>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Confirma el código generado por la app</label>
|
|
<div style="display:flex;gap:10px">
|
|
<input type="text" maxlength="1" class="otp-mfa" style="flex:1;text-align:center;font-size:1.4rem;font-weight:700;padding:12px 4px;border:2px solid var(--gray-200);border-radius:8px;font-family:inherit;outline:none" oninput="mfaMove(this,0)"/>
|
|
<input type="text" maxlength="1" class="otp-mfa" style="flex:1;text-align:center;font-size:1.4rem;font-weight:700;padding:12px 4px;border:2px solid var(--gray-200);border-radius:8px;font-family:inherit;outline:none" oninput="mfaMove(this,1)"/>
|
|
<input type="text" maxlength="1" class="otp-mfa" style="flex:1;text-align:center;font-size:1.4rem;font-weight:700;padding:12px 4px;border:2px solid var(--gray-200);border-radius:8px;font-family:inherit;outline:none" oninput="mfaMove(this,2)"/>
|
|
<input type="text" maxlength="1" class="otp-mfa" style="flex:1;text-align:center;font-size:1.4rem;font-weight:700;padding:12px 4px;border:2px solid var(--gray-200);border-radius:8px;font-family:inherit;outline:none" oninput="mfaMove(this,3)"/>
|
|
<input type="text" maxlength="1" class="otp-mfa" style="flex:1;text-align:center;font-size:1.4rem;font-weight:700;padding:12px 4px;border:2px solid var(--gray-200);border-radius:8px;font-family:inherit;outline:none" oninput="mfaMove(this,4)"/>
|
|
<input type="text" maxlength="1" class="otp-mfa" style="flex:1;text-align:center;font-size:1.4rem;font-weight:700;padding:12px 4px;border:2px solid var(--gray-200);border-radius:8px;font-family:inherit;outline:none" oninput="mfaMove(this,5)"/>
|
|
</div>
|
|
</div>
|
|
<button class="btn-submit" onclick="finishReg()">Activar MFA y abrir mi casillero →</button>
|
|
<button class="btn-outline" onclick="goStep2()">← Volver</button>
|
|
</div>
|
|
|
|
<!-- ─── SUCCESS ─── -->
|
|
<div class="step-panel" id="s-success">
|
|
<div class="success-box">
|
|
<div class="success-icon">🎉</div>
|
|
<h2>¡Tu casillero está listo!</h2>
|
|
<p>Tu Suite personalizada en New Jersey ha sido creada. Usa esta dirección en tus compras online.</p>
|
|
<div class="suite-display">
|
|
<div id="suc-name" style="color:#fff;font-weight:700;margin-bottom:4px"></div>
|
|
<div>150 N Day St,</div>
|
|
<div class="suite-num">Suite EC-<span id="suc-suite">00001</span>,</div>
|
|
<div>City of Orange, NJ 07050</div>
|
|
<div>United States 🇺🇸</div>
|
|
</div>
|
|
<a href="portal-cliente.html" style="display:block;padding:14px;background:var(--primary);color:#fff;border-radius:8px;font-weight:700;font-size:1rem;margin-bottom:12px">Ir a mi portal →</a>
|
|
<a href="index.html" style="display:block;padding:12px;background:var(--gray-100);color:var(--gray-700);border-radius:8px;font-weight:600;font-size:.9rem">Volver al inicio</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
function showStep(n){
|
|
['s1','s2','s3','s-success'].forEach(id=>{
|
|
document.getElementById(id).classList.remove('active');
|
|
});
|
|
document.getElementById('s'+n).classList.add('active');
|
|
|
|
const bars = [null,'pb-1','pb-2','pb-3'];
|
|
const labels = [null,'pl-1','pl-2','pl-3'];
|
|
[1,2,3].forEach(i=>{
|
|
const b=document.getElementById(bars[i]);
|
|
const l=document.getElementById(labels[i]);
|
|
if(!b) return;
|
|
b.className='prog-step';
|
|
l.className='';
|
|
if(i < n){b.classList.add('done');l.classList.add('done')}
|
|
else if(i === n){b.classList.add('active');l.classList.add('active')}
|
|
});
|
|
}
|
|
|
|
function goStep1(){ showStep(1); }
|
|
function goStep2(){
|
|
const nome = document.getElementById('nombre').value.trim();
|
|
const mail = document.getElementById('email').value.trim();
|
|
const pass = document.getElementById('password').value;
|
|
const pass2= document.getElementById('password2').value;
|
|
const terms= document.getElementById('terms').checked;
|
|
if(!nome||!mail||!pass){ showAlert('Completa todos los campos requeridos.'); return; }
|
|
if(pass !== pass2){ showAlert('Las contraseñas no coinciden.'); return; }
|
|
if(pass.length < 8){ showAlert('La contraseña debe tener al menos 8 caracteres.'); return; }
|
|
if(!terms){ showAlert('Debes aceptar los términos de uso.'); return; }
|
|
hideAlert();
|
|
document.getElementById('email-display').textContent = mail;
|
|
showStep(2);
|
|
document.querySelector('#s2 .otp-digit').focus();
|
|
}
|
|
function goStep3(){
|
|
const digits = document.querySelectorAll('#s2 .otp-digit');
|
|
const code = Array.from(digits).map(d=>d.value).join('');
|
|
if(code.length < 6){ showAlert('Ingresa el código de 6 dígitos.'); return; }
|
|
hideAlert();
|
|
showStep(3);
|
|
}
|
|
function finishReg(){
|
|
const digits = document.querySelectorAll('.otp-mfa');
|
|
const code = Array.from(digits).map(d=>d.value).join('');
|
|
if(code.length < 6){ showAlert('Confirma el código MFA.'); return; }
|
|
hideAlert();
|
|
const nome = document.getElementById('nombre').value.trim();
|
|
const ape = document.getElementById('apellido').value.trim();
|
|
document.getElementById('suc-name').textContent = nome + ' ' + ape;
|
|
// Suite aleatoria para demo
|
|
document.getElementById('suc-suite').textContent = String(Math.floor(Math.random()*89999+10000));
|
|
['s1','s2','s3','s-success'].forEach(id=>document.getElementById(id).classList.remove('active'));
|
|
document.getElementById('s-success').classList.add('active');
|
|
document.getElementById('progress-bar').style.display='none';
|
|
document.querySelector('.prog-labels').style.display='none';
|
|
}
|
|
|
|
function otpMove(inp, idx){
|
|
const digits = document.querySelectorAll('#s2 .otp-digit');
|
|
inp.value = inp.value.replace(/\D/g,'');
|
|
if(inp.value && idx < 5) digits[idx+1].focus();
|
|
const code = Array.from(digits).map(d=>d.value).join('');
|
|
if(code.length===6) goStep3();
|
|
}
|
|
function mfaMove(inp, idx){
|
|
const digits = document.querySelectorAll('.otp-mfa');
|
|
inp.value = inp.value.replace(/\D/g,'');
|
|
if(inp.value && idx < 5) digits[idx+1].focus();
|
|
const code = Array.from(digits).map(d=>d.value).join('');
|
|
if(code.length===6) finishReg();
|
|
}
|
|
|
|
function togglePassword(id,btn){
|
|
const inp=document.getElementById(id);
|
|
if(inp.type==='password'){inp.type='text';btn.textContent='🙈';}
|
|
else{inp.type='password';btn.textContent='👁️';}
|
|
}
|
|
|
|
function checkStrength(v){
|
|
const bars=[document.getElementById('psb1'),document.getElementById('psb2'),document.getElementById('psb3'),document.getElementById('psb4')];
|
|
const label=document.getElementById('ps-label');
|
|
let score=0;
|
|
if(v.length>=8)score++;
|
|
if(/[A-Z]/.test(v))score++;
|
|
if(/[0-9]/.test(v))score++;
|
|
if(/[^A-Za-z0-9]/.test(v))score++;
|
|
const colors=['#EF4444','#F59E0B','#3B82F6','#10B981'];
|
|
const labels=['Muy débil','Débil','Buena','Fuerte'];
|
|
bars.forEach((b,i)=>{ b.style.background = i < score ? colors[score-1] : 'var(--gray-200)'; });
|
|
label.textContent = score ? labels[score-1] : '';
|
|
label.style.color = score ? colors[score-1] : '';
|
|
}
|
|
|
|
function showAlert(msg){
|
|
const el=document.getElementById('alert-error');
|
|
document.getElementById('alert-msg').textContent=msg;
|
|
el.classList.add('show');
|
|
}
|
|
function hideAlert(){ document.getElementById('alert-error').classList.remove('show'); }
|
|
</script>
|
|
</body>
|
|
</html>
|