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.
This commit is contained in:
parent
98f7dcd000
commit
aba9198844
3 changed files with 95 additions and 19 deletions
16
ui/component/settingUnauthenticated/index.js
Normal file
16
ui/component/settingUnauthenticated/index.js
Normal file
|
@ -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);
|
53
ui/component/settingUnauthenticated/view.jsx
Normal file
53
ui/component/settingUnauthenticated/view.jsx
Normal file
|
@ -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.';
|
|
@ -2,12 +2,14 @@
|
||||||
import * as PAGES from 'constants/pages';
|
import * as PAGES from 'constants/pages';
|
||||||
import * as ICONS from 'constants/icons';
|
import * as ICONS from 'constants/icons';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
import classnames from 'classnames';
|
||||||
import Button from 'component/button';
|
import Button from 'component/button';
|
||||||
import Page from 'component/page';
|
import Page from 'component/page';
|
||||||
import SettingAccount from 'component/settingAccount';
|
import SettingAccount from 'component/settingAccount';
|
||||||
import SettingAppearance from 'component/settingAppearance';
|
import SettingAppearance from 'component/settingAppearance';
|
||||||
import SettingContent from 'component/settingContent';
|
import SettingContent from 'component/settingContent';
|
||||||
import SettingSystem from 'component/settingSystem';
|
import SettingSystem from 'component/settingSystem';
|
||||||
|
import SettingUnauthenticated from 'component/settingUnauthenticated';
|
||||||
import Yrbl from 'component/yrbl';
|
import Yrbl from 'component/yrbl';
|
||||||
|
|
||||||
type DaemonSettings = {
|
type DaemonSettings = {
|
||||||
|
@ -40,10 +42,30 @@ class SettingsPage extends React.PureComponent<Props> {
|
||||||
const newStyle = true;
|
const newStyle = true;
|
||||||
return newStyle ? (
|
return newStyle ? (
|
||||||
<Page noFooter noSideNavigation backout={{ title: __('Settings'), backLabel: __('Done') }} className="card-stack">
|
<Page noFooter noSideNavigation backout={{ title: __('Settings'), backLabel: __('Done') }} className="card-stack">
|
||||||
<SettingAppearance />
|
{!isAuthenticated && IS_WEB && (
|
||||||
<SettingAccount />
|
<>
|
||||||
<SettingContent />
|
<SettingUnauthenticated />
|
||||||
<SettingSystem />
|
<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>
|
||||||
) : (
|
) : (
|
||||||
<Page
|
<Page
|
||||||
|
@ -55,21 +77,6 @@ class SettingsPage extends React.PureComponent<Props> {
|
||||||
}}
|
}}
|
||||||
className="card-stack"
|
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 ? (
|
{!IS_WEB && noDaemonSettings ? (
|
||||||
<section className="card card--section">
|
<section className="card card--section">
|
||||||
<div className="card__title card__title--deprecated">{__('Failed to load settings.')}</div>
|
<div className="card__title card__title--deprecated">{__('Failed to load settings.')}</div>
|
||||||
|
|
Loading…
Reference in a new issue