add age confirmation on web when setting mature content setting

static/app-strings.json

@@ -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%. "
 }

ui/constants/modal_types.js

@@ -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';

ui/modal/modalConfirmAge/index.js

@@ -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);

ui/modal/modalConfirmAge/view.jsx

@@ -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;

ui/modal/modalRouter/view.jsx

@@ -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;
   }

ui/page/settings/index.js

@@ -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);

ui/page/settings/view.jsx

@@ -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={__(
@@ -483,10 +489,19 @@ class SettingsPage extends React.PureComponent<Props, State> {
                   <p>
                     <React.Fragment>
                       {__('%count% %channels%. ', {
-                      count: userBlockedChannelsCount === 0 ? __("You don't have") : __('You have') + ' ' + userBlockedChannelsCount + ' ',
+                        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}`} /> }
+                      {
+                        <Button
+                          button="link"
+                          label={userBlockedChannelsCount === 0 ? null : __('Manage')}
+                          navigate={`/$/${PAGES.BLOCKED}`}
+                        />
+                      }
                     </React.Fragment>
                   </p>
                 }