feat: add user profile and admin management features

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

@@ -0,0 +1,127 @@
+import { useState } from 'react'
+import { KeyRound, ArrowLeft, Check } from 'lucide-react'
+import { changePassword } from '../api/client'
+
+export default function ProfilePage({ username, onBack }) {
+  const [oldPassword, setOldPassword] = useState('')
+  const [newPassword, setNewPassword] = useState('')
+  const [newPassword2, setNewPassword2] = useState('')
+  const [error,   setError]   = useState(null)
+  const [success, setSuccess] = useState(false)
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setError(null)
+    setSuccess(false)
+
+    if (newPassword !== newPassword2) {
+      setError('Les nouveaux mots de passe ne correspondent pas.')
+      return
+    }
+    if (newPassword.length < 6) {
+      setError('Le nouveau mot de passe doit contenir au moins 6 caractères.')
+      return
+    }
+
+    setLoading(true)
+    try {
+      await changePassword(oldPassword, newPassword)
+      setSuccess(true)
+      setOldPassword('')
+      setNewPassword('')
+      setNewPassword2('')
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-950 text-gray-100">
+      <div className="max-w-lg mx-auto px-4 py-10">
+        <button
+          onClick={onBack}
+          className="flex items-center gap-1.5 text-sm text-gray-400 hover:text-gray-200 mb-6 transition-colors"
+        >
+          <ArrowLeft size={15} />
+          Retour au tableau de bord
+        </button>
+
+        <div className="flex items-center gap-3 mb-6">
+          <div className="p-2 rounded-xl bg-indigo-500/15">
+            <KeyRound size={20} className="text-indigo-400" />
+          </div>
+          <div>
+            <h1 className="text-lg font-semibold">Mon profil</h1>
+            <p className="text-xs text-gray-500">{username}</p>
+          </div>
+        </div>
+
+        <div className="bg-gray-900 border border-gray-800 rounded-2xl p-6">
+          <h2 className="text-sm font-medium text-gray-300 mb-4">Changer le mot de passe</h2>
+
+          {success && (
+            <div className="flex items-center gap-2 bg-emerald-950/40 border border-emerald-800/50 rounded-lg px-3 py-2 text-xs text-emerald-300 mb-4">
+              <Check size={13} />
+              Mot de passe mis à jour avec succès.
+            </div>
+          )}
+
+          {error && (
+            <div className="bg-red-950/40 border border-red-800/50 rounded-lg px-3 py-2 text-xs text-red-300 mb-4">
+              {error}
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label className="block text-xs text-gray-400 mb-1.5">Mot de passe actuel</label>
+              <input
+                type="password"
+                required
+                autoComplete="current-password"
+                value={oldPassword}
+                onChange={(e) => setOldPassword(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">Nouveau mot de passe</label>
+              <input
+                type="password"
+                required
+                autoComplete="new-password"
+                value={newPassword}
+                onChange={(e) => setNewPassword(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">Confirmer le nouveau mot de passe</label>
+              <input
+                type="password"
+                required
+                autoComplete="new-password"
+                value={newPassword2}
+                onChange={(e) => setNewPassword2(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 ? 'Enregistrement…' : 'Changer le mot de passe'}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}