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 ( +
(formApiRef.current = api)} onSubmit={handleSubmit} width={1}> + {({ formState: { submits, error } }) => { + const willValidateInline = submits > 0 + return ( + + + + + + + + + {error && ( + + {error} + + )} + + + + + + + ) + }} +
+ ) +} + +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 (