Fix security warnings

src/integrations/supabase/index.ts

@@ -0,0 +1,3 @@
+// This file exports everything from the auto-generated client
+export * from './client';
+export * from './types';

src/pages/Login.tsx

@@ -2,18 +2,62 @@ import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Card } from "@/components/ui/card";
-import { Server, Lock, User } from "lucide-react";
+import { Server, Lock, Mail } from "lucide-react";
 import { useNavigate } from "react-router-dom";
+import { supabase } from "@/integrations/supabase/client";
+import { useToast } from "@/components/ui/use-toast";
 
 const Login = () => {
-  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [isSignup, setIsSignup] = useState(false);
+  const [loading, setLoading] = useState(false);
   const navigate = useNavigate();
+  const { toast } = useToast();
 
-  const handleLogin = (e: React.FormEvent) => {
+  const handleAuth = async (e: React.FormEvent) => {
     e.preventDefault();
-    // Mock login - in real app would authenticate
-    navigate("/dashboard");
+    setLoading(true);
+
+    try {
+      if (isSignup) {
+        const { error } = await supabase.auth.signUp({
+          email,
+          password,
+          options: {
+            data: {
+              username: email.split('@')[0]
+            }
+          }
+        });
+
+        if (error) throw error;
+
+        toast({
+          title: "Account created!",
+          description: "You can now log in.",
+        });
+        setIsSignup(false);
+        setPassword("");
+      } else {
+        const { error } = await supabase.auth.signInWithPassword({
+          email,
+          password,
+        });
+
+        if (error) throw error;
+
+        navigate("/dashboard");
+      }
+    } catch (error: any) {
+      toast({
+        title: "Authentication failed",
+        description: error.message,
+        variant: "destructive",
+      });
+    } finally {
+      setLoading(false);
+    }
   };
 
   return (
@@ -25,24 +69,26 @@ const Login = () => {
           </div>
           <h1 className="text-3xl font-bold text-foreground mb-2">Docker WebUI</h1>
           <p className="text-muted-foreground text-center">
-            Lightweight container monitoring and control
+            {isSignup ? 'Create an account to get started' : 'Lightweight container monitoring and control'}
           </p>
         </div>
 
-        <form onSubmit={handleLogin} className="space-y-4">
+        <form onSubmit={handleAuth} className="space-y-4">
           <div className="space-y-2">
-            <label htmlFor="username" className="text-sm font-medium text-foreground">
-              Username
+            <label htmlFor="email" className="text-sm font-medium text-foreground">
+              Email
             </label>
             <div className="relative">
-              <User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+              <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
               <Input
-                id="username"
-                type="text"
-                placeholder="admin"
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
+                id="email"
+                type="email"
+                placeholder="admin@example.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
                 className="pl-10 bg-secondary border-border"
+                required
+                disabled={loading}
               />
             </div>
           </div>
@@ -60,18 +106,41 @@ const Login = () => {
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 className="pl-10 bg-secondary border-border"
+                required
+                disabled={loading}
+                minLength={6}
               />
             </div>
           </div>
 
-          <Button type="submit" className="w-full bg-primary hover:bg-primary/90">
-            Sign In
+          <Button 
+            type="submit" 
+            className="w-full bg-primary hover:bg-primary/90"
+            disabled={loading}
+          >
+            {loading ? 'Processing...' : (isSignup ? 'Sign Up' : 'Sign In')}
           </Button>
         </form>
 
-        <p className="mt-6 text-xs text-center text-muted-foreground">
-          First time? You'll be prompted to change your password after login.
-        </p>
+        <div className="mt-4 text-center">
+          <button
+            type="button"
+            onClick={() => {
+              setIsSignup(!isSignup);
+              setPassword("");
+            }}
+            className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+            disabled={loading}
+          >
+            {isSignup ? 'Already have an account? Sign in' : "Don't have an account? Sign up"}
+          </button>
+        </div>
+
+        {!isSignup && (
+          <p className="mt-6 text-xs text-center text-muted-foreground">
+            Secure authentication powered by Lovable Cloud
+          </p>
+        )}
       </Card>
     </div>
   );