alumnos_ti/LauckCycles
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

NUEVO:

Browse Source 
- Agregada nueva funcionalidad de "Forgot Password" para reestablecer la contraseña.
- Cambios en estilos del login para mayor consistencia con el resto de la pagina.
- Creado correo con template propio fiel al estilo de la pagina.
This commit is contained in:
Bryam105
2026-05-27 09:50:00 -03:00
parent f03890b348
commit 8ad829d9d2
9 changed files with 349 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/auth/forgot-password.blade.php
+51
View File
@@ -0,0 +1,51 @@
<x-layout title="Recuperar Contraseña - Lauck">
<div class="w-full flex flex-col items-center justify-center pt-8">
<x-section-header
subtitle="Recuperación de cuenta"
title="Bicicletería "
highlight="Lauck"
/>
<div class="bg-gray-100 dark:bg-panel-bg p-8 rounded-xl shadow-lg w-full max-w-md border border-gray-300 dark:border-neutral-700">
<div class="mb-6 text-sm text-gray-600 dark:text-gray-400">
¿Olvidaste tu contraseña? No hay problema. Simplemente déjanos saber tu dirección de correo electrónico y te enviaremos un enlace para restablecer la contraseña que te permitirá elegir una nueva.
</div>
@if (session('status'))
<div class="mb-4 font-medium text-sm text-green-600 dark:text-neon-lime bg-green-100 dark:bg-green-900/30 p-3 rounded-lg border border-green-500/50">
{{ session('status') }}
</div>
@endif
<form method="POST" action="{{ route('password.email') }}" class="space-y-6">
@csrf
@if ($errors->any())
<div class="bg-red-100 dark:bg-red-900/50 border border-red-500 text-red-600 dark:text-red-300 p-3 rounded-lg shadow-sm">
<p class="text-sm font-medium">
{{ $errors->first() }}
</p>
</div>
@endif
<!-- Email Address -->
<div>
<label class="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Correo electrónico</label>
<input type="email" name="email" value="{{ old('email') }}" required autofocus
class="w-full px-4 py-2 bg-white dark:bg-neutral-900 border border-gray-300 dark:border-neutral-700 text-gray-900 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-neon-lime focus:border-neon-lime transition-colors"/>
</div>
<div class="flex items-center justify-between mt-4">
<a class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors" href="{{ route('login') }}">
Volver a inicio de sesión
</a>
<button type="submit"
class="px-4 py-2 bg-neutral-900 dark:bg-neon-lime text-white dark:text-neutral-900 font-bold rounded-lg hover:bg-neutral-800 hover:dark:bg-[#b3e600] transition-colors shadow-lg dark:shadow-neon-lime/20">
Enviar enlace
</button>
</div>
</form>
</div>
</div>
</x-layout>
resources/views/auth/reset-password.blade.php
+56
View File
@@ -0,0 +1,56 @@
<x-layout title="Restablecer Contraseña - Lauck">
<div class="w-full flex flex-col items-center justify-center pt-8">
<x-section-header
subtitle="Nueva contraseña"
title="Bicicletería "
highlight="Lauck"
/>
<div class="bg-gray-100 dark:bg-panel-bg p-8 rounded-xl shadow-lg w-full max-w-md border border-gray-300 dark:border-neutral-700">
<form method="POST" action="{{ route('password.store') }}" class="space-y-6">
@csrf
<!-- Password Reset Token -->
<input type="hidden" name="token" value="{{ $token }}">
@if ($errors->any())
<div class="bg-red-100 dark:bg-red-900/50 border border-red-500 text-red-600 dark:text-red-300 p-3 rounded-lg shadow-sm">
<ul class="text-sm font-medium list-disc list-inside">
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<!-- Email Address -->
<div>
<label class="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Correo electrónico</label>
<input type="email" name="email" value="{{ old('email', $request->email) }}" required autofocus
class="w-full px-4 py-2 bg-gray-200 dark:bg-neutral-800 border border-gray-300 dark:border-neutral-700 text-gray-700 dark:text-gray-400 rounded-lg focus:outline-none" readonly />
</div>
<!-- Password -->
<div>
<label class="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Nueva Contraseña</label>
<input type="password" name="password" required
class="w-full px-4 py-2 bg-white dark:bg-neutral-900 border border-gray-300 dark:border-neutral-700 text-gray-900 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-neon-lime focus:border-neon-lime transition-colors"/>
</div>
<!-- Confirm Password -->
<div>
<label class="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Confirmar Contraseña</label>
<input type="password" name="password_confirmation" required
class="w-full px-4 py-2 bg-white dark:bg-neutral-900 border border-gray-300 dark:border-neutral-700 text-gray-900 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-neon-lime focus:border-neon-lime transition-colors"/>
</div>
<div class="flex items-center justify-end mt-4">
<button type="submit"
class="w-full py-2.5 bg-neutral-900 dark:bg-neon-lime text-neon-lime dark:text-neutral-900 font-bold rounded-lg hover:bg-neutral-800 hover:dark:bg-[#b3e600] transition-colors shadow-lg dark:shadow-neon-lime/20 tracking-wide uppercase">
Restablecer Contraseña
</button>
</div>
</form>
</div>
</div>
</x-layout>
resources/views/emails/reset-password.blade.php
+71
View File
@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recuperar Contraseña</title>
</head>
<body style="margin: 0; padding: 0; background-color: #1a1a1a; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #ffffff;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #1a1a1a; width: 100%;">
<tr>
<td align="center" style="padding: 40px 20px;">
<table width="100%" max-width="600" cellpadding="0" cellspacing="0" border="0" style="max-width: 600px; width: 100%; background-color: #242424; border-radius: 12px; border: 1px solid #333333; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);">
<!-- Header -->
<tr>
<td align="center" style="padding: 40px 20px 20px 20px; border-bottom: 1px solid #333333;">
<h1 style="margin: 0; font-size: 24px; font-weight: 800; color: #ffffff;">
Bicicletería <span style="color: #b3e600;">Lauck</span>
</h1>
<p style="margin: 5px 0 0 0; font-size: 14px; color: #a0a0a0; text-transform: uppercase; letter-spacing: 1px;">Recuperación de cuenta</p>
</td>
</tr>
<!-- Body -->
<tr>
<td style="padding: 40px 30px;">
<p style="margin: 0 0 20px 0; font-size: 16px; line-height: 1.5; color: #e5e5e5;">
Hola,
</p>
<p style="margin: 0 0 30px 0; font-size: 16px; line-height: 1.5; color: #a0a0a0;">
Estás recibiendo este correo porque recibimos una solicitud de restablecimiento de contraseña para tu cuenta en <strong>Lauck</strong>.
</p>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<a href="{{ $url }}" style="display: inline-block; padding: 14px 30px; background-color: #b3e600; color: #1a1a1a; text-decoration: none; font-size: 16px; font-weight: bold; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.5px;">
Restablecer Contraseña
</a>
</td>
</tr>
</table>
<p style="margin: 30px 0 0 0; font-size: 16px; line-height: 1.5; color: #a0a0a0;">
Este enlace para restablecer la contraseña caducará en 60 minutos.
</p>
<p style="margin: 20px 0 0 0; font-size: 16px; line-height: 1.5; color: #a0a0a0;">
Si no solicitaste un restablecimiento de contraseña, no es necesario realizar ninguna otra acción.
</p>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="background-color: #1f1f1f; padding: 20px 30px; border-top: 1px solid #333333;">
<p style="margin: 0; font-size: 12px; line-height: 1.5; color: #666666; text-align: center;">
Si tienes problemas para hacer clic en el botón "Restablecer Contraseña", copia y pega la siguiente URL en tu navegador web:<br>
<a href="{{ $url }}" style="color: #b3e600; word-break: break-all; margin-top: 10px; display: inline-block;">{{ $url }}</a>
</p>
</td>
</tr>
</table>
<p style="margin: 20px 0 0 0; font-size: 12px; color: #666666; text-align: center;">
© {{ date('Y') }} Bicicletería Lauck. Todos los derechos reservados.
</p>
</td>
</tr>
</table>
</body>
</html>
resources/views/login.blade.php
+41 -20
View File
@@ -1,44 +1,65 @@
<x-layout title="Login - Lauck">
<div class="justify-center">
<x-section-header
subtitle="Inicio de sesion"
title="Bicicletería "
highlight="Lauck"
/>
<div class="bg-panel-bg p-8 rounded-xl shadow-lg w-full max-w-md border border-neutral-700">
<form action="{{ route('login.attempt') }}" method="POST" class="space-y-5">
<div class="w-full flex flex-col items-center justify-center pt-8">
<x-section-header
subtitle="Inicio de sesión"
title="Bicicletería "
highlight="Lauck"
/>
<div class="bg-gray-100 dark:bg-panel-bg p-8 rounded-xl shadow-lg w-full max-w-md border border-gray-300 dark:border-neutral-700">
<form action="{{ route('login.attempt') }}" method="POST" class="space-y-6">
@csrf
{{-- Bloque de errores --}}
@if ($errors->any())
<div class="bg-red-900 border border-red-700 text-white p-3 rounded-md">
<div class="bg-red-100 dark:bg-red-900/50 border border-red-500 text-red-600 dark:text-red-300 p-3 rounded-lg shadow-sm">
<p class="text-sm font-medium">
{{ $errors->first() }}
</p>
</div>
@endif
@if (session('status'))
<div class="bg-green-100 dark:bg-green-900/50 border border-green-500 text-green-700 dark:text-green-300 p-3 rounded-lg shadow-sm">
<p class="text-sm font-medium">
{{ session('status') }}
</p>
</div>
@endif
<div>
<x-forms.label class="block text-sm font-bold text-gray-600 mb-1">Correo electrónico</x-forms.label>
<x-forms.input type="email" name="email" required
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-lime-400 text-gray-600"/>
<label class="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Correo electrónico</label>
<input type="email" name="email" required autofocus
class="w-full px-4 py-2 bg-white dark:bg-neutral-900 border border-gray-300 dark:border-neutral-700 text-gray-900 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-neon-lime focus:border-neon-lime transition-colors"/>
</div>
<div>
<x-forms.label class="block text-sm font-bold text-gray-600 mb-1">Contraseña</x-forms.label>
<x-forms.input type="password" name="password" required
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-lime-400 text-gray-600"/>
<label class="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Contraseña</label>
<input type="password" name="password" required
class="w-full px-4 py-2 bg-white dark:bg-neutral-900 border border-gray-300 dark:border-neutral-700 text-gray-900 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-neon-lime focus:border-neon-lime transition-colors"/>
<div class="flex justify-end mt-2">
<a href="{{ route('password.request') }}" class="text-xs font-medium text-green-600 dark:text-neon-lime hover:underline transition-colors">
¿Olvidaste tu contraseña?
</a>
</div>
</div>
<div>
<input type="submit" name="submit" value="Iniciar sesión"
class="w-full bg-lime-400 font-bold text-white py-2 rounded-md hover:bg-lime-500 transition-colors">
<button type="submit"
class="w-full bg-neutral-900 dark:bg-neon-lime text-neon-lime dark:text-neutral-900 font-bold py-2.5 rounded-lg hover:bg-neutral-800 hover:dark:bg-[#b3e600] transition-colors shadow-lg dark:shadow-neon-lime/20 uppercase tracking-wide">
Iniciar sesión
</button>
</div>
<p class="text-center text-sm text-gray-600">
¿No tienes una cuenta? <a href="register" class="text-blue-600 hover:underline">Regístrate acá</a>.
</p>
<div class="text-center mt-6 pt-4 border-t border-gray-300 dark:border-neutral-700">
<p class="text-sm text-gray-600 dark:text-gray-400">
¿No tienes una cuenta? <a href="{{ route('register') }}" class="font-bold text-gray-900 dark:text-white hover:text-green-600 dark:hover:text-neon-lime transition-colors">Regístrate acá</a>.
</p>
</div>
</form>
</div>
</div>
</x-layout>