Remove debug line, add Form components

src/renderer/component/splash/view.jsx

@@ -38,7 +38,6 @@ export class SplashScreen extends React.PureComponent<Props, State> {
   updateStatus() {
     Lbry.status().then(status => {
       this._updateStatusCallback(status);
-      window.status = status;
     });
   }
 

src/renderer/modal/modalWalletDecrypt/view.jsx

@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import { FormRow, FormField } from 'component/common/form';
+import { Form, FormRow, FormField } from 'component/common/form';
 import { Modal } from 'modal/modal';
 import Button from 'component/button';
 
@@ -43,16 +43,18 @@ class ModalWalletDecrypt extends React.PureComponent<Props> {
         onConfirmed={() => this.submitDecryptForm()}
         onAborted={closeModal}
       >
-        {__(
-          'Your wallet has been encrypted with a local password, performing this action will remove this password.'
-        )}
-        <FormRow padded>
-          <Button
-            button="link"
-            label={__('Learn more')}
-            href="https://lbry.io/faq/wallet-encryption"
-          />
-        </FormRow>
+        <Form onSubmit={() => this.submitDecryptForm()}>
+          {__(
+            'Your wallet has been encrypted with a local password, performing this action will remove this password.'
+          )}
+          <div className="card__actions">
+            <Button
+              button="link"
+              label={__('Learn more')}
+              href="https://lbry.io/faq/wallet-encryption"
+            />
+          </div>
+        </Form>
       </Modal>
     );
   }

src/renderer/modal/modalWalletEncrypt/view.jsx

@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import { FormRow, FormField } from 'component/common/form';
+import { Form, FormRow, FormField } from 'component/common/form';
 import { Modal } from 'modal/modal';
 import Button from 'component/button';
 
@@ -89,51 +89,53 @@ class ModalWalletEncrypt extends React.PureComponent<Props> {
         onConfirmed={() => this.submitEncryptForm()}
         onAborted={closeModal}
       >
-        {__(
-          'Encrypting your wallet will require a password to access your local wallet data when LBRY starts. Please enter a new password for your wallet.'
-        )}
-        <FormRow padded>
-          <FormField
-            stretch
-            error={passwordMismatch === true ? 'Passwords do not match' : false}
-            label={__('New Password')}
-            type="password"
-            name="wallet-new-password"
-            onChange={event => this.onChangeNewPassword(event)}
-          />
-        </FormRow>
-        <FormRow padded>
-          <FormField
-            stretch
-            error={passwordMismatch === true ? 'Passwords do not match' : false}
-            label={__('Confirm Password')}
-            type="password"
-            name="wallet-new-password-confirm"
-            onChange={event => this.onChangeNewPasswordConfirm(event)}
-          />
-        </FormRow>
-        <br />
-        {__(
-          'If your password is lost, it cannot be recovered. You will not be able to access your wallet without a password.'
-        )}
-        <FormRow padded>
-          <FormField
-            stretch
-            error={understandError === true ? 'You must enter "I understand"' : false}
-            label={__('Enter "I understand"')}
-            type="text"
-            name="wallet-understand"
-            onChange={event => this.onChangeUnderstandConfirm(event)}
-          />
-        </FormRow>
-        <FormRow padded>
-          <Button
-            button="link"
-            label={__('Learn more')}
-            href="https://lbry.io/faq/wallet-encryption"
-          />
-        </FormRow>
-        {failMessage && <div className="error-text">{__(failMessage)}</div>}
+        <Form onSubmit={() => this.submitEncryptForm()}>
+          {__(
+            'Encrypting your wallet will require a password to access your local wallet data when LBRY starts. Please enter a new password for your wallet.'
+          )}
+          <FormRow padded>
+            <FormField
+              stretch
+              error={passwordMismatch === true ? 'Passwords do not match' : false}
+              label={__('New Password')}
+              type="password"
+              name="wallet-new-password"
+              onChange={event => this.onChangeNewPassword(event)}
+            />
+          </FormRow>
+          <FormRow padded>
+            <FormField
+              stretch
+              error={passwordMismatch === true ? 'Passwords do not match' : false}
+              label={__('Confirm Password')}
+              type="password"
+              name="wallet-new-password-confirm"
+              onChange={event => this.onChangeNewPasswordConfirm(event)}
+            />
+          </FormRow>
+          <br />
+          {__(
+            'If your password is lost, it cannot be recovered. You will not be able to access your wallet without a password.'
+          )}
+          <FormRow padded>
+            <FormField
+              stretch
+              error={understandError === true ? 'You must enter "I understand"' : false}
+              label={__('Enter "I understand"')}
+              type="text"
+              name="wallet-understand"
+              onChange={event => this.onChangeUnderstandConfirm(event)}
+            />
+          </FormRow>
+          <div className="card__actions">
+            <Button
+              button="link"
+              label={__('Learn more')}
+              href="https://lbry.io/faq/wallet-encryption"
+            />
+          </div>
+          {failMessage && <div className="error-text">{__(failMessage)}</div>}
+        </Form>
       </Modal>
     );
   }

src/renderer/modal/modalWalletUnlock/view.jsx

@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import { FormRow, FormField } from 'component/common/form';
+import { Form, FormRow, FormField } from 'component/common/form';
 import { Modal } from 'modal/modal';
 import Button from 'component/button';
 
@@ -43,26 +43,28 @@ class ModalWalletUnlock extends React.PureComponent<Props> {
         onConfirmed={() => unlockWallet(password)}
         onAborted={quit}
       >
-        {__(
-          'Your wallet has been encrypted with a local password. Please enter your wallet password to proceed.'
-        )}
-        <FormRow padded>
-          <FormField
-            stretch
-            error={walletUnlockSucceded === false ? 'Incorrect Password' : false}
-            label={__('Wallet Password')}
-            type="password"
-            name="wallet-password"
-            onChange={event => this.onChangePassword(event)}
-          />
-        </FormRow>
-        <FormRow padded>
-          <Button
-            button="link"
-            label={__('Learn more')}
-            href="https://lbry.io/faq/wallet-encryption"
-          />
-        </FormRow>
+        <Form onSubmit={() => unlockWallet(password)}>
+          {__(
+            'Your wallet has been encrypted with a local password. Please enter your wallet password to proceed.'
+          )}
+          <FormRow padded>
+            <FormField
+              stretch
+              error={walletUnlockSucceded === false ? 'Incorrect Password' : false}
+              label={__('Wallet Password')}
+              type="password"
+              name="wallet-password"
+              onChange={event => this.onChangePassword(event)}
+            />
+          </FormRow>
+          <div className="card__actions">
+            <Button
+              button="link"
+              label={__('Learn more')}
+              href="https://lbry.io/faq/wallet-encryption"
+            />
+          </div>
+        </Form>
       </Modal>
     );
   }