feat: User management, SMTP email activation and password resets

2026-09-17 08:49:11 +05:30
parent 603aee646c
commit cbf44587aa
9 changed files with 571 additions and 51 deletions
@@ -0,0 +1,76 @@
+import { useEffect, useState } from 'react';
+import { useSearchParams, useNavigate } from 'react-router-dom';
+import { Loader2, CheckCircle, XCircle } from 'lucide-react';
+import { api } from '../lib/api';
+
+export default function Activate() {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const token = searchParams.get('token');
+  
+  const [status, setStatus] = useState<'loading' | 'success' | 'error'>('loading');
+  const [message, setMessage] = useState('');
+
+  useEffect(() => {
+    if (!token) {
+      setStatus('error');
+      setMessage('Invalid or missing activation token.');
+      return;
+    }
+
+    const activateAccount = async () => {
+      try {
+        await api.activateUser(token);
+        setStatus('success');
+        setMessage('Your account has been successfully activated!');
+      } catch (error: any) {
+        setStatus('error');
+        setMessage(error.message || 'Failed to activate account.');
+      }
+    };
+
+    activateAccount();
+  }, [token]);
+
+  return (
+    <div className="min-h-screen bg-zinc-950 flex flex-col items-center justify-center p-4">
+      <div className="bg-zinc-900 border border-zinc-800 rounded-2xl p-8 max-w-md w-full text-center shadow-2xl">
+        {status === 'loading' && (
+          <div className="flex flex-col items-center">
+            <Loader2 className="w-12 h-12 text-primary animate-spin mb-4" />
+            <h2 className="text-xl font-bold text-white mb-2">Activating Account...</h2>
+            <p className="text-zinc-400">Please wait while we verify your token.</p>
+          </div>
+        )}
+        
+        {status === 'success' && (
+          <div className="flex flex-col items-center">
+            <CheckCircle className="w-12 h-12 text-green-500 mb-4" />
+            <h2 className="text-xl font-bold text-white mb-2">Success!</h2>
+            <p className="text-zinc-400 mb-6">{message}</p>
+            <button 
+              onClick={() => navigate('/')}
+              className="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-6 rounded-xl transition-colors"
+            >
+              Go to Login
+            </button>
+          </div>
+        )}
+
+        {status === 'error' && (
+          <div className="flex flex-col items-center">
+            <XCircle className="w-12 h-12 text-red-500 mb-4" />
+            <h2 className="text-xl font-bold text-white mb-2">Activation Failed</h2>
+            <p className="text-zinc-400 mb-6">{message}</p>
+            <button 
+              onClick={() => navigate('/')}
+              className="bg-zinc-800 hover:bg-zinc-700 text-white font-medium py-2 px-6 rounded-xl transition-colors"
+            >
+              Return Home
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}