Added registration page

src/components/LoginPage.tsx

@@ -5,23 +5,54 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
-import { useAuth } from '@/context/AuthContext';
+import { useAuth } from '@/context/AuthContext'; // Assuming useAuth provides authAwareFetch if needed for registration
 
 const LoginPage: React.FC = () => {
   const [username, setUsername] = useState<string>('');
   const [password, setPassword] = useState<string>('');
   const [error, setError] = useState<string>('');
-  const { login } = useAuth(); // Assuming login function is now capable of handling 401 internally or through a mechanism
+  const [isRegistering, setIsRegistering] = useState<boolean>(false); // New state for registration mode
+  const { login } = useAuth();
 
   const handleSubmit = async (e: React.FormEvent): Promise<void> => {
     e.preventDefault();
     setError('');
-    // The login function in AuthContext should be updated to use authAwareFetch with isLoginAttempt: true
-    // This example assumes useAuth().login handles the network call and error setting.
-    // If not, you'd directly use authAwareFetch here and manage isLoginAttempt.
-    const success = await login(username, password); //
-    if (!success) {
-      setError('Invalid username or password. Please try again.'); //
+
+    if (isRegistering) {
+      await handleRegister();
+    } else {
+      const success = await login(username, password);
+      if (!success) {
+        setError('Invalid username or password. Please try again.');
+      }
+    }
+  };
+
+  const handleRegister = async (): Promise<void> => {
+    try {
+      // Assuming you have access to a fetch-like function or authAwareFetch from your context
+      // If not, you might need to import a standard fetch or define it.
+      const response = await fetch('/auth/register_user', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ username, password }),
+      });
+
+      if (response.ok) {
+        // Registration successful, maybe log them in automatically or show a success message
+        alert('Registration successful! You can now log in.');
+        setIsRegistering(false); // Switch back to login form
+        setUsername('');
+        setPassword('');
+      } else {
+        const errorData = await response.json();
+        setError(errorData.message || 'Registration failed. Please try again.');
+      }
+    } catch (err) {
+      setError('Network error or server unreachable during registration.');
+      console.error('Registration error:', err);
     }
   };
 
@@ -29,7 +60,9 @@ const LoginPage: React.FC = () => {
     <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
       <Card className="w-full max-w-md p-6 space-y-4 rounded-lg shadow-lg">
         <CardHeader>
-          <CardTitle className="text-center text-2xl font-bold">Login</CardTitle>
+          <CardTitle className="text-center text-2xl font-bold">
+            {isRegistering ? 'Register' : 'Login'}
+          </CardTitle>
         </CardHeader>
         <CardContent>
           <form onSubmit={handleSubmit} className="space-y-4">
@@ -59,7 +92,15 @@ const LoginPage: React.FC = () => {
             </div>
             {error && <p className="text-red-500 text-sm">{error}</p>}
             <Button type="submit" className="w-full">
-              Login
+              {isRegistering ? 'Register' : 'Login'}
+            </Button>
+            <Button
+              type="button"
+              onClick={() => setIsRegistering(!isRegistering)}
+              className="w-full mt-2"
+              variant="outline"
+            >
+              {isRegistering ? 'Already have an account? Login' : "Don't have an account? Register"}
             </Button>
           </form>
         </CardContent>