From c822e3a6dbd26273dacc83d3aea75cf75a4f2feb Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 6 Jun 2022 17:30:14 +0200
Subject: [PATCH] feat: custom id (WIP)

---
 .../console/[project]/users/_createUser.svelte | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/routes/console/[project]/users/_createUser.svelte b/src/routes/console/[project]/users/_createUser.svelte
index 49e1e9af1..9a6bc27f3 100644
--- a/src/routes/console/[project]/users/_createUser.svelte
+++ b/src/routes/console/[project]/users/_createUser.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import { Modal } from '$lib/components';
     import { Button, InputPassword, InputEmail, InputText, Form } from '$lib/elements/forms';
-    import { Pill } from '$lib/elements';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -10,11 +9,12 @@
 
     const dispatch = createEventDispatcher();
 
-    let name: string, mail: string, pass: string;
+    let idModal = false;
+    let name: string, mail: string, pass: string, id: string;
 
     const create = async () => {
         try {
-            const user = await sdkForProject.users.create('unique()', mail, pass, name);
+            const user = await sdkForProject.users.create(id ? id : 'unique()', mail, pass, name);
             mail = pass = name = '';
             showCreate = false;
             dispatch('created', user);
@@ -48,7 +48,17 @@
             placeholder="*****"
             required={true}
             bind:value={pass} />
-        <Pill>User ID <i class="icon-duplicate" /></Pill>
+        <div class="tag common-section " on:click={() => (idModal = !idModal)}>
+            User ID<i class="icon-pencil" />
+        </div>
+
+        {#if idModal}
+            <div class="common-section">
+                <p>Enter a custom user ID. Leave blank for a randomly generated user ID.</p>
+                <InputText id="id" label="" placeholder="" bind:value={id} />
+            </div>
+        {/if}
+
         <svelte:fragment slot="footer">
             <Button text on:click={() => (showCreate = false)}>Cancel</Button>
             <Button submit>Create</Button>