101 lines
3.2 KiB
TypeScript
101 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { signOut } from "next-auth/react";
|
|
|
|
export function EmailForm({ hasPassword }: { hasPassword: boolean }) {
|
|
const [newEmail, setNewEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState("");
|
|
const [success, setSuccess] = useState(false);
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setError("");
|
|
setSuccess(false);
|
|
setLoading(true);
|
|
try {
|
|
const res = await fetch("/api/profile/email", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ newEmail, password }),
|
|
});
|
|
const data = await res.json();
|
|
if (!res.ok) {
|
|
setError(data.error || "Une erreur est survenue.");
|
|
} else {
|
|
setSuccess(true);
|
|
// Sign out so user logs back in with new email
|
|
setTimeout(() => signOut({ redirectTo: "/auth/login" }), 2000);
|
|
}
|
|
} catch {
|
|
setError("Une erreur est survenue.");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
if (!hasPassword) {
|
|
return (
|
|
<p style={{ fontSize: 13, color: "#64748b", fontStyle: "italic" }}>
|
|
Définissez d'abord un mot de passe ci-dessus.
|
|
</p>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
|
|
<div>
|
|
<label style={{ display: "block", fontSize: 13, fontWeight: 600, color: "#94a3b8", marginBottom: 6 }}>
|
|
Nouvel email
|
|
</label>
|
|
<input
|
|
type="email"
|
|
value={newEmail}
|
|
onChange={(e) => setNewEmail(e.target.value)}
|
|
placeholder="nouveau@exemple.com"
|
|
required
|
|
style={{ fontSize: 14 }}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label style={{ display: "block", fontSize: 13, fontWeight: 600, color: "#94a3b8", marginBottom: 6 }}>
|
|
Confirmez votre mot de passe
|
|
</label>
|
|
<input
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
placeholder="Votre mot de passe actuel"
|
|
required
|
|
autoComplete="current-password"
|
|
style={{ fontSize: 14 }}
|
|
/>
|
|
</div>
|
|
|
|
{error && (
|
|
<p style={{ fontSize: 13, color: "#f87171", background: "rgba(239,68,68,0.1)", border: "1px solid rgba(239,68,68,0.3)", borderRadius: 6, padding: "10px 12px" }}>
|
|
{error}
|
|
</p>
|
|
)}
|
|
|
|
{success && (
|
|
<p style={{ fontSize: 13, color: "#4ade80", background: "rgba(34,197,94,0.1)", border: "1px solid rgba(34,197,94,0.3)", borderRadius: 6, padding: "10px 12px" }}>
|
|
✓ Email mis à jour. Reconnexion en cours…
|
|
</p>
|
|
)}
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={loading || !newEmail || !password}
|
|
className="btn btn-primary"
|
|
style={{ justifyContent: "center", opacity: loading || !newEmail || !password ? 0.7 : 1, cursor: loading || !newEmail || !password ? "not-allowed" : "pointer" }}
|
|
>
|
|
{loading ? "Enregistrement…" : "Changer l'email"}
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|