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,10 +42,30 @@ 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 />
+        {!isAuthenticated && IS_WEB && (
+          <>
+            <SettingUnauthenticated />
+            <div className="main--empty">
+              <Yrbl
+                type="happy"
+                title={__('Sign up for full control')}
+                subtitle={__('Unlock new buttons that change things.')}
+                actions={
+                  <div className="section__actions">
+                    <Button button="primary" icon={ICONS.SIGN_UP} label={__('Sign Up')} navigate={`/$/${PAGES.AUTH}`} />
+                  </div>
+                }
+              />
+            </div>
+          </>
+        )}
+
+        <div className={classnames('card-stack', { 'card--disabled': IS_WEB && !isAuthenticated })}>
+          <SettingAppearance />
+          <SettingAccount />
+          <SettingContent />
+          <SettingSystem />
+        </div>
       </Page>
     ) : (
       <Page
@@ -55,21 +77,6 @@ class SettingsPage extends React.PureComponent<Props> {
         }}
         className="card-stack"
       >
-        {!isAuthenticated && IS_WEB && (
-          <div className="main--empty">
-            <Yrbl
-              type="happy"
-              title={__('Sign up for full control')}
-              subtitle={__('Unlock new buttons that change things.')}
-              actions={
-                <div className="section__actions">
-                  <Button button="primary" icon={ICONS.SIGN_UP} label={__('Sign Up')} navigate={`/$/${PAGES.AUTH}`} />
-                </div>
-              }
-            />
-          </div>
-        )}
-
         {!IS_WEB && noDaemonSettings ? (
           <section className="card card--section">
             <div className="card__title card__title--deprecated">{__('Failed to load settings.')}</div>