1 files changed, 100 insertions, 0 deletions
diff --git a/storefront/pages/register.js b/storefront/pages/register.js
new file mode 100644
index 0000000..48831ea
--- /dev/null
+++ b/storefront/pages/register.js
@@ -0,0 +1,100 @@
+import { useState } from "react"
+import { useRouter } from "next/router"
+import { medusaClient } from "../lib/medusa-client"
+
+export default function RegisterPage() {
+  const router = useRouter()
+  const [form, setForm] = useState({
+    first_name: "",
+    last_name: "",
+    email: "",
+    password: "",
+  })
+  const [status, setStatus] = useState("")
+  const [isLoading, setIsLoading] = useState(false)
+
+  const handleChange = (event) => {
+    const { name, value } = event.target
+    setForm((prev) => ({ ...prev, [name]: value }))
+  }
+
+  const handleSubmit = async (event) => {
+    event.preventDefault()
+    setStatus("")
+    setIsLoading(true)
+
+    try {
+      await medusaClient.customers.create(form)
+      setStatus("Compte créé. Vous pouvez vous connecter.")
+      router.push("/login")
+    } catch (error) {
+      setStatus("Impossible de créer le compte pour le moment.")
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div style={{ maxWidth: "420px", margin: "0 auto" }}>
+      <h1>Créer un compte</h1>
+      <form onSubmit={handleSubmit} style={{ display: "grid", gap: "1rem" }}>
+        <label>
+          Prénom
+          <input
+            name="first_name"
+            value={form.first_name}
+            onChange={handleChange}
+            required
+            style={{ width: "100%", padding: "0.5rem", marginTop: "0.5rem" }}
+          />
+        </label>
+        <label>
+          Nom
+          <input
+            name="last_name"
+            value={form.last_name}
+            onChange={handleChange}
+            required
+            style={{ width: "100%", padding: "0.5rem", marginTop: "0.5rem" }}
+          />
+        </label>
+        <label>
+          Email
+          <input
+            name="email"
+            type="email"
+            value={form.email}
+            onChange={handleChange}
+            required
+            style={{ width: "100%", padding: "0.5rem", marginTop: "0.5rem" }}
+          />
+        </label>
+        <label>
+          Mot de passe
+          <input
+            name="password"
+            type="password"
+            value={form.password}
+            onChange={handleChange}
+            required
+            style={{ width: "100%", padding: "0.5rem", marginTop: "0.5rem" }}
+          />
+        </label>
+        <button
+          type="submit"
+          disabled={isLoading}
+          style={{
+            border: "1px solid #ccc",
+            background: "#fff",
+            borderRadius: "6px",
+            padding: "0.6rem",
+            cursor: "pointer",
+          }}
+        >
+          {isLoading ? "Création..." : "Créer mon compte"}
+        </button>
+        {status && <p>{status}</p>}
+      </form>
+    </div>
+  )
+}