Move 'update password' into a subpage

ui/component/router/view.jsx

@@ -82,6 +82,7 @@ const TagsFollowingManagePage = lazyImport(() =>
 );
 const TagsFollowingPage = lazyImport(() => import('page/tagsFollowing' /* webpackChunkName: "secondary" */));
 const TopPage = lazyImport(() => import('page/top' /* webpackChunkName: "secondary" */));
+const UpdatePasswordPage = lazyImport(() => import('page/passwordUpdate' /* webpackChunkName: "passwordUpdate" */));
 const Welcome = lazyImport(() => import('page/welcome' /* webpackChunkName: "secondary" */));
 const YoutubeSyncPage = lazyImport(() => import('page/youtubeSync' /* webpackChunkName: "secondary" */));
 
@@ -294,6 +295,7 @@ function AppRouter(props: Props) {
         <PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_NOTIFICATIONS}`} component={SettingsNotificationsPage} />
         <PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} component={SettingsStripeCard} />
         <PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`} component={SettingsStripeAccount} />
+        <PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_UPDATE_PWD}`} component={UpdatePasswordPage} />
         <PrivateRoute
           {...props}
           exact

ui/component/settingAccount/view.jsx

@@ -5,7 +5,6 @@ import { SETTINGS_GRP } from 'constants/settings';
 import React from 'react';
 import Button from 'component/button';
 import Card from 'component/common/card';
-import SettingAccountPassword from 'component/settingAccountPassword';
 import SettingsRow from 'component/settingsRow';
 import SyncToggle from 'component/syncToggle';
 import { getPasswordFromCookie } from 'util/saved-passwords';
@@ -48,9 +47,14 @@ export default function SettingAccount(props: Props) {
         body={
           <>
             {isAuthenticated && (
-              <div className="card__main-actions">
+              <SettingsRow title={__('Password')}>
-                <SettingAccountPassword />
+                <Button
-              </div>
+                  button="inverse"
+                  label={__('Manage')}
+                  icon={ICONS.ARROW_RIGHT}
+                  navigate={`/$/${PAGES.SETTINGS_UPDATE_PWD}`}
+                />
+              </SettingsRow>
             )}
 
             {/* @if TARGET='app' */}

ui/component/settingAccountPassword/view.jsx

@@ -1,8 +1,10 @@
 // @flow
 import React, { useState } from 'react';
+import { useHistory } from 'react-router';
 import { FormField, Form } from 'component/common/form';
 import Button from 'component/button';
 import ErrorText from 'component/common/error-text';
+import SettingsRow from 'component/settingsRow';
 import * as PAGES from 'constants/pages';
 
 type Props = {
@@ -18,8 +20,11 @@ export default function SettingAccountPassword(props: Props) {
   const { user, doToast, doUserPasswordSet, passwordSetSuccess, passwordSetError, doClearPasswordEntry } = props;
   const [oldPassword, setOldPassword] = useState('');
   const [newPassword, setNewPassword] = useState('');
-  const [isAddingPassword, setIsAddingPassword] = useState(false);
   const hasPassword = user && user.password_set;
+  const { goBack } = useHistory();
+
+  const title = hasPassword ? __('Update Your Password') : __('Add A Password');
+  const subtitle = hasPassword ? '' : __('You do not currently have a password set.');
 
   function handleSubmit() {
     doUserPasswordSet(newPassword, oldPassword);
@@ -27,7 +32,7 @@ export default function SettingAccountPassword(props: Props) {
 
   React.useEffect(() => {
     if (passwordSetSuccess) {
-      setIsAddingPassword(false);
+      goBack();
       doToast({
         message: __('Password updated successfully.'),
       });
@@ -35,10 +40,10 @@ export default function SettingAccountPassword(props: Props) {
       setOldPassword('');
       setNewPassword('');
     }
-  }, [passwordSetSuccess, setOldPassword, setNewPassword, doClearPasswordEntry, doToast]);
+  }, [passwordSetSuccess, setOldPassword, setNewPassword, doClearPasswordEntry, doToast, goBack]);
 
-  return isAddingPassword ? (
+  return (
-    <div>
+    <SettingsRow title={title} subtitle={subtitle} multirow>
       <Form onSubmit={handleSubmit} className="section">
         {hasPassword && (
           <FormField
@@ -62,7 +67,7 @@ export default function SettingAccountPassword(props: Props) {
           {hasPassword ? (
             <Button button="link" label={__('Forgot Password?')} navigate={`/$/${PAGES.AUTH_PASSWORD_RESET}`} />
           ) : (
-            <Button button="link" label={__('Cancel')} onClick={() => setIsAddingPassword(false)} />
+            <Button button="link" label={__('Cancel')} onClick={() => goBack()} />
           )}
         </div>
       </Form>
@@ -71,18 +76,6 @@ export default function SettingAccountPassword(props: Props) {
           <ErrorText>{passwordSetError}</ErrorText>
         </div>
       )}
-    </div>
+    </SettingsRow>
-  ) : (
-    <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="secondary"
-        label={hasPassword ? __('Update Your Password') : __('Add A Password')}
-        onClick={() => setIsAddingPassword(true)}
-      />
-    </div>
   );
 }

ui/constants/pages.js

@@ -43,6 +43,7 @@ exports.SETTINGS_STRIPE_ACCOUNT = 'settings/tip_account';
 exports.SETTINGS_NOTIFICATIONS = 'settings/notifications';
 exports.SETTINGS_BLOCKED_MUTED = 'settings/block_and_mute';
 exports.SETTINGS_CREATOR = 'settings/creator';
+exports.SETTINGS_UPDATE_PWD = 'settings/update_password';
 exports.SHOW = 'show';
 exports.ACCOUNT = 'account';
 exports.SEARCH = 'search';

ui/page/passwordUpdate/index.js

@@ -0,0 +1,3 @@
+import PasswordUpdate from './view';
+
+export default PasswordUpdate;

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 (
+    <Page noFooter noSideNavigation settingsPage backout={{ title: __('Password'), backLabel: __('Back') }}>
+      <Card isBodyList body={<SettingAccountPassword />} />
+    </Page>
+  );
+}