Page MenuHomePhabricator
Files F3524028

D9411.id31771.diff
No OneTemporary
Actions

D9411.id31771.diff
View Options

diff --git a/web/modals/user-profile/user-profile.react.js b/web/modals/user-profile/user-profile.react.js
--- a/web/modals/user-profile/user-profile.react.js
+++ b/web/modals/user-profile/user-profile.react.js
@@ -5,6 +5,7 @@
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
import { stringForUserExplicit } from 'lib/shared/user-utils.js';
import type { UserInfo } from 'lib/types/user-types';
+import sleep from 'lib/utils/sleep.js';
import css from './user-profile.css';
import UserAvatar from '../../avatars/user-avatar.react.js';
@@ -18,14 +19,32 @@
const usernameText = stringForUserExplicit(userInfo);
+ const [usernameCopied, setUsernameCopied] = React.useState<boolean>(false);
+
+ const onClickCopyUsername = React.useCallback(async () => {
+ if (usernameCopied) {
+ return;
+ }
+
+ await navigator.clipboard.writeText(usernameText);
+ setUsernameCopied(true);
+ await sleep(3000);
+ setUsernameCopied(false);
+ }, [usernameCopied, usernameText]);
+
return (
<div className={css.container}>
<UserAvatar userID={userInfo?.id} size="L" />
<div className={css.usernameContainer}>
<div className={css.usernameText}>{usernameText}</div>
- <div className={css.copyUsernameContainer}>
- <SWMansionIcon icon="copy" size={16} />
- <p className={css.copyUsernameText}>Copy username</p>
+ <div
+ className={css.copyUsernameContainer}
+ onClick={onClickCopyUsername}
+ >
+ <SWMansionIcon icon={!usernameCopied ? 'copy' : 'check'} size={16} />
+ <p className={css.copyUsernameText}>
+ {!usernameCopied ? 'Copy username' : 'Username copied!'}
+ </p>
</div>
</div>
</div>

File Metadata

Mime Type
text/plain
Expires
Tue, Dec 24, 11:03 AM (1 h, 39 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2698052
Default Alt Text
D9411.id31771.diff (1 KB)

Event Timeline