From 60370d52b33ae965d2efd6cabccd0dc4fba18daa Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Fri, 7 Oct 2022 13:38:15 -0700
Subject: [PATCH] Create InputDomain element

---
 src/lib/elements/forms/index.ts           |  1 +
 src/lib/elements/forms/inputDomain.svelte | 69 +++++++++++++++++++++++
 2 files changed, 70 insertions(+)
 create mode 100644 src/lib/elements/forms/inputDomain.svelte

diff --git a/src/lib/elements/forms/index.ts b/src/lib/elements/forms/index.ts
index b0b7b47b7..addef6a5e 100644
--- a/src/lib/elements/forms/index.ts
+++ b/src/lib/elements/forms/index.ts
@@ -2,6 +2,7 @@ export { default as Form } from './form.svelte';
 export { default as FormItem } from './formItem.svelte';
 export { default as FormList } from './formList.svelte';
 export { default as Button } from './button.svelte';
+export { default as InputDomain } from './inputDomain.svelte';
 export { default as InputEmail } from './inputEmail.svelte';
 export { default as InputPassword } from './inputPassword.svelte';
 export { default as InputText } from './inputText.svelte';
diff --git a/src/lib/elements/forms/inputDomain.svelte b/src/lib/elements/forms/inputDomain.svelte
new file mode 100644
index 000000000..697059a13
--- /dev/null
+++ b/src/lib/elements/forms/inputDomain.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { FormItem, Helper } from '.';
+
+    export let label: string;
+    export let showLabel = true;
+    export let id: string;
+    export let value = '';
+    export let placeholder = '';
+    export let required = false;
+    export let disabled = false;
+    export let readonly = false;
+    export let autofocus = false;
+    export let autocomplete = false;
+    export let maxlength: number = null;
+
+    // https://www.geeksforgeeks.org/how-to-validate-a-domain-name-using-regular-expression/
+    const pattern = String.raw`^(?!-)[A-Za-z0-9-]+([\-\.]{1}[a-z0-9]+)*\.[A-Za-z]{2,6}$`;
+
+    let element: HTMLInputElement;
+    let error: string;
+
+    onMount(() => {
+        if (element && autofocus) {
+            element.focus();
+        }
+    });
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+
+        if (element.validity.patternMismatch) {
+            error = 'Must be a valid domain';
+            return;
+        }
+        if (element.validity.valueMissing) {
+            error = 'This field is required';
+            return;
+        }
+
+        error = element.validationMessage;
+    };
+
+    $: if (value) {
+        error = null;
+    }
+</script>
+
+<FormItem>
+    <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
+    <div class="input-text-wrapper">
+        <input
+            {id}
+            {placeholder}
+            {disabled}
+            {required}
+            {maxlength}
+            {pattern}
+            {readonly}
+            type="text"
+            autocomplete={autocomplete ? 'on' : 'off'}
+            bind:value
+            bind:this={element}
+            on:invalid={handleInvalid} />
+    </div>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
+    {/if}
+</FormItem>