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
This commit is contained in:
kimjaehyeon0101
2025-09-29 16:29:07 +00:00
parent 9633469631
commit d8491366cf
16 changed files with 331 additions and 167 deletions

View File

@ -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

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 176 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 176 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 232 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 232 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 278 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 278 KiB

View File

@ -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>

View File

@ -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}

View File

@ -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>
); );
} }

View File

@ -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">

View File

@ -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";

View File

@ -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
View 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();
};