Create account registration fields

grav-admin/user/data/flex/indexes/pages.json

@@ -1 +1 @@
-{"version":"1.5","timestamp":1705010891,"count":14,"index":{"":{"key":"","storage_key":"","template":null,"storage_timestamp":1705010337,"children":{"01.home":1704396086,"02.about":1704398516,"03.typography":1703638467,"04.pricing":1704400398,"05.blog":1703638467,"06.register":1705010214,"07.login":1704398231},"checksum":"eea3a7871f80727e2de9702b8f540707"},"01.home":{"key":"home","storage_key":"01.home","template":"modular","storage_timestamp":1704396086,"markdown":{"":{"modular":1703631506}},"children":{"01._hero":1703718436,"02._features":1703720151,"03._example":1703716188,"04._comparison-pdf":1703719134,"05._info":1703720014,"06._any_device":1704396086},"checksum":"dbbcfea030db5994b105e013be94b15c"},"01.home\/01._hero":{"key":"home\/_hero","storage_key":"01.home\/01._hero","template":"hero","storage_timestamp":1703718436,"markdown":{"":{"hero":1703718436}},"checksum":"45dc2f4a454b5f0609cbe09cfda09790"},"01.home\/02._features":{"key":"home\/_features","storage_key":"01.home\/02._features","template":"features","storage_timestamp":1703720151,"markdown":{"":{"features":1703720151}},"checksum":"ed7be750188fc4ed50ebcdc060f6fb53"},"01.home\/03._example":{"key":"home\/_example","storage_key":"01.home\/03._example","template":"text","storage_timestamp":1703716188,"markdown":{"":{"text":1703713545}},"checksum":"48b2ea373eba19040584a991b21c083c"},"01.home\/04._comparison-pdf":{"key":"home\/_comparison-pdf","storage_key":"01.home\/04._comparison-pdf","template":"text","storage_timestamp":1703719134,"markdown":{"":{"text":1703719134}},"checksum":"f323d6050403b0102c73c174d74b2f0a"},"01.home\/05._info":{"key":"home\/_info","storage_key":"01.home\/05._info","template":"features","storage_timestamp":1703720014,"markdown":{"":{"features":1703720014}},"checksum":"35c9bee0f74fe81449a491e31bf81bcb"},"01.home\/06._any_device":{"key":"home\/_any_device","storage_key":"01.home\/06._any_device","template":"text","storage_timestamp":1704397975,"markdown":{"":{"text":1704397975}},"checksum":"aabfe01503028954e8557c5bff37048d"},"02.about":{"key":"about","storage_key":"02.about","template":"default","storage_timestamp":1704398516,"markdown":{"":{"default":1704398516}},"checksum":"3d12d8cc95786aef7316b6c379752aa0"},"03.typography":{"key":"typography","storage_key":"03.typography","template":"default","storage_timestamp":1703638467,"markdown":{"":{"default":1696264967}},"checksum":"e18e25aa1028384a58d66d7b5c74b799"},"04.pricing":{"key":"pricing","storage_key":"04.pricing","template":"default","storage_timestamp":1704400398,"markdown":{"":{"default":1704400398}},"checksum":"76ddfc1dafa27268dca3f24db2ffa05a"},"05.blog":{"key":"blog","storage_key":"05.blog","template":"blog","storage_timestamp":1703638467,"markdown":{"":{"blog":1703636303}},"checksum":"88a8e8a7109dc2957e9dc3e1fd81fa85"},"06.register":{"key":"register","storage_key":"06.register","template":"registration","storage_timestamp":1705010891,"markdown":{"":{"registration":1705010891}},"checksum":"20586ed4c6c3abbf43ef96c978a99d94"},"07.login":{"key":"login","storage_key":"07.login","template":"form","storage_timestamp":1704398231,"markdown":{"":{"form":1704398231}},"checksum":"77a4de225317558af65b6079dcc902fb"}}}
+{"version":"1.5","timestamp":1705014627,"count":14,"index":{"":{"key":"","storage_key":"","template":null,"storage_timestamp":1705010337,"children":{"01.home":1704396086,"02.about":1704398516,"03.typography":1703638467,"04.pricing":1704400398,"05.blog":1703638467,"06.register":1705010214,"07.login":1704398231},"checksum":"eea3a7871f80727e2de9702b8f540707"},"01.home":{"key":"home","storage_key":"01.home","template":"modular","storage_timestamp":1704396086,"markdown":{"":{"modular":1703631506}},"children":{"01._hero":1703718436,"02._features":1703720151,"03._example":1703716188,"04._comparison-pdf":1703719134,"05._info":1703720014,"06._any_device":1704396086},"checksum":"dbbcfea030db5994b105e013be94b15c"},"01.home\/01._hero":{"key":"home\/_hero","storage_key":"01.home\/01._hero","template":"hero","storage_timestamp":1703718436,"markdown":{"":{"hero":1703718436}},"checksum":"45dc2f4a454b5f0609cbe09cfda09790"},"01.home\/02._features":{"key":"home\/_features","storage_key":"01.home\/02._features","template":"features","storage_timestamp":1703720151,"markdown":{"":{"features":1703720151}},"checksum":"ed7be750188fc4ed50ebcdc060f6fb53"},"01.home\/03._example":{"key":"home\/_example","storage_key":"01.home\/03._example","template":"text","storage_timestamp":1703716188,"markdown":{"":{"text":1703713545}},"checksum":"48b2ea373eba19040584a991b21c083c"},"01.home\/04._comparison-pdf":{"key":"home\/_comparison-pdf","storage_key":"01.home\/04._comparison-pdf","template":"text","storage_timestamp":1703719134,"markdown":{"":{"text":1703719134}},"checksum":"f323d6050403b0102c73c174d74b2f0a"},"01.home\/05._info":{"key":"home\/_info","storage_key":"01.home\/05._info","template":"features","storage_timestamp":1703720014,"markdown":{"":{"features":1703720014}},"checksum":"35c9bee0f74fe81449a491e31bf81bcb"},"01.home\/06._any_device":{"key":"home\/_any_device","storage_key":"01.home\/06._any_device","template":"text","storage_timestamp":1704397975,"markdown":{"":{"text":1704397975}},"checksum":"aabfe01503028954e8557c5bff37048d"},"02.about":{"key":"about","storage_key":"02.about","template":"default","storage_timestamp":1704398516,"markdown":{"":{"default":1704398516}},"checksum":"3d12d8cc95786aef7316b6c379752aa0"},"03.typography":{"key":"typography","storage_key":"03.typography","template":"default","storage_timestamp":1703638467,"markdown":{"":{"default":1696264967}},"checksum":"e18e25aa1028384a58d66d7b5c74b799"},"04.pricing":{"key":"pricing","storage_key":"04.pricing","template":"default","storage_timestamp":1704400398,"markdown":{"":{"default":1704400398}},"checksum":"76ddfc1dafa27268dca3f24db2ffa05a"},"05.blog":{"key":"blog","storage_key":"05.blog","template":"blog","storage_timestamp":1703638467,"markdown":{"":{"blog":1703636303}},"checksum":"88a8e8a7109dc2957e9dc3e1fd81fa85"},"06.register":{"key":"register","storage_key":"06.register","template":"registration","storage_timestamp":1705014627,"markdown":{"":{"registration":1705014627}},"checksum":"a55e825d5f540ad1ab0c1adbff11ecf6"},"07.login":{"key":"login","storage_key":"07.login","template":"form","storage_timestamp":1704398231,"markdown":{"":{"form":1704398231}},"checksum":"77a4de225317558af65b6079dcc902fb"}}}

