ajout de la fonctionnalité login et modification profil
This commit is contained in:
@@ -7,16 +7,41 @@
|
||||
<div class="max-w-md mx-auto bg-white rounded-xl border border-gray-200 p-8">
|
||||
<h1 class="text-2xl font-bold mb-6 text-center text-niagara">Connexion</h1>
|
||||
|
||||
<form action="#" method="POST" class="space-y-4">
|
||||
@if ($errors->any())
|
||||
<div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg">
|
||||
@foreach ($errors->all() as $error)
|
||||
<p class="text-red-700 text-sm">{{ $error }}</p>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<form action="{{ route('login.store') }}" method="POST" class="space-y-4">
|
||||
@csrf
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-bold mb-2 text-gray-700">Email</label>
|
||||
<input type="email" id="email" name="email" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-niagara outline-none">
|
||||
<label for="Email" class="block text-sm font-bold mb-2 text-gray-700">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
id="Email"
|
||||
name="Email"
|
||||
required
|
||||
value="{{ old('Email') }}"
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-niagara outline-none @error('Email') border-red-500 @enderror">
|
||||
@error('Email')
|
||||
<p class="text-red-600 text-xs mt-1">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="password" class="block text-sm font-bold mb-2 text-gray-700">Mot de passe</label>
|
||||
<input type="password" id="password" name="password" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-niagara outline-none">
|
||||
<label for="MotDePasse" class="block text-sm font-bold mb-2 text-gray-700">Mot de passe</label>
|
||||
<input
|
||||
type="password"
|
||||
id="MotDePasse"
|
||||
name="MotDePasse"
|
||||
required
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-niagara outline-none @error('MotDePasse') border-red-500 @enderror">
|
||||
@error('MotDePasse')
|
||||
<p class="text-red-600 text-xs mt-1">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<button type="submit" class="w-full py-3 gradient-niagara text-white font-bold rounded-lg hover:shadow-lg transition-smooth duration-200">
|
||||
|
||||
@@ -7,26 +7,68 @@
|
||||
<div class="max-w-md mx-auto bg-white rounded-xl border border-gray-200 p-8">
|
||||
<h1 class="text-2xl font-bold mb-6 text-center text-niagara">S'inscrire</h1>
|
||||
|
||||
<form action="#" method="POST" class="space-y-4">
|
||||
@if ($errors->any())
|
||||
<div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg">
|
||||
@foreach ($errors->all() as $error)
|
||||
<p class="text-red-700 text-sm">{{ $error }}</p>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<form action="{{ route('register.store') }}" method="POST" class="space-y-4">
|
||||
@csrf
|
||||
<div>
|
||||
<label for="name" class="block text-sm font-bold mb-2 text-gray-700">Nom</label>
|
||||
<input type="text" id="name" name="name" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-niagara outline-none">
|
||||
<label for="Pseudo" class="block text-sm font-bold mb-2 text-gray-700">Pseudo</label>
|
||||
<input
|
||||
type="text"
|
||||
id="Pseudo"
|
||||
name="Pseudo"
|
||||
required
|
||||
value="{{ old('Pseudo') }}"
|
||||
maxlength="100"
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-niagara outline-none @error('Pseudo') border-red-500 @enderror">
|
||||
@error('Pseudo')
|
||||
<p class="text-red-600 text-xs mt-1">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-bold mb-2 text-gray-700">Email</label>
|
||||
<input type="email" id="email" name="email" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-niagara outline-none">
|
||||
<label for="Email" class="block text-sm font-bold mb-2 text-gray-700">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
id="Email"
|
||||
name="Email"
|
||||
required
|
||||
value="{{ old('Email') }}"
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-niagara outline-none @error('Email') border-red-500 @enderror">
|
||||
@error('Email')
|
||||
<p class="text-red-600 text-xs mt-1">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="password" class="block text-sm font-bold mb-2 text-gray-700">Mot de passe</label>
|
||||
<input type="password" id="password" name="password" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-niagara outline-none">
|
||||
<label for="MotDePasse" class="block text-sm font-bold mb-2 text-gray-700">Mot de passe</label>
|
||||
<input
|
||||
type="password"
|
||||
id="MotDePasse"
|
||||
name="MotDePasse"
|
||||
required
|
||||
minlength="8"
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-niagara outline-none @error('MotDePasse') border-red-500 @enderror">
|
||||
@error('MotDePasse')
|
||||
<p class="text-red-600 text-xs mt-1">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="password_confirmation" class="block text-sm font-bold mb-2 text-gray-700">Confirmer le mot de passe</label>
|
||||
<input type="password" id="password_confirmation" name="password_confirmation" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-niagara outline-none">
|
||||
<label for="MotDePasse_confirmation" class="block text-sm font-bold mb-2 text-gray-700">Confirmer le mot de passe</label>
|
||||
<input
|
||||
type="password"
|
||||
id="MotDePasse_confirmation"
|
||||
name="MotDePasse_confirmation"
|
||||
required
|
||||
minlength="8"
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-niagara outline-none">
|
||||
</div>
|
||||
|
||||
<button type="submit" class="w-full py-3 gradient-niagara text-white font-bold rounded-lg hover:shadow-lg transition-smooth duration-200">
|
||||
|
||||
@@ -23,12 +23,38 @@
|
||||
</div>
|
||||
|
||||
<nav class="flex items-center gap-2 whitespace-nowrap">
|
||||
<a href="{{ route('login') }}" class="px-5 py-2.5 text-sm font-bold text-niagara border-2 border-niagara rounded-lg hover:bg-niagara hover:text-white transition-smooth duration-200">
|
||||
Connexion
|
||||
</a>
|
||||
<a href="{{ route('register') }}" class="px-5 py-2.5 text-sm font-bold bg-candlelight text-gray-900 rounded-lg shadow-md hover:shadow-lg hover:-translate-y-0.5 transition-smooth duration-200">
|
||||
S'inscrire
|
||||
</a>
|
||||
@auth
|
||||
<div class="relative group">
|
||||
<button class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-100 transition-smooth duration-200">
|
||||
<img
|
||||
src="https://ui-avatars.com/api/?name={{ urlencode(Auth::user()->Pseudo) }}&background=06989e&color=fff&size=40"
|
||||
alt="Photo de profil de {{ Auth::user()->Pseudo }}"
|
||||
class="w-10 h-10 rounded-full border-2 border-niagara"
|
||||
>
|
||||
<span class="text-sm text-gray-700 font-semibold hidden sm:inline">{{ Auth::user()->Pseudo }}</span>
|
||||
</button>
|
||||
|
||||
<!-- Menu déroulant -->
|
||||
<div class="absolute right-0 mt-0 w-48 bg-white rounded-lg shadow-xl border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
|
||||
<a href="{{ route('profile.settings') }}" class="block px-4 py-3 text-sm text-gray-700 hover:bg-gray-50 border-b border-gray-200 rounded-t-lg">
|
||||
⚙️ Paramètres du profil
|
||||
</a>
|
||||
<form action="{{ route('logout') }}" method="POST">
|
||||
@csrf
|
||||
<button type="submit" class="w-full text-left px-4 py-3 text-sm text-red-600 hover:bg-red-50 rounded-b-lg font-semibold">
|
||||
🚪 Déconnexion
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<a href="{{ route('login') }}" class="px-5 py-2.5 text-sm font-bold text-niagara border-2 border-niagara rounded-lg hover:bg-niagara hover:text-white transition-smooth duration-200">
|
||||
Connexion
|
||||
</a>
|
||||
<a href="{{ route('register') }}" class="px-5 py-2.5 text-sm font-bold bg-candlelight text-gray-900 rounded-lg shadow-md hover:shadow-lg hover:-translate-y-0.5 transition-smooth duration-200">
|
||||
S'inscrire
|
||||
</a>
|
||||
@endauth
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
@@ -0,0 +1,160 @@
|
||||
@extends('app')
|
||||
|
||||
@section('title', 'Paramètres du Profil - (RE)Sources Relationnelles')
|
||||
|
||||
@section('content')
|
||||
<section class="container mx-auto px-4 py-12">
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<!-- En-tête -->
|
||||
<div class="mb-8">
|
||||
<h1 class="text-4xl font-bold text-gray-900 mb-2">Paramètres du profil</h1>
|
||||
<p class="text-gray-600">Gérez vos informations personnelles et vos préférences</p>
|
||||
</div>
|
||||
|
||||
<!-- Messages de succès -->
|
||||
@if (session('success'))
|
||||
<div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg">
|
||||
<p class="text-green-700 font-semibold">✅ {{ session('success') }}</p>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Erreurs -->
|
||||
@if ($errors->any())
|
||||
<div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
|
||||
@foreach ($errors->all() as $error)
|
||||
<p class="text-red-700 text-sm">{{ $error }}</p>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Photo de profil -->
|
||||
<div class="bg-white rounded-xl border border-gray-200 p-8 mb-6">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6">Photo de profil</h2>
|
||||
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="flex-shrink-0">
|
||||
<img
|
||||
src="https://ui-avatars.com/api/?name={{ urlencode(Auth::user()->Pseudo) }}&background=06989e&color=fff&size=120"
|
||||
alt="Photo de profil"
|
||||
class="w-32 h-32 rounded-full border-4 border-niagara"
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-600 mb-4">Votre photo de profil est générée automatiquement à partir de votre pseudo.</p>
|
||||
<p class="text-sm text-gray-500">Les avatars sont fournis par ui-avatars.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Formulaire de modification -->
|
||||
<div class="bg-white rounded-xl border border-gray-200 p-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6">Informations personnelles</h2>
|
||||
|
||||
<form action="{{ route('profile.update') }}" method="POST" class="space-y-6">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
|
||||
<!-- Pseudo -->
|
||||
<div>
|
||||
<label for="Pseudo" class="block text-sm font-bold mb-2 text-gray-700">Pseudo</label>
|
||||
<input
|
||||
type="text"
|
||||
id="Pseudo"
|
||||
name="Pseudo"
|
||||
required
|
||||
maxlength="100"
|
||||
value="{{ old('Pseudo', Auth::user()->Pseudo) }}"
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-niagara outline-none @error('Pseudo') border-red-500 @enderror">
|
||||
@error('Pseudo')
|
||||
<p class="text-red-600 text-xs mt-1">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div>
|
||||
<label for="Email" class="block text-sm font-bold mb-2 text-gray-700">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
id="Email"
|
||||
name="Email"
|
||||
required
|
||||
value="{{ old('Email', Auth::user()->Email) }}"
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-niagara outline-none @error('Email') border-red-500 @enderror">
|
||||
@error('Email')
|
||||
<p class="text-red-600 text-xs mt-1">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<hr class="my-8">
|
||||
|
||||
<!-- Modification du mot de passe -->
|
||||
<div>
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-4">Modifier votre mot de passe</h3>
|
||||
<p class="text-gray-600 text-sm mb-4">Laissez vide si vous ne voulez pas le modifier.</p>
|
||||
|
||||
<!-- Mot de passe actuel -->
|
||||
<div class="mb-4">
|
||||
<label for="MotDePasse_Actuel" class="block text-sm font-bold mb-2 text-gray-700">Mot de passe actuel</label>
|
||||
<input
|
||||
type="password"
|
||||
id="MotDePasse_Actuel"
|
||||
name="MotDePasse_Actuel"
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-niagara outline-none @error('MotDePasse_Actuel') border-red-500 @enderror">
|
||||
@error('MotDePasse_Actuel')
|
||||
<p class="text-red-600 text-xs mt-1">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<!-- Nouveau mot de passe -->
|
||||
<div class="mb-4">
|
||||
<label for="MotDePasse_Nouveau" class="block text-sm font-bold mb-2 text-gray-700">Nouveau mot de passe</label>
|
||||
<input
|
||||
type="password"
|
||||
id="MotDePasse_Nouveau"
|
||||
name="MotDePasse_Nouveau"
|
||||
minlength="8"
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-niagara outline-none @error('MotDePasse_Nouveau') border-red-500 @enderror">
|
||||
@error('MotDePasse_Nouveau')
|
||||
<p class="text-red-600 text-xs mt-1">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<!-- Confirmation mot de passe -->
|
||||
<div>
|
||||
<label for="MotDePasse_Nouveau_confirmation" class="block text-sm font-bold mb-2 text-gray-700">Confirmer le nouveau mot de passe</label>
|
||||
<input
|
||||
type="password"
|
||||
id="MotDePasse_Nouveau_confirmation"
|
||||
name="MotDePasse_Nouveau_confirmation"
|
||||
minlength="8"
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-niagara outline-none">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Boutons -->
|
||||
<div class="flex gap-4 pt-6">
|
||||
<button type="submit" class="px-8 py-3 gradient-niagara text-white font-bold rounded-lg hover:shadow-lg transition-smooth duration-200">
|
||||
💾 Enregistrer les modifications
|
||||
</button>
|
||||
<a href="{{ route('home') }}" class="px-8 py-3 bg-gray-200 text-gray-900 font-bold rounded-lg hover:bg-gray-300 transition-smooth duration-200">
|
||||
Annuler
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Section Danger -->
|
||||
<div class="bg-white rounded-xl border-2 border-red-200 p-8 mt-6">
|
||||
<h2 class="text-2xl font-bold text-red-700 mb-4">⚠️ Zone de danger</h2>
|
||||
<p class="text-gray-600 mb-6">Les actions ci-dessous ne peuvent pas être annulées.</p>
|
||||
|
||||
<form action="{{ route('logout') }}" method="POST">
|
||||
@csrf
|
||||
<button type="submit" class="px-8 py-3 bg-red-600 text-white font-bold rounded-lg hover:bg-red-700 transition-smooth duration-200">
|
||||
🚪 Se déconnecter
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user