Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make confirm popup for adult consent #2419

Merged
merged 25 commits into from
Apr 18, 2024
Merged

Make confirm popup for adult consent #2419

Show file tree
Hide file tree
Changes from 19 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
fff198a
Make confirm popup for adult consent
SleeplessOne1917 Apr 12, 2024
d51cf75
Fix import
SleeplessOne1917 Apr 12, 2024
588bacb
Merge branch 'main' into content-warning
SleeplessOne1917 Apr 12, 2024
b1fc470
Fix blur and adjust user settings
SleeplessOne1917 Apr 13, 2024
e98d1c9
Merge branch 'content-warning' of https://github.com/LemmyNet/lemmy-u…
SleeplessOne1917 Apr 13, 2024
3cae1b5
Merge branch 'main' into content-warning
SleeplessOne1917 Apr 13, 2024
0413fd6
Make confirmation popup more stylish
SleeplessOne1917 Apr 13, 2024
fea5ff1
Add setting to site settings form
SleeplessOne1917 Apr 13, 2024
fb38faf
Fix modal bug
SleeplessOne1917 Apr 14, 2024
c430678
Put adult consent logic all in one place
SleeplessOne1917 Apr 14, 2024
4fc425b
Make modal use markdown
SleeplessOne1917 Apr 14, 2024
b6d7efd
Fix consent modal showing up for currently logged in admin
SleeplessOne1917 Apr 14, 2024
42bc4ab
Add go-back redirect countdown
SleeplessOne1917 Apr 14, 2024
9869b00
Center modal title
SleeplessOne1917 Apr 14, 2024
afae55c
Handle enable_nsfw correctly
SleeplessOne1917 Apr 15, 2024
1e76395
Blur background of modal to hide spicy things
SleeplessOne1917 Apr 16, 2024
160048c
Add translations
SleeplessOne1917 Apr 16, 2024
5197206
Remove delay between page loading and being blurred
SleeplessOne1917 Apr 16, 2024
f97f396
Merge branch 'main' into content-warning
SleeplessOne1917 Apr 16, 2024
bbce909
Merge branch 'main' into content-warning
SleeplessOne1917 Apr 17, 2024
8e5599e
Revert "Remove delay between page loading and being blurred"
matc-pub Apr 18, 2024
1b4903d
Blur SSR by default when content warning is set
matc-pub Apr 18, 2024
ce72377
Make blur work correctly
SleeplessOne1917 Apr 18, 2024
3cbe7e1
Prevent images from downloading without consent
SleeplessOne1917 Apr 18, 2024
d5cfc73
Autoexpand
SleeplessOne1917 Apr 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
2 changes: 1 addition & 1 deletion lemmy-translations
Open in desktop
Submodule lemmy-translations updated 7 files
+8 −1 translations/bg.json
+9 −1 translations/da.json
+8 −1 translations/en.json
+12 −1 translations/eo.json
+10 −1 translations/es.json
+22 −3 translations/fr.json
+8 −1 translations/gl.json
4 changes: 4 additions & 0 deletions src/assets/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -461,3 +461,7 @@ br.big {
.totp-link {
width: fit-content;
}

#adultConsentModal {
backdrop-filter: blur(10px);
}
3 changes: 3 additions & 0 deletions src/assets/symbols.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/client/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down
2 changes: 1 addition & 1 deletion src/server/handlers/catch-all-handler.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
197 changes: 108 additions & 89 deletions src/shared/components/app/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import { isAnonymousPath, isAuthPath, setIsoData } from "@utils/app";
import { Component, RefObject, createRef, linkEvent } from "inferno";
import {
Component,
RefObject,
createRef,
forwardRef,
linkEvent,
} from "inferno";
import { Provider } from "inferno-i18next-dess";
import { Route, Switch } from "inferno-router";
import { IsoDataOptionalSite } from "../../interfaces";
Expand All @@ -14,15 +20,102 @@ 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> {
interface AppProps {
ref: RefObject<HTMLDivElement>;
}

function handleJumpToContent(event) {
event.preventDefault();
}

class App extends Component<AppProps, 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();

render() {
const siteRes = this.isoData.site_res;
const siteView = siteRes?.site_view;

return (
<div id="app" className="lemmy-site" ref={this.props.ref}>
<button
type="button"
className="btn skip-link bg-light position-absolute start-0 z-3"
onClick={linkEvent(this, handleJumpToContent)}
>
{I18NextService.i18n.t("jump_to_content", "Jump to content")}
</button>
{siteView && <Theme defaultTheme={siteView.local_site.default_theme} />}
<Navbar siteRes={siteRes} />
<div className="mt-4 p-0 fl-1">
<Switch>
{routes.map(
({
path,
component: RouteComponent,
fetchInitialData,
getQueryParams,
}) => (
<Route
key={path}
path={path}
exact
component={routeProps => {
if (!fetchInitialData) {
FirstLoadService.falsify();
}

let queryProps = routeProps;
if (getQueryParams && this.isoData.site_res) {
// ErrorGuard will not render its children when
// site_res is missing, this guarantees that props
// will always contain the query params.
queryProps = {
...routeProps,
...getQueryParams(
routeProps.location.search,
this.isoData.site_res,
),
};
}

return (
<ErrorGuard>
<div tabIndex={-1}>
{RouteComponent &&
(isAuthPath(path ?? "") ? (
<AuthGuard {...routeProps}>
<RouteComponent {...queryProps} />
</AuthGuard>
) : isAnonymousPath(path ?? "") ? (
<AnonymousGuard>
<RouteComponent {...queryProps} />
</AnonymousGuard>
) : (
<RouteComponent {...queryProps} />
))}
</div>
</ErrorGuard>
);
}}
/>
),
)}
<Route component={ErrorPage} />
</Switch>
</div>
<Footer site={siteRes} />
</div>
);
}
}

