Update site appearance and user authentication functionality

Implement a new login system, update UI elements, and enable static asset serving for images.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/InMLMqG

client/src/pages/Landing.tsx

@@ -4,12 +4,13 @@ import { Input } from "@/components/ui/input";
 import { Card, CardContent } from "@/components/ui/card";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { useToast } from "@/hooks/use-toast";
-import { apiRequest } from "@/lib/queryClient";
+import { apiRequest, queryClient } from "@/lib/queryClient";
 import { useMutation } from "@tanstack/react-query";
 
 export default function Landing() {
   const [showLoginModal, setShowLoginModal] = useState(false);
   const [showRequestModal, setShowRequestModal] = useState(false);
+  const [loginForm, setLoginForm] = useState({ username: "", password: "" });
   const [requestForm, setRequestForm] = useState({
     name: "",
     category: "people",
@@ -17,6 +18,31 @@ export default function Landing() {
   });
   const { toast } = useToast();
 
+  const loginMutation = useMutation({
+    mutationFn: async (credentials: { username: string; password: string }) => {
+      return await apiRequest("POST", "/api/login", credentials);
+    },
+    onSuccess: () => {
+      toast({
+        title: "Success",
+        description: "Successfully logged in!",
+      });
+      setShowLoginModal(false);
+      setLoginForm({ username: "", password: "" });
+      // Refresh user data
+      queryClient.invalidateQueries({ queryKey: ["/api/auth/user"] });
+      // Redirect to home
+      window.location.href = "/";
+    },
+    onError: () => {
+      toast({
+        title: "Error",
+        description: "Invalid credentials. Please try again.",
+        variant: "destructive"
+      });
+    }
+  });
+
   const requestMutation = useMutation({
     mutationFn: async (data: typeof requestForm) => {
       await apiRequest("POST", "/api/media-outlet-requests", data);
@@ -39,7 +65,12 @@ export default function Landing() {
   });
 
   const handleLogin = () => {
-    window.location.href = "/api/login";
+    setShowLoginModal(true);
+  };
+
+  const handleLoginSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    loginMutation.mutate(loginForm);
   };
 
   const handleRequestSubmit = (e: React.FormEvent) => {
@@ -54,10 +85,11 @@ export default function Landing() {
         <div className="max-w-7xl mx-auto px-6 py-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center space-x-3">
-              <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center text-primary-foreground font-bold text-lg">
-                S
-              </div>
-              <span className="text-2xl font-bold tracking-tight">SAPIENS</span>
+              <img 
+                src="/attached_assets/logo_black_1759162717640.png" 
+                alt="SAPIENS" 
+                className="h-8 w-auto"
+              />
             </div>
             
             <div className="flex items-center space-x-4">
@@ -158,6 +190,62 @@ export default function Landing() {
         </div>
       </div>
 
+      {/* Login Modal */}
+      <Dialog open={showLoginModal} onOpenChange={setShowLoginModal}>
+        <DialogContent className="sm:max-w-md" data-testid="modal-login">
+          <DialogHeader>
+            <DialogTitle>Login to SAPIENS</DialogTitle>
+          </DialogHeader>
+          <form onSubmit={handleLoginSubmit} className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium mb-2">Username</label>
+              <Input
+                value={loginForm.username}
+                onChange={(e) => setLoginForm(prev => ({ ...prev, username: e.target.value }))}
+                placeholder="Enter username"
+                required
+                data-testid="input-username"
+              />
+            </div>
+            
+            <div>
+              <label className="block text-sm font-medium mb-2">Password</label>
+              <Input
+                type="password"
+                value={loginForm.password}
+                onChange={(e) => setLoginForm(prev => ({ ...prev, password: e.target.value }))}
+                placeholder="Enter password"
+                required
+                data-testid="input-password"
+              />
+            </div>
+            
+            <div className="text-xs text-muted-foreground">
+              Use: admin/1234 or superadmin/1234
+            </div>
+            
+            <div className="flex space-x-2">
+              <Button 
+                type="submit" 
+                disabled={loginMutation.isPending}
+                className="flex-1"
+                data-testid="button-submit-login"
+              >
+                {loginMutation.isPending ? "Logging in..." : "Login"}
+              </Button>
+              <Button 
+                type="button" 
+                variant="outline" 
+                onClick={() => setShowLoginModal(false)}
+                data-testid="button-cancel-login"
+              >
+                Cancel
+              </Button>
+            </div>
+          </form>
+        </DialogContent>
+      </Dialog>
+
       {/* Request Modal */}
       <Dialog open={showRequestModal} onOpenChange={setShowRequestModal}>
         <DialogContent data-testid="modal-request">