From 5a1373846ea55edabd87568b8a1c20abfec554a4 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 7 Jun 2022 10:50:35 +0200
Subject: [PATCH] feat: user ID can be copied by clicking

---
 src/lib/elements/pill.svelte                  | 11 ++++++++++-
 .../console/[project]/users/index.svelte      | 19 ++++++++++++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/lib/elements/pill.svelte b/src/lib/elements/pill.svelte
index 821b60fed..8ba2bac36 100644
--- a/src/lib/elements/pill.svelte
+++ b/src/lib/elements/pill.svelte
@@ -4,6 +4,7 @@
     export let warning = false;
     export let danger = false;
     export let info = false;
+    export let button = false;
 </script>
 
 <div
@@ -12,6 +13,14 @@
     class:is-success={success}
     class:is-warning={warning}
     class:is-danger={danger}
-    class:is-info={info}>
+    class:is-info={info}
+    class:pill-is-button={button}
+    on:click>
     <slot />
 </div>
+
+<style>
+    .pill-is-button {
+        cursor: pointer;
+    }
+</style>
diff --git a/src/routes/console/[project]/users/index.svelte b/src/routes/console/[project]/users/index.svelte
index a85a35e3c..dfa2bad5b 100644
--- a/src/routes/console/[project]/users/index.svelte
+++ b/src/routes/console/[project]/users/index.svelte
@@ -3,6 +3,7 @@
     import { sdkForProject } from '$lib/stores/sdk';
     import { Empty, Pagination } from '$lib/components';
     import { Button } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
     import {
         Table,
         TableHeader,
@@ -50,6 +51,21 @@
             offset = queryOffset;
         }
     });
+
+    const copy = async (value) => {
+        try {
+            await navigator.clipboard.writeText(value);
+            addNotification({
+                message: 'Copied to clipboard.',
+                type: 'success'
+            });
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+    };
 </script>
 
 <Container>
@@ -106,7 +122,8 @@
                             {/if}
                         </TableCellText>
                         <TableCellText title="ID">
-                            <Pill>User ID <i class="icon-duplicate" /></Pill>
+                            <Pill button on:click={() => copy(user.$id)}
+                                >User ID <i class="icon-duplicate" /></Pill>
                         </TableCellText>
                         <TableCellText title="Joined">
                             {toLocaleDateTime(user.registration)}