const AppForwardRef = forwardRef((props, ref) => <App {...props} ref={ref} />);

export default class AppWrapper extends Component<any, any> {
private isoData: IsoDataOptionalSite = setIsoData(this.context);
private readonly rootRef = createRef<HTMLDivElement>();

componentDidMount(): void {
setupTippy(this.rootRef);
Expand All @@ -32,91 +125,17 @@ export class App extends Component<any, any> {
destroyTippy();
}

handleJumpToContent(event) {
event.preventDefault();
this.mainContentRef.current?.focus();
}

render() {
const siteRes = this.isoData.site_res;
const siteView = siteRes?.site_view;
const contentWarning =
this.isoData.site_res?.site_view.site.content_warning;

return (
<>
<Provider i18next={I18NextService.i18n}>
<div id="app" className="lemmy-site" ref={this.rootRef}>
<button
type="button"
className="btn skip-link bg-light position-absolute start-0 z-3"
onClick={linkEvent(this, this.handleJumpToContent)}
>
{I18NextService.i18n.t("jump_to_content", "Jump to content")}
</button>
{siteView && (
<Theme defaultTheme={siteView.local_site.default_theme} />
)}
<Navbar siteRes={siteRes} />
<div className="mt-4 p-0 fl-1">
<Switch>
{routes.map(
({
path,
component: RouteComponent,
fetchInitialData,
getQueryParams,
}) => (
<Route
key={path}
path={path}
exact
component={routeProps => {
if (!fetchInitialData) {
FirstLoadService.falsify();
}

let queryProps = routeProps;
if (getQueryParams && this.isoData.site_res) {
// ErrorGuard will not render its children when
// site_res is missing, this guarantees that props
// will always contain the query params.
queryProps = {
...routeProps,
...getQueryParams(
routeProps.location.search,
this.isoData.site_res,
),
};
}

return (
<ErrorGuard>
<div tabIndex={-1}>
{RouteComponent &&
(isAuthPath(path ?? "") ? (
<AuthGuard {...routeProps}>
<RouteComponent {...queryProps} />
</AuthGuard>
) : isAnonymousPath(path ?? "") ? (
<AnonymousGuard>
<RouteComponent {...queryProps} />
</AnonymousGuard>
) : (
<RouteComponent {...queryProps} />
))}
</div>
</ErrorGuard>
);
}}
/>
),
)}
<Route component={ErrorPage} />
</Switch>
</div>
<Footer site={siteRes} />
</div>
</Provider>
</>
<Provider i18next={I18NextService.i18n}>
{contentWarning && (
<AdultConsentModal contentWarning={contentWarning} />
)}
<AppForwardRef ref={this.rootRef} />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not just set an invisible class depending on the contentWarning?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Currently I handle the blur by setting the background-filter for the top level of the modal element. I've tried doing it by putting a class on app, but that always ended up blurring out the modal as well. Another approach I tried was just having all of the lifecycle methods and event handlers be handled in the original top-level App component. This seemed to work, but would cause the loading skeleton to flash in the blurred background each second the redirect time counts down.

I'm going to see if I can handle this all at the very top level componentDidRoute. I strongly suspect the issue is due to the order rendering is done in. Before my most recent change, the logic for showing the modal didn't run until after the top level App component mounted and rendered. In the current iteration, componentDidMount for the consent modal is being called simultaneously with the componentDidMount for the App component. I think moving this logic to the very root of the component tree as a parent of App should solve the issue.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool. If all else fails we might have to just resort to a simple confirm dialog on the SSR like lemmynsfw does it.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the current iteration, componentDidMount for the consent modal is being called simultaneously with the componentDidMount for the App component.

setState in componentWillMount will affect the first render of the component. It gets called on the server too.

To avoid ever showing the wrongly un/blurred version after a page refresh, you'd probably need a create-ssr-html-hack similar to the auto detected light/dark themes. It's the same problem, the server doesn't know the real style to use, and whatever the server decides to show will otherwise be visible at least until startClient is called.

lemmy-ui/src/server/utils/create-ssr-html.tsx

Lines 82 to 87 in accf1b2

<script nonce="${cspNonce}">
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>

Copy link
Member Author

@SleeplessOne1917 SleeplessOne1917 Apr 17, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried my idea and it didn't work. I can attempt @matc-pub's suggestion, although I foresee this will cause me to run into the opposite issue: the page flashing as blurred for a second when it shouldn't be. This is because if content_warning is set, the browser's local storage also has to be checked to see if it needs to ask for consent.

Edit: @matc-pub's suggestion would most likely work if I used a cookie instead of local storage. I'll give that an attempt.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've tried the cookie approach with and without a data attribute. The HTML and CSS that gets returned from the server before client side JS runs still isn't blurred. I think the problem is that bootstrap modals depend on being run in the browser to render. We'll either have to live with a slight delay for when the blur starts or go back to using the regular confirm dialog.

</Provider>
);
}
}
Loading