mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-08 09:34:16 +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",
|
||||
"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
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1 +1 @@
|
|||
Subproject commit f9783d686637197a389b8f10a907e0533c55b688
|
||||
Subproject commit c88dd1e3b36ee1617f1b86acf94c1b7946e97cd4
|
|
@ -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",
|
||||
|
|
|
@ -59,6 +59,9 @@ importers:
|
|||
cookie:
|
||||
specifier: ^0.6.0
|
||||
version: 0.6.0
|
||||
cookie-parser:
|
||||
specifier: ^1.4.6
|
||||
version: 1.4.6
|
||||
copy-webpack-plugin:
|
||||
specifier: ^12.0.2
|
||||
version: 12.0.2(webpack@5.91.0(webpack-cli@5.1.4))
|
||||
|
@ -210,6 +213,9 @@ importers:
|
|||
'@types/cookie':
|
||||
specifier: ^0.6.0
|
||||
version: 0.6.0
|
||||
'@types/cookie-parser':
|
||||
specifier: ^1.4.7
|
||||
version: 1.4.7
|
||||
'@types/express':
|
||||
specifier: ^4.17.21
|
||||
version: 4.17.21
|
||||
|
@ -1207,6 +1213,9 @@ packages:
|
|||
'@types/connect@3.4.38':
|
||||
resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
|
||||
|
||||
'@types/cookie-parser@1.4.7':
|
||||
resolution: {integrity: sha512-Fvuyi354Z+uayxzIGCwYTayFKocfV7TuDYZClCdIP9ckhvAu/ixDtCB6qx2TT0FKjPLf1f3P/J1rgf6lPs64mw==}
|
||||
|
||||
'@types/cookie@0.6.0':
|
||||
resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
|
||||
|
||||
|
@ -1856,9 +1865,17 @@ packages:
|
|||
convert-source-map@2.0.0:
|
||||
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:
|
||||
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:
|
||||
resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==}
|
||||
engines: {node: '>= 0.6'}
|
||||
|
@ -5742,6 +5759,10 @@ snapshots:
|
|||
dependencies:
|
||||
'@types/node': 20.11.30
|
||||
|
||||
'@types/cookie-parser@1.4.7':
|
||||
dependencies:
|
||||
'@types/express': 4.17.21
|
||||
|
||||
'@types/cookie@0.6.0': {}
|
||||
|
||||
'@types/eslint-scope@3.7.7':
|
||||
|
@ -6479,8 +6500,15 @@ snapshots:
|
|||
|
||||
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@0.4.1: {}
|
||||
|
||||
cookie@0.6.0: {}
|
||||
|
||||
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"/>
|
||||
<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 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>
|
||||
</svg>
|
||||
|
|
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 69 KiB |
|
@ -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";
|
||||
|
|
|
@ -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 = (
|
||||
|
|
|
@ -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(":")
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
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 { UserService } from "../../services";
|
||||
import { setIsoData } from "@utils/app";
|
||||
import { IsoData } from "../../interfaces";
|
||||
|
||||
const iconThumbnailSize = 96;
|
||||
const thumbnailSize = 256;
|
||||
|
@ -19,48 +21,46 @@ interface PictrsImageProps {
|
|||
}
|
||||
|
||||
export class PictrsImage extends Component<PictrsImageProps, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
}
|
||||
private readonly isoData: IsoData = setIsoData(this.context);
|
||||
|
||||
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 &&
|
||||
(UserService.Instance.myUserInfo?.local_user_view.local_user.blur_nsfw ??
|
||||
true);
|
||||
|
||||
return (
|
||||
<picture>
|
||||
<source srcSet={this.src("webp")} type="image/webp" />
|
||||
<source srcSet={src} />
|
||||
<source srcSet={this.src("jpg")} type="image/jpeg" />
|
||||
<img
|
||||
src={src}
|
||||
alt={this.alt()}
|
||||
title={this.alt()}
|
||||
loading="lazy"
|
||||
className={classNames("overflow-hidden pictrs-image", {
|
||||
"img-fluid": !(icon || iconOverlay),
|
||||
banner,
|
||||
"thumbnail rounded object-fit-cover":
|
||||
thumbnail && !(icon || banner),
|
||||
"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-thumb": thumbnail && blur_image,
|
||||
"ms-2 mb-0 rounded-circle object-fit-cover avatar-overlay":
|
||||
iconOverlay,
|
||||
"avatar-pushup": pushup,
|
||||
"card-img-top": cardTop,
|
||||
})}
|
||||
/>
|
||||
</picture>
|
||||
!this.isoData.showAdultConsentModal && (
|
||||
<picture>
|
||||
<source srcSet={this.src("webp")} type="image/webp" />
|
||||
<source srcSet={src} />
|
||||
<source srcSet={this.src("jpg")} type="image/jpeg" />
|
||||
<img
|
||||
src={src}
|
||||
alt={this.alt()}
|
||||
title={this.alt()}
|
||||
loading="lazy"
|
||||
className={classNames("overflow-hidden pictrs-image", {
|
||||
"img-fluid": !(icon || iconOverlay),
|
||||
banner,
|
||||
"thumbnail rounded object-fit-cover":
|
||||
thumbnail && !(icon || banner),
|
||||
"img-expanded slight-radius": !(thumbnail || icon),
|
||||
"img-blur": thumbnail && nsfw,
|
||||
"object-fit-cover img-icon me-1": icon,
|
||||
"img-blur-icon": icon && blurImage,
|
||||
"img-blur-thumb": thumbnail && blurImage,
|
||||
"ms-2 mb-0 rounded-circle object-fit-cover avatar-overlay":
|
||||
iconOverlay,
|
||||
"avatar-pushup": pushup,
|
||||
"card-img-top": cardTop,
|
||||
})}
|
||||
/>
|
||||
</picture>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -5,9 +5,6 @@ import { tippyMixin } from "../mixins/tippy-mixin";
|
|||
import { Component, linkEvent } from "inferno";
|
||||
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 {
|
||||
showHidden?: StringBoolean;
|
||||
onShowHiddenChange: (hidden?: StringBoolean) => void;
|
||||
|
|
|
@ -57,7 +57,7 @@ export class Signup extends Component<
|
|||
registerRes: EMPTY_REQUEST,
|
||||
captchaRes: EMPTY_REQUEST,
|
||||
form: {
|
||||
show_nsfw: false,
|
||||
show_nsfw: !!this.isoData.site_res.site_view.site.content_warning,
|
||||
},
|
||||
captchaPlaying: false,
|
||||
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),
|
||||
blocked_instances: this.props.blockedInstances?.map(i => i.domain),
|
||||
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.handleBlockedUrlsUpdate = this.handleBlockedUrlsUpdate.bind(this);
|
||||
this.handleSiteContentWarningChange =
|
||||
this.handleSiteContentWarningChange.bind(this);
|
||||
}
|
||||
|
||||
render() {
|
||||
|
@ -269,6 +272,26 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</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="col-12">
|
||||
<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"
|
||||
id="user-blur-nsfw"
|
||||
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)}
|
||||
/>
|
||||
<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 { getExternalHost, getHttpBase } from "@utils/env";
|
||||
import { futureDaysToUnixTime, hostname } from "@utils/helpers";
|
||||
|
@ -33,7 +33,7 @@ import {
|
|||
TransferCommunity,
|
||||
} from "lemmy-js-client";
|
||||
import { relTags } from "../../config";
|
||||
import { VoteContentType } from "../../interfaces";
|
||||
import { IsoDataOptionalSite, VoteContentType } from "../../interfaces";
|
||||
import { mdToHtml, mdToHtmlInline } from "../../markdown";
|
||||
import { I18NextService, UserService } from "../../services";
|
||||
import { tippyMixin } from "../mixins/tippy-mixin";
|
||||
|
@ -98,9 +98,10 @@ interface PostListingProps {
|
|||
|
||||
@tippyMixin
|
||||
export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||
private readonly isoData: IsoDataOptionalSite = setIsoData(this.context);
|
||||
state: PostListingState = {
|
||||
showEdit: false,
|
||||
imageExpanded: false,
|
||||
imageExpanded: !!this.isoData.site_res?.site_view.site.content_warning,
|
||||
viewSource: false,
|
||||
showAdvanced: false,
|
||||
showBody: false,
|
||||
|
|
|
@ -28,6 +28,7 @@ export const fetchLimit = 20;
|
|||
export const relTags = "noopener nofollow";
|
||||
export const emDash = "\u2014";
|
||||
export const authCookieName = "jwt";
|
||||
export const adultConsentCookieKey = "adultConsent";
|
||||
|
||||
// No. of max displayed communities per
|
||||
// page on route "/communities"
|
||||
|
|
|
@ -16,6 +16,7 @@ export interface IsoData<T extends RouteData = any> {
|
|||
routeData: T;
|
||||
site_res: GetSiteResponse;
|
||||
errorPageData?: ErrorPageData;
|
||||
showAdultConsentModal: boolean;
|
||||
}
|
||||
|
||||
export type IsoDataOptionalSite<T extends RouteData = any> = Partial<
|
||||
|
|
Loading…
Reference in a new issue