diff --git a/app/components/Contacts/ConnectManually.js b/app/components/Contacts/ConnectManually.js index b32c6640..afda00e2 100644 --- a/app/components/Contacts/ConnectManually.js +++ b/app/components/Contacts/ConnectManually.js @@ -13,11 +13,43 @@ class ConnectManually extends React.Component { manualFormOpen, manualSearchQuery, - closeManualForm, - updateManualFormSearchQuery + manualFormIsValid, + updateManualFormErrors, + + openSubmitChannelForm, + updateManualFormSearchQuery, + + setNode, + + showErrors } = this.props - console.log('props: ', this.props) + const formSubmitted = () => { + if (!manualFormIsValid.isValid) { + updateManualFormErrors(manualFormIsValid.errors) + + return + } + // clear any existing errors + updateManualFormErrors({ manualInput: null }) + + const [pub_key, addr] = manualSearchQuery && manualSearchQuery.split('@') + + // the SubmitChannel component is expecting a node object that looks like the following + // { + // pub_key: 'some_string', + // addresses: [ + // { + // addr: 'some_host_address' + // } + // ] + // } + // knowing this we will set the node object with the known format and plug in the pubkey + host accordingly + setNode({ pub_key, addresses: [{ addr }] }) + + // now we close the ConnectManually form and open the SubmitChannel form by chaning the channelFormType + openSubmitChannelForm() + } return (
@@ -36,6 +68,21 @@ class ConnectManually extends React.Component { />
+ +
+ {showErrors.manualInput && + {manualFormIsValid && manualFormIsValid.errors.manualInput} + } +
+ +
+
+ Submit +
+
) } diff --git a/app/components/Contacts/ConnectManually.scss b/app/components/Contacts/ConnectManually.scss index b831dfed..5dac74ab 100644 --- a/app/components/Contacts/ConnectManually.scss +++ b/app/components/Contacts/ConnectManually.scss @@ -82,7 +82,7 @@ margin-top: 50px; input { - font-size: 25px; + font-size: 20px; } } @@ -100,3 +100,40 @@ text-shadow: none; -webkit-text-fill-color: initial; } + +.errorMessage { + margin-top: 20px; + font-size: 12px; + color: $red; + min-height: 12px; + visibility: hidden; + + &.active { + visibility: visible; + } +} + +.submit { + margin-top: 50px; + text-align: center; + + .button { + width: 235px; + margin: 0 auto; + padding: 20px 10px; + background: #31343f; + opacity: 0.5; + cursor: pointer; + transition: 0.25s all; + + &.active { + background: $gold; + opacity: 1.0; + + &:hover { + background: darken($gold, 5%); + } + } + } +} + diff --git a/app/components/Contacts/SubmitChannelForm.js b/app/components/Contacts/SubmitChannelForm.js index a6084a26..fabdce52 100644 --- a/app/components/Contacts/SubmitChannelForm.js +++ b/app/components/Contacts/SubmitChannelForm.js @@ -36,7 +36,7 @@ class SubmitChannelForm extends React.Component { if (node.alias && node.alias.length) { return `${node.alias} (${node.pub_key})` } else { - return node.addresses + return node.pub_key } } diff --git a/app/routes/app/containers/AppContainer.js b/app/routes/app/containers/AppContainer.js index 6d9ec2b4..a37a7f26 100644 --- a/app/routes/app/containers/AppContainer.js +++ b/app/routes/app/containers/AppContainer.js @@ -405,10 +405,14 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => { const connectManuallyProps = { closeManualForm: dispatchProps.closeManualForm, updateManualFormSearchQuery: dispatchProps.updateManualFormSearchQuery, - closeChannelForm: () => dispatchProps.setChannelFormType(null), + updateManualFormErrors: dispatchProps.updateManualFormErrors, + setNode: dispatchProps.setNode, + openSubmitChannelForm: () => dispatchProps.setChannelFormType('SUBMIT_CHANNEL_FORM'), manualFormOpen: stateProps.contactsform.manualFormOpen, - manualSearchQuery: stateProps.contactsform.manualSearchQuery + manualSearchQuery: stateProps.contactsform.manualSearchQuery, + manualFormIsValid: stateProps.manualFormIsValid, + showErrors: stateProps.contactsform.showErrors } const calcChannelFormProps = (formType) => {