Repository: freeCodeCamp/freeCodeCamp
File: client/src/components/settings/exam-token.tsx (TypeScript)

Code before:

  const [copySuccess, setCopySuccess] = useState('');
  const [copyError, setCopyError] = useState('');

  const debouncedSetRecentlyGenerated = () => {
    setRecentlyGenerated(true);
    setTimeout(() => setRecentlyGenerated(false), 10000);
  };
  const { t } = useTranslation();

  const getToken = async () => {
    try {
      const response = await generateExamToken();

      const {
        data: { data: token }
      } = response;
      setExamToken(token.examEnvironmentAuthorizationToken);
      setExamTokenError('');
    } catch (e) {
      setExamTokenError(t('exam-token.error'));
    }

    debouncedSetRecentlyGenerated();
  };

  return (
    <FullWidthRow>
      <Modal
        open={generatedExamToken}
        onClose={() => {
          setGeneratedExamToken(false);
          setCopySuccess('');
          setCopyError('');
        }}
      >
        <Modal.Header>{t('exam-token.exam-token')}</Modal.Header>
        <Modal.Body>
          {examToken && (
            <p style={{ wordBreak: 'break-word' }}>
              {t('exam-token.your-exam-token', {
                token: examToken
              })}
            </p>
          )}
          {examTokenError && <p style={{ color: 'red' }}>{examTokenError}</p>}
          {copySuccess && <p style={{ color: 'green' }}>{copySuccess}</p>}
          {copyError && <p style={{ color: 'red' }}>{copyError}</p>}
        </Modal.Body>
        <Modal.Footer>
          <Button

Review comment (security):
We will need some way to link directly to this section of the page. Maybe.

```suggestion
    <FullWidthRow id='exam-environment-authorization-token'>
```

Code after:
  const [copySuccess, setCopySuccess] = useState<string | null>(null);
  const [copyError, setCopyError] = useState<string | null>(null);

  const { t } = useTranslation();

  const getToken = async () => {
    try {
      const response = await generateExamToken();

      const {
        data: {
          data: { examEnvironmentAuthorizationToken }
        }
      } = response;
      setExamToken(examEnvironmentAuthorizationToken);
      setExamTokenError('');
    } catch (e) {
      setExamTokenError(t('exam-token.error'));
    }

    setRecentlyGenerated(true);
    setTimeout(() => setRecentlyGenerated(false), 10000);
  };

  return (
    <FullWidthRow>
      <Modal
        open={!!examToken}
        onClose={() => {
          setExamToken(null);
          setCopySuccess(null);
          setCopyError(null);
        }}
      >
        <Modal.Header>{t('exam-token.exam-token')}</Modal.Header>
        <Modal.Body>
          {examToken && (
            <p style={{ wordBreak: 'break-word' }}>
              {t('exam-token.your-exam-token', {
                token: examToken
              })}
            </p>
          )}
          {examTokenError && <p style={{ color: 'red' }}>{examTokenError}</p>}
          {copySuccess && <p style={{ color: 'green' }}>{copySuccess}</p>}
          {copyError && <p style={{ color: 'red' }}>{copyError}</p>}
        </Modal.Body>
        <Modal.Footer>
          <Button
            onClick={() => {
              navigator.clipboard.writeText(examToken ?? '').then(