feat(ui): set password from preferences page

renderer/components/Settings/SettingsFieldsSecurity.js

@@ -0,0 +1,48 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useFieldState, useFormState } from 'informed'
+import { useIntl } from 'react-intl'
+import { DataRow } from 'components/UI'
+import { PasswordInput, Toggle } from 'components/Form'
+import { FieldLabel } from './SettingsFieldHelpers'
+import messages from './messages'
+
+const SettingsFieldsSecurity = ({ currentConfig }) => {
+  const { value: isPasswordActive } = useFieldState('password.active')
+  const { submits } = useFormState()
+  const shouldValidateInline = submits > 0
+  const intl = useIntl()
+
+  return (
+    <>
+      <DataRow
+        left={<FieldLabel itemKey="password.active" />}
+        pb={0}
+        right={<Toggle field="password.active" initialValue={currentConfig.password.active} />}
+      />
+      {isPasswordActive && (
+        <DataRow
+          pt={0}
+          right={
+            <PasswordInput
+              description={intl.formatMessage({ ...messages.password_value_description })}
+              field="password.value"
+              initialValue={currentConfig.password.value}
+              isRequired
+              minLength={6}
+              validateOnBlur={shouldValidateInline}
+              validateOnChange={shouldValidateInline}
+              width={200}
+            />
+          }
+        />
+      )}
+    </>
+  )
+}
+
+SettingsFieldsSecurity.propTypes = {
+  currentConfig: PropTypes.object.isRequired,
+}
+
+export default SettingsFieldsSecurity

renderer/components/Settings/SettingsPage.js

@@ -11,6 +11,7 @@ import ZapLogo from 'components/Icon/ZapLogo'
 import SettingsForm from 'containers/Settings/SettingsForm'
 import SettingsFieldsWallet from './SettingsFieldsWallet'
 import SettingsFieldsGeneral from './SettingsFieldsGeneral'
+import SettingsFieldsSecurity from './SettingsFieldsSecurity'
 import messages from './messages'
 
 const SettingsMenu = ({ group, setGroup, ...rest }) => {
@@ -25,6 +26,11 @@ const SettingsMenu = ({ group, setGroup, ...rest }) => {
       title: <FormattedMessage {...messages.fieldgroup_wallet} />,
       onClick: () => setGroup('wallet'),
     },
+    {
+      id: 'security',
+      title: <FormattedMessage {...messages.fieldgroup_security} />,
+      onClick: () => setGroup('security'),
+    },
   ]
 
   return <Menu items={items} p={2} selectedItem={group} {...rest} />
@@ -108,6 +114,7 @@ const SettingsPage = ({ currentConfig, ...rest }) => {
         <SettingsForm>
           {group === 'general' && <SettingsFieldsGeneral currentConfig={currentConfig} />}
           {group === 'wallet' && <SettingsFieldsWallet currentConfig={currentConfig} />}
+          {group === 'security' && <SettingsFieldsSecurity currentConfig={currentConfig} />}
           <SettingsActions currentConfig={currentConfig} />
         </SettingsForm>
       </MainContent>

renderer/components/Settings/index.js

@@ -2,4 +2,5 @@ export SettingsMenu from './SettingsMenu'
 export SettingsForm from './SettingsForm'
 export SettingsFieldsWallet from './SettingsFieldsWallet'
 export SettingsFieldsGeneral from './SettingsFieldsGeneral'
+export SettingsFieldsSecurity from './SettingsFieldsSecurity'
 export SettingsPage from './SettingsPage'

renderer/components/Settings/messages.js

@@ -36,6 +36,9 @@ export default defineMessages({
   fallbackAddress_description: 'Add on-chain fallback address to LN invoices.',
   invoices_expire_label: 'Invoice expiry',
   invoices_expire_description: 'Amount of time before invoices expire.',
+  password_active_label: 'Password',
+  password_active_description: 'Require password to open the app.',
+  password_value_description: 'Must be at least 6 characters.',
   lndTargetConfirmations_slow_label: 'Target confirmations (slow)',
   lndTargetConfirmations_slow_description: 'Number of blocks to target for "slow" sending speed.',
   lndTargetConfirmations_medium_label: 'Target confirmations (medium)',
@@ -45,6 +48,7 @@ export default defineMessages({
   lndTargetConfirmations_fast_description: 'Number of blocks to target for "fast" sending speed.',
   fieldgroup_general: 'General',
   fieldgroup_wallet: 'Wallet',
+  fieldgroup_security: 'Security',
   rateProvider_label: 'Rate provider',
   rateProvider_description: 'Your preferred rate provider.',
 })