mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-28 08:27:36 +00:00
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
This commit is contained in:
parent
c1fbba2768
commit
643c1f6f01
|
@ -49,6 +49,7 @@
|
||||||
"prettier/prettier": "error",
|
"prettier/prettier": "error",
|
||||||
"quote-props": 0,
|
"quote-props": 0,
|
||||||
"unicorn/filename-case": 0,
|
"unicorn/filename-case": 0,
|
||||||
"jsx-a11y/media-has-caption": 0
|
"jsx-a11y/media-has-caption": 0,
|
||||||
|
"jsx-a11y/label-has-associated-control": 0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
Subproject commit f9783d686637197a389b8f10a907e0533c55b688
|
Subproject commit c88dd1e3b36ee1617f1b86acf94c1b7946e97cd4
|
|
@ -42,6 +42,7 @@
|
||||||
"classnames": "^2.5.1",
|
"classnames": "^2.5.1",
|
||||||
"clean-webpack-plugin": "^4.0.0",
|
"clean-webpack-plugin": "^4.0.0",
|
||||||
"cookie": "^0.6.0",
|
"cookie": "^0.6.0",
|
||||||
|
"cookie-parser": "^1.4.6",
|
||||||
"copy-webpack-plugin": "^12.0.2",
|
"copy-webpack-plugin": "^12.0.2",
|
||||||
"css-loader": "^6.10.0",
|
"css-loader": "^6.10.0",
|
||||||
"date-fns": "^3.6.0",
|
"date-fns": "^3.6.0",
|
||||||
|
@ -94,6 +95,7 @@
|
||||||
"@types/autosize": "^4.0.3",
|
"@types/autosize": "^4.0.3",
|
||||||
"@types/bootstrap": "^5.2.10",
|
"@types/bootstrap": "^5.2.10",
|
||||||
"@types/cookie": "^0.6.0",
|
"@types/cookie": "^0.6.0",
|
||||||
|
"@types/cookie-parser": "^1.4.7",
|
||||||
"@types/express": "^4.17.21",
|
"@types/express": "^4.17.21",
|
||||||
"@types/html-to-text": "^9.0.4",
|
"@types/html-to-text": "^9.0.4",
|
||||||
"@types/lodash.isequal": "^4.5.8",
|
"@types/lodash.isequal": "^4.5.8",
|
||||||
|
|
|
@ -59,6 +59,9 @@ importers:
|
||||||
cookie:
|
cookie:
|
||||||
specifier: ^0.6.0
|
specifier: ^0.6.0
|
||||||
version: 0.6.0
|
version: 0.6.0
|
||||||
|
cookie-parser:
|
||||||
|
specifier: ^1.4.6
|
||||||
|
version: 1.4.6
|
||||||
copy-webpack-plugin:
|
copy-webpack-plugin:
|
||||||
specifier: ^12.0.2
|
specifier: ^12.0.2
|
||||||
version: 12.0.2(webpack@5.91.0(webpack-cli@5.1.4))
|
version: 12.0.2(webpack@5.91.0(webpack-cli@5.1.4))
|
||||||
|
@ -210,6 +213,9 @@ importers:
|
||||||
'@types/cookie':
|
'@types/cookie':
|
||||||
specifier: ^0.6.0
|
specifier: ^0.6.0
|
||||||
version: 0.6.0
|
version: 0.6.0
|
||||||
|
'@types/cookie-parser':
|
||||||
|
specifier: ^1.4.7
|
||||||
|
version: 1.4.7
|
||||||
'@types/express':
|
'@types/express':
|
||||||
specifier: ^4.17.21
|
specifier: ^4.17.21
|
||||||
version: 4.17.21
|
version: 4.17.21
|
||||||
|
@ -1207,6 +1213,9 @@ packages:
|
||||||
'@types/connect@3.4.38':
|
'@types/connect@3.4.38':
|
||||||
resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
|
resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
|
||||||
|
|
||||||
|
'@types/cookie-parser@1.4.7':
|
||||||
|
resolution: {integrity: sha512-Fvuyi354Z+uayxzIGCwYTayFKocfV7TuDYZClCdIP9ckhvAu/ixDtCB6qx2TT0FKjPLf1f3P/J1rgf6lPs64mw==}
|
||||||
|
|
||||||
'@types/cookie@0.6.0':
|
'@types/cookie@0.6.0':
|
||||||
resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
|
resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
|
||||||
|
|
||||||
|
@ -1856,9 +1865,17 @@ packages:
|
||||||
convert-source-map@2.0.0:
|
convert-source-map@2.0.0:
|
||||||
resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
|
resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
|
||||||
|
|
||||||
|
cookie-parser@1.4.6:
|
||||||
|
resolution: {integrity: sha512-z3IzaNjdwUC2olLIB5/ITd0/setiaFMLYiZJle7xg5Fe9KWAceil7xszYfHHBtDFYLSgJduS2Ty0P1uJdPDJeA==}
|
||||||
|
engines: {node: '>= 0.8.0'}
|
||||||
|
|
||||||
cookie-signature@1.0.6:
|
cookie-signature@1.0.6:
|
||||||
resolution: {integrity: sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==}
|
resolution: {integrity: sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==}
|
||||||
|
|
||||||
|
cookie@0.4.1:
|
||||||
|
resolution: {integrity: sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==}
|
||||||
|
engines: {node: '>= 0.6'}
|
||||||
|
|
||||||
cookie@0.6.0:
|
cookie@0.6.0:
|
||||||
resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==}
|
resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==}
|
||||||
engines: {node: '>= 0.6'}
|
engines: {node: '>= 0.6'}
|
||||||
|
@ -5742,6 +5759,10 @@ snapshots:
|
||||||
dependencies:
|
dependencies:
|
||||||
'@types/node': 20.11.30
|
'@types/node': 20.11.30
|
||||||
|
|
||||||
|
'@types/cookie-parser@1.4.7':
|
||||||
|
dependencies:
|
||||||
|
'@types/express': 4.17.21
|
||||||
|
|
||||||
'@types/cookie@0.6.0': {}
|
'@types/cookie@0.6.0': {}
|
||||||
|
|
||||||
'@types/eslint-scope@3.7.7':
|
'@types/eslint-scope@3.7.7':
|
||||||
|
@ -6479,8 +6500,15 @@ snapshots:
|
||||||
|
|
||||||
convert-source-map@2.0.0: {}
|
convert-source-map@2.0.0: {}
|
||||||
|
|
||||||
|
cookie-parser@1.4.6:
|
||||||
|
dependencies:
|
||||||
|
cookie: 0.4.1
|
||||||
|
cookie-signature: 1.0.6
|
||||||
|
|
||||||
cookie-signature@1.0.6: {}
|
cookie-signature@1.0.6: {}
|
||||||
|
|
||||||
|
cookie@0.4.1: {}
|
||||||
|
|
||||||
cookie@0.6.0: {}
|
cookie@0.6.0: {}
|
||||||
|
|
||||||
copy-webpack-plugin@11.0.0(webpack@5.91.0(webpack-cli@5.1.4)):
|
copy-webpack-plugin@11.0.0(webpack@5.91.0(webpack-cli@5.1.4)):
|
||||||
|
|
|
@ -292,5 +292,8 @@
|
||||||
<line x1="16" y1="216" x2="240" y2="216" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
|
<line x1="16" y1="216" x2="240" y2="216" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
|
||||||
<path d="M152,216V160a8,8,0,0,0-8-8H112a8,8,0,0,0-8,8v56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
|
<path d="M152,216V160a8,8,0,0,0-8-8H112a8,8,0,0,0-8,8v56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
|
||||||
</symbol>
|
</symbol>
|
||||||
|
<symbol id="icon-info" fill="currentColor" viewBox="0 0 256 256">
|
||||||
|
<path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z" />
|
||||||
|
</symbol>
|
||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 69 KiB |
|
@ -1,7 +1,7 @@
|
||||||
import { initializeSite } from "@utils/app";
|
import { initializeSite } from "@utils/app";
|
||||||
import { hydrate } from "inferno-hydrate";
|
import { hydrate } from "inferno-hydrate";
|
||||||
import { BrowserRouter } from "inferno-router";
|
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 { lazyHighlightjs } from "../shared/lazy-highlightjs";
|
||||||
import { loadUserLanguage } from "../shared/services/I18NextService";
|
import { loadUserLanguage } from "../shared/services/I18NextService";
|
||||||
import { verifyDynamicImports } from "../shared/dynamic-imports";
|
import { verifyDynamicImports } from "../shared/dynamic-imports";
|
||||||
|
|
|
@ -6,7 +6,7 @@ import { StaticRouter, matchPath } from "inferno-router";
|
||||||
import { Match } from "inferno-router/dist/Route";
|
import { Match } from "inferno-router/dist/Route";
|
||||||
import { renderToString } from "inferno-server";
|
import { renderToString } from "inferno-server";
|
||||||
import { GetSiteResponse, LemmyHttp } from "lemmy-js-client";
|
import { GetSiteResponse, LemmyHttp } from "lemmy-js-client";
|
||||||
import { App } from "../../shared/components/app/app";
|
import App from "../../shared/components/app/app";
|
||||||
import {
|
import {
|
||||||
InitialFetchRequest,
|
InitialFetchRequest,
|
||||||
IsoDataOptionalSite,
|
IsoDataOptionalSite,
|
||||||
|
@ -28,6 +28,7 @@ import {
|
||||||
} from "../../shared/services/";
|
} from "../../shared/services/";
|
||||||
import { parsePath } from "history";
|
import { parsePath } from "history";
|
||||||
import { getQueryString } from "@utils/helpers";
|
import { getQueryString } from "@utils/helpers";
|
||||||
|
import { adultConsentCookieKey } from "../../shared/config";
|
||||||
|
|
||||||
export default async (req: Request, res: Response) => {
|
export default async (req: Request, res: Response) => {
|
||||||
try {
|
try {
|
||||||
|
@ -142,6 +143,9 @@ export default async (req: Request, res: Response) => {
|
||||||
site_res: site,
|
site_res: site,
|
||||||
routeData,
|
routeData,
|
||||||
errorPageData,
|
errorPageData,
|
||||||
|
showAdultConsentModal:
|
||||||
|
!!site?.site_view.site.content_warning &&
|
||||||
|
!(site.my_user || req.cookies[adultConsentCookieKey]),
|
||||||
};
|
};
|
||||||
|
|
||||||
const wrapper = (
|
const wrapper = (
|
||||||
|
|
|
@ -14,8 +14,10 @@ import ThemesListHandler from "./handlers/themes-list-handler";
|
||||||
import { setCacheControl, setDefaultCsp } from "./middleware";
|
import { setCacheControl, setDefaultCsp } from "./middleware";
|
||||||
import CodeThemeHandler from "./handlers/code-theme-handler";
|
import CodeThemeHandler from "./handlers/code-theme-handler";
|
||||||
import { verifyDynamicImports } from "../shared/dynamic-imports";
|
import { verifyDynamicImports } from "../shared/dynamic-imports";
|
||||||
|
import cookieParser from "cookie-parser";
|
||||||
|
|
||||||
const server = express();
|
const server = express();
|
||||||
|
server.use(cookieParser());
|
||||||
|
|
||||||
const [hostname, port] = process.env["LEMMY_UI_HOST"]
|
const [hostname, port] = process.env["LEMMY_UI_HOST"]
|
||||||
? process.env["LEMMY_UI_HOST"].split(":")
|
? process.env["LEMMY_UI_HOST"].split(":")
|
||||||
|
|
|
@ -80,13 +80,14 @@ export async function createSsrHtml(
|
||||||
<html ${helmet.htmlAttributes.toString()}>
|
<html ${helmet.htmlAttributes.toString()}>
|
||||||
<head>
|
<head>
|
||||||
<script nonce="${cspNonce}">
|
<script nonce="${cspNonce}">
|
||||||
|
window.isoData = ${serialize(isoData)};
|
||||||
|
|
||||||
if (!document.documentElement.hasAttribute("data-bs-theme")) {
|
if (!document.documentElement.hasAttribute("data-bs-theme")) {
|
||||||
const light = window.matchMedia("(prefers-color-scheme: light)").matches;
|
const light = window.matchMedia("(prefers-color-scheme: light)").matches;
|
||||||
document.documentElement.setAttribute("data-bs-theme", light ? "light" : "dark");
|
document.documentElement.setAttribute("data-bs-theme", light ? "light" : "dark");
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
${lazyScripts}
|
${lazyScripts}
|
||||||
<script nonce="${cspNonce}">window.isoData = ${serialize(isoData)}</script>
|
|
||||||
|
|
||||||
<!-- A remote debugging utility for mobile -->
|
<!-- A remote debugging utility for mobile -->
|
||||||
${erudaStr}
|
${erudaStr}
|
||||||
|
@ -97,6 +98,16 @@ export async function createSsrHtml(
|
||||||
${helmet.title.toString()}
|
${helmet.title.toString()}
|
||||||
${helmet.meta.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 -->
|
<!-- Required meta tags -->
|
||||||
<meta name="Description" content="Lemmy">
|
<meta name="Description" content="Lemmy">
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { isAnonymousPath, isAuthPath, setIsoData } from "@utils/app";
|
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 { Provider } from "inferno-i18next-dess";
|
||||||
import { Route, Switch } from "inferno-router";
|
import { Route, Switch } from "inferno-router";
|
||||||
import { IsoDataOptionalSite } from "../../interfaces";
|
import { IsoDataOptionalSite } from "../../interfaces";
|
||||||
|
@ -13,42 +13,39 @@ import { Navbar } from "./navbar";
|
||||||
import "./styles.scss";
|
import "./styles.scss";
|
||||||
import { Theme } from "./theme";
|
import { Theme } from "./theme";
|
||||||
import AnonymousGuard from "../common/anonymous-guard";
|
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) {
|
||||||
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();
|
event.preventDefault();
|
||||||
this.mainContentRef.current?.focus();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default class App extends Component<any, any> {
|
||||||
|
private isoData: IsoDataOptionalSite = setIsoData(this.context);
|
||||||
|
private readonly rootRef = createRef<HTMLDivElement>();
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const siteRes = this.isoData.site_res;
|
const siteRes = this.isoData.site_res;
|
||||||
const siteView = siteRes?.site_view;
|
const siteView = siteRes?.site_view;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
|
||||||
<Provider i18next={I18NextService.i18n}>
|
<Provider i18next={I18NextService.i18n}>
|
||||||
<div id="app" className="lemmy-site" ref={this.rootRef}>
|
{/* 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
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn skip-link bg-light position-absolute start-0 z-3"
|
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")}
|
{I18NextService.i18n.t("jump_to_content", "Jump to content")}
|
||||||
</button>
|
</button>
|
||||||
|
@ -115,8 +112,8 @@ export class App extends Component<any, any> {
|
||||||
</div>
|
</div>
|
||||||
<Footer site={siteRes} />
|
<Footer site={siteRes} />
|
||||||
</div>
|
</div>
|
||||||
</Provider>
|
|
||||||
</>
|
</>
|
||||||
|
</Provider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
141
src/shared/components/common/adult-consent-modal.tsx
Normal file
141
src/shared/components/common/adult-consent-modal.tsx
Normal file
|
@ -0,0 +1,141 @@
|
||||||
|
import { Component, LinkedEvent, createRef, linkEvent } from "inferno";
|
||||||
|
import { modalMixin } from "../mixins/modal-mixin";
|
||||||
|
import { adultConsentCookieKey } from "../../config";
|
||||||
|
import { mdToHtml } from "../../markdown";
|
||||||
|
import { I18NextService } from "../../services";
|
||||||
|
import { isHttps } from "@utils/env";
|
||||||
|
import { IsoData } from "../../interfaces";
|
||||||
|
import { setIsoData } from "@utils/app";
|
||||||
|
|
||||||
|
interface AdultConsentModalProps {
|
||||||
|
contentWarning: string;
|
||||||
|
show: boolean;
|
||||||
|
onContinue: LinkedEvent<any, Event> | null;
|
||||||
|
onBack: LinkedEvent<any, Event> | null;
|
||||||
|
redirectCountdown: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
@modalMixin
|
||||||
|
class AdultConsentModalInner extends Component<AdultConsentModalProps, any> {
|
||||||
|
readonly modalDivRef = createRef<HTMLDivElement>();
|
||||||
|
readonly continueButtonRef = createRef<HTMLButtonElement>();
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { contentWarning, onContinue, onBack, redirectCountdown } =
|
||||||
|
this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="modal"
|
||||||
|
id="adultConsentModal"
|
||||||
|
tabIndex={-1}
|
||||||
|
aria-hidden
|
||||||
|
aria-label="Content warning"
|
||||||
|
data-bs-backdrop="static"
|
||||||
|
ref={this.modalDivRef}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="modal-dialog modal-fullscreen-sm-down"
|
||||||
|
data-bs-backdrop="static"
|
||||||
|
>
|
||||||
|
<div className="modal-content">
|
||||||
|
<header className="modal-header justify-content-center">
|
||||||
|
<h3 className="modal-title">
|
||||||
|
{I18NextService.i18n.t("content_warning")}
|
||||||
|
</h3>
|
||||||
|
</header>
|
||||||
|
{redirectCountdown === Infinity ? (
|
||||||
|
<div
|
||||||
|
className="modal-body text-center align-middle text-body"
|
||||||
|
dangerouslySetInnerHTML={mdToHtml(contentWarning, () =>
|
||||||
|
this.forceUpdate(),
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="modal-body text-center align-middle text-body">
|
||||||
|
{I18NextService.i18n.t("sending_back_message", {
|
||||||
|
seconds: redirectCountdown,
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<footer className="modal-footer">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-success"
|
||||||
|
onClick={onContinue}
|
||||||
|
ref={this.continueButtonRef}
|
||||||
|
>
|
||||||
|
{I18NextService.i18n.t("continue")}
|
||||||
|
</button>
|
||||||
|
<button type="button" className="btn btn-danger" onClick={onBack}>
|
||||||
|
{I18NextService.i18n.t("go_back")}
|
||||||
|
</button>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
handleShow() {
|
||||||
|
this.continueButtonRef.current?.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
interface AdultConsentModalState {
|
||||||
|
show: boolean;
|
||||||
|
redirectCountdown: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleAdultConsent(i: AdultConsentModal) {
|
||||||
|
document.cookie = `${adultConsentCookieKey}=true; Path=/; SameSite=Strict${isHttps() ? "; Secure" : ""}`;
|
||||||
|
i.setState({ show: false });
|
||||||
|
location.reload();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleAdultConsentGoBack(i: AdultConsentModal) {
|
||||||
|
i.setState({ redirectCountdown: 5 });
|
||||||
|
|
||||||
|
i.redirectTimeout = setInterval(() => {
|
||||||
|
i.setState(prev => ({
|
||||||
|
...prev,
|
||||||
|
redirectCountdown: prev.redirectCountdown - 1,
|
||||||
|
}));
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class AdultConsentModal extends Component<
|
||||||
|
Pick<AdultConsentModalProps, "contentWarning">,
|
||||||
|
AdultConsentModalState
|
||||||
|
> {
|
||||||
|
private isoData: IsoData = setIsoData(this.context);
|
||||||
|
redirectTimeout: NodeJS.Timeout;
|
||||||
|
state: AdultConsentModalState = {
|
||||||
|
show: this.isoData.showAdultConsentModal,
|
||||||
|
redirectCountdown: Infinity,
|
||||||
|
};
|
||||||
|
|
||||||
|
componentDidUpdate() {
|
||||||
|
if (this.state.redirectCountdown === 0) {
|
||||||
|
this.context.router.history.back();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
clearInterval(this.redirectTimeout);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { redirectCountdown, show } = this.state;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AdultConsentModalInner
|
||||||
|
contentWarning={this.props.contentWarning}
|
||||||
|
show={show}
|
||||||
|
redirectCountdown={redirectCountdown}
|
||||||
|
onBack={linkEvent(this, handleAdultConsentGoBack)}
|
||||||
|
onContinue={linkEvent(this, handleAdultConsent)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
|
@ -2,6 +2,8 @@ import classNames from "classnames";
|
||||||
import { Component } from "inferno";
|
import { Component } from "inferno";
|
||||||
|
|
||||||
import { UserService } from "../../services";
|
import { UserService } from "../../services";
|
||||||
|
import { setIsoData } from "@utils/app";
|
||||||
|
import { IsoData } from "../../interfaces";
|
||||||
|
|
||||||
const iconThumbnailSize = 96;
|
const iconThumbnailSize = 96;
|
||||||
const thumbnailSize = 256;
|
const thumbnailSize = 256;
|
||||||
|
@ -19,22 +21,19 @@ interface PictrsImageProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
export class PictrsImage extends Component<PictrsImageProps, any> {
|
export class PictrsImage extends Component<PictrsImageProps, any> {
|
||||||
constructor(props: any, context: any) {
|
private readonly isoData: IsoData = setIsoData(this.context);
|
||||||
super(props, context);
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { src, icon, iconOverlay, banner, thumbnail, nsfw, pushup, cardTop } =
|
const { src, icon, iconOverlay, banner, thumbnail, nsfw, pushup, cardTop } =
|
||||||
this.props;
|
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 &&
|
||||||
|
(UserService.Instance.myUserInfo?.local_user_view.local_user.blur_nsfw ??
|
||||||
|
true);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
!this.isoData.showAdultConsentModal && (
|
||||||
<picture>
|
<picture>
|
||||||
<source srcSet={this.src("webp")} type="image/webp" />
|
<source srcSet={this.src("webp")} type="image/webp" />
|
||||||
<source srcSet={src} />
|
<source srcSet={src} />
|
||||||
|
@ -52,8 +51,8 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
|
||||||
"img-expanded slight-radius": !(thumbnail || icon),
|
"img-expanded slight-radius": !(thumbnail || icon),
|
||||||
"img-blur": thumbnail && nsfw,
|
"img-blur": thumbnail && nsfw,
|
||||||
"object-fit-cover img-icon me-1": icon,
|
"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":
|
"ms-2 mb-0 rounded-circle object-fit-cover avatar-overlay":
|
||||||
iconOverlay,
|
iconOverlay,
|
||||||
"avatar-pushup": pushup,
|
"avatar-pushup": pushup,
|
||||||
|
@ -61,6 +60,7 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
|
||||||
})}
|
})}
|
||||||
/>
|
/>
|
||||||
</picture>
|
</picture>
|
||||||
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -5,9 +5,6 @@ import { tippyMixin } from "../mixins/tippy-mixin";
|
||||||
import { Component, linkEvent } from "inferno";
|
import { Component, linkEvent } from "inferno";
|
||||||
import { I18NextService } from "../../services/I18NextService";
|
import { I18NextService } from "../../services/I18NextService";
|
||||||
|
|
||||||
// Need to disable this rule because ESLint flat out lies about labels not
|
|
||||||
// having an associated control in this component
|
|
||||||
/* eslint-disable jsx-a11y/label-has-associated-control */
|
|
||||||
interface PostHiddenSelectProps {
|
interface PostHiddenSelectProps {
|
||||||
showHidden?: StringBoolean;
|
showHidden?: StringBoolean;
|
||||||
onShowHiddenChange: (hidden?: StringBoolean) => void;
|
onShowHiddenChange: (hidden?: StringBoolean) => void;
|
||||||
|
|
|
@ -57,7 +57,7 @@ export class Signup extends Component<
|
||||||
registerRes: EMPTY_REQUEST,
|
registerRes: EMPTY_REQUEST,
|
||||||
captchaRes: EMPTY_REQUEST,
|
captchaRes: EMPTY_REQUEST,
|
||||||
form: {
|
form: {
|
||||||
show_nsfw: false,
|
show_nsfw: !!this.isoData.site_res.site_view.site.content_warning,
|
||||||
},
|
},
|
||||||
captchaPlaying: false,
|
captchaPlaying: false,
|
||||||
siteRes: this.isoData.site_res,
|
siteRes: this.isoData.site_res,
|
||||||
|
|
|
@ -86,6 +86,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
||||||
allowed_instances: this.props.allowedInstances?.map(i => i.domain),
|
allowed_instances: this.props.allowedInstances?.map(i => i.domain),
|
||||||
blocked_instances: this.props.blockedInstances?.map(i => i.domain),
|
blocked_instances: this.props.blockedInstances?.map(i => i.domain),
|
||||||
blocked_urls: this.props.siteRes.blocked_urls.map(u => u.url),
|
blocked_urls: this.props.siteRes.blocked_urls.map(u => u.url),
|
||||||
|
content_warning: this.props.siteRes.site_view.site.content_warning,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -116,6 +117,8 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
||||||
this.handleInstanceTextChange = this.handleInstanceTextChange.bind(this);
|
this.handleInstanceTextChange = this.handleInstanceTextChange.bind(this);
|
||||||
|
|
||||||
this.handleBlockedUrlsUpdate = this.handleBlockedUrlsUpdate.bind(this);
|
this.handleBlockedUrlsUpdate = this.handleBlockedUrlsUpdate.bind(this);
|
||||||
|
this.handleSiteContentWarningChange =
|
||||||
|
this.handleSiteContentWarningChange.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
@ -269,6 +272,26 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{this.state.siteForm.enable_nsfw && (
|
||||||
|
<div className="mb-3 row">
|
||||||
|
<div className="alert small alert-info" role="alert">
|
||||||
|
<Icon icon="info" classes="icon-inline me-2" />
|
||||||
|
{I18NextService.i18n.t("content_warning_setting_blurb")}
|
||||||
|
</div>
|
||||||
|
<label className="col-12 col-form-label">
|
||||||
|
{I18NextService.i18n.t("content_warning")}
|
||||||
|
</label>
|
||||||
|
<div className="col-12">
|
||||||
|
<MarkdownTextArea
|
||||||
|
initialContent={this.state.siteForm.content_warning}
|
||||||
|
onContentChange={this.handleSiteContentWarningChange}
|
||||||
|
hideNavigationWarnings
|
||||||
|
allLanguages={[]}
|
||||||
|
siteLanguages={[]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<div className="mb-3 row">
|
<div className="mb-3 row">
|
||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
<label
|
<label
|
||||||
|
@ -1012,4 +1035,8 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
handleSiteContentWarningChange(val: string) {
|
||||||
|
this.setState(s => ((s.siteForm.content_warning = val), s));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -918,7 +918,11 @@ export class Settings extends Component<SettingsRouteProps, SettingsState> {
|
||||||
className="form-check-input"
|
className="form-check-input"
|
||||||
id="user-blur-nsfw"
|
id="user-blur-nsfw"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={this.state.saveUserSettingsForm.blur_nsfw}
|
disabled={!this.state.saveUserSettingsForm.show_nsfw}
|
||||||
|
checked={
|
||||||
|
this.state.saveUserSettingsForm.blur_nsfw &&
|
||||||
|
this.state.saveUserSettingsForm.show_nsfw
|
||||||
|
}
|
||||||
onChange={linkEvent(this, this.handleBlurNsfwChange)}
|
onChange={linkEvent(this, this.handleBlurNsfwChange)}
|
||||||
/>
|
/>
|
||||||
<label className="form-check-label" htmlFor="user-blur-nsfw">
|
<label className="form-check-label" htmlFor="user-blur-nsfw">
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { myAuth } from "@utils/app";
|
import { myAuth, setIsoData } from "@utils/app";
|
||||||
import { canShare, share } from "@utils/browser";
|
import { canShare, share } from "@utils/browser";
|
||||||
import { getExternalHost, getHttpBase } from "@utils/env";
|
import { getExternalHost, getHttpBase } from "@utils/env";
|
||||||
import { futureDaysToUnixTime, hostname } from "@utils/helpers";
|
import { futureDaysToUnixTime, hostname } from "@utils/helpers";
|
||||||
|
@ -33,7 +33,7 @@ import {
|
||||||
TransferCommunity,
|
TransferCommunity,
|
||||||
} from "lemmy-js-client";
|
} from "lemmy-js-client";
|
||||||
import { relTags } from "../../config";
|
import { relTags } from "../../config";
|
||||||
import { VoteContentType } from "../../interfaces";
|
import { IsoDataOptionalSite, VoteContentType } from "../../interfaces";
|
||||||
import { mdToHtml, mdToHtmlInline } from "../../markdown";
|
import { mdToHtml, mdToHtmlInline } from "../../markdown";
|
||||||
import { I18NextService, UserService } from "../../services";
|
import { I18NextService, UserService } from "../../services";
|
||||||
import { tippyMixin } from "../mixins/tippy-mixin";
|
import { tippyMixin } from "../mixins/tippy-mixin";
|
||||||
|
@ -98,9 +98,10 @@ interface PostListingProps {
|
||||||
|
|
||||||
@tippyMixin
|
@tippyMixin
|
||||||
export class PostListing extends Component<PostListingProps, PostListingState> {
|
export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
|
private readonly isoData: IsoDataOptionalSite = setIsoData(this.context);
|
||||||
state: PostListingState = {
|
state: PostListingState = {
|
||||||
showEdit: false,
|
showEdit: false,
|
||||||
imageExpanded: false,
|
imageExpanded: !!this.isoData.site_res?.site_view.site.content_warning,
|
||||||
viewSource: false,
|
viewSource: false,
|
||||||
showAdvanced: false,
|
showAdvanced: false,
|
||||||
showBody: false,
|
showBody: false,
|
||||||
|
|
|
@ -28,6 +28,7 @@ export const fetchLimit = 20;
|
||||||
export const relTags = "noopener nofollow";
|
export const relTags = "noopener nofollow";
|
||||||
export const emDash = "\u2014";
|
export const emDash = "\u2014";
|
||||||
export const authCookieName = "jwt";
|
export const authCookieName = "jwt";
|
||||||
|
export const adultConsentCookieKey = "adultConsent";
|
||||||
|
|
||||||
// No. of max displayed communities per
|
// No. of max displayed communities per
|
||||||
// page on route "/communities"
|
// page on route "/communities"
|
||||||
|
|
|
@ -16,6 +16,7 @@ export interface IsoData<T extends RouteData = any> {
|
||||||
routeData: T;
|
routeData: T;
|
||||||
site_res: GetSiteResponse;
|
site_res: GetSiteResponse;
|
||||||
errorPageData?: ErrorPageData;
|
errorPageData?: ErrorPageData;
|
||||||
|
showAdultConsentModal: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export type IsoDataOptionalSite<T extends RouteData = any> = Partial<
|
export type IsoDataOptionalSite<T extends RouteData = any> = Partial<
|
||||||
|
|
Loading…
Reference in a new issue