Show busy indicator, focus first field (#4997)

js/src/modals/PasswordManager/passwordManager.js

@@ -60,8 +60,11 @@ class PasswordManager extends Component {
   store = new Store(this.context.api, this.props.account);
 
   render () {
+    const { busy } = this.store;
+
     return (
       <Portal
+        busy={ busy }
         buttons={ this.renderDialogActions() }
         onClose={ this.onClose }
         open
@@ -133,8 +136,6 @@ class PasswordManager extends Component {
   }
 
   renderPage () {
-    const { busy, isRepeatValid, newPassword, passwordHint } = this.store;
-
     return (
       <Tabs
         inkBarStyle={ TABS_INKBAR_STYLE }
@@ -149,9 +150,35 @@ class PasswordManager extends Component {
           }
           onActive={ this.onActivateTestTab }
         >
+          { this.renderTabTest() }
+        </Tab>
+        <Tab
+          label={
+            <FormattedMessage
+              id='passwordChange.tabChange.label'
+              defaultMessage='Change Password'
+            />
+          }
+          onActive={ this.onActivateChangeTab }
+        >
+          { this.renderTabChange() }
+        </Tab>
+      </Tabs>
+    );
+  }
+
+  renderTabTest () {
+    const { actionTab, busy } = this.store;
+
+    if (actionTab !== TEST_ACTION) {
+      return null;
+    }
+
+    return (
       <Form className={ styles.form }>
         <div>
           <Input
+            autoFocus
             disabled={ busy }
             hint={
               <FormattedMessage
@@ -172,19 +199,21 @@ class PasswordManager extends Component {
           />
         </div>
       </Form>
-        </Tab>
+    );
-        <Tab
-          label={
-            <FormattedMessage
-              id='passwordChange.tabChange.label'
-              defaultMessage='Change Password'
-            />
   }
-          onActive={ this.onActivateChangeTab }
+
-        >
+  renderTabChange () {
+    const { actionTab, busy, isRepeatValid, newPassword, passwordHint } = this.store;
+
+    if (actionTab !== CHANGE_ACTION) {
+      return null;
+    }
+
+    return (
       <Form className={ styles.form }>
         <div>
           <Input
+            autoFocus
             disabled={ busy }
             hint={
               <FormattedMessage
@@ -274,8 +303,6 @@ class PasswordManager extends Component {
           <PasswordStrength input={ newPassword } />
         </div>
       </Form>
-        </Tab>
-      </Tabs>
     );
   }