src/components/orgs/AddOrgModal.svelte

@@ -13,7 +13,24 @@
   $: name = "";
   $: processed_last_submit = true;
   $: isOrgnameValid = name.trim().length !== 0;
-  $: createbtnenabled = isOrgnameValid;
+  $: isAddress1Valid = address_input1_value.trim().length !== 0;
+  $: iszipcodevalid = address_zipcode_value.trim().length !== 0;
+  $: iscityvalid = address_city_value.trim().length !== 0;
+  $: createbtnenabled =
+    isOrgnameValid &&
+    ((isAddress1Valid && iszipcodevalid && iscityvalid) ||
+      address_checked === false);
+  $: address_input1_value = "";
+  $: address_input2_value = "";
+  $: address_zipcode_value = "";
+  $: address_city_value = "";
+  $: address_checked = true;
+
+  let address_input1;
+  let address_input2;
+  let address_zipcode;
+  let address_city;
+
   (() => {
     document.onkeydown = (e) => {
       e = e || window.event;
@@ -133,7 +150,105 @@
                     </span>
                   {/if}
                 </div>
-              </div>
+                <div class="flex items-start">
+                  <div class="flex items-center h-5">
+                    <input
+                      bind:checked={address_checked}
+                      id="comments"
+                      name="comments"
+                      type="checkbox"
+                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+                  </div>
+                  <div class="ml-3 text-sm">
+                    <label
+                      for="comments"
+                      class="font-medium text-gray-700">Address</label>
+                  </div>
+                </div>
+              {#if address_checked === true}
+                <div class="col-span-6">
+                  <label
+                    for="address1"
+                    class="block text-sm font-medium text-gray-700">Address</label>
+                  <input
+                    autocomplete="off"
+                    placeholder="Address"
+                    class:border-red-500={!isAddress1Valid}
+                    class:focus:border-red-500={!isAddress1Valid}
+                    class:focus:ring-red-500={!isAddress1Valid}
+                    bind:value={address_input1_value}
+                    bind:this={address_input1}
+                    type="text"
+                    name="address1"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                  {#if !isAddress1Valid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      Address is required
+                    </span>
+                  {/if}
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="address2"
+                    class="block text-sm font-medium text-gray-700">Apartment,
+                    suite, etc.</label>
+                  <input
+                    autocomplete="off"
+                    placeholder="Apartment, suite, etc."
+                    bind:value={address_input2_value}
+                    bind:this={address_input2}
+                    type="text"
+                    name="address2"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="zipcode"
+                    class="block text-sm font-medium text-gray-700">ZIP/ postal
+                    code</label>
+                  <input
+                    autocomplete="off"
+                    placeholder="ZIP/ postal code"
+                    class:border-red-500={!iszipcodevalid}
+                    class:focus:border-red-500={!iszipcodevalid}
+                    class:focus:ring-red-500={!iszipcodevalid}
+                    bind:value={address_zipcode_value}
+                    bind:this={address_zipcode}
+                    type="text"
+                    name="zipcode"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                  {#if !iszipcodevalid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      Valid zipcode/ postal code is required
+                    </span>
+                  {/if}
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="city"
+                    class="block text-sm font-medium text-gray-700">City</label>
+                  <input
+                    autocomplete="off"
+                    placeholder="City"
+                    class:border-red-500={!iscityvalid}
+                    class:focus:border-red-500={!iscityvalid}
+                    class:focus:ring-red-500={!iscityvalid}
+                    bind:value={address_city_value}
+                    bind:this={address_city}
+                    type="text"
+                    name="city"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                  {#if !iscityvalid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      Valid city is required
+                    </span>
+                  {/if}
+                </div>
+              {/if}
+            </div>
             </div>
           </div>
         </div>