diff --git a/src/components/elements/CopyableText.js b/src/components/elements/CopyableText.js new file mode 100644 index 0000000..f5cfd50 --- /dev/null +++ b/src/components/elements/CopyableText.js @@ -0,0 +1,49 @@ +import React, { useContext } from 'react'; +import styled from 'styled-components/macro'; +import { NotificationDispatchContext } from '../../contexts/NotificationContext'; +import Button from './Button'; + +const Span = styled.span` + text-align: left; +`; + +const StyledButton = styled(Button)` + margin-left: 1rem; +`; + +const CopyableText = props => { + const dispatch = useContext(NotificationDispatchContext); + + const copyText = async () => { + try { + await navigator.clipboard.writeText(props.text); + dispatch({ + type: 'ADD', + level: 'success', + message: `${props.textType} copied to clipboard`, + }); + } catch (err) { + dispatch({ + type: 'ADD', + level: 'error', + message: `Unable to copy ${props.textType}, please select the text and right click to copy`, + }); + } + }; + + return ( + + {props.text} + + copy + + + ); +}; + +export default CopyableText; diff --git a/src/components/forms/AccountForm.js b/src/components/forms/AccountForm.js index dfe4703..2ce9e14 100644 --- a/src/components/forms/AccountForm.js +++ b/src/components/forms/AccountForm.js @@ -13,6 +13,7 @@ import Loader from '../blocks/Loader'; import Button from '../elements/Button'; import Link from '../elements/Link'; import Tooltip from '../elements/Tooltip'; +import CopyableText from '../elements/CopyableText'; const AccountForm = props => { let history = useHistory(); @@ -342,7 +343,9 @@ const AccountForm = props => { height={ props.type === 'setup' ? '309px' - : '292px' + : props.type === 'edit' + ? '381px' + : '292px' } /> :
{ wideLabel={props.type === 'edit'} onSubmit={handleSubmit} > + + {props.type === 'edit' && ( + + + + + )} + {(props.type === 'add' || props.type === 'edit') && ( diff --git a/src/components/forms/ApplicationForm.js b/src/components/forms/ApplicationForm.js index 22bd714..40371b6 100644 --- a/src/components/forms/ApplicationForm.js +++ b/src/components/forms/ApplicationForm.js @@ -14,6 +14,7 @@ import SpeechSynthesisLanguageGoogle from '../../data/SpeechSynthesisLanguageGoo import SpeechSynthesisLanguageAws from '../../data/SpeechSynthesisLanguageAws'; import SpeechRecognizerLanguageGoogle from '../../data/SpeechRecognizerLanguageGoogle'; import Loader from '../blocks/Loader'; +import CopyableText from '../elements/CopyableText'; const ApplicationForm = props => { let history = useHistory(); @@ -391,11 +392,27 @@ const ApplicationForm = props => { return ( showLoader - ? + ? : + + {props.type === 'edit' && ( + + + + + )} + {(props.type === 'add' || props.type === 'edit') && (