[Account] grab SyncToggle and AccountPassword

Also made visual changes for the new Settings Page.

## SyncToggle:
It will no longer be under a dedicated Card, so the "Sync" title is not there to give context for the case of "no verified email".

Changed it such that the checkbox is always visible (it's label is self-explanatory) but disable when email is not set. The "Add Email" button will then appear below, so everything now makes sense in context.

ui/component/settingAccount/index.js

@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import { doWalletStatus, selectWalletIsEncrypted } from 'lbry-redux';
+import { selectUserVerifiedEmail } from 'redux/selectors/user';
+import SettingAccount from './view';
+
+const select = (state) => ({
+  isAuthenticated: selectUserVerifiedEmail(state),
+  walletEncrypted: selectWalletIsEncrypted(state),
+});
+
+const perform = (dispatch) => ({
+  doWalletStatus: () => dispatch(doWalletStatus()),
+});
+
+export default connect(select, perform)(SettingAccount);

ui/component/settingAccount/view.jsx

@@ -0,0 +1,55 @@
+// @flow
+import React from 'react';
+import Card from 'component/common/card';
+import SettingAccountPassword from 'component/settingAccountPassword';
+import SyncToggle from 'component/syncToggle';
+import { getPasswordFromCookie } from 'util/saved-passwords';
+
+type Props = {
+  // --- select ---
+  isAuthenticated: boolean,
+  walletEncrypted: boolean,
+  // --- perform ---
+  doWalletStatus: () => void,
+};
+
+export default function SettingAccount(props: Props) {
+  const { isAuthenticated, walletEncrypted, doWalletStatus } = props;
+  const [storedPassword, setStoredPassword] = React.useState(false);
+
+  // Determine if password is stored.
+  React.useEffect(() => {
+    if (isAuthenticated || !IS_WEB) {
+      doWalletStatus();
+      getPasswordFromCookie().then((p) => {
+        if (typeof p === 'string') {
+          setStoredPassword(true);
+        }
+      });
+    }
+    // enterSettings(); @KP need to do this at each component, or just at Settings Page?
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <Card
+      title={__('Account')}
+      subtitle=""
+      isBodyList
+      body={
+        <>
+          {isAuthenticated && (
+            <div className="card__main-actions">
+              <SettingAccountPassword />
+            </div>
+          )}
+
+          {/* @if TARGET='app' */}
+          <div className="card__main-actions">
+            <SyncToggle disabled={walletEncrypted && !storedPassword && storedPassword !== ''} />
+          </div>
+          {/* @endif */}
+        </>
+      }
+    />
+  );
+}

ui/component/settingAccountPassword/view.jsx

@@ -3,7 +3,6 @@ import React, { useState } from 'react';
 import { FormField, Form } from 'component/common/form';
 import Button from 'component/button';
 import ErrorText from 'component/common/error-text';
-import Card from 'component/common/card';
 import * as PAGES from 'constants/pages';
 
 type Props = {
@@ -38,54 +37,52 @@ export default function SettingAccountPassword(props: Props) {
     }
   }, [passwordSetSuccess, setOldPassword, setNewPassword, doClearPasswordEntry, doToast]);
 
-  return (
+  return isAddingPassword ? (
-    <Card
+    <div>
-      title={__('Account password')}
+      <Form onSubmit={handleSubmit} className="section">
-      subtitle={hasPassword ? '' : __('You do not currently have a password set.')}
+        {hasPassword && (
-      actions={
+          <FormField
-        isAddingPassword ? (
+            type="password"
-          <div>
+            name="setting_set_old_password"
-            <Form onSubmit={handleSubmit} className="section">
+            label={__('Old Password')}
-              {hasPassword && (
+            value={oldPassword}
-                <FormField
+            onChange={(e) => setOldPassword(e.target.value)}
-                  type="password"
-                  name="setting_set_old_password"
-                  label={__('Old Password')}
-                  value={oldPassword}
-                  onChange={e => setOldPassword(e.target.value)}
-                />
-              )}
-              <FormField
-                type="password"
-                name="setting_set_new_password"
-                label={__('New Password')}
-                value={newPassword}
-                onChange={e => setNewPassword(e.target.value)}
-              />
-
-              <div className="section__actions">
-                <Button button="primary" type="submit" label={__('Set Password')} disabled={!newPassword} />
-                {hasPassword ? (
-                  <Button button="link" label={__('Forgot Password?')} navigate={`/$/${PAGES.AUTH_PASSWORD_RESET}`} />
-                ) : (
-                  <Button button="link" label={__('Cancel')} onClick={() => setIsAddingPassword(false)} />
-                )}
-              </div>
-            </Form>
-            {passwordSetError && (
-              <div className="section">
-                <ErrorText>{passwordSetError}</ErrorText>
-              </div>
-            )}
-          </div>
-        ) : (
-          <Button
-            button="primary"
-            label={hasPassword ? __('Update Your Password') : __('Add A Password')}
-            onClick={() => setIsAddingPassword(true)}
           />
-        )
+        )}
-      }
+        <FormField
-    />
+          type="password"
+          name="setting_set_new_password"
+          label={__('New Password')}
+          value={newPassword}
+          onChange={(e) => setNewPassword(e.target.value)}
+        />
+
+        <div className="section__actions">
+          <Button button="primary" type="submit" label={__('Set Password')} disabled={!newPassword} />
+          {hasPassword ? (
+            <Button button="link" label={__('Forgot Password?')} navigate={`/$/${PAGES.AUTH_PASSWORD_RESET}`} />
+          ) : (
+            <Button button="link" label={__('Cancel')} onClick={() => setIsAddingPassword(false)} />
+          )}
+        </div>
+      </Form>
+      {passwordSetError && (
+        <div className="section">
+          <ErrorText>{passwordSetError}</ErrorText>
+        </div>
+      )}
+    </div>
+  ) : (
+    <div className="section__actions--between">
+      <div>
+        <p>{__('Password')}</p>
+        {!hasPassword && <p className="help">{__('You do not currently have a password set.')}</p>}
+      </div>
+      <Button
+        button="primary"
+        label={hasPassword ? __('Update Your Password') : __('Add A Password')}
+        onClick={() => setIsAddingPassword(true)}
+      />
+    </div>
   );
 }

ui/component/syncToggle/view.jsx

@@ -6,10 +6,10 @@ import { withRouter } from 'react-router';
 import { FormField } from 'component/common/form';
 
 type Props = {
-  setSyncEnabled: boolean => void,
+  setSyncEnabled: (boolean) => void,
   syncEnabled: boolean,
   verifiedEmail: ?string,
-  history: { push: string => void },
+  history: { push: (string) => void },
   location: UrlLocation,
   getSyncError: ?string,
   disabled: boolean,
@@ -21,20 +21,24 @@ function SyncToggle(props: Props) {
 
   return (
     <div>
-      {!verifiedEmail ? (
+      <FormField
+        type="checkbox"
+        name="sync_toggle"
+        label={__('Sync your balance and preferences across devices.')}
+        checked={syncEnabled && verifiedEmail}
+        onChange={() => openModal(MODALS.SYNC_ENABLE, { mode: syncEnabled ? 'disable' : 'enable' })}
+        disabled={disabled || !verifiedEmail}
+        helper={
+          disabled
+            ? __("To enable Sync, close LBRY completely and check 'Remember Password' during wallet unlock.")
+            : null
+        }
+      />
+      {!verifiedEmail && (
         <div>
-          <Button requiresAuth button="primary" label={__('Add Email')} />
           <p className="help">{__('An email address is required to sync your account.')}</p>
+          <Button requiresAuth button="primary" label={__('Add Email')} />
         </div>
-      ) : (
-        <FormField
-          type="checkbox"
-          name="sync_toggle"
-          label={__('Sync your balance and preferences across devices.')}
-          checked={syncEnabled}
-          onChange={() => openModal(MODALS.SYNC_ENABLE, { mode: syncEnabled ? 'disable' : 'enable' })}
-          disabled={disabled}
-        />
       )}
     </div>
   );

ui/page/settings/index.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { doClearCache, doNotifyForgetPassword, doToggle3PAnalytics, doOpenModal } from 'redux/actions/app';
+import { doClearCache, doToggle3PAnalytics, doOpenModal } from 'redux/actions/app';
 import { selectAllowAnalytics } from 'redux/selectors/app';
 import {
   doSetDaemonSetting,
@@ -16,7 +16,7 @@ import {
   selectLanguage,
   selectShowMatureContent,
 } from 'redux/selectors/settings';
-import { doWalletStatus, selectMyChannelUrls, selectWalletIsEncrypted, SETTINGS } from 'lbry-redux';
+import { selectMyChannelUrls, SETTINGS } from 'lbry-redux';
 import SettingsPage from './view';
 import { selectUserVerifiedEmail, selectUser } from 'redux/selectors/user';
 
@@ -30,7 +30,6 @@ const select = (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),
@@ -47,8 +46,6 @@ const perform = (dispatch) => ({
   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)),

ui/page/settings/view.jsx

@@ -7,14 +7,12 @@ import { SETTINGS } from 'lbry-redux';
 import { FormField } from 'component/common/form';
 import Button from 'component/button';
 import Page from 'component/page';
+import SettingAccount from 'component/settingAccount';
 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';
@@ -61,9 +59,6 @@ type Props = {
   automaticDarkModeEnabled: boolean,
   clock24h: boolean,
   autoplay: boolean,
-  updateWalletStatus: () => void,
-  walletEncrypted: boolean,
-  confirmForgetPassword: ({}) => void,
   floatingPlayer: boolean,
   hideReposts: ?boolean,
   clearPlayingUri: () => void,
@@ -79,7 +74,6 @@ type Props = {
 
 type State = {
   clearingCache: boolean,
-  storedPassword: boolean,
 };
 
 class SettingsPage extends React.PureComponent<Props, State> {
@@ -88,26 +82,15 @@ class SettingsPage extends React.PureComponent<Props, State> {
 
     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);
   }
 
   componentDidMount() {
-    const { isAuthenticated, enterSettings } = this.props;
+    const { enterSettings } = this.props;
-
-    if (isAuthenticated || !IS_WEB) {
-      this.props.updateWalletStatus();
-      getPasswordFromCookie().then((p) => {
-        if (typeof p === 'string') {
-          this.setState({ storedPassword: true });
-        }
-      });
-    }
     enterSettings();
   }
 
@@ -134,15 +117,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
     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;
 
@@ -180,7 +154,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
       automaticDarkModeEnabled,
       clock24h,
       autoplay,
-      walletEncrypted,
       // autoDownload,
       setDaemonSetting,
       setClientSetting,
@@ -194,12 +167,17 @@ class SettingsPage extends React.PureComponent<Props, State> {
       myChannelUrls,
       user,
     } = this.props;
-    const { storedPassword } = this.state;
     const noDaemonSettings = !daemonSettings || Object.keys(daemonSettings).length === 0;
     const startHours = ['18', '19', '20', '21'];
     const endHours = ['5', '6', '7', '8'];
 
-    return (
+    const newStyle = true;
+
+    return newStyle ? (
+      <Page noFooter noSideNavigation backout={{ title: __('Settings'), backLabel: __('Done') }} className="card-stack">
+        <SettingAccount />
+      </Page>
+    ) : (
       <Page
         noFooter
         noSideNavigation
@@ -235,7 +213,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
           </section>
         ) : (
           <div className={classnames('card-stack', { 'card--disabled': IS_WEB && !isAuthenticated })}>
-            {isAuthenticated && <SettingAccountPassword />}
             {/* @if TARGET='app' */}
             <Card
               title={__('Download directory')}
@@ -252,15 +229,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
                 </React.Fragment>
               }
             />
-            <Card
-              title={__('Sync')}
-              subtitle={
-                walletEncrypted && !storedPassword && storedPassword !== ''
-                  ? __("To enable Sync, close LBRY completely and check 'Remember Password' during wallet unlock.")
-                  : null
-              }
-              actions={<SyncToggle disabled={walletEncrypted && !storedPassword && storedPassword !== ''} />}
-            />
             {/* @endif */}
 
             <Card