implements read-only API Key

src/client/components/elements/CopyToClipboard/index.js

@@ -20,44 +20,52 @@ const CopyToClipboard = ({ value }) => {
     }
   }, [copied, hovered]);
 
-  return (
-    <button
-      onMouseEnter={() => {
-        setHovered(true);
-        setCopied(false);
-      }}
-      onMouseLeave={() => {
-        setHovered(false);
-        setCopied(false);
-      }}
-      type="button"
-      className={baseClass}
-      onClick={() => {
-        if (ref && ref.current) {
-          ref.current.select();
-          ref.current.setSelectionRange(0, value.length + 1);
-          document.execCommand('copy');
+  if (value) {
+    return (
+      <button
+        onMouseEnter={() => {
+          setHovered(true);
+          setCopied(false);
+        }}
+        onMouseLeave={() => {
+          setHovered(false);
+          setCopied(false);
+        }}
+        type="button"
+        className={baseClass}
+        onClick={() => {
+          if (ref && ref.current) {
+            ref.current.select();
+            ref.current.setSelectionRange(0, value.length + 1);
+            document.execCommand('copy');
 
-          setCopied(true);
-        }
-      }}
-    >
-      <Copy />
-      <Tooltip>
-        {copied && 'Copied'}
-        {!copied && 'Copy'}
-      </Tooltip>
-      <textarea
-        readOnly
-        value={value}
-        ref={ref}
-      />
-    </button>
-  );
+            setCopied(true);
+          }
+        }}
+      >
+        <Copy />
+        <Tooltip>
+          {copied && 'Copied'}
+          {!copied && 'Copy'}
+        </Tooltip>
+        <textarea
+          readOnly
+          value={value}
+          ref={ref}
+        />
+      </button>
+    );
+  }
+
+  return null;
+};
+
+CopyToClipboard.defaultProps = {
+  value: '',
 };
 
 CopyToClipboard.propTypes = {
-  value: PropTypes.string.isRequired,
+  value: PropTypes.string,
 };
 
 export default CopyToClipboard;

src/client/components/elements/DeleteDocument/index.js

@@ -101,8 +101,6 @@ const DeleteDocument = (props) => {
             {' '}
             {singular}
             {' '}
-            document
-            {' '}
             "
             <strong>
               {titleToRender}

src/client/components/forms/Label/index.js

@@ -31,7 +31,10 @@ Label.defaultProps = {
 };
 
 Label.propTypes = {
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.node,
+  ]),
   htmlFor: PropTypes.string.isRequired,
   required: PropTypes.bool,
 };

src/client/components/forms/field-types/Auth/index.js

@@ -1,11 +1,13 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import Email from '../Email';
 import Password from '../Password';
 import Checkbox from '../Checkbox';
+import Text from '../Text';
 import Button from '../../../elements/Button';
 import ConfirmPassword from '../ConfirmPassword';
 import useForm from '../../Form/useForm';
+import CopyToClipboard from '../../../elements/CopyToClipboard';
 
 import './index.scss';
 
@@ -17,6 +19,18 @@ const Auth = (props) => {
   const { getField } = useForm();
 
   const enableAPIKey = getField('enableAPIKey');
+  const apiKey = getField('apiKey');
+
+  const apiKeyValue = apiKey?.value;
+
+  const APIKeyLabel = useMemo(() => (
+    <div className={`${baseClass}__api-key-label`}>
+      <span>
+        API Key
+      </span>
+      <CopyToClipboard value={apiKeyValue} />
+    </div>
+  ), [apiKeyValue]);
 
   return (
     <div className={baseClass}>
@@ -63,7 +77,12 @@ const Auth = (props) => {
           />
           {enableAPIKey?.value && (
             <div className={`${baseClass}__api-key-generator`}>
-              Generate one
+              <Text
+                label={APIKeyLabel}
+                initialData={initialData?.apiKey}
+                name="apiKey"
+                readOnly
+              />
             </div>
           )}
         </div>

src/client/components/forms/field-types/Auth/index.scss

@@ -1,11 +1,15 @@
 @import '../../../../scss/styles.scss';
 
 .auth-fields {
-  padding: base(2);
+  padding: base(2) base(2) base(1.5);
   margin-bottom: base(2);
   background: $color-background-gray;
 
   .btn {
     margin-top: 0;
   }
+
+  &__api-key-label {
+    position: relative;
+  }
 }

src/client/components/forms/field-types/Text/index.js

@@ -102,7 +102,10 @@ Text.propTypes = {
   validate: PropTypes.func,
   width: PropTypes.string,
   style: PropTypes.shape({}),
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.node,
+  ]),
 };
 
 export default withCondition(Text);

src/client/components/forms/useFieldType/index.scss

@@ -15,7 +15,7 @@
     }
   }
 
-  .tooltip {
+  .tooltip.error-message {
     left: auto;
     right: 0;
     transform: none;