OwlCyberSecurity - MANAGER
Edit File: ExtensionsToken.jsx
import React, { useEffect, useState } from 'react' import InputWithButton from './InputWithButton' import verifyExtensionsToken from '../../api/verifyExtensionsToken' import ButtonActionProvider from '../Actions/ButtonActionProvider' import { tokenUrl } from '../../utils/linkGenerator' import useGlobalConfig from '../Contexts/useGlobalConfig' import Button from '../Buttons/Button' import styles from './ExtensionsToken.module.scss' /** * Generates a form allowing the user to input an Extensions API token * * @param trackingParams * @param customActionHook * @param completedCallback * @returns {*} * @constructor */ const ExtensionsToken = ({ trackingParams = {}, customActionHook = null, completedCallback = null }) => { const [token, setToken] = useState('') const [error, setError] = useState(null) const [saved, setSaved] = useState(false) const { setSubscriptionStatus } = useGlobalConfig() // Call our completedCallback() after our "saved" state variable is set to true: useEffect(() => { if (saved) { if (completedCallback) { completedCallback() } } }, [saved]) useEffect(() => { // each time our local project name changes we update our saved state to false. setSaved(false) setError(null) }, [token]) const tokenIsCorrectLength = token.length === 36 return ( <InputWithButton Input={( <input type='text' value={token} data-testid='token-input' onChange={e => { // Update local token state value: setToken(e.target.value) }} className={`${styles.input} ${tokenIsCorrectLength ? styles.success : ''}`} spellCheck='false' autoComplete='false' placeholder='Enter token here' /> )} Button={( <ButtonActionProvider DefaultButton={<Button type={tokenIsCorrectLength ? 'primary' : 'ghost'} label='Verify Token' icon='arrow' dataTestId='elements-token-submit' />} LoadingButton={<Button type='ghost' label='Verifying...' icon='updateSpinning' disabled dataTestId='elements-token-submit' />} ErrorButton={<Button type='warning' label='Error' icon='cross' disabled dataTestId='elements-token-submit' />} SuccessButton={<Button type='ghost' label='Success!' icon='updateSpinning' disabled dataTestId='elements-token-submit' />} CompletedButton={<Button type='ghost' label='Success!' icon='updateSpinning' disabled dataTestId='elements-token-submit' />} actionHook={customActionHook || (() => verifyExtensionsToken({ token }))} isAlreadyCompleted={false} completedCallback={(data) => { if (data && data.status) { // Update global subscription state: setSubscriptionStatus(data.status) } setSaved(true) }} errorCallback={(data) => { setError(data && data.error ? data.error : { code: 'unknown_error', message: 'Sorry something went wrong, please try again.' }) }} /> )} instructions={( <p className={styles.copy}> <a href={tokenUrl({ trackingParams })} target='_blank' rel='noopener noreferrer'> Follow this link </a>{' '} to sign into Envato Elements and generate a token. </p> )} errorMessage={error ? error.message : null} /> ) } export default ExtensionsToken