Ben Woosley
7 years ago
committed by
GitHub
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