From 54a19b25c15c2a60074400f6d4641e1d765a4fe6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= Date: Fri, 12 Feb 2021 16:02:54 +0000 Subject: [PATCH] fix: component behavior for obfuscated fields --- .../src/components/inputs/base/SecretInput.js | 11 ++-- .../src/components/inputs/base/TextInput.js | 5 +- .../components/inputs/formik/SecretInput.js | 47 ++++++++--------- .../src/pages/Services/Services.js | 48 +++++++++++++++-- .../src/pages/Services/schemas/bitgo.js | 51 ++++++++++++++++++- .../src/pages/Services/schemas/bitstamp.js | 20 +++++++- .../src/pages/Services/schemas/blockcypher.js | 1 + .../src/pages/Services/schemas/helper.js | 12 +++++ .../src/pages/Services/schemas/infura.js | 19 ++++++- .../src/pages/Services/schemas/itbit.js | 22 +++++++- .../src/pages/Services/schemas/kraken.js | 16 +++++- .../src/pages/Services/schemas/mailgun.js | 1 + .../src/pages/Services/schemas/twilio.js | 22 +++++++- 13 files changed, 233 insertions(+), 42 deletions(-) create mode 100644 new-lamassu-admin/src/pages/Services/schemas/helper.js diff --git a/new-lamassu-admin/src/components/inputs/base/SecretInput.js b/new-lamassu-admin/src/components/inputs/base/SecretInput.js index f63cf5dc..5b8e22ab 100644 --- a/new-lamassu-admin/src/components/inputs/base/SecretInput.js +++ b/new-lamassu-admin/src/components/inputs/base/SecretInput.js @@ -4,11 +4,8 @@ import { TextInput } from '../base' const SecretInput = memo(({ value, onFocus, onBlur, ...props }) => { const [focused, setFocused] = useState(false) - + const isPasswordFilled = props.isPasswordFilled const placeholder = '⚬ ⚬ ⚬ This field is set ⚬ ⚬ ⚬' - const previouslyFilled = !!value - const tempValue = previouslyFilled ? '' : value - const innerOnFocus = event => { setFocused(true) onFocus && onFocus(event) @@ -26,9 +23,9 @@ const SecretInput = memo(({ value, onFocus, onBlur, ...props }) => { onFocus={innerOnFocus} onBlur={innerOnBlur} value={value} - InputProps={{ value: !focused ? tempValue : value }} - InputLabelProps={{ shrink: previouslyFilled || focused }} - placeholder={previouslyFilled ? placeholder : ''} + InputProps={{ value: value }} + InputLabelProps={{ shrink: isPasswordFilled || value || focused }} + placeholder={isPasswordFilled ? placeholder : ''} /> ) }) diff --git a/new-lamassu-admin/src/components/inputs/base/TextInput.js b/new-lamassu-admin/src/components/inputs/base/TextInput.js index 243cf829..a908fc1b 100644 --- a/new-lamassu-admin/src/components/inputs/base/TextInput.js +++ b/new-lamassu-admin/src/components/inputs/base/TextInput.js @@ -26,8 +26,9 @@ const TextInput = memo( ...props }) => { const classes = useStyles({ textAlign, width, size }) - const filled = !error && !R.isNil(value) && !R.isEmpty(value) - + const isPasswordFilled = props.isPasswordFilled + const isTextFilled = !error && !R.isNil(value) && !R.isEmpty(value) + const filled = isPasswordFilled || isTextFilled const inputClasses = { [classes.bold]: bold } diff --git a/new-lamassu-admin/src/components/inputs/formik/SecretInput.js b/new-lamassu-admin/src/components/inputs/formik/SecretInput.js index 59c6d834..94400a43 100644 --- a/new-lamassu-admin/src/components/inputs/formik/SecretInput.js +++ b/new-lamassu-admin/src/components/inputs/formik/SecretInput.js @@ -1,23 +1,24 @@ -import React, { memo } from 'react' - -import { SecretInput } from '../base' - -const SecretInputFormik = memo(({ ...props }) => { - const { name, onChange, onBlur, value } = props.field - const { touched, errors } = props.form - - const error = !!(touched[name] && errors[name]) - - return ( - - ) -}) - -export default SecretInputFormik +import React, { memo } from 'react' + +import { SecretInput } from '../base' + +const SecretInputFormik = memo(({ ...props }) => { + const { name, onChange, onBlur, value } = props.field + const { touched, errors } = props.form + const isPasswordFilled = props.isPasswordFilled + + const error = !isPasswordFilled && !!(touched[name] && errors[name]) + + return ( + + ) +}) + +export default SecretInputFormik diff --git a/new-lamassu-admin/src/pages/Services/Services.js b/new-lamassu-admin/src/pages/Services/Services.js index 651c14cf..ea79304f 100644 --- a/new-lamassu-admin/src/pages/Services/Services.js +++ b/new-lamassu-admin/src/pages/Services/Services.js @@ -5,6 +5,7 @@ import * as R from 'ramda' import React, { useState } from 'react' import Modal from 'src/components/Modal' +import { SecretInput } from 'src/components/inputs/formik' import TitleSection from 'src/components/layout/TitleSection' import SingleRowTable from 'src/components/single-row-table/SingleRowTable' import { formatLong } from 'src/utils/string' @@ -56,6 +57,47 @@ const Services = () => { }))(faceElements) } + const getElements = ({ code, elements }) => { + return R.compose( + R.map(elem => { + return elem.component === SecretInput + ? R.assoc( + 'inputProps', + { + isPasswordFilled: + !R.isNil(accounts[code]) && + !R.isNil(R.path([elem.code], accounts[code])) + }, + elem + ) + : R.identity(elem) + }) + )(elements) + } + + const getAccounts = ({ elements, code }) => { + const account = accounts[code] + const passwordFields = R.compose( + R.reject(R.isNil), + R.map(({ component, code }) => (component === SecretInput ? code : null)) + )(elements) + return R.compose( + R.mapObjIndexed((value, key, obj) => + R.includes(key, passwordFields) ? '' : value + ) + )(account) + } + + const getValidationSchema = ({ + validationSchema, + code, + hasSecret, + getValidationSchema + }) => { + if (!hasSecret) return validationSchema + return getValidationSchema(accounts[code]) + } + return (
@@ -83,9 +125,9 @@ const Services = () => { variables: { accounts: { [editingSchema.code]: it } } }) } - elements={editingSchema.elements} - validationSchema={editingSchema.validationSchema} - value={accounts[editingSchema.code]} + elements={getElements(editingSchema)} + validationSchema={getValidationSchema(editingSchema)} + value={getAccounts(editingSchema)} /> )} diff --git a/new-lamassu-admin/src/pages/Services/schemas/bitgo.js b/new-lamassu-admin/src/pages/Services/schemas/bitgo.js index ec9cf17c..7d64287e 100644 --- a/new-lamassu-admin/src/pages/Services/schemas/bitgo.js +++ b/new-lamassu-admin/src/pages/Services/schemas/bitgo.js @@ -6,11 +6,14 @@ import { Autocomplete } from 'src/components/inputs/formik' +import secretTest from './helper' + const isDefined = it => it && it.length export default { code: 'bitgo', name: 'BitGo', + hasSecret: true, title: 'BitGo (Wallet)', elements: [ { @@ -127,5 +130,51 @@ export default { environment: Yup.string() .matches(/(prod|test)/) .required() - }) + }), + getValidationSchema: account => { + const schema = { + token: Yup.string() + .max(100, 'Too long') + .required(), + BTCWalletId: Yup.string().max(100, 'Too long'), + BTCWalletPassphrase: Yup.string() + .max(100, 'Too long') + .when('BTCWalletId', { + is: isDefined, + then: Yup.string().test(secretTest(account?.BTCWalletPassphrase)) + }), + LTCWalletId: Yup.string().max(100, 'Too long'), + LTCWalletPassphrase: Yup.string() + .max(100, 'Too long') + .when('LTCWalletId', { + is: isDefined, + then: Yup.string().test(secretTest(account?.LTCWalletPassphrase)) + }), + ZECWalletId: Yup.string().max(100, 'Too long'), + ZECWalletPassphrase: Yup.string() + .max(100, 'Too long') + .when('ZECWalletId', { + is: isDefined, + then: Yup.string().test(secretTest(account?.ZECWalletPassphrase)) + }), + BCHWalletId: Yup.string().max(100, 'Too long'), + BCHWalletPassphrase: Yup.string() + .max(100, 'Too long') + .when('BCHWalletId', { + is: isDefined, + then: Yup.string().test(secretTest(account?.BCHWalletPassphrase)) + }), + DASHWalletId: Yup.string().max(100, 'Too long'), + DASHWalletPassphrase: Yup.string() + .max(100, 'Too long') + .when('DASHWalletId', { + is: isDefined, + then: Yup.string().test(secretTest(account?.DASHWalletPassphrase)) + }), + environment: Yup.string() + .matches(/(prod|test)/) + .required() + } + return Yup.object().shape(schema) + } } diff --git a/new-lamassu-admin/src/pages/Services/schemas/bitstamp.js b/new-lamassu-admin/src/pages/Services/schemas/bitstamp.js index 7341cf44..e85aaa5e 100644 --- a/new-lamassu-admin/src/pages/Services/schemas/bitstamp.js +++ b/new-lamassu-admin/src/pages/Services/schemas/bitstamp.js @@ -3,9 +3,12 @@ import * as Yup from 'yup' import SecretInputFormik from 'src/components/inputs/formik/SecretInput' import TextInputFormik from 'src/components/inputs/formik/TextInput' +import secretTest from './helper' + export default { code: 'bitstamp', name: 'Bitstamp', + hasSecret: true, title: 'Bitstamp (Exchange)', elements: [ { @@ -28,7 +31,6 @@ export default { component: SecretInputFormik } ], - validationSchema: Yup.object().shape({ clientId: Yup.string() .max(100, 'Too long') @@ -39,5 +41,19 @@ export default { secret: Yup.string() .max(100, 'Too long') .required() - }) + }), + getValidationSchema: account => { + const schema = { + clientId: Yup.string() + .max(100, 'Too long') + .required(), + key: Yup.string() + .max(100, 'Too long') + .required(), + secret: Yup.string() + .max(100, 'Too long') + .test(secretTest(account?.secret)) + } + return Yup.object().shape(schema) + } } diff --git a/new-lamassu-admin/src/pages/Services/schemas/blockcypher.js b/new-lamassu-admin/src/pages/Services/schemas/blockcypher.js index acdfc2f1..b4829e50 100644 --- a/new-lamassu-admin/src/pages/Services/schemas/blockcypher.js +++ b/new-lamassu-admin/src/pages/Services/schemas/blockcypher.js @@ -5,6 +5,7 @@ import TextInputFormik from 'src/components/inputs/formik/TextInput' export default { code: 'blockcypher', name: 'Blockcypher', + hasSecret: false, title: 'Blockcypher (Payments)', elements: [ { diff --git a/new-lamassu-admin/src/pages/Services/schemas/helper.js b/new-lamassu-admin/src/pages/Services/schemas/helper.js new file mode 100644 index 00000000..fbd67bb8 --- /dev/null +++ b/new-lamassu-admin/src/pages/Services/schemas/helper.js @@ -0,0 +1,12 @@ +import * as R from 'ramda' + +const secretTest = secret => ({ + test(val) { + if (R.isNil(secret) && R.isNil(val)) { + return this.createError() + } + return true + } +}) + +export default secretTest diff --git a/new-lamassu-admin/src/pages/Services/schemas/infura.js b/new-lamassu-admin/src/pages/Services/schemas/infura.js index d5e885ea..a8cd2fc1 100644 --- a/new-lamassu-admin/src/pages/Services/schemas/infura.js +++ b/new-lamassu-admin/src/pages/Services/schemas/infura.js @@ -3,9 +3,12 @@ import * as Yup from 'yup' import SecretInputFormik from 'src/components/inputs/formik/SecretInput' import TextInputFormik from 'src/components/inputs/formik/TextInput' +import secretTest from './helper' + export default { code: 'infura', name: 'Infura', + hasSecret: true, title: 'Infura (Wallet)', elements: [ { @@ -37,5 +40,19 @@ export default { endpoint: Yup.string() .max(100, 'Too long') .required() - }) + }), + getValidationSchema: account => { + const schema = { + apiKey: Yup.string() + .max(100, 'Too long') + .required(), + apiSecret: Yup.string() + .max(100, 'Too long') + .test(secretTest(account?.apiSecret)), + endpoint: Yup.string() + .max(100, 'Too long') + .required() + } + return Yup.object().shape(schema) + } } diff --git a/new-lamassu-admin/src/pages/Services/schemas/itbit.js b/new-lamassu-admin/src/pages/Services/schemas/itbit.js index 16e7fbfa..22beaa09 100644 --- a/new-lamassu-admin/src/pages/Services/schemas/itbit.js +++ b/new-lamassu-admin/src/pages/Services/schemas/itbit.js @@ -3,9 +3,12 @@ import * as Yup from 'yup' import SecretInputFormik from 'src/components/inputs/formik/SecretInput' import TextInputFormik from 'src/components/inputs/formik/TextInput' +import secretTest from './helper' + export default { code: 'itbit', name: 'itBit', + hasSecret: true, title: 'itBit (Exchange)', elements: [ { @@ -46,5 +49,22 @@ export default { clientSecret: Yup.string() .max(100, 'Too long') .required() - }) + }), + getValidationSchema: account => { + const schema = { + userId: Yup.string() + .max(100, 'Too long') + .required(), + walletId: Yup.string() + .max(100, 'Too long') + .required(), + clientKey: Yup.string() + .max(100, 'Too long') + .required(), + clientSecret: Yup.string() + .max(100, 'Too long') + .test(secretTest(account?.clientSecret)) + } + return Yup.object().shape(schema) + } } diff --git a/new-lamassu-admin/src/pages/Services/schemas/kraken.js b/new-lamassu-admin/src/pages/Services/schemas/kraken.js index ab3c772c..5588a191 100644 --- a/new-lamassu-admin/src/pages/Services/schemas/kraken.js +++ b/new-lamassu-admin/src/pages/Services/schemas/kraken.js @@ -3,9 +3,12 @@ import * as Yup from 'yup' import SecretInputFormik from 'src/components/inputs/formik/SecretInput' import TextInputFormik from 'src/components/inputs/formik/TextInput' +import secretTest from './helper' + export default { code: 'kraken', name: 'Kraken', + hasSecret: true, title: 'Kraken (Exchange)', elements: [ { @@ -28,5 +31,16 @@ export default { privateKey: Yup.string() .max(100, 'Too long') .required() - }) + }), + getValidationSchema: account => { + const schema = { + apiKey: Yup.string() + .max(100, 'Too long') + .required(), + privateKey: Yup.string() + .max(100, 'Too long') + .test(secretTest(account?.privateKey)) + } + return Yup.object().shape(schema) + } } diff --git a/new-lamassu-admin/src/pages/Services/schemas/mailgun.js b/new-lamassu-admin/src/pages/Services/schemas/mailgun.js index 1ed0d050..398b0a7f 100644 --- a/new-lamassu-admin/src/pages/Services/schemas/mailgun.js +++ b/new-lamassu-admin/src/pages/Services/schemas/mailgun.js @@ -5,6 +5,7 @@ import TextInputFormik from 'src/components/inputs/formik/TextInput' export default { code: 'mailgun', name: 'Mailgun', + hasSecret: false, title: 'Mailgun (Email)', elements: [ { diff --git a/new-lamassu-admin/src/pages/Services/schemas/twilio.js b/new-lamassu-admin/src/pages/Services/schemas/twilio.js index fc5b6f3d..aab3b1ac 100644 --- a/new-lamassu-admin/src/pages/Services/schemas/twilio.js +++ b/new-lamassu-admin/src/pages/Services/schemas/twilio.js @@ -3,9 +3,12 @@ import * as Yup from 'yup' import SecretInputFormik from 'src/components/inputs/formik/SecretInput' import TextInputFormik from 'src/components/inputs/formik/TextInput' +import secretTest from './helper' + export default { code: 'twilio', name: 'Twilio', + hasSecret: true, title: 'Twilio (SMS)', elements: [ { @@ -44,5 +47,22 @@ export default { toNumber: Yup.string() .max(100, 'Too long') .required() - }) + }), + getValidationSchema: account => { + const schema = { + accountSid: Yup.string() + .max(100, 'Too long') + .required(), + authToken: Yup.string() + .max(100, 'Too long') + .test(secretTest(account?.authToken)), + fromNumber: Yup.string() + .max(100, 'Too long') + .required(), + toNumber: Yup.string() + .max(100, 'Too long') + .required() + } + return Yup.object().shape(schema) + } }