Lizandro GuarnizoandCopilot
6e27032ac6
- Nuevo modelo PortalPasswordResetToken con token seguro (32 bytes, 1h vigencia) - AutoMigrate del nuevo modelo en main.go - SendPortalPasswordResetEmail con diseño consistente al app - Handlers: PortalForgotPasswordPage/Post y PortalResetPasswordPost/Page - Rutas públicas GET/POST /portal/forgot-password y /portal/reset-password - Vistas forgot_password.html y reset_password.html con validación JS - Enlace ¿Olvidaste tu contraseña? en login.html + soporte mensaje success Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
88 lines
3.6 KiB
HTML
88 lines
3.6 KiB
HTML
<!-- Portal: Nueva contraseña -->
|
|
<div class="w-full max-w-md mx-auto">
|
|
<div class="text-center mb-8">
|
|
<span class="w-14 h-14 rounded-2xl flex items-center justify-center text-white text-2xl font-bold mx-auto mb-4" style="background:#8eb02f">U</span>
|
|
<h1 class="text-2xl font-bold text-slate-800">Nueva contraseña</h1>
|
|
<p class="text-slate-500 text-sm mt-1">Elige una contraseña segura para tu cuenta</p>
|
|
</div>
|
|
|
|
{{ if .error }}
|
|
<div class="bg-red-50 border border-red-200 text-red-700 rounded-xl px-4 py-3 mb-4 text-sm">
|
|
{{ .error }}
|
|
{{ if not .token }}
|
|
<div class="mt-2">
|
|
<a href="/portal/forgot-password" class="font-semibold underline">Solicitar un nuevo enlace</a>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
|
|
{{ if .token }}
|
|
<div class="bg-white rounded-2xl shadow-lg border border-slate-200 p-8">
|
|
<form method="POST" action="/portal/reset-password" id="resetForm">
|
|
<input type="hidden" name="token" value="{{ .token }}">
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1">Nueva contraseña</label>
|
|
<input type="password" name="password" id="password" required autofocus minlength="8"
|
|
class="w-full border border-slate-200 rounded-xl px-4 py-3 text-sm outline-none focus:border-[#8eb02f] transition-colors"
|
|
placeholder="Mínimo 8 caracteres">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1">Confirmar contraseña</label>
|
|
<input type="password" name="confirm" id="confirm" required minlength="8"
|
|
class="w-full border border-slate-200 rounded-xl px-4 py-3 text-sm outline-none focus:border-[#8eb02f] transition-colors"
|
|
placeholder="Repite la contraseña">
|
|
<p id="matchMsg" class="text-xs mt-1 hidden text-red-500">Las contraseñas no coinciden</p>
|
|
</div>
|
|
<button type="submit" id="submitBtn"
|
|
class="w-full py-3 rounded-xl font-semibold text-white text-sm transition-colors"
|
|
style="background:#8eb02f"
|
|
onmouseover="this.style.background='#6d8c24'"
|
|
onmouseout="this.style.background='#8eb02f'">
|
|
Guardar nueva contraseña
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{{ else }}
|
|
<div class="bg-white rounded-2xl shadow-lg border border-slate-200 p-8 text-center">
|
|
<p class="text-slate-500 text-sm">Este enlace no es válido o ya fue utilizado.</p>
|
|
<a href="/portal/forgot-password"
|
|
class="inline-block mt-4 py-2 px-6 rounded-xl font-semibold text-white text-sm"
|
|
style="background:#8eb02f">
|
|
Solicitar nuevo enlace
|
|
</a>
|
|
</div>
|
|
{{ end }}
|
|
|
|
<p class="text-center text-sm text-slate-400 mt-6">
|
|
<a href="/portal/login" class="hover:text-slate-600 transition-colors">← Volver al inicio de sesión</a>
|
|
</p>
|
|
|
|
<p class="text-center text-xs text-slate-400 mt-3">
|
|
© 2025 U-site — Todos los derechos reservados
|
|
</p>
|
|
</div>
|
|
|
|
<script>
|
|
const pw = document.getElementById('password');
|
|
const cf = document.getElementById('confirm');
|
|
const msg = document.getElementById('matchMsg');
|
|
const btn = document.getElementById('submitBtn');
|
|
|
|
function checkMatch() {
|
|
if (!cf || !pw) return;
|
|
const match = pw.value === cf.value;
|
|
if (cf.value.length > 0) {
|
|
msg.classList.toggle('hidden', match);
|
|
} else {
|
|
msg.classList.add('hidden');
|
|
}
|
|
if (btn) btn.disabled = !match;
|
|
}
|
|
|
|
if (pw) pw.addEventListener('input', checkMatch);
|
|
if (cf) cf.addEventListener('input', checkMatch);
|
|
</script>
|