lizandrogd/soft_usite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
5ee5880dc2eb3cade5ae829385702ccb2ceb8a93
soft_usite/resources/views/auth/password-reset.html
T
Lizandro GuarnizoandClaude Sonnet 4.6 e937676160 fix(auth): flujo de recuperación de contraseña usa email en vez de usuario 
- login.html: corregir link roto /password/reset → /request-password-reset
- request-password-reset.html: reescribir — pide email, AJAX, diseño de la app
- RequestPasswordResetPost: buscar por email (GetUserByEmail), no revela si
  el correo existe o no (misma respuesta siempre — seguridad)
- password-reset.html: reescribir — eliminar campo nombre_usuario redundante,
  validación de contraseñas en cliente, diseño consistente con el resto del app
- PasswordResetPost: usar c.Locals("email") del token (ya validado por
  middleware) en vez de nombre_usuario del form
- password_reset.go middleware: ampliar expiración de token de 5 min a 1 hora

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-06 22:17:38 -05:00

115 lines
9.1 KiB
HTML
Executable File
Raw Blame History

<div class="w-full max-w-sm" x-data="{showPass: false, showConfirm: false, loading: false, error: ''}">
<!-- Logo -->
<div class="mb-8 text-center">
<div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl mb-4" style="background-color:#1e293b">
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/>
</svg>
</div>
<h1 class="text-2xl font-bold text-slate-800">Nueva contraseña</h1>
<p class="text-sm text-slate-500 mt-1">Elige una contraseña segura para tu cuenta</p>
</div>
<!-- Error -->
{{if .error}}
<div class="mb-5 flex items-start gap-3 rounded-xl px-4 py-3" style="background:rgba(239,68,68,0.08); border:1px solid rgba(239,68,68,0.3)">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 flex-shrink-0 mt-0.5" style="color:#ef4444" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
</svg>
<span class="text-sm" style="color:#ef4444">{{.error}}</span>
</div>
{{end}}
<form action="/do/password-reset/{{.Token}}" method="POST" class="space-y-4"
@submit.prevent="
const p = $el.querySelector('[name=password]').value;
const c = $el.querySelector('[name=c_password]').value;
if (p.length < 6) { error = 'La contraseña debe tener al menos 6 caracteres.'; return; }
if (p !== c) { error = 'Las contraseñas no coinciden.'; return; }
error = ''; loading = true; $el.submit();
">
<!-- Nueva contraseña -->
<div>
<label class="block text-sm font-medium text-slate-700 mb-1.5" for="password">Nueva contraseña</label>
<div class="relative">
<div class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/>
</svg>
</div>
<input :type="showPass ? 'text' : 'password'" id="password" name="password"
placeholder="••••••••" required autocomplete="new-password" minlength="6"
class="w-full pl-10 pr-11 py-2.5 border border-slate-200 rounded-xl text-sm outline-none bg-white text-slate-800 focus:border-[#8eb02f] transition-all"
style="box-shadow:none"
onfocus="this.style.boxShadow='0 0 0 3px rgba(142,176,47,0.15)'; this.style.borderColor='#8eb02f'"
onblur="this.style.boxShadow='none'; this.style.borderColor='#e2e8f0'">
<button type="button" @click="showPass = !showPass"
class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 transition-colors">
<svg x-show="!showPass" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
<svg x-show="showPass" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"/>
</svg>
</button>
</div>
</div>
<!-- Confirmar contraseña -->
<div>
<label class="block text-sm font-medium text-slate-700 mb-1.5" for="c_password">Confirmar contraseña</label>
<div class="relative">
<div class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
<input :type="showConfirm ? 'text' : 'password'" id="c_password" name="c_password"
placeholder="••••••••" required autocomplete="new-password"
class="w-full pl-10 pr-11 py-2.5 border border-slate-200 rounded-xl text-sm outline-none bg-white text-slate-800 focus:border-[#8eb02f] transition-all"
style="box-shadow:none"
onfocus="this.style.boxShadow='0 0 0 3px rgba(142,176,47,0.15)'; this.style.borderColor='#8eb02f'"
onblur="this.style.boxShadow='none'; this.style.borderColor='#e2e8f0'">
<button type="button" @click="showConfirm = !showConfirm"
class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 transition-colors">
<svg x-show="!showConfirm" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
<svg x-show="showConfirm" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"/>
</svg>
</button>
</div>
</div>
<!-- Error Alpine -->
<div x-show="error" class="flex items-start gap-3 rounded-xl px-4 py-3" style="background:rgba(239,68,68,0.08); border:1px solid rgba(239,68,68,0.3)">
<span class="text-sm" style="color:#ef4444" x-text="error"></span>
</div>
<button type="submit" :disabled="loading"
class="w-full py-2.5 rounded-xl text-sm font-semibold text-white transition-all mt-2"
:class="loading ? 'opacity-70 cursor-not-allowed' : 'hover:opacity-90'"
style="background-color:#8eb02f">
<span x-show="!loading" class="flex items-center justify-center gap-2">
Guardar nueva contraseña
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/>
</svg>
</span>
<span x-show="loading" class="flex items-center justify-center gap-2">
<svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
</svg>
Guardando...
</span>
</button>
<div class="text-center pt-1">
<a href="/login" class="text-xs text-slate-500 hover:underline">← Volver al inicio de sesión</a>
</div>
</form>
</div>
Reference in New Issue View Git Blame Copy Permalink