LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

add age confirmation on web when setting mature content setting

Browse source
This commit is contained in:
Sean Yesmunt 2020-05-22 11:47:48 -04:00
parent 6d888b5121
commit 047fb24731
7 changed files with 100 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
static/app-strings.json
View file

@ -1215,5 +1215,7 @@
"%duration% minute ago": "%duration% minute ago",
"%duration% seconds ago": "%duration% seconds ago",
"%duration% second ago": "%duration% second ago",
"Check your rewards page to see if you qualify for paid content reimbursement. Only content in this section qualifies.": "Check your rewards page to see if you qualify for paid content reimbursement. Only content in this section qualifies."
"Check your rewards page to see if you qualify for paid content reimbursement. Only content in this section qualifies.": "Check your rewards page to see if you qualify for paid content reimbursement. Only content in this section qualifies.",
"blocked channels": "blocked channels",
"%count% %channels%. ": "%count% %channels%. "
}

1
ui/constants/modal_types.js
View file

@ -39,3 +39,4 @@ export const SET_REFERRER = 'set_referrer';
export const REPOST = 'repost';
export const SIGN_OUT = 'sign_out';
export const LIQUIDATE_SUPPORTS = 'liquidate_supports';
export const CONFIRM_AGE = 'confirm_age';

9
ui/modal/modalConfirmAge/index.js Normal file
View file

@ -0,0 +1,9 @@
import { connect } from 'react-redux';
import { doHideModal } from 'redux/actions/app';
import { doSetClientSetting } from 'redux/actions/settings';
import ModalAffirmPurchase from './view';
export default connect(null, {
doHideModal,
doSetClientSetting,
})(ModalAffirmPurchase);

52
ui/modal/modalConfirmAge/view.jsx Normal file
View file

@ -0,0 +1,52 @@
// @flow
import * as SETTINGS from 'constants/settings';
import React from 'react';
import { Modal } from 'modal/modal';
import Card from 'component/common/card';
import Button from 'component/button';
import { FormField } from 'component/common/form';
type Props = {
doHideModal: () => void,
doSetClientSetting: (string, any) => void,
};
function ModalAffirmPurchase(props: Props) {
const { doHideModal, doSetClientSetting } = props;
const [confirmed, setConfirmed] = React.useState(false);
function handleConfirmAge() {
doSetClientSetting(SETTINGS.SHOW_MATURE, true);
doHideModal();
}
const title = __('Confirm Your Age');
return (
<Modal type="card" isOpen contentLabel={title} onAborted={doHideModal}>
<Card
title={title}
actions={
<>
<div className="section">
<FormField
name="age-confirmation"
type="checkbox"
label={__('I confirm I am over 18 years old.')}
helper={__('This is only for regulatory compliance and the data will not be stored.')}
checked={confirmed}
onChange={() => setConfirmed(!confirmed)}
/>
</div>
<div className="section__actions">
<Button button="primary" label={'Confirm'} onClick={handleConfirmAge} disabled={!confirmed} />
<Button button="link" label={__('Cancel')} onClick={doHideModal} />
</div>
</>
}
/>
</Modal>
);
}
export default ModalAffirmPurchase;

5
ui/modal/modalRouter/view.jsx
View file

