Make confirm popup for adult consent

lemmy-translations

@@ -1 +1 @@
-Subproject commit b0dab329ce23cfaec4a3a034ea2fee210888922e
+Subproject commit a94ef775f3f923067b48c1719cda206dbcf1a9e5

src/shared/components/app/app.tsx

@@ -14,6 +14,7 @@ import "./styles.scss";
 import { Theme } from "./theme";
 import AnonymousGuard from "../common/anonymous-guard";
 import { destroyTippy, setupTippy } from "../../tippy";
+import { adultConsentLocalStorageKey } from "shared/config";
 
 export class App extends Component<any, any> {
   private isoData: IsoDataOptionalSite = setIsoData(this.context);
@@ -25,6 +26,19 @@ export class App extends Component<any, any> {
   }
 
   componentDidMount(): void {
+    const siteRes = this.isoData.site_res;
+
+    if (
+      siteRes?.site_view.site.content_warning &&
+      !(siteRes?.my_user || localStorage.getItem(adultConsentLocalStorageKey))
+    ) {
+      if (confirm(siteRes.site_view.site.content_warning)) {
+        localStorage.setItem(adultConsentLocalStorageKey, "true");
+      } else {
+        history.back();
+      }
+    }
+
     setupTippy(this.rootRef);
   }
 

src/shared/components/common/pictrs-image.tsx

@@ -2,6 +2,8 @@ import classNames from "classnames";
 import { Component } from "inferno";
 
 import { UserService } from "../../services";
+import { setIsoData } from "@utils/app";
+import { IsoDataOptionalSite } from "shared/interfaces";
 
 const iconThumbnailSize = 96;
 const thumbnailSize = 256;
@@ -19,6 +21,8 @@ interface PictrsImageProps {
 }
 
 export class PictrsImage extends Component<PictrsImageProps, any> {
+  private isoData: IsoDataOptionalSite = setIsoData(this.context);
+
   constructor(props: any, context: any) {
     super(props, context);
   }
@@ -26,13 +30,11 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
   render() {
     const { src, icon, iconOverlay, banner, thumbnail, nsfw, pushup, cardTop } =
       this.props;
-    let user_blur_nsfw = true;
-    if (UserService.Instance.myUserInfo) {
-      user_blur_nsfw =
-        UserService.Instance.myUserInfo?.local_user_view.local_user.blur_nsfw;
-    }
 
-    const blur_image = nsfw && user_blur_nsfw;
+    const blurImage =
+      nsfw &&
+      (!this.isoData.site_res?.site_view.site.content_warning ||
+        UserService.Instance.myUserInfo?.local_user_view.local_user.blur_nsfw);
 
     return (
       <picture>
@@ -52,8 +54,8 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
             "img-expanded slight-radius": !(thumbnail || icon),
             "img-blur": thumbnail && nsfw,
             "object-fit-cover img-icon me-1": icon,
-            "img-blur-icon": icon && blur_image,
+            "img-blur-icon": icon && blurImage,
-            "img-blur-thumb": thumbnail && blur_image,
+            "img-blur-thumb": thumbnail && blurImage,
             "ms-2 mb-0 rounded-circle object-fit-cover avatar-overlay":
               iconOverlay,
             "avatar-pushup": pushup,

src/shared/components/home/signup.tsx

@@ -261,22 +261,27 @@ export class Signup extends Component<
           </>
         )}
         {this.renderCaptcha()}
-        <div className="mb-3 row">
+        {!this.state.siteRes.site_view.site.content_warning && (
-          <div className="col-sm-10">
+          <div className="mb-3 row">
-            <div className="form-check">
+            <div className="col-sm-10">
-              <input
+              <div className="form-check">
-                className="form-check-input"
+                <input
-                id="register-show-nsfw"
+                  className="form-check-input"
-                type="checkbox"
+                  id="register-show-nsfw"
-                checked={this.state.form.show_nsfw}
+                  type="checkbox"
-                onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}
+                  checked={this.state.form.show_nsfw}
-              />
+                  onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}
-              <label className="form-check-label" htmlFor="register-show-nsfw">
+                />
-                {I18NextService.i18n.t("show_nsfw")}
+                <label
-              </label>
+                  className="form-check-label"
+                  htmlFor="register-show-nsfw"
+                >
+                  {I18NextService.i18n.t("show_nsfw")}
+                </label>
+              </div>
             </div>
           </div>
-        </div>
+        )}
         <input
           tabIndex={-1}
           autoComplete="false"

src/shared/config.ts

@@ -28,6 +28,7 @@ export const fetchLimit = 20;
 export const relTags = "noopener nofollow";
 export const emDash = "\u2014";
 export const authCookieName = "jwt";
+export const adultConsentLocalStorageKey = "adult-consent";
 
 // No. of max displayed communities per
 // page on route "/communities"