diff --git a/src/initIcons.ts b/src/initIcons.ts index 805691810..5bfd4bfe6 100644 --- a/src/initIcons.ts +++ b/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 ) diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx index 00ef90a6e..afd89af72 100644 --- a/src/pages/settings.tsx +++ b/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 ? ( ) : ( @@ -32,6 +45,20 @@ const Settings = () => { }} /> +
+ + Your user id is: {user?.userId} + + ) diff --git a/src/styles/pages/settings.module.scss b/src/styles/pages/settings.module.scss index 8fb838660..9289740ed 100644 --- a/src/styles/pages/settings.module.scss +++ b/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); + } }