Add copyable SID to Account and Application edit pages

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 (
+    <Span>
+      {props.text}
+      <StyledButton
+        text
+        formLink
+        type="button"
+        onClick={copyText}
+      >
+        copy
+      </StyledButton>
+    </Span>
+  );
+};
+
+export default CopyableText;

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'
         }
       />
     : <Form
@@ -350,6 +353,14 @@ const AccountForm = props => {
         wideLabel={props.type === 'edit'}
         onSubmit={handleSubmit}
       >
+
+        {props.type === 'edit' && (
+          <React.Fragment>
+            <Label>AccountSid</Label>
+            <CopyableText text={accountSid} textType="AccountSid" />
+          </React.Fragment>
+        )}
+
         {(props.type === 'add' || props.type === 'edit') && (
           <React.Fragment>
             <Label htmlFor="name">Name</Label>

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
-      ? <Loader height={props.type === 'setup' ? '505px' : '630px'}/>
+      ? <Loader
+          height={
+            props.type === 'setup'
+              ? '505px'
+              : props.type === 'edit'
+                ? '646px'
+                : '611px'
+          }
+        />
       : <Form
           large
           onSubmit={handleSubmit}
         >
+
+          {props.type === 'edit' && (
+            <React.Fragment>
+              <Label>ApplicationSid</Label>
+              <CopyableText text={applicationSid} textType="ApplicationSid" />
+            </React.Fragment>
+          )}
+
           {(props.type === 'add' || props.type === 'edit') && (
             <React.Fragment>
               <Label htmlFor="name">Name</Label>