Make confirm popup for adult consent (#2419)

* Make confirm popup for adult consent * Fix import * Fix blur and adjust user settings * Make confirmation popup more stylish * Add setting to site settings form * Fix modal bug * Put adult consent logic all in one place * Make modal use markdown * Fix consent modal showing up for currently logged in admin * Add go-back redirect countdown * Center modal title * Handle enable_nsfw correctly * Blur background of modal to hide spicy things * Add translations
LemmyNet · Apr 18, 2024 · 643c1f6 · 643c1f6
1 parent c1fbba2
commit 643c1f6
Show file tree

Hide file tree

Showing 19 changed files with 295 additions and 75 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -49,6 +49,7 @@
     "prettier/prettier": "error",
     "quote-props": 0,
     "unicorn/filename-case": 0,
-    "jsx-a11y/media-has-caption": 0
+    "jsx-a11y/media-has-caption": 0,
+    "jsx-a11y/label-has-associated-control": 0
   }
 }
diff --git a/lemmy-translations b/lemmy-translations
diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "classnames": "^2.5.1",
     "clean-webpack-plugin": "^4.0.0",
     "cookie": "^0.6.0",
+    "cookie-parser": "^1.4.6",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^6.10.0",
     "date-fns": "^3.6.0",
@@ -94,6 +95,7 @@
     "@types/autosize": "^4.0.3",
     "@types/bootstrap": "^5.2.10",
     "@types/cookie": "^0.6.0",
+    "@types/cookie-parser": "^1.4.7",
     "@types/express": "^4.17.21",
     "@types/html-to-text": "^9.0.4",
     "@types/lodash.isequal": "^4.5.8",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/assets/symbols.svg b/src/assets/symbols.svg
diff --git a/src/client/index.tsx b/src/client/index.tsx
@@ -1,7 +1,7 @@
 import { initializeSite } from "@utils/app";
 import { hydrate } from "inferno-hydrate";
 import { BrowserRouter } from "inferno-router";
-import { App } from "../shared/components/app/app";
+import App from "../shared/components/app/app";
 import { lazyHighlightjs } from "../shared/lazy-highlightjs";
 import { loadUserLanguage } from "../shared/services/I18NextService";
 import { verifyDynamicImports } from "../shared/dynamic-imports";

diff --git a/src/server/handlers/catch-all-handler.tsx b/src/server/handlers/catch-all-handler.tsx
@@ -6,7 +6,7 @@ import { StaticRouter, matchPath } from "inferno-router";
 import { Match } from "inferno-router/dist/Route";
 import { renderToString } from "inferno-server";
 import { GetSiteResponse, LemmyHttp } from "lemmy-js-client";
