feat: add user authentication with livewire components
This commit is contained in:
jeremy bayse
@@ -0,0 +1,57 @@
|
||||
<?php
|
||||
|
||||
namespace App\Livewire\Auth;
|
||||
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
use Illuminate\Support\Facades\RateLimiter;
|
||||
use Illuminate\Support\Str;
|
||||
use Illuminate\Validation\ValidationException;
|
||||
use Livewire\Component;
|
||||
|
||||
class Login extends Component
|
||||
{
|
||||
public string $email = '';
|
||||
public string $password = '';
|
||||
public bool $remember = false;
|
||||
|
||||
protected array $rules = [
|
||||
'email' => 'required|string|email',
|
||||
'password' => 'required|string',
|
||||
];
|
||||
|
||||
public function login()
|
||||
{
|
||||
$this->validate();
|
||||
|
||||
$throttleKey = Str::transliterate(Str::lower($this->email).'|'.request()->ip());
|
||||
|
||||
if (RateLimiter::tooManyAttempts($throttleKey, 5)) {
|
||||
$seconds = RateLimiter::availableIn($throttleKey);
|
||||
throw ValidationException::withMessages([
|
||||
'email' => trans('auth.throttle', [
|
||||
'seconds' => $seconds,
|
||||
'minutes' => ceil($seconds / 60),
|
||||
]),
|
||||
]);
|
||||
}
|
||||
|
||||
if (!Auth::attempt(['email' => $this->email, 'password' => $this->password], $this->remember)) {
|
||||
RateLimiter::hit($throttleKey, 60);
|
||||
|
||||
throw ValidationException::withMessages([
|
||||
'email' => __('auth.failed'),
|
||||
]);
|
||||
}
|
||||
|
||||
RateLimiter::clear($throttleKey);
|
||||
session()->regenerate();
|
||||
|
||||
return redirect()->intended('/');
|
||||
}
|
||||
|
||||
public function render()
|
||||
{
|
||||
return view('livewire.auth.login')
|
||||
->layout('layouts.auth', ['title' => 'Connexion']);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
<?php
|
||||
|
||||
namespace App\Livewire\Auth;
|
||||
|
||||
use App\Models\User;
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
use Illuminate\Support\Facades\Hash;
|
||||
use Illuminate\Validation\Rules;
|
||||
use Livewire\Component;
|
||||
|
||||
class Register extends Component
|
||||
{
|
||||
public string $name = '';
|
||||
public string $email = '';
|
||||
public string $password = '';
|
||||
public string $password_confirmation = '';
|
||||
|
||||
public function register()
|
||||
{
|
||||
$this->validate([
|
||||
'name' => ['required', 'string', 'max:255'],
|
||||
'email' => ['required', 'string', 'lowercase', 'email', 'max:255', 'unique:'.User::class],
|
||||
'password' => ['required', 'string', 'confirmed', Rules\Password::defaults()],
|
||||
]);
|
||||
|
||||
$user = User::create([
|
||||
'name' => $this->name,
|
||||
'email' => $this->email,
|
||||
'password' => Hash::make($this->password),
|
||||
]);
|
||||
|
||||
Auth::login($user);
|
||||
|
||||
return redirect('/');
|
||||
}
|
||||
|
||||
public function render()
|
||||
{
|
||||
return view('livewire.auth.register')
|
||||
->layout('layouts.auth', ['title' => 'Inscription']);
|
||||
}
|
||||
}
|
||||
@@ -79,11 +79,24 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex flex-col sm:flex-row items-center gap-4">
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-emerald-400/10 text-emerald-400 border border-emerald-500/20">
|
||||
<span class="w-1.5 h-1.5 mr-1.5 rounded-full bg-emerald-400 animate-ping"></span>
|
||||
Actif
|
||||
</span>
|
||||
|
||||
@auth
|
||||
<div class="flex items-center gap-3 bg-slate-900 border border-slate-800 rounded-xl px-4 py-2">
|
||||
<div class="text-right">
|
||||
<p class="text-xs text-slate-400">Connecté en tant que</p>
|
||||
<p class="text-sm font-semibold text-slate-200">{{ auth()->user()->name }}</p>
|
||||
</div>
|
||||
<div class="w-px h-8 bg-slate-800"></div>
|
||||
<a href="{{ route('logout') }}" class="text-xs font-bold text-rose-400 hover:text-rose-300 transition duration-150 py-1 px-2.5 rounded-lg hover:bg-rose-500/10">
|
||||
Déconnexion
|
||||
</a>
|
||||
</div>
|
||||
@endauth
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr" class="dark">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{ $title ?? 'Connexion' }} - Chatbot AGGLO</title>
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Tailwind CSS CDN -->
|
||||
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Outfit', 'sans-serif'],
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@livewireStyles
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Outfit', sans-serif;
|
||||
background-color: #020617;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="text-slate-100 min-h-screen flex items-center justify-center relative overflow-hidden selection:bg-cyan-500/30 selection:text-cyan-200">
|
||||
|
||||
<!-- Decorative background glows -->
|
||||
<div class="absolute top-[-20%] left-[-20%] w-[60%] h-[60%] rounded-full bg-cyan-900/10 blur-[150px] pointer-events-none"></div>
|
||||
<div class="absolute bottom-[-20%] right-[-20%] w-[60%] h-[60%] rounded-full bg-indigo-900/10 blur-[150px] pointer-events-none"></div>
|
||||
|
||||
<div class="w-full max-w-md px-6 py-12 relative z-10">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
|
||||
@livewireScripts
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,68 @@
|
||||
<div>
|
||||
<div class="mb-8 text-center">
|
||||
<span class="px-3 py-1 bg-gradient-to-r from-cyan-500/10 to-indigo-500/10 border border-cyan-500/30 rounded-full text-xs font-bold tracking-wider text-cyan-400 uppercase">
|
||||
Console Chatbot AGGLO
|
||||
</span>
|
||||
<h2 class="text-3xl font-extrabold tracking-tight mt-4 text-white">Connexion</h2>
|
||||
<p class="text-slate-400 text-sm mt-2">Accédez à votre tableau de bord d'administration</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-900/60 backdrop-blur-xl border border-slate-800 rounded-2xl p-8 shadow-2xl">
|
||||
<form wire:submit.prevent="login" class="space-y-6">
|
||||
<!-- Email -->
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium text-slate-300">Adresse e-mail</label>
|
||||
<div class="mt-1">
|
||||
<input wire:model="email" type="email" id="email" autocomplete="email" required
|
||||
class="w-full px-4 py-2.5 bg-slate-950/80 border border-slate-800 rounded-xl text-slate-100 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 transition duration-200"
|
||||
placeholder="nom@agglo-beziers.fr">
|
||||
</div>
|
||||
@error('email')
|
||||
<span class="text-xs text-rose-400 mt-1 block">{{ $message }}</span>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<!-- Mot de passe -->
|
||||
<div>
|
||||
<div class="flex items-center justify-between">
|
||||
<label for="password" class="block text-sm font-medium text-slate-300">Mot de passe</label>
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
<input wire:model="password" type="password" id="password" autocomplete="current-password" required
|
||||
class="w-full px-4 py-2.5 bg-slate-950/80 border border-slate-800 rounded-xl text-slate-100 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 transition duration-200"
|
||||
placeholder="••••••••">
|
||||
</div>
|
||||
@error('password')
|
||||
<span class="text-xs text-rose-400 mt-1 block">{{ $message }}</span>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<!-- Se souvenir de moi -->
|
||||
<div class="flex items-center">
|
||||
<input wire:model="remember" id="remember" type="checkbox"
|
||||
class="h-4 w-4 rounded border-slate-800 bg-slate-950 text-cyan-600 focus:ring-cyan-500/50 focus:ring-offset-slate-900">
|
||||
<label for="remember" class="ml-2 block text-sm text-slate-400 cursor-pointer select-none">Se souvenir de moi</label>
|
||||
</div>
|
||||
|
||||
<!-- Bouton de soumission -->
|
||||
<div>
|
||||
<button type="submit"
|
||||
class="w-full flex justify-center py-3 px-4 border border-transparent rounded-xl text-sm font-semibold text-white bg-gradient-to-r from-cyan-500 to-indigo-600 hover:from-cyan-400 hover:to-indigo-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 active:scale-[0.98] transition-all duration-150 shadow-lg shadow-cyan-500/20">
|
||||
<span wire:loading.remove wire:target="login">Se connecter</span>
|
||||
<span wire:loading wire:target="login" class="flex items-center gap-2">
|
||||
<svg class="animate-spin h-5 w-5 text-white" 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-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
Connexion en cours...
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="mt-6 text-center text-sm border-t border-slate-800/80 pt-6">
|
||||
<span class="text-slate-400">Pas encore de compte ?</span>
|
||||
<a href="/register" class="font-medium text-cyan-400 hover:text-cyan-300 transition duration-150 ml-1">Créer un compte</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,82 @@
|
||||
<div>
|
||||
<div class="mb-8 text-center">
|
||||
<span class="px-3 py-1 bg-gradient-to-r from-cyan-500/10 to-indigo-500/10 border border-cyan-500/30 rounded-full text-xs font-bold tracking-wider text-cyan-400 uppercase">
|
||||
Console Chatbot AGGLO
|
||||
</span>
|
||||
<h2 class="text-3xl font-extrabold tracking-tight mt-4 text-white">Inscription</h2>
|
||||
<p class="text-slate-400 text-sm mt-2">Créez votre compte administrateur</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-900/60 backdrop-blur-xl border border-slate-800 rounded-2xl p-8 shadow-2xl">
|
||||
<form wire:submit.prevent="register" class="space-y-5">
|
||||
<!-- Nom -->
|
||||
<div>
|
||||
<label for="name" class="block text-sm font-medium text-slate-300">Nom complet</label>
|
||||
<div class="mt-1">
|
||||
<input wire:model="name" type="text" id="name" required autocomplete="name" autofocus
|
||||
class="w-full px-4 py-2 bg-slate-950/80 border border-slate-800 rounded-xl text-slate-100 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 transition duration-200"
|
||||
placeholder="Jean Dupont">
|
||||
</div>
|
||||
@error('name')
|
||||
<span class="text-xs text-rose-400 mt-1 block">{{ $message }}</span>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium text-slate-300">Adresse e-mail</label>
|
||||
<div class="mt-1">
|
||||
<input wire:model="email" type="email" id="email" required autocomplete="email"
|
||||
class="w-full px-4 py-2 bg-slate-950/80 border border-slate-800 rounded-xl text-slate-100 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 transition duration-200"
|
||||
placeholder="nom@agglo-beziers.fr">
|
||||
</div>
|
||||
@error('email')
|
||||
<span class="text-xs text-rose-400 mt-1 block">{{ $message }}</span>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<!-- Mot de passe -->
|
||||
<div>
|
||||
<label for="password" class="block text-sm font-medium text-slate-300">Mot de passe</label>
|
||||
<div class="mt-1">
|
||||
<input wire:model="password" type="password" id="password" required autocomplete="new-password"
|
||||
class="w-full px-4 py-2 bg-slate-950/80 border border-slate-800 rounded-xl text-slate-100 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 transition duration-200"
|
||||
placeholder="••••••••">
|
||||
</div>
|
||||
@error('password')
|
||||
<span class="text-xs text-rose-400 mt-1 block">{{ $message }}</span>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<!-- Confirmer le mot de passe -->
|
||||
<div>
|
||||
<label for="password_confirmation" class="block text-sm font-medium text-slate-300">Confirmer le mot de passe</label>
|
||||
<div class="mt-1">
|
||||
<input wire:model="password_confirmation" type="password" id="password_confirmation" required autocomplete="new-password"
|
||||
class="w-full px-4 py-2 bg-slate-950/80 border border-slate-800 rounded-xl text-slate-100 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 transition duration-200"
|
||||
placeholder="••••••••">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bouton de soumission -->
|
||||
<div>
|
||||
<button type="submit"
|
||||
class="w-full flex justify-center py-3 px-4 border border-transparent rounded-xl text-sm font-semibold text-white bg-gradient-to-r from-cyan-500 to-indigo-600 hover:from-cyan-400 hover:to-indigo-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 active:scale-[0.98] transition-all duration-150 shadow-lg shadow-cyan-500/20">
|
||||
<span wire:loading.remove wire:target="register">Créer mon compte</span>
|
||||
<span wire:loading wire:target="register" class="flex items-center gap-2">
|
||||
<svg class="animate-spin h-5 w-5 text-white" 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-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
Création du compte...
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="mt-6 text-center text-sm border-t border-slate-800/80 pt-6">
|
||||
<span class="text-slate-400">Déjà inscrit ?</span>
|
||||
<a href="/login" class="font-medium text-cyan-400 hover:text-cyan-300 transition duration-150 ml-1">Se connecter</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -72,11 +72,24 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex flex-col sm:flex-row items-center gap-4">
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-emerald-400/10 text-emerald-400 border border-emerald-500/20">
|
||||
<span class="w-1.5 h-1.5 mr-1.5 rounded-full bg-emerald-400 animate-ping"></span>
|
||||
RAG Actif
|
||||
</span>
|
||||
|
||||
@auth
|
||||
<div class="flex items-center gap-3 bg-slate-900 border border-slate-800 rounded-xl px-4 py-2">
|
||||
<div class="text-right">
|
||||
<p class="text-xs text-slate-400">Connecté en tant que</p>
|
||||
<p class="text-sm font-semibold text-slate-200">{{ auth()->user()->name }}</p>
|
||||
</div>
|
||||
<div class="w-px h-8 bg-slate-800"></div>
|
||||
<a href="{{ route('logout') }}" class="text-xs font-bold text-rose-400 hover:text-rose-300 transition duration-150 py-1 px-2.5 rounded-lg hover:bg-rose-500/10">
|
||||
Déconnexion
|
||||
</a>
|
||||
</div>
|
||||
@endauth
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
+27
-7
@@ -1,19 +1,39 @@
|
||||
<?php
|
||||
|
||||
use App\Models\Chatbot;
|
||||
use App\Livewire\Auth\Login;
|
||||
use App\Livewire\Auth\Register;
|
||||
use Illuminate\Support\Facades\Route;
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
|
||||
// Global console / Chatbot manager
|
||||
Route::get('/', function () {
|
||||
return view('welcome');
|
||||
// Guest routes
|
||||
Route::middleware('guest')->group(function () {
|
||||
Route::get('/login', Login::class)->name('login');
|
||||
Route::get('/register', Register::class)->name('register');
|
||||
});
|
||||
|
||||
// Admin dashboard for a specific chatbot
|
||||
Route::get('/admin/chatbots/{chatbot:slug}', function (Chatbot $chatbot) {
|
||||
return view('chatbot-admin', compact('chatbot'));
|
||||
// Logout route
|
||||
Route::any('/logout', function () {
|
||||
Auth::logout();
|
||||
request()->session()->invalidate();
|
||||
request()->session()->regenerateToken();
|
||||
return redirect('/login');
|
||||
})->name('logout');
|
||||
|
||||
// Authenticated administration routes
|
||||
Route::middleware('auth')->group(function () {
|
||||
// Global console / Chatbot manager
|
||||
Route::get('/', function () {
|
||||
return view('welcome');
|
||||
});
|
||||
|
||||
// Admin dashboard for a specific chatbot
|
||||
Route::get('/admin/chatbots/{chatbot:slug}', function (Chatbot $chatbot) {
|
||||
return view('chatbot-admin', compact('chatbot'));
|
||||
});
|
||||
});
|
||||
|
||||
// Full page demo testing for a specific chatbot
|
||||
// Full page demo testing for a specific chatbot (Public/Private as per requirement)
|
||||
Route::get('/chatbot/{chatbot:slug}', function (Chatbot $chatbot) {
|
||||
return view('chatbot-demo', compact('chatbot'));
|
||||
});
|
||||
|
||||
@@ -2,18 +2,31 @@
|
||||
|
||||
namespace Tests\Feature;
|
||||
|
||||
// use Illuminate\Foundation\Testing\RefreshDatabase;
|
||||
use Illuminate\Foundation\Testing\RefreshDatabase;
|
||||
use App\Models\User;
|
||||
use Tests\TestCase;
|
||||
|
||||
class ExampleTest extends TestCase
|
||||
{
|
||||
use RefreshDatabase;
|
||||
|
||||
/**
|
||||
* A basic test example.
|
||||
*/
|
||||
public function test_the_application_returns_a_successful_response(): void
|
||||
public function test_the_application_redirects_unauthenticated_users(): void
|
||||
{
|
||||
$response = $this->get('/');
|
||||
|
||||
$response->assertStatus(302);
|
||||
$response->assertRedirect('/login');
|
||||
}
|
||||
|
||||
public function test_authenticated_users_can_access_the_dashboard(): void
|
||||
{
|
||||
$user = User::factory()->create();
|
||||
|
||||
$response = $this->actingAs($user)->get('/');
|
||||
|
||||
$response->assertStatus(200);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user