feat: page login avec gestion erreurs et rate limiting

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-07 00:20:36 +02:00
parent 44b3b4dd8d
commit 8d06706a24
3 changed files with 107 additions and 1 deletions
@@ -0,0 +1,97 @@
+'use client'
+import { signIn } from 'next-auth/react'
+import { useState, FormEvent } from 'react'
+import { useRouter } from 'next/navigation'
+
+export default function LoginPage() {
+  const [email, setEmail]       = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError]       = useState('')
+  const [loading, setLoading]   = useState(false)
+  const router = useRouter()
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault()
+    setLoading(true)
+    setError('')
+
+    const result = await signIn('credentials', {
+      email,
+      password,
+      redirect: false,
+    })
+
+    setLoading(false)
+
+    if (result?.error === 'RATE_LIMITED') {
+      setError('Trop de tentatives. Réessayez dans 15 minutes.')
+    } else if (result?.error) {
+      setError('Email ou mot de passe incorrect.')
+    } else {
+      router.push('/')
+      router.refresh()
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-slate-950 flex items-center justify-center p-4">
+      <div className="w-full max-w-sm">
+        <div className="text-center mb-8">
+          <h1 className="text-2xl font-extrabold text-white">
+            Matériaux<span className="text-indigo-400">Destock</span>
+          </h1>
+          <p className="text-slate-400 text-sm mt-1">Interface de gestion</p>
+        </div>
+
+        <form
+          onSubmit={handleSubmit}
+          className="bg-slate-900 rounded-xl p-6 space-y-4 border border-slate-800"
+        >
+          {error && (
+            <div className="bg-red-950 border border-red-800 text-red-300 text-sm rounded-lg px-3 py-2">
+              {error}
+            </div>
+          )}
+
+          <div>
+            <label className="block text-xs font-semibold text-slate-400 mb-1 uppercase tracking-wide">
+              Email
+            </label>
+            <input
+              type="email"
+              value={email}
+              onChange={e => setEmail(e.target.value)}
+              required
+              autoComplete="email"
+              className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2.5 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 transition-colors"
+              placeholder="vous@example.com"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs font-semibold text-slate-400 mb-1 uppercase tracking-wide">
+              Mot de passe
+            </label>
+            <input
+              type="password"
+              value={password}
+              onChange={e => setPassword(e.target.value)}
+              required
+              autoComplete="current-password"
+              className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2.5 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 transition-colors"
+              placeholder="••••••••"
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 text-white font-semibold py-2.5 rounded-lg text-sm transition-colors"
+          >
+            {loading ? 'Connexion…' : 'Se connecter'}
+          </button>
+        </form>
+      </div>
+    </div>
+  )
+}
@@ -1,6 +1,7 @@
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import './globals.css'
+import { SessionProvider } from '@/components/providers/SessionProvider'

 const inter = Inter({ subsets: ['latin'] })

@@ -12,7 +13,9 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="fr">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <SessionProvider>{children}</SessionProvider>
+      </body>
    </html>
  )
 }
@@ -0,0 +1,6 @@
+'use client'
+import { SessionProvider as NextAuthSessionProvider } from 'next-auth/react'
+
+export function SessionProvider({ children }: { children: React.ReactNode }) {
+  return <NextAuthSessionProvider>{children}</NextAuthSessionProvider>
+}