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}
+ }
+
+
+
)
}
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) => {