diff --git a/ui/page/passwordUpdate/index.js b/ui/page/passwordUpdate/index.js
new file mode 100644
index 000000000..40e233027
--- /dev/null
+++ b/ui/page/passwordUpdate/index.js
@@ -0,0 +1,3 @@
+import PasswordUpdate from './view';
+
+export default PasswordUpdate;
diff --git a/ui/page/passwordUpdate/view.jsx b/ui/page/passwordUpdate/view.jsx
new file mode 100644
index 000000000..380f30095
--- /dev/null
+++ b/ui/page/passwordUpdate/view.jsx
@@ -0,0 +1,13 @@
+// @flow
+import React from 'react';
+import Card from 'component/common/card';
+import Page from 'component/page';
+import SettingAccountPassword from 'component/settingAccountPassword';
+
+export default function PasswordUpdate() {
+ return (
+
+ } />
+
+ );
+}
diff --git a/ui/page/settings/index.js b/ui/page/settings/index.js
index c9292b3cf..35df01630 100644
--- a/ui/page/settings/index.js
+++ b/ui/page/settings/index.js
@@ -1,57 +1,17 @@
import { connect } from 'react-redux';
-import { doClearCache, doNotifyForgetPassword, doToggle3PAnalytics, doOpenModal } from 'redux/actions/app';
-import { selectAllowAnalytics } from 'redux/selectors/app';
-import {
- doSetDaemonSetting,
- doClearDaemonSetting,
- doSetClientSetting,
- doSetDarkTime,
- doEnterSettingsPage,
- doExitSettingsPage,
-} from 'redux/actions/settings';
-import { doSetPlayingUri } from 'redux/actions/content';
-import {
- makeSelectClientSetting,
- selectDaemonSettings,
- selectLanguage,
- selectShowMatureContent,
-} from 'redux/selectors/settings';
-import { doWalletStatus, selectMyChannelUrls, selectWalletIsEncrypted, SETTINGS } from 'lbry-redux';
+import { doEnterSettingsPage, doExitSettingsPage } from 'redux/actions/settings';
+import { selectDaemonSettings, selectLanguage } from 'redux/selectors/settings';
+import { selectUserVerifiedEmail } from 'redux/selectors/user';
+
import SettingsPage from './view';
-import { selectUserVerifiedEmail, selectUser } from 'redux/selectors/user';
const select = (state) => ({
daemonSettings: selectDaemonSettings(state),
- allowAnalytics: selectAllowAnalytics(state),
isAuthenticated: selectUserVerifiedEmail(state),
- showNsfw: selectShowMatureContent(state),
- currentTheme: makeSelectClientSetting(SETTINGS.THEME)(state),
- themes: makeSelectClientSetting(SETTINGS.THEMES)(state),
- automaticDarkModeEnabled: makeSelectClientSetting(SETTINGS.AUTOMATIC_DARK_MODE_ENABLED)(state),
- clock24h: makeSelectClientSetting(SETTINGS.CLOCK_24H)(state),
- autoplay: makeSelectClientSetting(SETTINGS.AUTOPLAY)(state),
- walletEncrypted: selectWalletIsEncrypted(state),
- autoDownload: makeSelectClientSetting(SETTINGS.AUTO_DOWNLOAD)(state),
- hideBalance: makeSelectClientSetting(SETTINGS.HIDE_BALANCE)(state),
- floatingPlayer: makeSelectClientSetting(SETTINGS.FLOATING_PLAYER)(state),
- hideReposts: makeSelectClientSetting(SETTINGS.HIDE_REPOSTS)(state),
- darkModeTimes: makeSelectClientSetting(SETTINGS.DARK_MODE_TIMES)(state),
language: selectLanguage(state),
- myChannelUrls: selectMyChannelUrls(state),
- user: selectUser(state),
});
const perform = (dispatch) => ({
- setDaemonSetting: (key, value) => dispatch(doSetDaemonSetting(key, value)),
- clearDaemonSetting: (key) => dispatch(doClearDaemonSetting(key)),
- toggle3PAnalytics: (allow) => dispatch(doToggle3PAnalytics(allow)),
- clearCache: () => dispatch(doClearCache()),
- setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
- updateWalletStatus: () => dispatch(doWalletStatus()),
- confirmForgetPassword: (modalProps) => dispatch(doNotifyForgetPassword(modalProps)),
- clearPlayingUri: () => dispatch(doSetPlayingUri({ uri: null })),
- setDarkTime: (time, options) => dispatch(doSetDarkTime(time, options)),
- openModal: (id, params) => dispatch(doOpenModal(id, params)),
enterSettings: () => dispatch(doEnterSettingsPage()),
exitSettings: () => dispatch(doExitSettingsPage()),
});
diff --git a/ui/page/settings/view.jsx b/ui/page/settings/view.jsx
index 60d29d385..dfd2278f7 100644
--- a/ui/page/settings/view.jsx
+++ b/ui/page/settings/view.jsx
@@ -1,43 +1,16 @@
// @flow
import * as PAGES from 'constants/pages';
-import * as MODALS from 'constants/modal_types';
import * as ICONS from 'constants/icons';
import * as React from 'react';
-import { SETTINGS } from 'lbry-redux';
-import { FormField } from 'component/common/form';
+import classnames from 'classnames';
import Button from 'component/button';
import Page from 'component/page';
-import SettingLanguage from 'component/settingLanguage';
-import FileSelector from 'component/common/file-selector';
-import SyncToggle from 'component/syncToggle';
-import HomepageSelector from 'component/homepageSelector';
-import Card from 'component/common/card';
-import SettingAccountPassword from 'component/settingAccountPassword';
-import classnames from 'classnames';
-import { getPasswordFromCookie } from 'util/saved-passwords';
-import { SIMPLE_SITE } from 'config';
-// $FlowFixMe
-import homepages from 'homepages';
-import { Lbryio } from 'lbryinc';
+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';
-import { getStripeEnvironment } from 'util/stripe';
-
-type Price = {
- currency: string,
- amount: number,
-};
-
-type SetDaemonSettingArg = boolean | string | number;
-
-type DarkModeTimes = {
- from: { hour: string, min: string, formattedTime: string },
- to: { hour: string, min: string, formattedTime: string },
-};
-
-type OptionTimes = {
- fromTo: string,
- time: string,
-};
type DaemonSettings = {
download_dir: string,
@@ -45,69 +18,15 @@ type DaemonSettings = {
};
type Props = {
- setDaemonSetting: (string, ?SetDaemonSettingArg) => void,
- clearDaemonSetting: (string) => void,
- setClientSetting: (string, SetDaemonSettingArg) => void,
- toggle3PAnalytics: (boolean) => void,
- clearCache: () => Promise
,
daemonSettings: DaemonSettings,
- allowAnalytics: boolean,
- showNsfw: boolean,
isAuthenticated: boolean,
- instantPurchaseEnabled: boolean,
- instantPurchaseMax: Price,
- currentTheme: string,
- themes: Array,
- automaticDarkModeEnabled: boolean,
- clock24h: boolean,
- autoplay: boolean,
- updateWalletStatus: () => void,
- walletEncrypted: boolean,
- confirmForgetPassword: ({}) => void,
- floatingPlayer: boolean,
- hideReposts: ?boolean,
- clearPlayingUri: () => void,
- darkModeTimes: DarkModeTimes,
- setDarkTime: (string, {}) => void,
- openModal: (string) => void,
- language?: string,
enterSettings: () => void,
exitSettings: () => void,
- myChannelUrls: ?Array,
- user: User,
};
-type State = {
- clearingCache: boolean,
- storedPassword: boolean,
-};
-
-class SettingsPage extends React.PureComponent {
- constructor(props: Props) {
- super(props);
-
- this.state = {
- clearingCache: false,
- storedPassword: false,
- };
-
- (this: any).onThemeChange = this.onThemeChange.bind(this);
- (this: any).onAutomaticDarkModeChange = this.onAutomaticDarkModeChange.bind(this);
- (this: any).onChangeTime = this.onChangeTime.bind(this);
- (this: any).onConfirmForgetPassword = this.onConfirmForgetPassword.bind(this);
- }
-
+class SettingsPage extends React.PureComponent {
componentDidMount() {
- const { isAuthenticated, enterSettings } = this.props;
-
- if (isAuthenticated || !IS_WEB) {
- this.props.updateWalletStatus();
- getPasswordFromCookie().then((p) => {
- if (typeof p === 'string') {
- this.setState({ storedPassword: true });
- }
- });
- }
+ const { enterSettings } = this.props;
enterSettings();
}
@@ -116,117 +35,34 @@ class SettingsPage extends React.PureComponent {
exitSettings();
}
- onThemeChange(event: SyntheticInputEvent<*>) {
- const { value } = event.target;
-
- if (value === 'dark') {
- this.onAutomaticDarkModeChange(false);
- }
-
- this.props.setClientSetting(SETTINGS.THEME, value);
- }
-
- onAutomaticDarkModeChange(value: boolean) {
- this.props.setClientSetting(SETTINGS.AUTOMATIC_DARK_MODE_ENABLED, value);
- }
-
- onClock24hChange(value: boolean) {
- this.props.setClientSetting(SETTINGS.CLOCK_24H, value);
- }
-
- onConfirmForgetPassword() {
- const { confirmForgetPassword } = this.props;
- confirmForgetPassword({
- callback: () => {
- this.setState({ storedPassword: false });
- },
- });
- }
-
- onChangeTime(event: SyntheticInputEvent<*>, options: OptionTimes) {
- const { value } = event.target;
-
- this.props.setDarkTime(value, options);
- }
-
- formatHour(time: string, clock24h: boolean) {
- if (clock24h) {
- return `${time}:00`;
- }
-
- const now = new Date(0, 0, 0, Number(time));
-
- const hour = now.toLocaleTimeString('en-US', { hour12: true, hour: '2-digit' });
-
- return hour;
- }
-
- setDaemonSetting(name: string, value: ?SetDaemonSettingArg): void {
- this.props.setDaemonSetting(name, value);
- }
-
- clearDaemonSetting(name: string): void {
- this.props.clearDaemonSetting(name);
- }
-
render() {
- const {
- daemonSettings,
- allowAnalytics,
- showNsfw,
- isAuthenticated,
- currentTheme,
- themes,
- automaticDarkModeEnabled,
- clock24h,
- autoplay,
- walletEncrypted,
- // autoDownload,
- setDaemonSetting,
- setClientSetting,
- toggle3PAnalytics,
- floatingPlayer,
- hideReposts,
- clearPlayingUri,
- darkModeTimes,
- clearCache,
- openModal,
- myChannelUrls,
- user,
- } = this.props;
- const { storedPassword } = this.state;
+ const { daemonSettings, isAuthenticated } = this.props;
const noDaemonSettings = !daemonSettings || Object.keys(daemonSettings).length === 0;
- const startHours = ['18', '19', '20', '21'];
- const endHours = ['5', '6', '7', '8'];
return (
- } />
- {homepages && Object.keys(homepages).length > 1 && (
- } />
- )}
-
{!isAuthenticated && IS_WEB && (
-
- }
- />
-
+ <>
+