diff --git a/config/default.js b/config/default.js
index 4ebf759e21e..a6c3669bd7f 100644
--- a/config/default.js
+++ b/config/default.js
@@ -25,6 +25,11 @@ module.exports = {
interval: 60 * 60 * 1000,
},
+ password: {
+ active: false,
+ value: null,
+ },
+
// Supported chains.
chains: ['bitcoin', 'litecoin'],
diff --git a/renderer/components/Form/Field.js b/renderer/components/Form/Field.js
index 68857c89f7c..ae872e0cf29 100644
--- a/renderer/components/Form/Field.js
+++ b/renderer/components/Form/Field.js
@@ -1,6 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
-import { Flex } from 'rebass/styled-components'
+import { Box, Flex } from 'rebass/styled-components'
import { Message, Text } from 'components/UI'
import Label from './Label'
@@ -10,6 +10,7 @@ const Field = ({
error,
field,
hasFocus,
+ hasMessageSpacer,
isDisabled,
isReadOnly,
isRequired,
@@ -40,6 +41,12 @@ const Field = ({
{error}
)}
+
+ {hasMessageSpacer && !error && (
+
+
+
+ )}
)
@@ -49,6 +56,7 @@ Field.propTypes = {
error: PropTypes.node,
field: PropTypes.string.isRequired,
hasFocus: PropTypes.bool,
+ hasMessageSpacer: PropTypes.bool,
isDisabled: PropTypes.bool,
isReadOnly: PropTypes.bool,
isRequired: PropTypes.bool,
diff --git a/renderer/components/Form/Input.js b/renderer/components/Form/Input.js
index 3ea87327120..3f78ad812d2 100644
--- a/renderer/components/Form/Input.js
+++ b/renderer/components/Form/Input.js
@@ -19,6 +19,7 @@ const Input = props => {
fieldState,
forwardedRef,
hasMessage,
+ hasMessageSpacer,
initialValue,
isDisabled,
isReadOnly,
@@ -67,6 +68,7 @@ const Input = props => {
error={fieldError}
field={field}
hasFocus={hasFocus}
+ hasMessageSpacer={hasMessageSpacer}
isDisabled={isDisabled}
isReadOnly={isReadOnly}
isRequired={isRequired}
@@ -132,6 +134,7 @@ Input.propTypes = {
fieldState: PropTypes.object.isRequired,
forwardedRef: PropTypes.object,
hasMessage: PropTypes.bool,
+ hasMessageSpacer: PropTypes.bool,
highlightOnValid: PropTypes.bool,
initialValue: PropTypes.string,
isDisabled: PropTypes.bool,
diff --git a/renderer/components/Login/Login.js b/renderer/components/Login/Login.js
new file mode 100644
index 00000000000..6c27efb085f
--- /dev/null
+++ b/renderer/components/Login/Login.js
@@ -0,0 +1,71 @@
+import React, { useEffect, useRef } from 'react'
+import PropTypes from 'prop-types'
+import { FormattedMessage } from 'react-intl'
+import { Flex } from 'rebass/styled-components'
+import { Button, CenteredContent, Message, Text } from 'components/UI'
+import { Form, PasswordInput } from 'components/Form'
+import ArrowRight from 'components/Icon/ArrowRight'
+import ZapLogo from 'components/Icon/ZapLogo'
+import messages from './messages'
+
+const Login = ({ login, loginError, clearLoginError, ...rest }) => {
+ const formApiRef = useRef(null)
+
+ useEffect(() => {
+ const { current: formApi } = formApiRef
+ if (loginError) {
+ formApi.setFormError(loginError)
+ clearLoginError()
+ }
+ }, [loginError, formApiRef, clearLoginError])
+
+ const handleSubmit = ({ password }) => login(password)
+
+ return (
+
+ )
+}
+
+Login.propTypes = {
+ clearLoginError: PropTypes.func.isRequired,
+ login: PropTypes.func.isRequired,
+ loginError: PropTypes.string,
+}
+
+export default Login
diff --git a/renderer/components/Login/index.js b/renderer/components/Login/index.js
new file mode 100644
index 00000000000..393a6df4079
--- /dev/null
+++ b/renderer/components/Login/index.js
@@ -0,0 +1,3 @@
+import Login from './Login'
+
+export default Login
diff --git a/renderer/components/Login/messages.js b/renderer/components/Login/messages.js
new file mode 100644
index 00000000000..3b70a695083
--- /dev/null
+++ b/renderer/components/Login/messages.js
@@ -0,0 +1,6 @@
+import { defineMessages } from 'react-intl'
+
+/* eslint-disable max-len */
+export default defineMessages({
+ intro: 'Enter your password to continue.',
+})
diff --git a/renderer/components/Onboarding/Steps/ConnectionDetailsManual.js b/renderer/components/Onboarding/Steps/ConnectionDetailsManual.js
index 6d0d4ba1ad1..e22a0587a69 100644
--- a/renderer/components/Onboarding/Steps/ConnectionDetailsManual.js
+++ b/renderer/components/Onboarding/Steps/ConnectionDetailsManual.js
@@ -158,7 +158,7 @@ class ConnectionDetailsManual extends React.Component {
onSubmitFailure={onSubmitFailure}
>
{({ formState }) => {
- const shouldValidateInline =
+ const willValidateInline =
formState.submits > 0 ||
connectionHost ||
connectionCert ||
@@ -199,8 +199,8 @@ class ConnectionDetailsManual extends React.Component {
mb={3}
name="connectionCert"
onBlur={this.validateCert}
- validateOnBlur={shouldValidateInline}
- validateOnChange={shouldValidateInline}
+ validateOnBlur={willValidateInline}
+ validateOnChange={willValidateInline}
width={1}
/>
@@ -212,8 +212,8 @@ class ConnectionDetailsManual extends React.Component {
label="Macaroon"
name="connectionMacaroon"
onBlur={this.validateMacaroon}
- validateOnBlur={shouldValidateInline}
- validateOnChange={shouldValidateInline}
+ validateOnBlur={willValidateInline}
+ validateOnChange={willValidateInline}
width={1}
/>
>
diff --git a/renderer/components/Onboarding/Steps/ConnectionDetailsString.js b/renderer/components/Onboarding/Steps/ConnectionDetailsString.js
index 707e7eb050d..2c948dcbae6 100644
--- a/renderer/components/Onboarding/Steps/ConnectionDetailsString.js
+++ b/renderer/components/Onboarding/Steps/ConnectionDetailsString.js
@@ -124,7 +124,7 @@ class ConnectionDetailsString extends React.Component {
onSubmitFailure={onSubmitFailure}
>
{({ formState }) => {
- const shouldValidateInline =
+ const willValidateInline =
formState.submits > 0 ||
connectionString ||
startLndHostError ||
@@ -157,8 +157,8 @@ class ConnectionDetailsString extends React.Component {
initialValue={connectionString}
isRequired
rows="12"
- validateOnBlur={shouldValidateInline}
- validateOnChange={shouldValidateInline}
+ validateOnBlur={willValidateInline}
+ validateOnChange={willValidateInline}
willAutoFocus
/>
>
diff --git a/renderer/components/Onboarding/Steps/Login.js b/renderer/components/Onboarding/Steps/Login.js
index c94692ef779..3b7e0615dfa 100644
--- a/renderer/components/Onboarding/Steps/Login.js
+++ b/renderer/components/Onboarding/Steps/Login.js
@@ -77,7 +77,7 @@ class Login extends React.Component {
onSubmitFailure={onSubmitFailure}
>
{({ formState }) => {
- const shouldValidateInline = formState.submits > 0
+ const willValidateInline = formState.submits > 0
return (
<>
}
minLength={8}
placeholder={intl.formatMessage({ ...messages.password_placeholder })}
- validateOnBlur={shouldValidateInline}
- validateOnChange={shouldValidateInline}
+ validateOnBlur={willValidateInline}
+ validateOnChange={willValidateInline}
willAutoFocus
/>
diff --git a/renderer/components/Onboarding/Steps/Name.js b/renderer/components/Onboarding/Steps/Name.js
index 9528c30c4e2..dfb259f1c1f 100644
--- a/renderer/components/Onboarding/Steps/Name.js
+++ b/renderer/components/Onboarding/Steps/Name.js
@@ -55,7 +55,7 @@ class Name extends React.Component {
onSubmitFailure={onSubmitFailure}
>
{({ formState }) => {
- const shouldValidateInline = formState.submits > 0
+ const willValidateInline = formState.submits > 0
return (
<>
}
maxLength={30}
name="name"
- validateOnBlur={shouldValidateInline}
- validateOnChange={shouldValidateInline}
+ validateOnBlur={willValidateInline}
+ validateOnChange={willValidateInline}
willAutoFocus
/>
diff --git a/renderer/components/Onboarding/Steps/Password.js b/renderer/components/Onboarding/Steps/Password.js
index a08b3d65238..ccd5dae7af2 100644
--- a/renderer/components/Onboarding/Steps/Password.js
+++ b/renderer/components/Onboarding/Steps/Password.js
@@ -53,7 +53,7 @@ class Password extends React.Component {
onSubmitFailure={onSubmitFailure}
>
{({ formState }) => {
- const shouldValidateInline = formState.submits > 0
+ const willValidateInline = formState.submits > 0
return (
<>
}
minLength={8}
placeholder={intl.formatMessage({ ...messages.password_placeholder })}
- validateOnBlur={shouldValidateInline}
- validateOnChange={shouldValidateInline}
+ validateOnBlur={willValidateInline}
+ validateOnChange={willValidateInline}
willAutoFocus
/>
diff --git a/renderer/components/Onboarding/Steps/WalletRecover.js b/renderer/components/Onboarding/Steps/WalletRecover.js
index c0b441ea42e..3fdba592adf 100644
--- a/renderer/components/Onboarding/Steps/WalletRecover.js
+++ b/renderer/components/Onboarding/Steps/WalletRecover.js
@@ -99,7 +99,7 @@ class WalletRecover extends React.Component {
onSubmitFailure={onSubmitFailure}
>
{({ formState }) => {
- const shouldValidateInline = formState.submits > 0
+ const willValidateInline = formState.submits > 0
return (
<>
}
placeholder={intl.formatMessage({ ...messages.passphrase_placeholder })}
- validateOnBlur={shouldValidateInline}
- validateOnChange={shouldValidateInline}
+ validateOnBlur={willValidateInline}
+ validateOnChange={willValidateInline}
willAutoFocus
/>
) : (
diff --git a/renderer/components/Settings/SettingsFieldHelpers.js b/renderer/components/Settings/SettingsFieldHelpers.js
index 5cdebd56b50..1bb2efdba81 100644
--- a/renderer/components/Settings/SettingsFieldHelpers.js
+++ b/renderer/components/Settings/SettingsFieldHelpers.js
@@ -7,7 +7,7 @@ import { IntegerInput, Label } from 'components/Form'
import messages from './messages'
export const FieldLabel = ({ itemKey, ...rest }) => {
- const messageKey = itemKey.replace('.', '_')
+ const messageKey = itemKey.replace(/\./g, '_')
return (