skouter/grav-admin/user/js/registration/account.vue

<template>
<form>
	<div>
	<label>Given name</label>
	<input required type="text" name="gname" v-model="user.firstName"/>
	</div>
	
	<div>
	<label>Surname</label>
	<input required type="text" name="sname" v-model="user.lastName"/>
	</div>
	
	<div>
	<label>Email</label>
	<input type="email" name="email" v-model="user.email"/>
	</div>
	
	<div>
	<label>Title</label>
	<select name="country" v-model="user.title">
  <option value="Loan Officer">Loan Officer</option>
  <option value="Mortgage Broker">Mortgage Broker</option>
  <option value="Executive">Executive</option>
    <option value="Other">Other</option>
  </select>
  </div>
	
	<div>
	<label>Password</label>
	<input requried type="password" name="pass" v-model="user.password"/>
	</div>
	
	<div>
	<label>Country</label>
	<select name="country" v-model="user.country">
  <option value="USA">USA</option>
  <option value="Canada">Canada</option>
  </select>
  </div>
  
  <div class="address-entry">
  <label for="">Address</label>
  <input
  type="text" @input="searchLocation" v-model="address.full">
  <dropdown v-if="addresses && addresses.length"
  :entries="addresses.map(a => ({text: a.full_address, value: a}))"
  @select="setAddress"
  >
  </dropdown>
  </div>

	<div><label>NMLS ID</label><input type="text" name="nmls"/></div>
	
	<div id="newsletter">
	  <label>Monthly Newsletter</label>
	  <input type="checkbox" name="newsletter" v-model="user.newsletter"/>
	</div>
	
	<div><span class="error">{{err}}</span></div>
	
	<div>
	<button class="btn" @click="submit" type="button">Continue</button>
	</div>
</form>
</template>

<script setup>
import { ref } from "vue"
import Dropdown from "./dropdown.vue"

const addresses = ref([])
const user = ref({country: "USA", title: "Loan Officer", newsletter: true})
const address = ref({})
const locationsId = ref(null)
const props = defineProps(['err'])
const emit = defineEmits(['submit'])

function searchLocation(e) {
    address.value.full = e.target.value
    clearTimeout(locationsId.value)
    locationsId.value = setTimeout(getLocations, 1000, e)
}

function getLocations(e) {
    let prefix = "https://api.mapbox.com/search/searchbox/v1/suggest?"
    let search = e.target.value
    let key = encodeURIComponent(process.env.MAPBOX_API_KEY)
    
    if (!search) return
    
    fetch(`${prefix}q=${search}&proximity=ip&access_token=${key}&session_token=1`
    ).then(resp => resp.json()).then(entries => {
        if (!entries?.suggestions) {
            addresses.value = null
            return
        }
        
        addresses.value = entries.suggestions.filter(e => e.full_address)
    })
}

function setAddress(a) {

    address.value = {
        id: address.value.id,
        full: a.full_address,
        street: a.address,
        city: a.context?.place.name ?? '',
        region: a.context?.region?.name ?? '',
        country: a.context?.country?.name ?? '',
        zip: a.context?.postcode?.name ?? '',
    }
    addresses.value = null
}

function submit() {
  user.value.address = address.value
  emit('submit', user.value)
}
</script>

<style scoped>
form > div {
	display: flex;
	justify-content: space-between;
	margin: 10px;
	position: relative;
}

button {
  margin: auto;
  min-width: 90px;
  display: block;
}

span.error {
  margin: 10px auto;
  color: darkred;
  
}

div#newsletter {
  justify-content: normal;
  gap: 30px;
}
</style>