From 04b510d88b9ba923b34d864da8412404e70a8a80 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Thu, 5 Aug 2021 15:00:21 +0800
Subject: [PATCH] [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         | 15 ++++
 ui/component/settingAccount/view.jsx         | 55 ++++++++++++
 ui/component/settingAccountPassword/view.jsx | 95 ++++++++++----------
 ui/component/syncToggle/view.jsx             | 30 ++++---
 ui/page/settings/index.js                    |  7 +-
 ui/page/settings/view.jsx                    | 50 ++---------
 6 files changed, 144 insertions(+), 108 deletions(-)
 create mode 100644 ui/component/settingAccount/index.js
 create mode 100644 ui/component/settingAccount/view.jsx

diff --git a/ui/component/settingAccount/index.js b/ui/component/settingAccount/index.js
new file mode 100644
index 000000000..9abbe808b
--- /dev/null
+++ b/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);
diff --git a/ui/component/settingAccount/view.jsx b/ui/component/settingAccount/view.jsx
new file mode 100644
index 000000000..4097b532d
--- /dev/null
+++ b/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 */}
+        </>
+      }
+    />
+  );
+}
diff --git a/ui/component/settingAccountPassword/view.jsx b/ui/component/settingAccountPassword/view.jsx
index a63dff59a..494d078e6 100644
--- a/ui/component/settingAccountPassword/view.jsx
+++ b/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 (
-    <Card
-      title={__('Account password')}
-      subtitle={hasPassword ? '' : __('You do not currently have a password set.')}
-      actions={
-        isAddingPassword ? (
-          <div>
-            <Form onSubmit={handleSubmit} className="section">
-              {hasPassword && (
-                <FormField
-                  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)}
+  return isAddingPassword ? (
+    <div>
+      <Form onSubmit={handleSubmit} className="section">
+        {hasPassword && (
+          <FormField
+            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>
+  ) : (
+    <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>
   );
 }
diff --git a/ui/component/syncToggle/view.jsx b/ui/component/syncToggle/view.jsx
index 2a885ecf3..e6a702947 100644
--- a/ui/component/syncToggle/view.jsx
+++ b/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>
   );
diff --git a/ui/page/settings/index.js b/ui/page/settings/index.js
index c9292b3cf..6db459061 100644
--- a/ui/page/settings/index.js
+++ b/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)),
diff --git a/ui/page/settings/view.jsx b/ui/page/settings/view.jsx
index 60d29d385..79f9a0f40 100644
--- a/ui/page/settings/view.jsx
+++ b/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;
-
-    if (isAuthenticated || !IS_WEB) {
-      this.props.updateWalletStatus();
-      getPasswordFromCookie().then((p) => {
-        if (typeof p === 'string') {
-          this.setState({ storedPassword: true });
-        }
-      });
-    }
+    const { enterSettings } = this.props;
     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