grav-admin/user/data/notifications/21232f297a57a5a743894a0e4a801fc3.yaml

@@ -1,4 +1,4 @@
-last_checked: 1705009679
+last_checked: 1705014592
 data:
   feed:
     -

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

@@ -0,0 +1,119 @@
+<template>
+<form>
+	<div>
+	<label>Given name</label><input required type="text" name="gname"/>
+	</div>
+	
+	<div>
+	<label>Surname</label><input required type="text" name="sname"/>
+	</div>
+	
+	<div>
+	<label>Email</label><input type="email" name="email"/>
+	</div>
+	
+	<div>
+	<label>Password</label><input requried type="password" name="pass"/>
+	</div>
+	
+	<div>
+	<label>Country</label>
+	<select name="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" :value="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><span class="error">{{error}}</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 error = ref('')
+const addresses = ref([])
+const user = ref({})
+const address = ref({})
+const locationsId = ref(null)
+
+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() {
+}
+</script>
+
+<style scoped>
+form > div {
+	display: flex;
+	max-width: 350px;
+	justify-content: space-between;
+	margin: 10px;
+	position: relative;
+}
+
+button {
+  margin: auto;
+  min-width: 90px;
+  display: block;
+}
+
+span.error {
+  margin: 10px auto;
+  color: darkred;
+  
+}
+</style>

grav-admin/user/js/registration/dropdown.vue

@@ -0,0 +1,33 @@
+<template>
+<div class="entries shadowbox">
+  <span class="entry" v-for="entry in entries"
+  @click="$emit('select', entry.value)"
+  >{{entry.text}}</span>
+</div>
+</template>
+
+<style scoped>
+  .entries {
+    display: flex;
+    flex-flow: column;
+    position: absolute;
+    left: 0;
+    background: #e7e9ed;
+    width: 100%;
+    margin-top: 5px;
+    z-index: 3;
+    border: 1px solid black;
+    top: 100%;
+  }
+  
+  .entry {
+    border-bottom: 1px solid;
+    padding: 5px;
+    cursor: pointer;
+  }
+</style>
+
+<script setup>
+const props = defineProps(['entries'])
+const emits = defineEmits(['select'])
+</script>

grav-admin/user/js/registration/registration.js

@@ -1,5 +1,4 @@
 import {createApp} from "vue"
 import App from "./registration.vue"
-// import "./assets/main.css"
 
 const app = createApp(App).mount("#registration")

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

@@ -1,6 +1,18 @@
 <template>
-<form>
-	<label>Given name</label><input type="text" name="gname"/>
-	<label>Surname</label><input type="text" name="sname"/>
-</form>
+<section>
+<account/>
+</section>
 </template>
+
+<script setup>
+import { ref } from "vue"
+import Account from "./account.vue"
+</script>
+
+<style scoped>
+button {
+  margin: auto;
+  min-width: 90px;
+  display: block;
+}
+</style>

grav-admin/user/pages/06.register/registration.md

@@ -2,3 +2,4 @@
 title: Register
 ---
 
+## Register