验证页

2025-08-30 23:42:28 +08:00 · 2025-08-30 23:42:28 +08:00 · d83e7bdd0d
commit d83e7bdd0d
parent cf79fae40e
1 changed files with 108 additions and 0 deletions
--- a/app/activate/page.tsx
+++ b/app/activate/page.tsx
@ -0,0 +1,108 @@
+"use client";
+import { get } from "@/api/request";
+import { useSearchParams } from "next/navigation";
+import React, { useEffect, useState } from "react";
+import { CheckCircle, XCircle, Loader2 } from "lucide-react";
+
+export default function Activate() {
+  const searchParams = useSearchParams();
+  const t = searchParams.get("t") || '';
+  const type = searchParams.get("type");
+
+  if (type === "confirm_email") {
+    return <ConfirmEmail t={t} />;
+  }
+
+  return <></>;
+}
+
+/**
+ * Email verification confirmation component
+ * @param {string} t - Verification token
+ */
+function ConfirmEmail({ t }: { t: string }) {
+  const [status, setStatus] = useState<'loading' | 'success' | 'error'>('loading');
+  const [message, setMessage] = useState('');
+
+  useEffect(() => {
+    if (!t) {
+      setStatus('error');
+      setMessage('Invalid verification token');
+      return;
+    }
+
+    get(`${process.env.NEXT_PUBLIC_JAVA_URL}/api/user/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.');
+      });
+  }, [t]);
+
+  const renderContent = () => {
+    switch (status) {
+      case 'loading':
+        return (
+          <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" />
+            </div>
+            <p className="text-lg text-gray-300">Verifying email...</p>
+          </div>
+        );
+
+      case 'success':
+        return (
+          <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>
+            <p className="text-gray-300 text-center max-w-md">{message}</p>
+          </div>
+        );
+
+      case 'error':
+        return (
+          <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>
+            <p className="text-gray-300 text-center max-w-md">{message}</p>
+            <button
+              data-alt="retry-button"
+              onClick={() => window.location.reload()}
+              className="mt-4 px-6 py-2 bg-gradient-to-r from-cyan-400 to-purple-600 text-white rounded-lg hover:from-cyan-500 hover:to-purple-700 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105"
+            >
+              Retry Verification
+            </button>
+          </div>
+        );
+    }
+  };
+
+    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>
+        )}
+
+        {renderContent()}
+        </div>
+      </div>
+    </div>
+  );
+}