@ -37,7 +37,8 @@ import ModalMobileNavigation from 'modal/modalMobileNavigation';
import ModalSetReferrer from 'modal/modalSetReferrer';
import ModalRepost from 'modal/modalRepost';
import ModalSignOut from 'modal/modalSignOut';
import ModalLiquidateSupports from '../modalSupportsLiquidate';
import ModalLiquidateSupports from 'modal/modalSupportsLiquidate';
import ModalConfirmAge from 'modal/modalConfirmAge';
type Props = {
modal: { id: string, modalProps: {} },
@ -137,6 +138,8 @@ function ModalRouter(props: Props) {
return <ModalSignOut {...modalProps} />;
case MODALS.LIQUIDATE_SUPPORTS:
return <ModalLiquidateSupports {...modalProps} />;
case MODALS.CONFIRM_AGE:
return <ModalConfirmAge {...modalProps} />;
default:
return null;
}

2
ui/page/settings/index.js
View file

@ -5,6 +5,7 @@ import {
doNotifyDecryptWallet,
doNotifyForgetPassword,
doToggle3PAnalytics,
doOpenModal,
} from 'redux/actions/app';
import { selectAllowAnalytics } from 'redux/selectors/app';
import {
@ -63,6 +64,7 @@ const perform = dispatch => ({
clearPlayingUri: () => dispatch(doSetPlayingUri(null)),
setDarkTime: (time, options) => dispatch(doSetDarkTime(time, options)),
findFFmpeg: () => dispatch(doFindFFmpeg()),
openModal: (id, params) => dispatch(doOpenModal(id, params)),
});
export default connect(select, perform)(SettingsPage);

43
ui/page/settings/view.jsx
View file

@ -3,6 +3,7 @@
/* eslint react/jsx-no-comment-textnodes:0 */
import * as PAGES from 'constants/pages';
import * as MODALS from 'constants/modal_types';
import * as React from 'react';
import { FormField, FormFieldPrice } from 'component/common/form';
@ -79,13 +80,14 @@ type Props = {
hideBalance: boolean,
confirmForgetPassword: ({}) => void,
floatingPlayer: boolean,
hideReposts: boolean,
hideReposts: ?boolean,
clearPlayingUri: () => void,
darkModeTimes: DarkModeTimes,
setDarkTime: (string, {}) => void,
ffmpegStatus: { available: boolean, which: string },
findingFFmpeg: boolean,
findFFmpeg: () => void,
openModal: string => void,
};
type State = {
@ -246,6 +248,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
darkModeTimes,
clearCache,
findingFFmpeg,
openModal,
} = this.props;
const { storedPassword } = this.state;
const noDaemonSettings = !daemonSettings || Object.keys(daemonSettings).length === 0;
@ -436,7 +439,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
)}
/>
{/* https://github.com/lbryio/lbry-desktop/issues/3774 */}
<FormField
type="checkbox"
name="hide_reposts"
@ -445,8 +447,8 @@ class SettingsPage extends React.PureComponent<Props, State> {
let param = e.target.checked ? { add: 'noreposts' } : { remove: 'noreposts' };
Lbryio.call('user_tag', 'edit', param);
}
// $FlowFixMe could be undefined due to rehydrate
setClientSetting(SETTINGS.HIDE_REPOSTS, !Boolean(hideReposts));
setClientSetting(SETTINGS.HIDE_REPOSTS, !hideReposts);
}}
checked={hideReposts}
label={__('Hide reposts')}
@ -465,7 +467,11 @@ class SettingsPage extends React.PureComponent<Props, State> {
<FormField
type="checkbox"
name="show_nsfw"
onChange={() => setClientSetting(SETTINGS.SHOW_MATURE, !showNsfw)}
onChange={() =>
!IS_WEB || showNsfw
? setClientSetting(SETTINGS.SHOW_MATURE, !showNsfw)
: openModal(MODALS.CONFIRM_AGE)
}
checked={showNsfw}
label={__('Show mature content')}
helper={__(
@ -480,15 +486,24 @@ class SettingsPage extends React.PureComponent<Props, State> {
<Card
title={__('Blocked Channels')}
actions={
<p>
<React.Fragment>
{__('%count% %channels%. ', {
count: userBlockedChannelsCount === 0 ? __("You don't have") : __('You have') + ' ' + userBlockedChannelsCount + ' ',
channels: userBlockedChannelsCount === 1 ? __('blocked channel') : __('blocked channels'),
})}
{<Button button="link" label={userBlockedChannelsCount === 0 ? null : __('Manage')} navigate={`/$/${PAGES.BLOCKED}`} /> }
</React.Fragment>
</p>
<p>
<React.Fragment>
{__('%count% %channels%. ', {
count:
userBlockedChannelsCount === 0
? __("You don't have")
: __('You have') + ' ' + (userBlockedChannelsCount || 0) + ' ',
channels: userBlockedChannelsCount === 1 ? __('blocked channel') : __('blocked channels'),
})}
{
<Button
button="link"
label={userBlockedChannelsCount === 0 ? null : __('Manage')}
navigate={`/$/${PAGES.BLOCKED}`}
/>
}
</React.Fragment>
</p>
}
/>
)}