feat: Show user their portal userId on the settings page (#1196)

* add userId to settings

* add more margin

---------

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

src/initIcons.ts

@@ -25,6 +25,8 @@ import {
   faSmog,
   faSnowflake,
   faBoltLightning,
+  faCopy,
+  faCheck,
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -52,5 +54,7 @@ library.add(
   faMoon,
   faSmog,
   faSnowflake,
-  faBoltLightning
+  faBoltLightning,
+  faCopy,
+  faCheck
 )

src/pages/settings.tsx

@@ -1,3 +1,5 @@
+import { useState } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import styles from 'styles/pages/settings.module.scss'
 import EditDisplayName from 'components/EditDisplayName/EditDisplayName'
 import { withDefaultLayout } from 'layout/DefaultLayout/DefaultLayout'
@@ -6,12 +8,23 @@ import { useUser } from 'hooks/useUser'
 import Loader from 'components/Loader/Loader'
 
 const Settings = () => {
-  const { loading, portalUser } = useUser()
+  const { loading, portalUser, user } = useUser()
+  const [isCopied, setIsCopied] = useState(false)
 
   const [handleEditDisplayName] = useEditDisplayNameMutation()
 
   const userDisplayName = (portalUser?.displayName || '') as string
 
+  const copyTextToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(user?.userId || '')
+      setIsCopied(true)
+      setTimeout(() => setIsCopied(false), 3000)
+    } catch (err) {
+      console.error('Failed to copy: ', err)
+    }
+  }
+
   return loading ? (
     <Loader />
   ) : (
@@ -32,6 +45,20 @@ const Settings = () => {
             }}
           />
         </section>
+        <hr />
+        <span className={styles.copyClipboard}>
+          Your user id is: {user?.userId}
+        </span>
+        <button
+          type="button"
+          className={`usa-button usa-button--unstyled ${styles.copyButton}`}
+          onClick={copyTextToClipboard}>
+          <FontAwesomeIcon
+            className={styles.copyIcon}
+            icon={isCopied ? 'check' : 'copy'}
+          />
+          {isCopied ? 'Copied!' : 'Copy To Clipboard'}
+        </button>
       </div>
     </div>
   )

src/styles/pages/settings.module.scss

@@ -19,4 +19,13 @@
   section {
     margin-top: units('205');
   }
+
+  .copyIcon {
+    margin-right: units(0.5);
+  }
+
+  .copyButton {
+    cursor: pointer;
+    margin-left: units(1);
+  }
 }