51 lines
1.3 KiB
JavaScript
51 lines
1.3 KiB
JavaScript
import React, { useState } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { Typography, Tooltip, Button } from 'antd'
|
|
import CopyButton from './CopyButton'
|
|
import EyeIcon from '../../Icons/EyeIcon'
|
|
import EyeSlashIcon from '../../Icons/EyeSlashIcon'
|
|
|
|
const { Text } = Typography
|
|
|
|
const SecretDisplay = ({ value, reveal = false }) => {
|
|
const [visible, setVisible] = useState(false)
|
|
|
|
if (!value) {
|
|
return <Text type='secondary'>n/a</Text>
|
|
}
|
|
|
|
const masked = '•'.repeat(Math.max(8, value.length))
|
|
|
|
return (
|
|
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
|
|
<Text code>{reveal && visible ? value : masked}</Text>
|
|
{reveal && (
|
|
<Tooltip title={visible ? 'Hide' : 'Show'} arrow={false}>
|
|
<Button
|
|
type='text'
|
|
icon={visible ? <EyeSlashIcon /> : <EyeIcon />}
|
|
onClick={() => setVisible((v) => !v)}
|
|
size='small'
|
|
aria-label={visible ? 'Hide secret' : 'Show secret'}
|
|
/>
|
|
</Tooltip>
|
|
)}
|
|
{reveal && value && (
|
|
<CopyButton
|
|
text={value}
|
|
tooltip='Copy Secret'
|
|
style={{ marginLeft: 0 }}
|
|
iconStyle={{ fontSize: '14px' }}
|
|
/>
|
|
)}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
SecretDisplay.propTypes = {
|
|
value: PropTypes.string,
|
|
reveal: PropTypes.bool
|
|
}
|
|
|
|
export default SecretDisplay
|