Feat : add Webauth

vps-monitor/frontend/src/components/LoginPage.jsx

@@ -1,16 +1,26 @@
-import { useState } from 'react'
-import { Monitor } from 'lucide-react'
-import { login, register } from '../api/client'
+import { useState, useEffect } from 'react'
+import { Monitor, Fingerprint } from 'lucide-react'
+import { login, register, loginWithPasskey } from '../api/client'
 
-export default function LoginPage({ isFirstUser, onAuthenticated }) {
+export default function LoginPage({ isFirstUser, passkeyEnabled, onAuthenticated }) {
   const [username, setUsername] = useState('')
   const [password, setPassword] = useState('')
   const [password2, setPassword2] = useState('')
   const [error, setError]   = useState(null)
   const [loading, setLoading] = useState(false)
+  const [passkeyLoading, setPasskeyLoading] = useState(false)
+  const [browserSupportsPasskey, setBrowserSupportsPasskey] = useState(false)
 
   const isRegister = isFirstUser
 
+  useEffect(() => {
+    if (window.PublicKeyCredential) {
+      window.PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable()
+        .then(available => setBrowserSupportsPasskey(available))
+        .catch(() => setBrowserSupportsPasskey(false))
+    }
+  }, [])
+
   const handleSubmit = async (e) => {
     e.preventDefault()
     setError(null)
@@ -39,6 +49,25 @@ export default function LoginPage({ isFirstUser, onAuthenticated }) {
     }
   }
 
+  const handlePasskeyLogin = async () => {
+    setError(null)
+    setPasskeyLoading(true)
+    try {
+      const data = await loginWithPasskey(username.trim() || null)
+      onAuthenticated(data.access_token, data.role)
+    } catch (err) {
+      if (err.name === 'NotAllowedError' || err.message?.includes('NotAllowedError')) {
+        setError('Authentification annulée.')
+      } else {
+        setError(err.message)
+      }
+    } finally {
+      setPasskeyLoading(false)
+    }
+  }
+
+  const showPasskeyButton = !isRegister && passkeyEnabled && browserSupportsPasskey
+
   return (
     <div className="min-h-screen bg-gray-950 text-gray-100 flex items-center justify-center px-4">
       <div className="w-full max-w-sm">
@@ -53,7 +82,7 @@ export default function LoginPage({ isFirstUser, onAuthenticated }) {
           </p>
         </div>
 
-        <form onSubmit={handleSubmit} className="bg-gray-900 border border-gray-800 rounded-2xl p-6 space-y-4">
+        <div className="bg-gray-900 border border-gray-800 rounded-2xl p-6 space-y-4">
           {isRegister && (
             <div className="bg-indigo-950/40 border border-indigo-800/50 rounded-lg px-3 py-2 text-xs text-indigo-300">
               Aucun utilisateur n'existe encore. Le premier compte créé sera <strong>admin</strong>.
@@ -66,57 +95,79 @@ export default function LoginPage({ isFirstUser, onAuthenticated }) {
             </div>
           )}
 
-          <div>
-            <label className="block text-xs text-gray-400 mb-1.5">Nom d'utilisateur</label>
-            <input
-              type="text"
-              required
-              autoFocus
-              autoComplete="username"
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500 transition-colors"
-            />
-          </div>
-
-          <div>
-            <label className="block text-xs text-gray-400 mb-1.5">Mot de passe</label>
-            <input
-              type="password"
-              required
-              autoComplete={isRegister ? 'new-password' : 'current-password'}
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500 transition-colors"
-            />
-          </div>
-
-          {isRegister && (
+          <form onSubmit={handleSubmit} className="space-y-4">
             <div>
-              <label className="block text-xs text-gray-400 mb-1.5">Confirmer le mot de passe</label>
+              <label className="block text-xs text-gray-400 mb-1.5">Nom d'utilisateur</label>
               <input
-                type="password"
+                type="text"
                 required
-                autoComplete="new-password"
-                value={password2}
-                onChange={(e) => setPassword2(e.target.value)}
+                autoFocus
+                autoComplete="username"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
                 className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500 transition-colors"
               />
             </div>
-          )}
 
-          <button
-            type="submit"
-            disabled={loading}
-            className="w-full py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-sm font-medium transition-colors mt-2"
-          >
-            {loading
-              ? 'Chargement…'
-              : isRegister
-                ? 'Créer le compte'
-                : 'Se connecter'}
-          </button>
-        </form>
+            <div>
+              <label className="block text-xs text-gray-400 mb-1.5">Mot de passe</label>
+              <input
+                type="password"
+                required
+                autoComplete={isRegister ? 'new-password' : 'current-password'}
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500 transition-colors"
+              />
+            </div>
+
+            {isRegister && (
+              <div>
+                <label className="block text-xs text-gray-400 mb-1.5">Confirmer le mot de passe</label>
+                <input
+                  type="password"
+                  required
+                  autoComplete="new-password"
+                  value={password2}
+                  onChange={(e) => setPassword2(e.target.value)}
+                  className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500 transition-colors"
+                />
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={loading || passkeyLoading}
+              className="w-full py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-sm font-medium transition-colors mt-2"
+            >
+              {loading
+                ? 'Chargement…'
+                : isRegister
+                  ? 'Créer le compte'
+                  : 'Se connecter'}
+            </button>
+          </form>
+
+          {showPasskeyButton && (
+            <>
+              <div className="relative flex items-center gap-3">
+                <div className="flex-1 border-t border-gray-800" />
+                <span className="text-xs text-gray-600">ou</span>
+                <div className="flex-1 border-t border-gray-800" />
+              </div>
+
+              <button
+                type="button"
+                onClick={handlePasskeyLogin}
+                disabled={loading || passkeyLoading}
+                className="w-full flex items-center justify-center gap-2 py-2 rounded-lg bg-gray-800 hover:bg-gray-700 disabled:opacity-50 text-sm font-medium transition-colors border border-gray-700"
+              >
+                <Fingerprint size={16} className="text-indigo-400" />
+                {passkeyLoading ? 'Vérification…' : 'Se connecter avec une passkey'}
+              </button>
+            </>
+          )}
+        </div>
       </div>
     </div>
   )