Add help text and clean up format

Author: ryanrdoherty

packages/libs/wdk-client/src/Views/User/ServiceAccessPanel.tsx

@@ -17,10 +17,33 @@ const ServiceAccessPanel: React.FC<Props> = () => {
   let token =
     getAuthorizationToken() ||
     'Your authorization token is not currently available.';
+  let appPath = document.location.pathname.substring(
+    0,
+    document.location.pathname.indexOf('/app') + 4
+  );
+  let serviceHelpUrl =
+    appPath + '/static-content/content/VEuPathDB/webServices.html';
   return (
     <div>
+      <h2>VEuPathDB Web Services Access</h2>
+      <p style={{ maxWidth: '60%' }}>
+        VEuPathDB provides a REST API enabling users to programmatically query
+        and analyize data, download results, even create multi-step search
+        strategies. These HTTP resources require registration and a valid API
+        Key. Your key is provided below. <a href={serviceHelpUrl}>Click here</a>{' '}
+        to learn how to use it to access web services.
+      </p>
       <h3>Your Personal API Key</h3>
-      <blockquote style={{ overflowWrap: 'break-word', maxWidth: '40%' }}>
+      <a onClick={() => navigator.clipboard.writeText(token)}>
+        Copy key to clipboard
+      </a>
+      <blockquote
+        style={{
+          backgroundColor: 'lightgrey',
+          overflowWrap: 'break-word',
+          maxWidth: '40%',
+        }}
+      >
         {token}
       </blockquote>
     </div>