feat: unbundle users settings

src/routes/console/project-[project]/auth/user-[user]/dangerZone.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+    import { CardGrid, Box, Heading, AvatarInitials } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import DeleteUser from './deleteUser.svelte';
+    import { user } from './store';
+
+    let showDelete = false;
+</script>
+
+<CardGrid danger>
+    <div>
+        <Heading tag="h6" size="7">Danger Zone</Heading>
+    </div>
+    <p>
+        The user will be permanently deleted, including all data associated with this user. This
+        action is irreversible.
+    </p>
+    <svelte:fragment slot="aside">
+        <Box>
+            <svelte:fragment slot="image">
+                {#if $user.email || $user.phone}
+                    {#if $user.name}
+                        <AvatarInitials size={48} name={$user.name} />
+                    {:else}
+                        <div class="avatar">
+                            <span class="icon-minus-sm" aria-hidden="true" />
+                        </div>
+                    {/if}
+                {:else}
+                    <div class="avatar">
+                        <span class="icon-anonymous" aria-hidden="true" />
+                    </div>
+                {/if}
+            </svelte:fragment>
+            <svelte:fragment slot="title">
+                <h6 class="u-bold u-trim-1">
+                    {$user.name || $user.email || $user.phone || 'Anonymous'}
+                </h6>
+            </svelte:fragment>
+            <p class="u-trim-1">
+                {$user.email && $user.phone
+                    ? [$user.email, $user.phone].join(',')
+                    : $user.email || $user.phone}
+            </p>
+        </Box>
+    </svelte:fragment>
+
+    <svelte:fragment slot="actions">
+        <Button secondary on:click={() => (showDelete = true)} event="delete_user">Delete</Button>
+    </svelte:fragment>
+</CardGrid>
+
+<DeleteUser bind:showDelete />

src/routes/console/project-[project]/auth/user-[user]/updateEmail.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { trackEvent } from '$lib/actions/analytics';
+    import { CardGrid, Heading } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, Form, InputEmail } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import { user } from './store';
+
+    let userEmail: string = null;
+    onMount(async () => {
+        userEmail ??= $user.email;
+    });
+
+    async function updateEmail() {
+        try {
+            await sdkForProject.users.updateEmail($user.$id, userEmail);
+            invalidate(Dependencies.USER);
+            addNotification({
+                message: 'Email has been updated',
+                type: 'success'
+            });
+            trackEvent('submit_user_update_email');
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+    }
+</script>
+
+<Form on:submit={updateEmail}>
+    <CardGrid>
+        <Heading tag="h6" size="7">Update Email</Heading>
+        <svelte:fragment slot="aside">
+            <ul>
+                <InputEmail
+                    id="email"
+                    label="Email"
+                    placeholder="Enter email"
+                    autocomplete={false}
+                    bind:value={userEmail} />
+            </ul>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={userEmail === $user.email} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>

src/routes/console/project-[project]/auth/user-[user]/updateName.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { trackEvent } from '$lib/actions/analytics';
+    import { CardGrid, Heading } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, Form, InputText } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import { user } from './store';
+
+    let userName: string = null;
+    onMount(async () => {
+        userName ??= $user.name;
+    });
+
+    async function updateName() {
+        try {
+            await sdkForProject.users.updateName($user.$id, userName);
+            invalidate(Dependencies.USER);
+            addNotification({
+                message: 'Name has been updated',
+                type: 'success'
+            });
+            trackEvent('submit_user_update_name');
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+    }
+</script>
+
+<Form on:submit={updateName}>
+    <CardGrid>
+        <Heading tag="h6" size="7">Update Name</Heading>
+
+        <svelte:fragment slot="aside">
+            <ul>
+                <InputText
+                    id="name"
+                    label="Name"
+                    placeholder="Enter name"
+                    autocomplete={false}
+                    bind:value={userName} />
+            </ul>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={userName === $user.name} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>

src/routes/console/project-[project]/auth/user-[user]/updatePassword.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    import { trackEvent } from '$lib/actions/analytics';
+    import { CardGrid, Heading } from '$lib/components';
+    import { Button, Form, InputPassword } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { user } from './store';
+
+    let newPassword: string = null;
+
+    async function updatePassword() {
+        try {
+            await sdkForProject.users.updatePassword($user.$id, newPassword);
+            newPassword = null;
+            addNotification({
+                message: 'Password has been updated',
+                type: 'success'
+            });
+            trackEvent('submit_user_update_password');
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+    }
+</script>
+
+<Form on:submit={updatePassword}>
+    <CardGrid>
+        <div>
+            <Heading tag="h6" size="7">Update Password</Heading>
+        </div>
+
+        <p>
+            Enter a new password. A password must contain <b>at least 8 characters.</b>
+        </p>
+        <svelte:fragment slot="aside">
+            <ul>
+                <InputPassword
+                    id="newPassword"
+                    label="New Password"
+                    placeholder="Enter new password"
+                    autocomplete={false}
+                    meter={false}
+                    showPasswordButton={true}
+                    bind:value={newPassword} />
+            </ul>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={!newPassword} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>

src/routes/console/project-[project]/auth/user-[user]/updatePhone.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { trackEvent } from '$lib/actions/analytics';
+    import { CardGrid, Heading } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, Form, InputPhone } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import { user } from './store';
+
+    let userPhone: string = null;
+    onMount(async () => {
+        userPhone ??= $user.phone;
+    });
+
+    async function updatePhone() {
+        try {
+            await sdkForProject.users.updatePhone($user.$id, userPhone);
+            invalidate(Dependencies.USER);
+            addNotification({
+                message: 'Phone has been updated',
+                type: 'success'
+            });
+            trackEvent('submit_user_update_phone');
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+    }
+</script>
+
+<Form on:submit={updatePhone}>
+    <CardGrid>
+        <Heading tag="h6" size="7">Update Phone</Heading>
+        <svelte:fragment slot="aside">
+            <ul>
+                <InputPhone
+                    id="phone"
+                    label="Phone"
+                    placeholder="Enter phone number"
+                    autocomplete={false}
+                    bind:value={userPhone} />
+            </ul>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={userPhone === $user.phone} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>