From 8e34bc055d38b1adc84876b59b4f0b5c1ad8c92b Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 17 Nov 2022 17:28:25 +0100
Subject: [PATCH 1/6] feat: create inputId, add pattern, add char count

---
 src/lib/components/customId.svelte    | 19 +-------
 src/lib/elements/forms/index.ts       |  1 +
 src/lib/elements/forms/inputId.svelte | 69 +++++++++++++++++++++++++++
 3 files changed, 72 insertions(+), 17 deletions(-)
 create mode 100644 src/lib/elements/forms/inputId.svelte

diff --git a/src/lib/components/customId.svelte b/src/lib/components/customId.svelte
index 0596f9c70a..9dd9fa0c49 100644
--- a/src/lib/components/customId.svelte
+++ b/src/lib/components/customId.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { trackEvent } from '$lib/actions/analytics';
     import { InnerModal } from '$lib/components';
-    import { InputText } from '$lib/elements/forms';
+    import { InputId } from '$lib/elements/forms';
 
     export let show = false;
     export let name: string;
@@ -27,22 +27,7 @@
     </svelte:fragment>
     <svelte:fragment slot="content">
         <div class="form">
-            <InputText
-                id="id"
-                label="Custom ID"
-                showLabel={false}
-                placeholder="Enter ID"
-                autofocus={true}
-                bind:value={id} />
-
-            <div class="u-flex u-gap-4 u-margin-block-start-8 u-small">
-                <span
-                    class="icon-info u-cross-center u-margin-block-start-2 u-line-height-1 u-icon-small"
-                    aria-hidden="true" />
-                <span class="text u-line-height-1-5">
-                    Allowed characters: alphanumeric, hyphen, non-leading underscore, period
-                </span>
-            </div>
+            <InputId bind:value={id} />
         </div>
     </svelte:fragment>
 </InnerModal>
diff --git a/src/lib/elements/forms/index.ts b/src/lib/elements/forms/index.ts
index 2398a8609d..77b4ff1c3e 100644
--- a/src/lib/elements/forms/index.ts
+++ b/src/lib/elements/forms/index.ts
@@ -20,4 +20,5 @@ export { default as InputChoice } from './inputChoice.svelte';
 export { default as InputPhone } from './inputPhone.svelte';
 export { default as InputCron } from './inputCron.svelte';
 export { default as InputURL } from './inputURL.svelte';
+export { default as InputId } from './inputId.svelte';
 export { default as Helper } from './helper.svelte';
diff --git a/src/lib/elements/forms/inputId.svelte b/src/lib/elements/forms/inputId.svelte
new file mode 100644
index 0000000000..39ce8717ac
--- /dev/null
+++ b/src/lib/elements/forms/inputId.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { FormItem } from '.';
+
+    export let value = '';
+
+    let element: HTMLInputElement;
+    let error: string;
+    let icon = 'info';
+    const pattern = String.raw`/^[^._-][a-zA-Z0-9._-]*$/`;
+    const autofocus = true;
+
+    onMount(() => {
+        if (element && autofocus) {
+            element.focus();
+        }
+    });
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+
+        if (element.validity.valueMissing) {
+            error = 'This field is required';
+            return;
+        }
+
+        if (element.validity.patternMismatch) {
+            icon = 'exclamation';
+            return;
+        }
+
+        error = element.validationMessage;
+    };
+
+    $: if (value) {
+        error = null;
+        icon = 'info';
+    }
+</script>
+
+<FormItem>
+    <div class="input-text-wrapper">
+        <input
+            id="id"
+            placeholder="Enter ID"
+            maxlength={36}
+            {pattern}
+            autocomplete="off"
+            type="text"
+            class="input-text"
+            bind:value
+            bind:this={element}
+            on:invalid={handleInvalid} />
+        <!-- TODO: add correct class -->
+        <div class="options-list">
+            <span class="text u-small u-opacity-0-5">{value?.length ?? 0}/36</span>
+        </div>
+    </div>
+</FormItem>
+<div class="u-flex u-gap-4 u-margin-block-start-8 u-small" class:u-warning={icon === 'exclamation'}>
+    <span
+        class:icon-info={icon === 'info'}
+        class:icon-exclamation={icon === 'exclamation'}
+        class="u-cross-center u-margin-block-start-2 u-line-height-1 u-icon-small"
+        aria-hidden="true" />
+    <span class="text u-line-height-1-5">
+        Allowed characters: alphanumeric, non-leading hyphen, underscore, period
+    </span>
+</div>

From b4c898be201a3c5e84dbfc6f87318bd7aade1d5e Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 17 Nov 2022 17:37:04 +0100
Subject: [PATCH 2/6] fix: remove unused variable

