feat(public_page): allow unauthenticated browsing with auth-gated interactivity
- Add get_optional_user dependency; dashboard returns guest-safe payload - AuthGuard only redirects /following and /notifications for guests - Sidebar hides auth-required nav items and shows Sign In/Register for guests - Dashboard shows trending bills as "Most Popular" for unauthenticated visitors - FollowButton opens AuthModal instead of acting when not signed in - Members page pins followed members at the top for quick unfollowing - useFollows skips API call and invalidates dashboard on follow/unfollow Authored-By: Jack Levy
This commit is contained in:
Jack Levy
@@ -6,7 +6,8 @@ import { useAuthStore } from "@/stores/authStore";
|
||||
import { Sidebar } from "./Sidebar";
|
||||
import { MobileHeader } from "./MobileHeader";
|
||||
|
||||
const PUBLIC_PATHS = ["/login", "/register"];
|
||||
const NO_SHELL_PATHS = ["/login", "/register"];
|
||||
const AUTH_REQUIRED = ["/following", "/notifications"];
|
||||
|
||||
export function AuthGuard({ children }: { children: React.ReactNode }) {
|
||||
const router = useRouter();
|
||||
@@ -22,22 +23,24 @@ export function AuthGuard({ children }: { children: React.ReactNode }) {
|
||||
|
||||
useEffect(() => {
|
||||
if (!hydrated) return;
|
||||
if (!token && !PUBLIC_PATHS.includes(pathname)) {
|
||||
const needsAuth = AUTH_REQUIRED.some((p) => pathname.startsWith(p));
|
||||
if (!token && needsAuth) {
|
||||
router.replace("/login");
|
||||
}
|
||||
}, [hydrated, token, pathname, router]);
|
||||
|
||||
if (!hydrated) return null;
|
||||
|
||||
// Public pages (login/register) render without the app shell
|
||||
if (PUBLIC_PATHS.includes(pathname)) {
|
||||
// Login/register pages render without the app shell
|
||||
if (NO_SHELL_PATHS.includes(pathname)) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
// Not logged in yet — blank while redirecting
|
||||
if (!token) return null;
|
||||
// Auth-required pages: blank while redirecting
|
||||
const needsAuth = AUTH_REQUIRED.some((p) => pathname.startsWith(p));
|
||||
if (!token && needsAuth) return null;
|
||||
|
||||
// Authenticated: render the full app shell
|
||||
// Authenticated or guest browsing: render the full app shell
|
||||
return (
|
||||
<div className="flex h-screen bg-background">
|
||||
{/* Desktop sidebar — hidden on mobile */}
|
||||
|
||||
39
frontend/components/shared/AuthModal.tsx
Normal file
39
frontend/components/shared/AuthModal.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import * as Dialog from "@radix-ui/react-dialog";
|
||||
import { X } from "lucide-react";
|
||||
|
||||
interface AuthModalProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function AuthModal({ open, onClose }: AuthModalProps) {
|
||||
return (
|
||||
<Dialog.Root open={open} onOpenChange={onClose}>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
|
||||
<Dialog.Content className="fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 w-full max-w-sm bg-card border border-border rounded-lg shadow-lg p-6 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95">
|
||||
<Dialog.Title className="text-base font-semibold">
|
||||
Sign in to follow bills
|
||||
</Dialog.Title>
|
||||
<Dialog.Description className="mt-2 text-sm text-muted-foreground">
|
||||
Create a free account to follow bills, set Pocket Veto or Pocket Boost modes, and receive alerts.
|
||||
</Dialog.Description>
|
||||
<div className="flex gap-3 mt-4">
|
||||
<Link href="/register" onClick={onClose} className="flex-1 px-4 py-2 text-sm font-medium text-center rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors">
|
||||
Create account
|
||||
</Link>
|
||||
<Link href="/login" onClick={onClose} className="flex-1 px-4 py-2 text-sm font-medium text-center rounded-md border border-border text-foreground hover:bg-accent transition-colors">
|
||||
Sign in
|
||||
</Link>
|
||||
</div>
|
||||
<Dialog.Close className="absolute right-4 top-4 p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors">
|
||||
<X className="w-4 h-4" />
|
||||
</Dialog.Close>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
@@ -3,6 +3,8 @@
|
||||
import { useRef, useEffect, useState } from "react";
|
||||
import { Heart, Shield, Zap, ChevronDown } from "lucide-react";
|
||||
import { useAddFollow, useIsFollowing, useRemoveFollow, useUpdateFollowMode } from "@/lib/hooks/useFollows";
|
||||
import { useAuthStore } from "@/stores/authStore";
|
||||
import { AuthModal } from "./AuthModal";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const MODES = {
|
||||
@@ -37,9 +39,16 @@ export function FollowButton({ type, value, label, supportsModes = false }: Foll
|
||||
const add = useAddFollow();
|
||||
const remove = useRemoveFollow();
|
||||
const updateMode = useUpdateFollowMode();
|
||||
const token = useAuthStore((s) => s.token);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [showAuthModal, setShowAuthModal] = useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
function requireAuth(action: () => void) {
|
||||
if (!token) { setShowAuthModal(true); return; }
|
||||
action();
|
||||
}
|
||||
|
||||
const isFollowing = !!existing;
|
||||
const currentMode: FollowMode = (existing?.follow_mode as FollowMode) ?? "neutral";
|
||||
const isPending = add.isPending || remove.isPending || updateMode.isPending;
|
||||
@@ -59,40 +68,48 @@ export function FollowButton({ type, value, label, supportsModes = false }: Foll
|
||||
// Simple toggle for non-bill follows
|
||||
if (!supportsModes) {
|
||||
const handleClick = () => {
|
||||
if (isFollowing && existing) {
|
||||
remove.mutate(existing.id);
|
||||
} else {
|
||||
add.mutate({ type, value });
|
||||
}
|
||||
requireAuth(() => {
|
||||
if (isFollowing && existing) {
|
||||
remove.mutate(existing.id);
|
||||
} else {
|
||||
add.mutate({ type, value });
|
||||
}
|
||||
});
|
||||
};
|
||||
return (
|
||||
<button
|
||||
onClick={handleClick}
|
||||
disabled={isPending}
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
|
||||
isFollowing
|
||||
? "bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-900/30 dark:text-red-400"
|
||||
: "bg-muted text-muted-foreground hover:bg-accent hover:text-foreground"
|
||||
)}
|
||||
>
|
||||
<Heart className={cn("w-3.5 h-3.5", isFollowing && "fill-current")} />
|
||||
{isFollowing ? "Unfollow" : label || "Follow"}
|
||||
</button>
|
||||
<>
|
||||
<button
|
||||
onClick={handleClick}
|
||||
disabled={isPending}
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
|
||||
isFollowing
|
||||
? "bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-900/30 dark:text-red-400"
|
||||
: "bg-muted text-muted-foreground hover:bg-accent hover:text-foreground"
|
||||
)}
|
||||
>
|
||||
<Heart className={cn("w-3.5 h-3.5", isFollowing && "fill-current")} />
|
||||
{isFollowing ? "Unfollow" : label || "Follow"}
|
||||
</button>
|
||||
<AuthModal open={showAuthModal} onClose={() => setShowAuthModal(false)} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// Mode-aware follow button for bills
|
||||
if (!isFollowing) {
|
||||
return (
|
||||
<button
|
||||
onClick={() => add.mutate({ type, value })}
|
||||
disabled={isPending}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors bg-muted text-muted-foreground hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
<Heart className="w-3.5 h-3.5" />
|
||||
{label || "Follow"}
|
||||
</button>
|
||||
<>
|
||||
<button
|
||||
onClick={() => requireAuth(() => add.mutate({ type, value }))}
|
||||
disabled={isPending}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors bg-muted text-muted-foreground hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
<Heart className="w-3.5 h-3.5" />
|
||||
{label || "Follow"}
|
||||
</button>
|
||||
<AuthModal open={showAuthModal} onClose={() => setShowAuthModal(false)} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -100,13 +117,17 @@ export function FollowButton({ type, value, label, supportsModes = false }: Foll
|
||||
const otherModes = (Object.keys(MODES) as FollowMode[]).filter((m) => m !== currentMode);
|
||||
|
||||
const switchMode = (mode: FollowMode) => {
|
||||
if (existing) updateMode.mutate({ id: existing.id, mode });
|
||||
setOpen(false);
|
||||
requireAuth(() => {
|
||||
if (existing) updateMode.mutate({ id: existing.id, mode });
|
||||
setOpen(false);
|
||||
});
|
||||
};
|
||||
|
||||
const handleUnfollow = () => {
|
||||
if (existing) remove.mutate(existing.id);
|
||||
setOpen(false);
|
||||
requireAuth(() => {
|
||||
if (existing) remove.mutate(existing.id);
|
||||
setOpen(false);
|
||||
});
|
||||
};
|
||||
|
||||
const modeDescriptions: Record<FollowMode, string> = {
|
||||
@@ -116,49 +137,52 @@ export function FollowButton({ type, value, label, supportsModes = false }: Foll
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
<button
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
disabled={isPending}
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
|
||||
color
|
||||
)}
|
||||
>
|
||||
<ModeIcon className={cn("w-3.5 h-3.5", currentMode === "neutral" && "fill-current")} />
|
||||
{modeLabel}
|
||||
<ChevronDown className="w-3 h-3 ml-0.5 opacity-70" />
|
||||
</button>
|
||||
<>
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
<button
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
disabled={isPending}
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
|
||||
color
|
||||
)}
|
||||
>
|
||||
<ModeIcon className={cn("w-3.5 h-3.5", currentMode === "neutral" && "fill-current")} />
|
||||
{modeLabel}
|
||||
<ChevronDown className="w-3 h-3 ml-0.5 opacity-70" />
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="absolute right-0 mt-1 w-64 bg-popover border border-border rounded-md shadow-lg z-50 py-1">
|
||||
{otherModes.map((mode) => {
|
||||
const { label: optLabel, icon: OptIcon } = MODES[mode];
|
||||
return (
|
||||
{open && (
|
||||
<div className="absolute right-0 mt-1 w-64 bg-popover border border-border rounded-md shadow-lg z-50 py-1">
|
||||
{otherModes.map((mode) => {
|
||||
const { label: optLabel, icon: OptIcon } = MODES[mode];
|
||||
return (
|
||||
<button
|
||||
key={mode}
|
||||
onClick={() => switchMode(mode)}
|
||||
title={modeDescriptions[mode]}
|
||||
className="w-full text-left px-3 py-2 text-sm hover:bg-accent transition-colors flex flex-col gap-0.5"
|
||||
>
|
||||
<span className="flex items-center gap-1.5 font-medium">
|
||||
<OptIcon className="w-3.5 h-3.5" />
|
||||
Switch to {optLabel}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground pl-5">{modeDescriptions[mode]}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
<div className="border-t border-border mt-1 pt-1">
|
||||
<button
|
||||
key={mode}
|
||||
onClick={() => switchMode(mode)}
|
||||
title={modeDescriptions[mode]}
|
||||
className="w-full text-left px-3 py-2 text-sm hover:bg-accent transition-colors flex flex-col gap-0.5"
|
||||
onClick={handleUnfollow}
|
||||
className="w-full text-left px-3 py-2 text-sm text-destructive hover:bg-accent transition-colors"
|
||||
>
|
||||
<span className="flex items-center gap-1.5 font-medium">
|
||||
<OptIcon className="w-3.5 h-3.5" />
|
||||
Switch to {optLabel}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground pl-5">{modeDescriptions[mode]}</span>
|
||||
Unfollow
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
<div className="border-t border-border mt-1 pt-1">
|
||||
<button
|
||||
onClick={handleUnfollow}
|
||||
className="w-full text-left px-3 py-2 text-sm text-destructive hover:bg-accent transition-colors"
|
||||
>
|
||||
Unfollow
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<AuthModal open={showAuthModal} onClose={() => setShowAuthModal(false)} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -20,13 +20,13 @@ import { ThemeToggle } from "./ThemeToggle";
|
||||
import { useAuthStore } from "@/stores/authStore";
|
||||
|
||||
const NAV = [
|
||||
{ href: "/", label: "Dashboard", icon: LayoutDashboard, adminOnly: false },
|
||||
{ href: "/bills", label: "Bills", icon: FileText, adminOnly: false },
|
||||
{ href: "/members", label: "Members", icon: Users, adminOnly: false },
|
||||
{ href: "/topics", label: "Topics", icon: Tags, adminOnly: false },
|
||||
{ href: "/following", label: "Following", icon: Heart, adminOnly: false },
|
||||
{ href: "/notifications", label: "Notifications", icon: Bell, adminOnly: false },
|
||||
{ href: "/settings", label: "Admin", icon: Settings, adminOnly: true },
|
||||
{ href: "/", label: "Dashboard", icon: LayoutDashboard, adminOnly: false, requiresAuth: false },
|
||||
{ href: "/bills", label: "Bills", icon: FileText, adminOnly: false, requiresAuth: false },
|
||||
{ href: "/members", label: "Members", icon: Users, adminOnly: false, requiresAuth: false },
|
||||
{ href: "/topics", label: "Topics", icon: Tags, adminOnly: false, requiresAuth: false },
|
||||
{ href: "/following", label: "Following", icon: Heart, adminOnly: false, requiresAuth: true },
|
||||
{ href: "/notifications", label: "Notifications", icon: Bell, adminOnly: false, requiresAuth: true },
|
||||
{ href: "/settings", label: "Admin", icon: Settings, adminOnly: true, requiresAuth: false },
|
||||
];
|
||||
|
||||
export function Sidebar({ onClose }: { onClose?: () => void }) {
|
||||
@@ -34,6 +34,7 @@ export function Sidebar({ onClose }: { onClose?: () => void }) {
|
||||
const router = useRouter();
|
||||
const qc = useQueryClient();
|
||||
const user = useAuthStore((s) => s.user);
|
||||
const token = useAuthStore((s) => s.token);
|
||||
const logout = useAuthStore((s) => s.logout);
|
||||
|
||||
function handleLogout() {
|
||||
@@ -55,7 +56,11 @@ export function Sidebar({ onClose }: { onClose?: () => void }) {
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 p-3 space-y-1">
|
||||
{NAV.filter(({ adminOnly }) => !adminOnly || user?.is_admin).map(({ href, label, icon: Icon }) => {
|
||||
{NAV.filter(({ adminOnly, requiresAuth }) => {
|
||||
if (adminOnly && !user?.is_admin) return false;
|
||||
if (requiresAuth && !token) return false;
|
||||
return true;
|
||||
}).map(({ href, label, icon: Icon }) => {
|
||||
const active = href === "/" ? pathname === "/" : pathname.startsWith(href);
|
||||
return (
|
||||
<Link
|
||||
@@ -77,18 +82,31 @@ export function Sidebar({ onClose }: { onClose?: () => void }) {
|
||||
</nav>
|
||||
|
||||
<div className="p-3 border-t border-border space-y-2">
|
||||
{user && (
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs text-muted-foreground truncate max-w-[120px]" title={user.email}>
|
||||
{user.email}
|
||||
</span>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent"
|
||||
title="Sign out"
|
||||
>
|
||||
<LogOut className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
{token ? (
|
||||
<>
|
||||
{user && (
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs text-muted-foreground truncate max-w-[120px]" title={user.email}>
|
||||
{user.email}
|
||||
</span>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent"
|
||||
title="Sign out"
|
||||
>
|
||||
<LogOut className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
<Link href="/register" onClick={onClose} className="w-full px-3 py-1.5 text-sm font-medium text-center rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors">
|
||||
Register
|
||||
</Link>
|
||||
<Link href="/login" onClick={onClose} className="w-full px-3 py-1.5 text-sm font-medium text-center rounded-md border border-border text-foreground hover:bg-accent transition-colors">
|
||||
Sign in
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center justify-between">
|
||||
|
||||
Reference in New Issue
Block a user