Zhengen
3f05bd16e1
- 新增 /privacy-policy/delete-request 页面：提交邮箱发起删除申请 - 新增 /privacy-policy/delete-confirm 页面：从邮件链接确认删除（Suspense包裹useSearchParams） - 隐私政策页面加入删除申请入口链接
73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
const API_BASE_URL =
|
|
process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8000";
|
|
|
|
export default function DeleteRequestPage() {
|
|
const [contact, setContact] = useState("");
|
|
const [status, setStatus] = useState<
|
|
"idle" | "submitting" | "done" | "error"
|
|
>("idle");
|
|
|
|
async function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
setStatus("submitting");
|
|
try {
|
|
const res = await fetch(
|
|
`${API_BASE_URL}/api/v1/custom/leads/deletion-requests/`,
|
|
{
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ contact }),
|
|
},
|
|
);
|
|
if (!res.ok) throw new Error("request failed");
|
|
setStatus("done");
|
|
} catch {
|
|
setStatus("error");
|
|
}
|
|
}
|
|
|
|
if (status === "done") {
|
|
return (
|
|
<div className="mx-auto max-w-xl px-6 py-24 text-center text-slate-700">
|
|
如果我们持有与该邮箱关联的信息，确认邮件将发送至该邮箱，请查收并点击链接完成删除确认。
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="mx-auto max-w-xl px-6 py-24">
|
|
<h1 className="mb-4 text-2xl font-bold text-slate-900">
|
|
申请删除个人信息
|
|
</h1>
|
|
<p className="mb-6 text-slate-700">
|
|
依据《中华人民共和国个人信息保护法》（PIPL），您可以申请删除我们通过表单收集的您的个人信息。
|
|
请输入您提交表单时使用的邮箱，我们将向该邮箱发送确认邮件，点击邮件中的链接即可完成删除。
|
|
</p>
|
|
<form onSubmit={handleSubmit} className="flex gap-2">
|
|
<input
|
|
type="email"
|
|
required
|
|
value={contact}
|
|
onChange={(e) => setContact(e.target.value)}
|
|
placeholder="请输入邮箱"
|
|
className="flex-1 rounded-lg border border-slate-200 px-4 py-2"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={status === "submitting"}
|
|
className="rounded-full bg-primary px-6 py-2 font-medium text-white disabled:opacity-50"
|
|
>
|
|
{status === "submitting" ? "提交中..." : "提交申请"}
|
|
</button>
|
|
</form>
|
|
{status === "error" && (
|
|
<p className="mt-4 text-red-600">提交失败，请稍后重试。</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|