---
 src/lib/elements/forms/inputId.svelte | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/lib/elements/forms/inputId.svelte b/src/lib/elements/forms/inputId.svelte
index 39ce8717ac..cd25844691 100644
--- a/src/lib/elements/forms/inputId.svelte
+++ b/src/lib/elements/forms/inputId.svelte
@@ -5,7 +5,6 @@
     export let value = '';
 
     let element: HTMLInputElement;
-    let error: string;
     let icon = 'info';
     const pattern = String.raw`/^[^._-][a-zA-Z0-9._-]*$/`;
     const autofocus = true;
@@ -19,21 +18,13 @@
     const handleInvalid = (event: Event) => {
         event.preventDefault();
 
-        if (element.validity.valueMissing) {
-            error = 'This field is required';
-            return;
-        }
-
         if (element.validity.patternMismatch) {
             icon = 'exclamation';
             return;
         }
-
-        error = element.validationMessage;
     };
 
     $: if (value) {
-        error = null;
         icon = 'info';
     }
 </script>

From e05afbff928f8203fd3bbace577ce3448f914323 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 23 Nov 2022 11:47:26 +0100
Subject: [PATCH 3/6] feat:update css

---
 package-lock.json                     | 28 +++++++++++++--------------
 package.json                          |  4 ++--
 src/lib/elements/forms/inputId.svelte |  9 ++++++---
 3 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 785ae480ae..0a7d57f974 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,8 +10,8 @@
             "dependencies": {
                 "@analytics/google-analytics": "^1.0.5",
                 "@aw-labs/appwrite-console": "^13.0.0",
-                "@aw-labs/icons": "0.0.0-77",
-                "@aw-labs/ui": "0.0.0-77",
+                "@aw-labs/icons": "0.0.0-78",
+                "@aw-labs/ui": "0.0.0-78",
                 "@popperjs/core": "^2.11.6",
                 "@sentry/svelte": "^7.19.0",
                 "@sentry/tracing": "^7.19.0",
@@ -154,14 +154,14 @@
             }
         },
         "node_modules/@aw-labs/icons": {
-            "version": "0.0.0-77",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-77.tgz",
-            "integrity": "sha512-z/gH6B//qShnlJbf1sxv0ltSbRvJha1El0pl4jACAWDD+orgh2hzBrv6YdgPi1AVBTacu2GWWTcyobItghbpgA=="
+            "version": "0.0.0-78",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-78.tgz",
+            "integrity": "sha512-M1yH0EUanjuHw1McVJfVKrkbHOoSd4PF8ZOYqMXOhSwuwk37MFR8jUapYb2NPu3WdfLTGI6H3N+HwaILePotCg=="
         },
         "node_modules/@aw-labs/ui": {
-            "version": "0.0.0-77",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-77.tgz",
-            "integrity": "sha512-y/7cbPFcK+jUnarsn9X1arrIB69RVMPWMjjIiiaX7uSa0rq9ZN1agBZxfA63meyh23kdIK4K5CcJhatShMMsYg==",
+            "version": "0.0.0-78",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-78.tgz",
+            "integrity": "sha512-YjIqkwAqZLvjJ6MQBxTEbAuotXHL1E/LXwmHOH9/Tu6TvF5p8e83LlyHVG6d8rXwsmsGfUcXLJEvEcc8RMEOMQ==",
             "dependencies": {
                 "@aw-labs/icons": "*",
                 "normalize.css": "^8.0.1",
@@ -7749,14 +7749,14 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-77",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-77.tgz",
-            "integrity": "sha512-z/gH6B//qShnlJbf1sxv0ltSbRvJha1El0pl4jACAWDD+orgh2hzBrv6YdgPi1AVBTacu2GWWTcyobItghbpgA=="
+            "version": "0.0.0-78",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-78.tgz",
+            "integrity": "sha512-M1yH0EUanjuHw1McVJfVKrkbHOoSd4PF8ZOYqMXOhSwuwk37MFR8jUapYb2NPu3WdfLTGI6H3N+HwaILePotCg=="
         },
         "@aw-labs/ui": {
-            "version": "0.0.0-77",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-77.tgz",
-            "integrity": "sha512-y/7cbPFcK+jUnarsn9X1arrIB69RVMPWMjjIiiaX7uSa0rq9ZN1agBZxfA63meyh23kdIK4K5CcJhatShMMsYg==",
+            "version": "0.0.0-78",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-78.tgz",
+            "integrity": "sha512-YjIqkwAqZLvjJ6MQBxTEbAuotXHL1E/LXwmHOH9/Tu6TvF5p8e83LlyHVG6d8rXwsmsGfUcXLJEvEcc8RMEOMQ==",
             "requires": {
                 "@aw-labs/icons": "*",
                 "normalize.css": "^8.0.1",
diff --git a/package.json b/package.json
index cbd2c487c4..0a6855b61b 100644
--- a/package.json
+++ b/package.json
@@ -22,8 +22,8 @@
         "@analytics/google-analytics": "^1.0.5",
         "analytics": "^0.8.1",
         "@aw-labs/appwrite-console": "^13.0.0",
-        "@aw-labs/icons": "0.0.0-77",
-        "@aw-labs/ui": "0.0.0-77",
+        "@aw-labs/icons": "0.0.0-78",
+        "@aw-labs/ui": "0.0.0-78",
         "@popperjs/core": "^2.11.6",
         "@sentry/svelte": "^7.19.0",
         "@sentry/tracing": "^7.19.0",
diff --git a/src/lib/elements/forms/inputId.svelte b/src/lib/elements/forms/inputId.svelte
index cd25844691..6ab53c9774 100644
--- a/src/lib/elements/forms/inputId.svelte
+++ b/src/lib/elements/forms/inputId.svelte
@@ -43,9 +43,12 @@
             bind:this={element}
             on:invalid={handleInvalid} />
         <!-- TODO: add correct class -->
-        <div class="options-list">
-            <span class="text u-small u-opacity-0-5">{value?.length ?? 0}/36</span>
-        </div>
+
+        <span class="text-counter">
+            <span class="text-counter-count">{value?.length ?? 0}</span>
+            <span class="text-counter-separator" />
+            <span class="text-counter-max">36</span>
+        </span>
     </div>
 </FormItem>
 <div class="u-flex u-gap-4 u-margin-block-start-8 u-small" class:u-warning={icon === 'exclamation'}>

From caccb3ee2e0dcb89514d6abb63676f8a2a779602 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 23 Nov 2022 12:20:52 +0100
Subject: [PATCH 4/6] test: add tests

---
 tests/unit/elements/inputId.test.ts | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 tests/unit/elements/inputId.test.ts

diff --git a/tests/unit/elements/inputId.test.ts b/tests/unit/elements/inputId.test.ts
new file mode 100644
index 0000000000..aa4e4c7958
--- /dev/null
+++ b/tests/unit/elements/inputId.test.ts
@@ -0,0 +1,22 @@
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { InputId } from '../../../src/lib/elements/forms';
+
+test('shows id input', () => {
+    const { getByPlaceholderText } = render(InputId);
+    const input = getByPlaceholderText('Enter ID');
+
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveAttribute('type', 'text');
+});
+
+test('state', async () => {
+    const { component, getByPlaceholderText } = render(InputId, { value: '' });
+    const input = getByPlaceholderText('Enter ID');
+
+    console.log(component);
+    expect(component.value).toEqual('');
+    await userEvent.type(input, 'lorem');
+    expect(component.value).toEqual('lorem');
+});

From 1a3959501bc3be1cdb63e9843d19529a5b3bcdea Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 10 Jan 2023 15:56:35 +0100
Subject: [PATCH 5/6] Merge branch 'main' of github.com:appwrite/console into
 feat-custom-id-pattern

---
 package-lock.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 766f48f5cd..8a793cced6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5399,9 +5399,9 @@
             "dev": true
         },
         "node_modules/json5": {
-            "version": "2.2.1",
-            "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
-            "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
+            "version": "2.2.3",
+            "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+            "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
             "dev": true,
             "peer": true,
             "bin": {
@@ -11827,9 +11827,9 @@
             "dev": true
         },
         "json5": {
-            "version": "2.2.1",
-            "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
-            "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
+            "version": "2.2.3",
+            "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+            "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
             "dev": true,
             "peer": true
         },

From 0455a9fcc12b09ab673f9f8d87e6a38157a864a3 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 27 Jan 2023 13:31:34 +0100
Subject: [PATCH 6/6] chore: remove todo

---
 src/lib/elements/forms/inputId.svelte | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/lib/elements/forms/inputId.svelte b/src/lib/elements/forms/inputId.svelte
index 6ab53c9774..89b71990f8 100644
--- a/src/lib/elements/forms/inputId.svelte
+++ b/src/lib/elements/forms/inputId.svelte
@@ -42,8 +42,6 @@
             bind:value
             bind:this={element}
             on:invalid={handleInvalid} />
-        <!-- TODO: add correct class -->
-
         <span class="text-counter">
             <span class="text-counter-count">{value?.length ?? 0}</span>
             <span class="text-counter-separator" />