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); errorHandle(4001, errorMessage);
return Promise.reject(new Error(errorMessage)); return Promise.reject(new Error(errorMessage));
} }
// 其他业务错误 // 其他业务错误
errorHandle(0, errorMessage); errorHandle(0, errorMessage);
return Promise.reject(new Error(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() { export default function Activate() {
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const t = searchParams.get("t") || ''; const t = searchParams.get("t") || "";
const type = searchParams.get("type"); const type = searchParams.get("type");
if (type === "confirm_email") { if (type === "confirm_email") {
@ -21,31 +21,42 @@ export default function Activate() {
* @param {string} t - Verification token * @param {string} t - Verification token
*/ */
function ConfirmEmail({ t }: { t: string }) { function ConfirmEmail({ t }: { t: string }) {
const [status, setStatus] = useState<'loading' | 'success' | 'error'>('loading'); const [status, setStatus] = useState<"loading" | "success" | "error">(
const [message, setMessage] = useState(''); "loading"
);
const [message, setMessage] = useState("");
useEffect(() => { useEffect(() => {
if (!t) { if (!t) {
setStatus('error'); setStatus("error");
setMessage('Invalid verification token'); setMessage("Invalid verification token");
return; return;
} }
post(`/auth/activate?t=${t}`) post(`/auth/activate`, {
.then((res) => { t: t,
setStatus('success'); }).then((res:any) => {
setMessage('Your registration has been verified. Please return to the official website to log in.'); console.log('res', res)
}) if (res.success) {
.catch((err) => { setStatus("success");
setStatus('error'); setMessage(
setMessage('Verification failed. Please try again.'); "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]); }, [t]);
const renderContent = () => { const renderContent = () => {
switch (status) { switch (status) {
case 'loading': case "loading":
return ( 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="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> <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" /> <Loader2 className="h-16 w-16 animate-spin text-cyan-400 relative z-10" />
@ -54,26 +65,36 @@ function ConfirmEmail({ t }: { t: string }) {
</div> </div>
); );
case 'success': case "success":
return ( 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="relative">
<div className="absolute inset-0 bg-gradient-to-r from-cyan-400 to-purple-600 rounded-full blur-lg opacity-30"></div> <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" /> <CheckCircle className="h-16 w-16 text-cyan-400 relative z-10" />
</div> </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> <p className="text-gray-300 text-center max-w-md">{message}</p>
</div> </div>
); );
case 'error': case "error":
return ( 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="relative">
<div className="absolute inset-0 bg-gradient-to-r from-red-500 to-orange-500 rounded-full blur-lg opacity-30"></div> <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" /> <XCircle className="h-16 w-16 text-red-400 relative z-10" />
</div> </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> <p className="text-gray-300 text-center max-w-md">{message}</p>
<button <button
data-alt="retry-button" data-alt="retry-button"
@ -87,19 +108,29 @@ function ConfirmEmail({ t }: { t: string }) {
} }
}; };
return ( 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
<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"> 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="absolute inset-0 bg-gradient-to-br from-cyan-400/10 to-purple-600/10 pointer-events-none"></div>
<div className="relative z-10"> <div className="relative z-10">
{status === 'loading' && ( {status === "loading" && (
<div data-alt="verification-header" className="text-center mb-8"> <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> <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">
<p className="text-gray-300">Please wait while we verify your email</p> Email Verification
</div> </h1>
)} <p className="text-gray-300">
Please wait while we verify your email
</p>
</div>
)}
{renderContent()} {renderContent()}
</div> </div>
</div> </div>
</div> </div>