@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
111 lines (109 loc) • 3.73 kB
JavaScript
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import React, { useRef } from 'react';
import { FormattedMessage } from 'react-intl';
import DialogBody from '../DialogBody/DialogBody';
import InputBase from '@mui/material/InputBase';
import DialogFooter from '../DialogFooter/DialogFooter';
import SecondaryButton from '../SecondaryButton';
import PrimaryButton from '../PrimaryButton';
import { makeStyles } from 'tss-react/mui';
import { copyToClipboard } from '../../utils/system';
import useMount from '../../hooks/useMount';
import Alert from '@mui/material/Alert';
const useStyles = makeStyles()(() => ({
footer: {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between'
},
input: {
marginTop: '16px',
marginBottom: '8px'
}
}));
export function CopyTokenContainer(props) {
const { onClose, token, onCopy } = props;
const { classes } = useStyles();
// TODO: Ref not in use. Remove?
const inputRef = useRef();
const copyToken = () => {
copyToClipboard(token.token).then(() => onCopy());
};
useMount(() => {
if (token) {
copyToken();
}
});
return React.createElement(
React.Fragment,
null,
React.createElement(
DialogBody,
null,
React.createElement(
Alert,
{ variant: 'outlined', severity: 'success' },
React.createElement(FormattedMessage, {
id: 'copyTokenDialog.helperText',
defaultMessage:
'Token created successfully. Please copy the token and store it securely as you won\u2019t be able to see it\u2019s value again.'
})
),
React.createElement(InputBase, {
inputRef: inputRef,
autoFocus: true,
value: token?.token ?? '',
readOnly: true,
className: classes.input,
onClick: (e) => {
e.target.select();
copyToken();
}
})
),
React.createElement(
DialogFooter,
{ className: classes.footer },
React.createElement(
SecondaryButton,
{ onClick: () => copyToken() },
React.createElement(FormattedMessage, { id: 'words.copy', defaultMessage: 'Copy' })
),
React.createElement(
PrimaryButton,
{ onClick: (e) => onClose(e, null) },
React.createElement(FormattedMessage, { id: 'words.done', defaultMessage: 'Done' })
)
)
);
}
export default CopyTokenContainer;