xueteng/video-flow-b
1
0
Fork 0
forked from 77media/video-flow
Code Pull Requests Activity

邮箱验证

Browse Source
This commit is contained in:
海龙 2025-08-31 02:41:16 +08:00
parent 64bd73db29
commit 0b70d582e7
2 changed files with 63 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
api/request.ts
View File

@ -64,7 +64,6 @@ request.interceptors.response.use(
errorHandle(4001, errorMessage);
return Promise.reject(new Error(errorMessage));
}
// 其他业务错误
errorHandle(0, errorMessage);
return Promise.reject(new Error(errorMessage));

95
app/activate/page.tsx
View File

@ -6,7 +6,7 @@ import { CheckCircle, XCircle, Loader2 } from "lucide-react";
export default function Activate() {
const searchParams = useSearchParams();
const t = searchParams.get("t") || '';
const t = searchParams.get("t") || "";
const type = searchParams.get("type");
if (type === "confirm_email") {
@ -21,31 +21,42 @@ export default function Activate() {
* @param {string} t - Verification token
*/
function ConfirmEmail({ t }: { t: string }) {
const [status, setStatus] = useState<'loading' | 'success' | 'error'>('loading');
const [message, setMessage] = useState('');
const [status, setStatus] = useState<"loading" | "success" | "error">(
"loading"
);
const [message, setMessage] = useState("");
useEffect(() => {
if (!t) {
setStatus('error');
setMessage('Invalid verification token');
setStatus("error");
setMessage("Invalid verification token");
return;
}
post(`/auth/activate?t=${t}`)
.then((res) => {
setStatus('success');
setMessage('Your registration has been verified. Please return to the official website to log in.');
})
.catch((err) => {
setStatus('error');
setMessage('Verification failed. Please try again.');
});
post(`/auth/activate`, {
t: t,
}).then((res:any) => {
console.log('res', res)
if (res.success) {
setStatus("success");
setMessage(
"Your registration has been verified. Please return to the official website to log in."
);
}
}).catch((err:any) => {
console.log('err', err)
setStatus("error");
setMessage("Verification failed. Please try again.");
});
}, [t]);
const renderContent = () => {
switch (status) {
case 'loading':
case "loading":
return (
<div data-alt="loading-state" className="flex flex-col items-center justify-center space-y-4">
<div
data-alt="loading-state"
className="flex flex-col items-center justify-center space-y-4"
>
<div className="relative">
<div className="absolute inset-0 bg-gradient-to-r from-cyan-400 to-purple-600 rounded-full blur-lg opacity-30 animate-pulse"></div>
<Loader2 className="h-16 w-16 animate-spin text-cyan-400 relative z-10" />
@ -54,26 +65,36 @@ function ConfirmEmail({ t }: { t: string }) {
</div>
);
case 'success':
case "success":
return (
<div data-alt="success-state" className="flex flex-col items-center justify-center space-y-4">
<div
data-alt="success-state"
className="flex flex-col items-center justify-center space-y-4"
>
<div className="relative">
<div className="absolute inset-0 bg-gradient-to-r from-cyan-400 to-purple-600 rounded-full blur-lg opacity-30"></div>
<CheckCircle className="h-16 w-16 text-cyan-400 relative z-10" />
</div>
<h2 className="text-2xl font-semibold bg-gradient-to-r from-cyan-400 to-purple-600 bg-clip-text text-transparent">Verification Successful</h2>
<h2 className="text-2xl font-semibold bg-gradient-to-r from-cyan-400 to-purple-600 bg-clip-text text-transparent">
Verification Successful
</h2>
<p className="text-gray-300 text-center max-w-md">{message}</p>
</div>
);
case 'error':
case "error":
return (
<div data-alt="error-state" className="flex flex-col items-center justify-center space-y-4">
<div
data-alt="error-state"
className="flex flex-col items-center justify-center space-y-4"
>
<div className="relative">
<div className="absolute inset-0 bg-gradient-to-r from-red-500 to-orange-500 rounded-full blur-lg opacity-30"></div>
<XCircle className="h-16 w-16 text-red-400 relative z-10" />
</div>
<h2 className="text-2xl font-semibold bg-gradient-to-r from-red-500 to-orange-500 bg-clip-text text-transparent">Verification Failed</h2>
<h2 className="text-2xl font-semibold bg-gradient-to-r from-red-500 to-orange-500 bg-clip-text text-transparent">
Verification Failed
</h2>
<p className="text-gray-300 text-center max-w-md">{message}</p>
<button
data-alt="retry-button"
@ -87,19 +108,29 @@ function ConfirmEmail({ t }: { t: string }) {
}
};
return (
<div data-alt="email-verification-container" className="min-h-screen flex items-center justify-center bg-gradient-to-br from-black via-gray-900 to-black px-4">
<div data-alt="verification-card" className="bg-gradient-to-br from-gray-900/90 to-black/90 backdrop-blur-sm rounded-2xl shadow-2xl p-8 max-w-md w-full border border-gray-700/50 relative overflow-hidden">
return (
<div
data-alt="email-verification-container"
className="min-h-screen flex items-center justify-center bg-gradient-to-br from-black via-gray-900 to-black px-4"
>
<div
data-alt="verification-card"
className="bg-gradient-to-br from-gray-900/90 to-black/90 backdrop-blur-sm rounded-2xl shadow-2xl p-8 max-w-md w-full border border-gray-700/50 relative overflow-hidden"
>
<div className="absolute inset-0 bg-gradient-to-br from-cyan-400/10 to-purple-600/10 pointer-events-none"></div>
<div className="relative z-10">
{status === 'loading' && (
<div data-alt="verification-header" className="text-center mb-8">
<h1 className="text-3xl font-bold text-white mb-2 bg-gradient-to-r from-cyan-400 to-purple-600 bg-clip-text text-transparent">Email Verification</h1>
<p className="text-gray-300">Please wait while we verify your email</p>
</div>
)}
{status === "loading" && (
<div data-alt="verification-header" className="text-center mb-8">
<h1 className="text-3xl font-bold text-white mb-2 bg-gradient-to-r from-cyan-400 to-purple-600 bg-clip-text text-transparent">
Email Verification
</h1>
<p className="text-gray-300">
Please wait while we verify your email
</p>
</div>
)}
{renderContent()}
{renderContent()}
</div>
</div>
</div>