src/components/UserForm.svelte

<script>
  import { createEventDispatcher } from 'svelte';

  const dispatch = createEventDispatcher();

  let username = '';
  let email = '';
  let phone = '';
  let latitude = '';
  let longitude = '';

  function submitForm() {
    if (!username || !email) {
      alert('Please fill in required fields: Username, Email.');
      return;
    }

    dispatch('addUser', {
      username,
      email,
      phone,
      latitude: parseFloat(latitude) || null,
      longitude: parseFloat(longitude) || null
    });

    username = email = phone = latitude = longitude = '';
  }
</script>

<form on:submit|preventDefault={submitForm}>
  <h2>Register User</h2>
  <input placeholder="Username *" bind:value={username} required />
  <input type="email" placeholder="Email *" bind:value={email} required />
  <input placeholder="Phone Number" bind:value={phone} />
  <input placeholder="Latitude (optional)" bind:value={latitude} type="number" step="any" />
  <input placeholder="Longitude (optional)" bind:value={longitude} type="number" step="any" />
  <button type="submit">Add User</button>
</form>