Add an 18+ entry screen before the app renders

A homescreen-style age gate shown before auth or any route: J621 brand
mark, the explicit 18+ check, an Enter action remembered per browser in
localStorage (j621.age-verified), and a blocked state if the visitor
chooses Leave.
This commit is contained in:
2026-09-17 13:47:51 -05:00
parent 09405d1a0f
commit a0d36911e7
4 changed files with 109 additions and 1 deletions
+15 -1
View File
@@ -1,4 +1,4 @@
import { useEffect, type ReactNode } from "react";
import { useEffect, useState, type ReactNode } from "react";
import {
Navigate,
Route,
@@ -10,6 +10,7 @@ import {
import { AppShell } from "@/components/AppShell";
import { FullPageSpinner } from "@/components/ui";
import AccountPage from "@/features/account/AccountPage";
import { AgeGate } from "@/features/age/AgeGate";
import LoginPage from "@/features/auth/LoginPage";
import RegisterPage from "@/features/auth/RegisterPage";
import DetailPage from "@/features/detail/DetailPage";
@@ -20,6 +21,7 @@ import Md5Redirect from "@/features/library/Md5Redirect";
import OnlinePage from "@/features/online/OnlinePage";
import UploadPage from "@/features/upload/UploadPage";
import UsersPage from "@/features/users/UsersPage";
import { isAgeVerified, markAgeVerified } from "@/lib/age";
import { useAuth } from "@/store/auth";
function RequireAuth({ children }: { children: ReactNode }) {
@@ -39,11 +41,23 @@ function PostRedirect() {
export default function App() {
const ready = useAuth((state) => state.ready);
const loadUser = useAuth((state) => state.loadUser);
const [ageVerified, setAgeVerified] = useState(isAgeVerified);
useEffect(() => {
void loadUser();
}, [loadUser]);
if (!ageVerified) {
return (
<AgeGate
onEnter={() => {
markAgeVerified();
setAgeVerified(true);
}}
/>
);
}
if (!ready) {
return <FullPageSpinner />;
}