Ben Woosley
7 years ago
committed by
GitHub
15 changed files with 383 additions and 44 deletions
@ -0,0 +1,58 @@ |
|||||
|
import React from 'react' |
||||
|
import PropTypes from 'prop-types' |
||||
|
import styles from './BtcPayServer.scss' |
||||
|
|
||||
|
const BtcPayServer = ({ |
||||
|
connectionString, |
||||
|
connectionStringIsValid, |
||||
|
setConnectionString, |
||||
|
startLndHostError |
||||
|
}) => ( |
||||
|
<div className={styles.container}> |
||||
|
<section className={styles.input}> |
||||
|
<label htmlFor="connectionString">Connection String:</label> |
||||
|
<textarea |
||||
|
type="text" |
||||
|
id="connectionString" |
||||
|
rows="10" |
||||
|
placeholder="BTCPay Server Connection String" |
||||
|
className={ |
||||
|
connectionString && (startLndHostError || !connectionStringIsValid) |
||||
|
? styles.error |
||||
|
: undefined |
||||
|
} |
||||
|
ref={input => input} |
||||
|
value={connectionString} |
||||
|
onChange={event => setConnectionString(event.target.value)} |
||||
|
/> |
||||
|
<p className={styles.description}> |
||||
|
Paste the full content of your BTCPay Server connection config file. This can be found by |
||||
|
clicking the link entitled "Click here to open the configuration file." in your |
||||
|
BTCPay Server gRPC settings. |
||||
|
</p> |
||||
|
<p |
||||
|
className={`${styles.errorMessage} ${ |
||||
|
connectionString && !connectionStringIsValid ? styles.visible : undefined |
||||
|
}`}
|
||||
|
> |
||||
|
Invalid connection string. |
||||
|
</p> |
||||
|
<p |
||||
|
className={`${styles.errorMessage} ${ |
||||
|
connectionString && startLndHostError ? styles.visible : undefined |
||||
|
}`}
|
||||
|
> |
||||
|
{startLndHostError} |
||||
|
</p> |
||||
|
</section> |
||||
|
</div> |
||||
|
) |
||||
|
|
||||
|
BtcPayServer.propTypes = { |
||||
|
connectionString: PropTypes.string.isRequired, |
||||
|
connectionStringIsValid: PropTypes.bool.isRequired, |
||||
|
setConnectionString: PropTypes.func.isRequired, |
||||
|
startLndHostError: PropTypes.string |
||||
|
} |
||||
|
|
||||
|
export default BtcPayServer |
@ -0,0 +1,58 @@ |
|||||
|
@import '../../styles/variables.scss'; |
||||
|
|
||||
|
.container { |
||||
|
color: $white; |
||||
|
|
||||
|
.input { |
||||
|
margin-bottom: 15px; |
||||
|
} |
||||
|
|
||||
|
label { |
||||
|
display: block; |
||||
|
font-size: 12px; |
||||
|
line-height: 14px; |
||||
|
padding-bottom: 5px; |
||||
|
min-height: 14px; |
||||
|
} |
||||
|
|
||||
|
textarea { |
||||
|
background: transparent; |
||||
|
outline: none; |
||||
|
border: 1px solid #404040; |
||||
|
border-radius: 4px; |
||||
|
padding: 10px; |
||||
|
color: $gold; |
||||
|
-webkit-text-fill-color: $white; |
||||
|
font-size: 14px; |
||||
|
width: 95%; |
||||
|
transition: all 0.25s; |
||||
|
|
||||
|
&.error { |
||||
|
border: 1px solid $red; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
textarea::-webkit-input-placeholder { |
||||
|
text-shadow: none; |
||||
|
-webkit-text-fill-color: initial; |
||||
|
} |
||||
|
|
||||
|
.description { |
||||
|
margin-top: 8px; |
||||
|
font-size: 12px; |
||||
|
line-height: 18px; |
||||
|
opacity: 0.5; |
||||
|
} |
||||
|
|
||||
|
.errorMessage { |
||||
|
margin-top: 8px; |
||||
|
font-size: 12px; |
||||
|
line-height: 18px; |
||||
|
color: $red; |
||||
|
display: none; |
||||
|
|
||||
|
&.visible { |
||||
|
display: block; |
||||
|
} |
||||
|
} |
||||
|
} |
@ -0,0 +1,21 @@ |
|||||
|
import React from 'react' |
||||
|
import PropTypes from 'prop-types' |
||||
|
import styles from './ConnectionConfirm.scss' |
||||
|
|
||||
|
const ConnectionConfirm = ({ connectionHost }) => ( |
||||
|
<div className={styles.container}> |
||||
|
<p> |
||||
|
Are you sure you want to connect to{' '} |
||||
|
<span className={styles.host}>{connectionHost.split(':')[0]}</span>?{' '} |
||||
|
</p> |
||||
|
<p> |
||||
|
<strong>Please check the hostname carefully.</strong> |
||||
|
</p> |
||||
|
</div> |
||||
|
) |
||||
|
|
||||
|
ConnectionConfirm.propTypes = { |
||||
|
connectionHost: PropTypes.string.isRequired |
||||
|
} |
||||
|
|
||||
|
export default ConnectionConfirm |
@ -0,0 +1,17 @@ |
|||||
|
@import '../../styles/variables.scss'; |
||||
|
|
||||
|
.container { |
||||
|
color: $white; |
||||
|
|
||||
|
p { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
strong { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.host { |
||||
|
color: $green; |
||||
|
} |
||||
|
} |
Loading…
Reference in new issue