-import { App } from "../../shared/components/app/app";
+import App from "../../shared/components/app/app";
 import {
   InitialFetchRequest,
   IsoDataOptionalSite,
@@ -28,6 +28,7 @@ import {
 } from "../../shared/services/";
 import { parsePath } from "history";
 import { getQueryString } from "@utils/helpers";
+import { adultConsentCookieKey } from "../../shared/config";
 
 export default async (req: Request, res: Response) => {
   try {
@@ -142,6 +143,9 @@ export default async (req: Request, res: Response) => {
       site_res: site,
       routeData,
       errorPageData,
+      showAdultConsentModal:
+        !!site?.site_view.site.content_warning &&
+        !(site.my_user || req.cookies[adultConsentCookieKey]),
     };
 
     const wrapper = (

diff --git a/src/server/index.tsx b/src/server/index.tsx
@@ -14,8 +14,10 @@ import ThemesListHandler from "./handlers/themes-list-handler";
 import { setCacheControl, setDefaultCsp } from "./middleware";
 import CodeThemeHandler from "./handlers/code-theme-handler";
 import { verifyDynamicImports } from "../shared/dynamic-imports";
+import cookieParser from "cookie-parser";
 
 const server = express();
+server.use(cookieParser());
 
 const [hostname, port] = process.env["LEMMY_UI_HOST"]
   ? process.env["LEMMY_UI_HOST"].split(":")

diff --git a/src/server/utils/create-ssr-html.tsx b/src/server/utils/create-ssr-html.tsx
@@ -80,13 +80,14 @@ export async function createSsrHtml(
     <html ${helmet.htmlAttributes.toString()}>
     <head>
     <script nonce="${cspNonce}">
+    window.isoData = ${serialize(isoData)};
+
     if (!document.documentElement.hasAttribute("data-bs-theme")) {
       const light = window.matchMedia("(prefers-color-scheme: light)").matches;
       document.documentElement.setAttribute("data-bs-theme", light ? "light" : "dark");
     }
     </script>
     ${lazyScripts}
-    <script nonce="${cspNonce}">window.isoData = ${serialize(isoData)}</script>
   
     <!-- A remote debugging utility for mobile -->
     ${erudaStr}
@@ -97,6 +98,16 @@ export async function createSsrHtml(
     ${helmet.title.toString()}
     ${helmet.meta.toString()}
   
+    <style>
+    #app[data-adult-consent] {
+      filter: blur(10px);
+      -webkit-filter: blur(10px);
+      -moz-filter: blur(10px);
+      -o-filter: blur(10px);
+      -ms-filter: blur(10px);
+    }
+    </style>
+
     <!-- Required meta tags -->
     <meta name="Description" content="Lemmy">
     <meta charset="utf-8">

diff --git a/src/shared/components/app/app.tsx b/src/shared/components/app/app.tsx
@@ -1,5 +1,5 @@
 import { isAnonymousPath, isAuthPath, setIsoData } from "@utils/app";
-import { Component, RefObject, createRef, linkEvent } from "inferno";
+import { Component, createRef, linkEvent } from "inferno";
 import { Provider } from "inferno-i18next-dess";
 import { Route, Switch } from "inferno-router";
 import { IsoDataOptionalSite } from "../../interfaces";
@@ -13,42 +13,39 @@ import { Navbar } from "./navbar";
 import "./styles.scss";
 import { Theme } from "./theme";
 import AnonymousGuard from "../common/anonymous-guard";
-import { destroyTippy, setupTippy } from "../../tippy";
+import AdultConsentModal from "../common/adult-consent-modal";
 
-export class App extends Component<any, any> {
+function handleJumpToContent(event) {
+  event.preventDefault();
+}
+
+export default class App extends Component<any, any> {
   private isoData: IsoDataOptionalSite = setIsoData(this.context);
-  private readonly mainContentRef: RefObject<HTMLElement>;
   private readonly rootRef = createRef<HTMLDivElement>();
-  constructor(props: any, context: any) {
-    super(props, context);
-    this.mainContentRef = createRef();
-  }
-
-  componentDidMount(): void {
-    setupTippy(this.rootRef);
-  }
-
-  componentWillUnmount(): void {
-    destroyTippy();
-  }
-
-  handleJumpToContent(event) {
-    event.preventDefault();
-    this.mainContentRef.current?.focus();
-  }
 
   render() {
     const siteRes = this.isoData.site_res;
     const siteView = siteRes?.site_view;
 
     return (
-      <>
-        <Provider i18next={I18NextService.i18n}>
-          <div id="app" className="lemmy-site" ref={this.rootRef}>
+      <Provider i18next={I18NextService.i18n}>
+        {/* This fragment is required to avoid an SSR error*/}
+        <>
+          {this.isoData.showAdultConsentModal && (
+            <AdultConsentModal
+              contentWarning={siteView!.site.content_warning!}
+            />
+          )}
+          <div
+            id="app"
+            className="lemmy-site"
+            ref={this.rootRef}
+            data-adult-consent={this.isoData.showAdultConsentModal || null}
+          >
             <button
               type="button"
               className="btn skip-link bg-light position-absolute start-0 z-3"
-              onClick={linkEvent(this, this.handleJumpToContent)}
+              onClick={linkEvent(this, handleJumpToContent)}
             >
               {I18NextService.i18n.t("jump_to_content", "Jump to content")}
             </button>
@@ -115,8 +112,8 @@ export class App extends Component<any, any> {
             </div>
             <Footer site={siteRes} />
           </div>
-        </Provider>
-      </>
+        </>
+      </Provider>
     );
   }
 }