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
4
.replit
@ -14,6 +14,10 @@ run = ["npm", "run", "start"]
|
|||||||
localPort = 5000
|
localPort = 5000
|
||||||
externalPort = 80
|
externalPort = 80
|
||||||
|
|
||||||
|
[[ports]]
|
||||||
|
localPort = 37531
|
||||||
|
externalPort = 3001
|
||||||
|
|
||||||
[[ports]]
|
[[ports]]
|
||||||
localPort = 43349
|
localPort = 43349
|
||||||
externalPort = 3000
|
externalPort = 3000
|
||||||
|
|||||||
BIN
attached_assets/logo_black_1759162686742.png
Normal file
|
After Width: | Height: | Size: 6.3 KiB |
BIN
attached_assets/logo_black_1759162717640.png
Normal file
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 176 KiB |
|
After Width: | Height: | Size: 176 KiB |
|
After Width: | Height: | Size: 232 KiB |
|
After Width: | Height: | Size: 232 KiB |
|
After Width: | Height: | Size: 278 KiB |
|
After Width: | Height: | Size: 278 KiB |
@ -1,4 +1,4 @@
|
|||||||
import { Button } from "@/components/ui/button";
|
import { Users, Hash, Building } from "lucide-react";
|
||||||
|
|
||||||
interface CategoryTabsProps {
|
interface CategoryTabsProps {
|
||||||
selectedCategory: string;
|
selectedCategory: string;
|
||||||
@ -6,33 +6,36 @@ interface CategoryTabsProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const categories = [
|
const categories = [
|
||||||
{ id: "People", label: "People", icon: "fas fa-users", count: 24 },
|
{ id: "People", label: "People", Icon: Users, count: 36 },
|
||||||
{ id: "Topics", label: "Topics", icon: "fas fa-hashtag", count: 20 },
|
{ id: "Topics", label: "Topics", Icon: Hash, count: 24 },
|
||||||
{ id: "Companies", label: "Companies", icon: "fas fa-building", count: 27 },
|
{ id: "Companies", label: "Companies", Icon: Building, count: 27 },
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function CategoryTabs({ selectedCategory, onCategoryChange }: CategoryTabsProps) {
|
export default function CategoryTabs({ selectedCategory, onCategoryChange }: CategoryTabsProps) {
|
||||||
return (
|
return (
|
||||||
<div className="mb-8">
|
<div className="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 z-40">
|
||||||
<div className="border-b border-border">
|
<div className="max-w-4xl mx-auto px-4">
|
||||||
<nav className="flex space-x-8">
|
<nav className="flex justify-around py-2">
|
||||||
{categories.map((category) => (
|
{categories.map((category) => {
|
||||||
<Button
|
const { Icon } = category;
|
||||||
|
const isSelected = selectedCategory === category.id;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
key={category.id}
|
key={category.id}
|
||||||
variant="ghost"
|
|
||||||
className={`px-6 py-3 font-semibold rounded-t-lg transition-all ${
|
|
||||||
selectedCategory === category.id
|
|
||||||
? "bg-primary text-primary-foreground"
|
|
||||||
: "text-muted-foreground hover:text-foreground"
|
|
||||||
}`}
|
|
||||||
onClick={() => onCategoryChange(category.id)}
|
onClick={() => onCategoryChange(category.id)}
|
||||||
|
className={`flex flex-col items-center py-2 px-4 rounded-lg transition-colors ${
|
||||||
|
isSelected
|
||||||
|
? "text-blue-600 dark:text-blue-400"
|
||||||
|
: "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
|
||||||
|
}`}
|
||||||
data-testid={`tab-${category.id}`}
|
data-testid={`tab-${category.id}`}
|
||||||
>
|
>
|
||||||
<i className={`${category.icon} mr-2`}></i>
|
<Icon className={`h-6 w-6 mb-1 ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`} />
|
||||||
{category.label}
|
<span className="text-xs font-medium">{category.label}</span>
|
||||||
<span className="ml-2 text-sm opacity-75">({category.count})</span>
|
</button>
|
||||||
</Button>
|
);
|
||||||
))}
|
})}
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -6,9 +6,10 @@ import type { MediaOutlet } from "@shared/schema";
|
|||||||
|
|
||||||
interface MediaOutletCardProps {
|
interface MediaOutletCardProps {
|
||||||
outlet: MediaOutlet;
|
outlet: MediaOutlet;
|
||||||
|
viewMode?: "grid" | "list";
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function MediaOutletCard({ outlet }: MediaOutletCardProps) {
|
export default function MediaOutletCard({ outlet, viewMode = "list" }: MediaOutletCardProps) {
|
||||||
const [showProfile, setShowProfile] = useState(false);
|
const [showProfile, setShowProfile] = useState(false);
|
||||||
|
|
||||||
const handleCardClick = () => {
|
const handleCardClick = () => {
|
||||||
@ -21,19 +22,26 @@ export default function MediaOutletCard({ outlet }: MediaOutletCardProps) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const getOutletImage = () => {
|
const getOutletImage = () => {
|
||||||
if (outlet.imageUrl) return outlet.imageUrl;
|
if (outlet.imageUrl) {
|
||||||
|
// Handle @assets/ paths
|
||||||
|
if (outlet.imageUrl.startsWith('@assets/')) {
|
||||||
|
// Convert @assets/ to a proper import path or static asset path
|
||||||
|
return outlet.imageUrl.replace('@assets/', '/attached_assets/');
|
||||||
|
}
|
||||||
|
return outlet.imageUrl;
|
||||||
|
}
|
||||||
|
|
||||||
// Default images based on category
|
// Default images based on category
|
||||||
if (outlet.category === "people") {
|
if (outlet.category === "People") {
|
||||||
return "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&w=64&h=64&fit=crop&crop=face";
|
return "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&w=64&h=64&fit=crop&crop=face";
|
||||||
} else if (outlet.category === "companies") {
|
} else if (outlet.category === "Companies") {
|
||||||
return null; // Use initial letter
|
return null; // Use initial letter
|
||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
|
|
||||||
const getOutletIcon = () => {
|
const getOutletIcon = () => {
|
||||||
if (outlet.category === "topics") {
|
if (outlet.category === "Topics") {
|
||||||
return outlet.name.toLowerCase().includes("crypto") ? "fas fa-coins" :
|
return outlet.name.toLowerCase().includes("crypto") ? "fas fa-coins" :
|
||||||
outlet.name.toLowerCase().includes("ai") ? "fas fa-brain" :
|
outlet.name.toLowerCase().includes("ai") ? "fas fa-brain" :
|
||||||
outlet.name.toLowerCase().includes("federal") ? "fas fa-university" :
|
outlet.name.toLowerCase().includes("federal") ? "fas fa-university" :
|
||||||
@ -45,68 +53,70 @@ export default function MediaOutletCard({ outlet }: MediaOutletCardProps) {
|
|||||||
const getTagColor = () => {
|
const getTagColor = () => {
|
||||||
const tag = outlet.tags?.[0] || outlet.category;
|
const tag = outlet.tags?.[0] || outlet.category;
|
||||||
const colors = {
|
const colors = {
|
||||||
"Tech Leader": "bg-primary/10 text-primary",
|
"Tech Leader": "bg-blue-100 text-blue-800",
|
||||||
"CEO": "bg-accent/80 text-accent-foreground",
|
"CEO": "bg-purple-100 text-purple-800",
|
||||||
"Crypto": "bg-chart-1/20 text-chart-1",
|
"Crypto": "bg-yellow-100 text-yellow-800",
|
||||||
"Politics": "bg-destructive/20 text-destructive",
|
"Politics": "bg-red-100 text-red-800",
|
||||||
"AI": "bg-chart-3/20 text-chart-3",
|
"AI": "bg-green-100 text-green-800",
|
||||||
"Finance": "bg-chart-2/20 text-chart-2",
|
"Finance": "bg-indigo-100 text-indigo-800",
|
||||||
"Blockchain": "bg-chart-4/20 text-chart-4",
|
"Blockchain": "bg-cyan-100 text-cyan-800",
|
||||||
"Economy": "bg-chart-5/20 text-chart-5"
|
"Economy": "bg-orange-100 text-orange-800",
|
||||||
|
"Football": "bg-emerald-100 text-emerald-800"
|
||||||
};
|
};
|
||||||
return colors[tag as keyof typeof colors] || "bg-muted text-muted-foreground";
|
return colors[tag as keyof typeof colors] || "bg-gray-100 text-gray-800";
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Card
|
{/* Clean List Style like screenshots */}
|
||||||
className="card-hover cursor-pointer"
|
<div
|
||||||
|
className="bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700 rounded-lg p-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors"
|
||||||
onClick={handleCardClick}
|
onClick={handleCardClick}
|
||||||
data-testid={`card-outlet-${outlet.slug}`}
|
data-testid={`card-outlet-${outlet.slug}`}
|
||||||
>
|
>
|
||||||
<CardContent className="p-6">
|
<div className="flex items-center space-x-3">
|
||||||
<div className="flex items-start space-x-4">
|
{/* Profile Image */}
|
||||||
{getOutletImage() ? (
|
{getOutletImage() ? (
|
||||||
<img
|
<img
|
||||||
src={getOutletImage()!}
|
src={getOutletImage()!}
|
||||||
alt={outlet.name}
|
alt={outlet.name}
|
||||||
className="w-12 h-12 rounded-full object-cover"
|
className="w-12 h-12 rounded-full object-cover flex-shrink-0"
|
||||||
|
onError={(e) => {
|
||||||
|
console.log('Image failed to load:', getOutletImage());
|
||||||
|
const target = e.target as HTMLImageElement;
|
||||||
|
target.style.display = 'none';
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<div className={`w-12 h-12 ${outlet.category === 'companies' ? 'bg-primary/20' : 'bg-chart-1/20'} rounded-lg flex items-center justify-center`}>
|
<div className={`w-12 h-12 ${outlet.category === 'Companies' ? 'bg-blue-500' : outlet.category === 'Topics' ? 'bg-green-500' : 'bg-purple-500'} rounded-full flex items-center justify-center flex-shrink-0`}>
|
||||||
{outlet.category === 'companies' ? (
|
{outlet.category === 'Companies' ? (
|
||||||
<span className="text-primary font-bold text-lg">
|
<span className="text-white font-bold text-lg">
|
||||||
{outlet.name.charAt(0)}
|
{outlet.name.charAt(0)}
|
||||||
</span>
|
</span>
|
||||||
) : (
|
) : (
|
||||||
<i className={`${getOutletIcon()} text-chart-1 text-xl`}></i>
|
<i className={`${getOutletIcon()} text-white text-lg`}></i>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="flex-1">
|
{/* Content */}
|
||||||
<h3 className="font-semibold text-foreground">{outlet.name}</h3>
|
<div className="flex-1 min-w-0">
|
||||||
<p className="text-sm text-muted-foreground mb-3 line-clamp-2">
|
<h3 className="font-semibold text-gray-900 dark:text-white text-base leading-tight">
|
||||||
|
{outlet.name}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1 line-clamp-1">
|
||||||
{outlet.description}
|
{outlet.description}
|
||||||
</p>
|
</p>
|
||||||
<div className="flex items-center justify-between">
|
</div>
|
||||||
<span className={`text-xs px-2 py-1 rounded-full ${getTagColor()}`}>
|
|
||||||
|
{/* Tag and Info */}
|
||||||
|
<div className="flex items-center space-x-2 flex-shrink-0">
|
||||||
|
<span className={`text-xs px-2 py-1 rounded-full font-medium ${getTagColor()}`}>
|
||||||
{outlet.tags?.[0] || outlet.category}
|
{outlet.tags?.[0] || outlet.category}
|
||||||
</span>
|
</span>
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={handleInfoClick}
|
|
||||||
className="text-muted-foreground hover:text-foreground p-1"
|
|
||||||
data-testid={`button-info-${outlet.slug}`}
|
|
||||||
>
|
|
||||||
<i className="fas fa-info-circle"></i>
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<ProfileModal
|
<ProfileModal
|
||||||
outlet={outlet}
|
outlet={outlet}
|
||||||
|
|||||||
@ -56,7 +56,11 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div>
|
<div>
|
||||||
<div className="font-bold text-lg">SAPIENS</div>
|
<img
|
||||||
|
src="/attached_assets/logo_black_1759162717640.png"
|
||||||
|
alt="SAPIENS"
|
||||||
|
className="h-6 w-auto"
|
||||||
|
/>
|
||||||
<div className="text-xs text-gray-500">{user?.firstName || 'User'}</div>
|
<div className="text-xs text-gray-500">{user?.firstName || 'User'}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -74,90 +78,55 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main className="max-w-7xl mx-auto px-6 py-8">
|
<main className="max-w-4xl mx-auto px-4">
|
||||||
{/* Hero Section */}
|
{/* View Mode Toggle */}
|
||||||
<div className="gradient-bg rounded-2xl p-8 mb-8 text-white">
|
<div className="flex items-center justify-between py-4">
|
||||||
<div className="max-w-3xl">
|
<h1 className="text-xl font-semibold text-gray-900 dark:text-white">Latest Articles</h1>
|
||||||
<h1 className="text-4xl font-bold mb-4">Media Intelligence & Prediction Markets</h1>
|
<div className="flex items-center space-x-2">
|
||||||
<p className="text-xl opacity-90 mb-6">Access premium media outlets across People, Topics, and Companies. Participate in prediction markets and bid for exclusive editorial rights.</p>
|
|
||||||
<div className="flex space-x-4">
|
|
||||||
<Button className="bg-white text-primary hover:bg-opacity-90" data-testid="button-explore">
|
|
||||||
Explore Media Outlets
|
|
||||||
</Button>
|
|
||||||
<Link href="/auctions">
|
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant={viewMode === "grid" ? "default" : "ghost"}
|
||||||
className="border-white text-white hover:bg-white hover:text-primary"
|
size="sm"
|
||||||
data-testid="button-auctions"
|
onClick={() => setViewMode("grid")}
|
||||||
>
|
>
|
||||||
View Active Auctions
|
<Grid className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant={viewMode === "list" ? "default" : "ghost"}
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setViewMode("list")}
|
||||||
|
>
|
||||||
|
<List className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Category Tabs */}
|
{/* Media Outlets List */}
|
||||||
|
<div className="space-y-3 pb-20">
|
||||||
|
{outletsLoading ? (
|
||||||
|
Array.from({ length: 6 }).map((_, i) => (
|
||||||
|
<div key={i} className="bg-white dark:bg-gray-800 rounded-lg p-4 animate-pulse">
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="w-12 h-12 bg-gray-200 dark:bg-gray-700 rounded-full"></div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded mb-2"></div>
|
||||||
|
<div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-2/3"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
mediaOutlets.map((outlet) => (
|
||||||
|
<MediaOutletCard key={outlet.id} outlet={outlet} viewMode={viewMode} />
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{/* Bottom Navigation */}
|
||||||
<CategoryTabs
|
<CategoryTabs
|
||||||
selectedCategory={selectedCategory}
|
selectedCategory={selectedCategory}
|
||||||
onCategoryChange={setSelectedCategory}
|
onCategoryChange={setSelectedCategory}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Media Outlets Grid */}
|
|
||||||
<div className="mb-12">
|
|
||||||
{outletsLoading ? (
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
|
||||||
{Array.from({ length: 8 }).map((_, i) => (
|
|
||||||
<div key={i} className="bg-card border border-border rounded-xl p-6 animate-pulse">
|
|
||||||
<div className="h-12 bg-muted rounded mb-4"></div>
|
|
||||||
<div className="h-4 bg-muted rounded mb-2"></div>
|
|
||||||
<div className="h-4 bg-muted rounded w-2/3"></div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
|
||||||
{mediaOutlets.map((outlet) => (
|
|
||||||
<MediaOutletCard key={outlet.id} outlet={outlet} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Current Auctions Section */}
|
|
||||||
<div className="mt-12">
|
|
||||||
<div className="flex items-center justify-between mb-6">
|
|
||||||
<h2 className="text-2xl font-bold">Active Media Outlet Auctions</h2>
|
|
||||||
<Link href="/auctions">
|
|
||||||
<Button variant="ghost" className="text-primary hover:text-primary/80 font-semibold">
|
|
||||||
View All Auctions
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{auctionsLoading ? (
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
||||||
{Array.from({ length: 2 }).map((_, i) => (
|
|
||||||
<div key={i} className="bg-card border border-border rounded-xl p-6 animate-pulse">
|
|
||||||
<div className="h-6 bg-muted rounded mb-4"></div>
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="h-4 bg-muted rounded"></div>
|
|
||||||
<div className="h-4 bg-muted rounded"></div>
|
|
||||||
<div className="h-4 bg-muted rounded"></div>
|
|
||||||
</div>
|
|
||||||
<div className="h-10 bg-muted rounded mt-4"></div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
||||||
{auctions.slice(0, 2).map((auction) => (
|
|
||||||
<AuctionCard key={auction.id} auction={auction} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,12 +4,13 @@ import { Input } from "@/components/ui/input";
|
|||||||
import { Card, CardContent } from "@/components/ui/card";
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||||
import { useToast } from "@/hooks/use-toast";
|
import { useToast } from "@/hooks/use-toast";
|
||||||
import { apiRequest } from "@/lib/queryClient";
|
import { apiRequest, queryClient } from "@/lib/queryClient";
|
||||||
import { useMutation } from "@tanstack/react-query";
|
import { useMutation } from "@tanstack/react-query";
|
||||||
|
|
||||||
export default function Landing() {
|
export default function Landing() {
|
||||||
const [showLoginModal, setShowLoginModal] = useState(false);
|
const [showLoginModal, setShowLoginModal] = useState(false);
|
||||||
const [showRequestModal, setShowRequestModal] = useState(false);
|
const [showRequestModal, setShowRequestModal] = useState(false);
|
||||||
|
const [loginForm, setLoginForm] = useState({ username: "", password: "" });
|
||||||
const [requestForm, setRequestForm] = useState({
|
const [requestForm, setRequestForm] = useState({
|
||||||
name: "",
|
name: "",
|
||||||
category: "people",
|
category: "people",
|
||||||
@ -17,6 +18,31 @@ export default function Landing() {
|
|||||||
});
|
});
|
||||||
const { toast } = useToast();
|
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({
|
const requestMutation = useMutation({
|
||||||
mutationFn: async (data: typeof requestForm) => {
|
mutationFn: async (data: typeof requestForm) => {
|
||||||
await apiRequest("POST", "/api/media-outlet-requests", data);
|
await apiRequest("POST", "/api/media-outlet-requests", data);
|
||||||
@ -39,7 +65,12 @@ export default function Landing() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const handleLogin = () => {
|
const handleLogin = () => {
|
||||||
window.location.href = "/api/login";
|
setShowLoginModal(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleLoginSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
loginMutation.mutate(loginForm);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleRequestSubmit = (e: React.FormEvent) => {
|
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="max-w-7xl mx-auto px-6 py-4">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div className="flex items-center space-x-3">
|
<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">
|
<img
|
||||||
S
|
src="/attached_assets/logo_black_1759162717640.png"
|
||||||
</div>
|
alt="SAPIENS"
|
||||||
<span className="text-2xl font-bold tracking-tight">SAPIENS</span>
|
className="h-8 w-auto"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center space-x-4">
|
<div className="flex items-center space-x-4">
|
||||||
@ -158,6 +190,62 @@ export default function Landing() {
|
|||||||
</div>
|
</div>
|
||||||
</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 */}
|
{/* Request Modal */}
|
||||||
<Dialog open={showRequestModal} onOpenChange={setShowRequestModal}>
|
<Dialog open={showRequestModal} onOpenChange={setShowRequestModal}>
|
||||||
<DialogContent data-testid="modal-request">
|
<DialogContent data-testid="modal-request">
|
||||||
|
|||||||
@ -39,6 +39,9 @@ app.use((req, res, next) => {
|
|||||||
(async () => {
|
(async () => {
|
||||||
const server = await registerRoutes(app);
|
const server = await registerRoutes(app);
|
||||||
|
|
||||||
|
// Serve attached assets statically
|
||||||
|
app.use('/attached_assets', express.static('attached_assets'));
|
||||||
|
|
||||||
app.use((err: any, _req: Request, res: Response, _next: NextFunction) => {
|
app.use((err: any, _req: Request, res: Response, _next: NextFunction) => {
|
||||||
const status = err.status || err.statusCode || 500;
|
const status = err.status || err.statusCode || 500;
|
||||||
const message = err.message || "Internal Server Error";
|
const message = err.message || "Internal Server Error";
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import type { Express } from "express";
|
import type { Express } from "express";
|
||||||
import { createServer, type Server } from "http";
|
import { createServer, type Server } from "http";
|
||||||
import { storage } from "./storage";
|
import { storage } from "./storage";
|
||||||
import { setupAuth, isAuthenticated } from "./replitAuth";
|
import { setupAuth, isAuthenticated } from "./simpleAuth";
|
||||||
import { insertArticleSchema, insertMediaOutletRequestSchema, insertBidSchema, insertCommentSchema } from "@shared/schema";
|
import { insertArticleSchema, insertMediaOutletRequestSchema, insertBidSchema, insertCommentSchema } from "@shared/schema";
|
||||||
|
|
||||||
export async function registerRoutes(app: Express): Promise<Server> {
|
export async function registerRoutes(app: Express): Promise<Server> {
|
||||||
@ -11,8 +11,7 @@ export async function registerRoutes(app: Express): Promise<Server> {
|
|||||||
// Auth routes
|
// Auth routes
|
||||||
app.get('/api/auth/user', isAuthenticated, async (req: any, res) => {
|
app.get('/api/auth/user', isAuthenticated, async (req: any, res) => {
|
||||||
try {
|
try {
|
||||||
const userId = req.user.claims.sub;
|
const user = req.user;
|
||||||
const user = await storage.getUser(userId);
|
|
||||||
res.json(user);
|
res.json(user);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error fetching user:", error);
|
console.error("Error fetching user:", error);
|
||||||
@ -82,8 +81,7 @@ export async function registerRoutes(app: Express): Promise<Server> {
|
|||||||
|
|
||||||
app.post('/api/articles', isAuthenticated, async (req: any, res) => {
|
app.post('/api/articles', isAuthenticated, async (req: any, res) => {
|
||||||
try {
|
try {
|
||||||
const userId = req.user.claims.sub;
|
const user = req.user;
|
||||||
const user = await storage.getUser(userId);
|
|
||||||
|
|
||||||
if (!user || (user.role !== 'admin' && user.role !== 'superadmin')) {
|
if (!user || (user.role !== 'admin' && user.role !== 'superadmin')) {
|
||||||
return res.status(403).json({ message: "Insufficient permissions" });
|
return res.status(403).json({ message: "Insufficient permissions" });
|
||||||
@ -91,7 +89,7 @@ export async function registerRoutes(app: Express): Promise<Server> {
|
|||||||
|
|
||||||
const articleData = insertArticleSchema.parse({
|
const articleData = insertArticleSchema.parse({
|
||||||
...req.body,
|
...req.body,
|
||||||
authorId: userId
|
authorId: user.id
|
||||||
});
|
});
|
||||||
|
|
||||||
const article = await storage.createArticle(articleData);
|
const article = await storage.createArticle(articleData);
|
||||||
|
|||||||
89
server/simpleAuth.ts
Normal file
@ -0,0 +1,89 @@
|
|||||||
|
import type { Express, RequestHandler } from "express";
|
||||||
|
import session from "express-session";
|
||||||
|
import connectPg from "connect-pg-simple";
|
||||||
|
|
||||||
|
// Hardcoded credentials
|
||||||
|
const CREDENTIALS = {
|
||||||
|
admin: { password: "1234", role: "admin", firstName: "Admin", lastName: "User" },
|
||||||
|
superadmin: { password: "1234", role: "superadmin", firstName: "Super", lastName: "Admin" }
|
||||||
|
};
|
||||||
|
|
||||||
|
export function getSession() {
|
||||||
|
const sessionTtl = 7 * 24 * 60 * 60 * 1000; // 1 week
|
||||||
|
const pgStore = connectPg(session);
|
||||||
|
const sessionStore = new pgStore({
|
||||||
|
conString: process.env.DATABASE_URL,
|
||||||
|
createTableIfMissing: false,
|
||||||
|
ttl: sessionTtl,
|
||||||
|
tableName: "sessions",
|
||||||
|
});
|
||||||
|
return session({
|
||||||
|
secret: process.env.SESSION_SECRET!,
|
||||||
|
store: sessionStore,
|
||||||
|
resave: false,
|
||||||
|
saveUninitialized: false,
|
||||||
|
cookie: {
|
||||||
|
httpOnly: true,
|
||||||
|
secure: false, // Changed to false for development
|
||||||
|
maxAge: sessionTtl,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function setupAuth(app: Express) {
|
||||||
|
app.set("trust proxy", 1);
|
||||||
|
app.use(getSession());
|
||||||
|
|
||||||
|
// Login route
|
||||||
|
app.post("/api/login", (req, res) => {
|
||||||
|
const { username, password } = req.body;
|
||||||
|
|
||||||
|
if (!username || !password) {
|
||||||
|
return res.status(400).json({ message: "Username and password required" });
|
||||||
|
}
|
||||||
|
|
||||||
|
const user = CREDENTIALS[username as keyof typeof CREDENTIALS];
|
||||||
|
if (!user || user.password !== password) {
|
||||||
|
return res.status(401).json({ message: "Invalid credentials" });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set session
|
||||||
|
(req.session as any).user = {
|
||||||
|
id: username,
|
||||||
|
email: `${username}@sapiens.com`,
|
||||||
|
firstName: user.firstName,
|
||||||
|
lastName: user.lastName,
|
||||||
|
role: user.role,
|
||||||
|
isAuthenticated: true
|
||||||
|
};
|
||||||
|
|
||||||
|
res.json({
|
||||||
|
id: username,
|
||||||
|
email: `${username}@sapiens.com`,
|
||||||
|
firstName: user.firstName,
|
||||||
|
lastName: user.lastName,
|
||||||
|
role: user.role
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Logout route
|
||||||
|
app.post("/api/logout", (req, res) => {
|
||||||
|
req.session.destroy((err) => {
|
||||||
|
if (err) {
|
||||||
|
return res.status(500).json({ message: "Could not log out" });
|
||||||
|
}
|
||||||
|
res.json({ message: "Logged out successfully" });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export const isAuthenticated: RequestHandler = (req, res, next) => {
|
||||||
|
const user = (req.session as any)?.user;
|
||||||
|
|
||||||
|
if (!user || !user.isAuthenticated) {
|
||||||
|
return res.status(401).json({ message: "Unauthorized" });
|
||||||
|
}
|
||||||
|
|
||||||
|
req.user = user;
|
||||||
|
next();
|
||||||
|
};
|
||||||