Supbase login + waiting list page

src/components/Form/TextField.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { afterUpdate } from 'svelte';
+  import { onMount } from 'svelte';
   export let label;
   export let placeholder;
   export let value;
@@ -9,7 +9,8 @@
   export let type = 'text';
   export let autoFocus = false;
   export let isRequired = false;
-
+  export let isDisabled = false;
+  export let errorMessage;
   let ref;
 
   function typeAction(node) {
@@ -20,7 +21,7 @@
     }
   }
 
-  afterUpdate(() => {
+  onMount(() => {
     if (autoFocus) {
       ref.focus();
     }
@@ -28,15 +29,25 @@
 </script>
 
 <label class="block {className}">
-  {#if label}<label for="text-field" class="m-0">{label}</label>{/if}
+  {#if label}
+    <label for="text-field" class="m-0">
+      {label} <span class="text-red-700">*</span>
+    </label>
+  {/if}
   <input
     id="text-field"
     use:typeAction
-    class="form-input {inputClassName} p-2 mt-1 block w-full bg-white border border-gray-300"
+    class="form-input p-2 mt-1 block w-full bg-white border {inputClassName} {errorMessage
+      ? 'border-red-500'
+      : 'border-gray-300'}"
     on:keydown={onKeyDown}
     {placeholder}
     bind:value
     bind:this={ref}
-    required={true}
+    required={isRequired}
+    disabled={isDisabled}
   />
+  {#if errorMessage}
+    <p class="text-sm text-red-500">{errorMessage}</p>
+  {/if}
 </label>