Handle unauthenticated case, i.e. only allow basic settings.

Placed settings that we allow for unauthenticated users under <SettingUnauthenticated>. While it is redundant, it's easier to handle the grouping, and more readable overall.

ui/component/settingUnauthenticated/index.js

@@ -0,0 +1,16 @@
+import { connect } from 'react-redux';
+import { SETTINGS } from 'lbry-redux';
+import { doSetClientSetting } from 'redux/actions/settings';
+import { makeSelectClientSetting } from 'redux/selectors/settings';
+
+import SettingUnauthenticated from './view';
+
+const select = (state) => ({
+  searchInLanguage: makeSelectClientSetting(SETTINGS.SEARCH_IN_LANGUAGE)(state),
+});
+
+const perform = (dispatch) => ({
+  setSearchInLanguage: (value) => dispatch(doSetClientSetting(SETTINGS.SEARCH_IN_LANGUAGE, value)),
+});
+
+export default connect(select, perform)(SettingUnauthenticated);

ui/component/settingUnauthenticated/view.jsx

@@ -0,0 +1,53 @@
+/**
+ * Settings that we allow for unauthenticated users.
+ */
+
+// @flow
+import React from 'react';
+import Card from 'component/common/card';
+import { FormField } from 'component/common/form';
+import HomepageSelector from 'component/homepageSelector';
+import SettingLanguage from 'component/settingLanguage';
+import SettingsRow from 'component/settingsRow';
+// $FlowFixMe
+import homepages from 'homepages';
+
+type Props = {
+  searchInLanguage: boolean,
+  setSearchInLanguage: (boolean) => void,
+};
+
+export default function SettingUnauthenticated(props: Props) {
+  const { searchInLanguage, setSearchInLanguage } = props;
+
+  return (
+    <Card
+      isBodyList
+      body={
+        <>
+          <SettingsRow title={__('Language')} subtitle={__(HELP_LANGUAGE)}>
+            <SettingLanguage />
+          </SettingsRow>
+
+          <SettingsRow title={__('Search only in the selected language by default')}>
+            <FormField
+              name="search-in-language"
+              type="checkbox"
+              checked={searchInLanguage}
+              onChange={() => setSearchInLanguage(!searchInLanguage)}
+            />
+          </SettingsRow>
+
+          {homepages && Object.keys(homepages).length > 1 && (
+            <SettingsRow title={__('Homepage')} subtitle={__('Tailor your experience.')}>
+              <HomepageSelector />
+            </SettingsRow>
+          )}
+        </>
+      }
+    />
+  );
+}
+
+// prettier-ignore
+const HELP_LANGUAGE = 'Multi-language support is brand new and incomplete. Switching your language may have unintended consequences, like glossolalia.';

ui/page/settings/view.jsx

@@ -2,12 +2,14 @@
 import * as PAGES from 'constants/pages';
 import * as ICONS from 'constants/icons';
 import * as React from 'react';
+import classnames from 'classnames';
 import Button from 'component/button';
 import Page from 'component/page';
 import SettingAccount from 'component/settingAccount';
 import SettingAppearance from 'component/settingAppearance';
 import SettingContent from 'component/settingContent';
 import SettingSystem from 'component/settingSystem';
+import SettingUnauthenticated from 'component/settingUnauthenticated';
 import Yrbl from 'component/yrbl';
 
 type DaemonSettings = {
@@ -40,22 +42,9 @@ class SettingsPage extends React.PureComponent<Props> {
     const newStyle = true;
     return newStyle ? (
       <Page noFooter noSideNavigation backout={{ title: __('Settings'), backLabel: __('Done') }} className="card-stack">
-        <SettingAppearance />
-        <SettingAccount />
-        <SettingContent />
-        <SettingSystem />
-      </Page>
-    ) : (
-      <Page
-        noFooter
-        noSideNavigation
-        backout={{
-          title: __('Settings'),
-          backLabel: __('Done'),
-        }}
-        className="card-stack"
-      >
         {!isAuthenticated && IS_WEB && (
+          <>
+            <SettingUnauthenticated />
             <div className="main--empty">
               <Yrbl
                 type="happy"
@@ -68,8 +57,26 @@ class SettingsPage extends React.PureComponent<Props> {
                 }
               />
             </div>
+          </>
         )}
 
+        <div className={classnames('card-stack', { 'card--disabled': IS_WEB && !isAuthenticated })}>
+          <SettingAppearance />
+          <SettingAccount />
+          <SettingContent />
+          <SettingSystem />
+        </div>
+      </Page>
+    ) : (
+      <Page
+        noFooter
+        noSideNavigation
+        backout={{
+          title: __('Settings'),
+          backLabel: __('Done'),
+        }}
+        className="card-stack"
+      >
         {!IS_WEB && noDaemonSettings ? (
           <section className="card card--section">
             <div className="card__title card__title--deprecated">{__('Failed to load settings.')}</div>