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
@ -56,7 +56,11 @@ export default function Home() {
|
||||
</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>
|
||||
</div>
|
||||
@ -74,90 +78,55 @@ export default function Home() {
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-7xl mx-auto px-6 py-8">
|
||||
{/* Hero Section */}
|
||||
<div className="gradient-bg rounded-2xl p-8 mb-8 text-white">
|
||||
<div className="max-w-3xl">
|
||||
<h1 className="text-4xl font-bold mb-4">Media Intelligence & Prediction Markets</h1>
|
||||
<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
|
||||
variant="outline"
|
||||
className="border-white text-white hover:bg-white hover:text-primary"
|
||||
data-testid="button-auctions"
|
||||
>
|
||||
View Active Auctions
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<main className="max-w-4xl mx-auto px-4">
|
||||
{/* View Mode Toggle */}
|
||||
<div className="flex items-center justify-between py-4">
|
||||
<h1 className="text-xl font-semibold text-gray-900 dark:text-white">Latest Articles</h1>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant={viewMode === "grid" ? "default" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setViewMode("grid")}
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Category Tabs */}
|
||||
<CategoryTabs
|
||||
selectedCategory={selectedCategory}
|
||||
onCategoryChange={setSelectedCategory}
|
||||
/>
|
||||
|
||||
{/* Media Outlets Grid */}
|
||||
<div className="mb-12">
|
||||
{/* Media Outlets List */}
|
||||
<div className="space-y-3 pb-20">
|
||||
{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>
|
||||
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 className="h-10 bg-muted rounded mt-4"></div>
|
||||
</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>
|
||||
mediaOutlets.map((outlet) => (
|
||||
<MediaOutletCard key={outlet.id} outlet={outlet} viewMode={viewMode} />
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Bottom Navigation */}
|
||||
<CategoryTabs
|
||||
selectedCategory={selectedCategory}
|
||||
onCategoryChange={setSelectedCategory}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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">
|
||||
|
||||
Reference in New Issue
Block a user