Merge pull request #2924 from appwrite/feat-user-impersonation-card

feat: new user impersonation card

Author: HarshMN2345

bun.lock

@@ -20,7 +20,7 @@
     },
     "dependencies": {
         "@ai-sdk/svelte": "^1.1.24",
-        "@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@9163640",
+        "@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@69509a7",
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@bfe7ce3",
         "@appwrite.io/pink-legacy": "^1.0.3",

package.json

@@ -235,6 +235,7 @@ export enum Submit {
     UserUpdatePassword = 'submit_user_update_password',
     UserUpdatePhone = 'submit_user_update_phone',
     UserUpdateMfa = 'submit_user_update_mfa',
+    UserUpdateImpersonation = 'submit_user_update_impersonation',
     UserUpdatePreferences = 'submit_user_update_preferences',
     UserUpdateStatus = 'submit_user_update_status',
     UserUpdateVerificationEmail = 'submit_user_update_verification_email',

src/lib/actions/analytics.ts

@@ -7,6 +7,7 @@
     import UpdateName from './updateName.svelte';
     import UpdatePassword from './updatePassword.svelte';
     import UpdatePhone from './updatePhone.svelte';
+    import UpdateImpersonation from './updateImpersonation.svelte';
     import UpdatePrefs from './updatePrefs.svelte';
     import UpdateStatus from './updateStatus.svelte';
     import type { PageData } from './$types';
@@ -22,6 +23,7 @@
     <UpdatePassword />
     <UpdateLabels />
     <UpdatePrefs />
+    <UpdateImpersonation />
     <UpdateMfa />
     <DangerZone project={data.project} />
 </Container>

src/routes/(console)/project-[region]-[project]/auth/user-[user]/+page.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { page } from '$app/state';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { CardGrid } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, Form } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { Alert, Layout, Link, Selector, Typography } from '@appwrite.io/pink-svelte';
+    import { onMount } from 'svelte';
+    import { user } from './store';
+
+    let impersonator = false;
+
+    $: currentImpersonator = Boolean($user?.impersonator);
+
+    onMount(() => {
+        impersonator = currentImpersonator;
+    });
+
+    async function updateImpersonator() {
+        try {
+            await sdk.forProject(page.params.region, page.params.project).users.updateImpersonator({
+                userId: $user.$id,
+                impersonator
+            });
+
+            await invalidate(Dependencies.USER);
+
+            addNotification({
+                message: `Impersonation capability has been ${impersonator ? 'enabled' : 'disabled'}`,
+                type: 'success'
+            });
+            trackEvent(Submit.UserUpdateImpersonation);
+        } catch (error) {
+            impersonator = currentImpersonator;
+
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.UserUpdateImpersonation);
+        }
+    }
+</script>
+
+<Form onSubmit={updateImpersonator}>
+    <CardGrid>
+        <svelte:fragment slot="title">User impersonation</svelte:fragment>
+        <svelte:fragment slot="aside">
+            <Layout.Stack gap="m">
+                <Selector.Switch
+                    id="user-impersonation"
+                    bind:checked={impersonator}
+                    label="User impersonation">
+                    <svelte:fragment slot="description">
+                        <div class="u-margin-block-start-8">
+                            <Typography.Text variant="m-400">
+                                Enabling this option allows this user to impersonate other users
+                                through your app using the Appwrite Client SDK.
+                                <Link.Anchor
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    href="https://appwrite.io/docs/products/auth">
+                                    Learn more.
+                                </Link.Anchor>
+                            </Typography.Text>
+                        </div>
+                    </svelte:fragment>
+                </Selector.Switch>
+
+                <Alert.Inline status="info">
+                    Only grant this permission to trusted operator or support accounts. Actions are
+                    logged under the account that initiated impersonation.
+                </Alert.Inline>
+            </Layout.Stack>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={impersonator === currentImpersonator} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>