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

<template>
<section class="shadowbox">
<h2>Register</h2>
<account v-if="!step" :err="err" @submit="create" />
<billing v-if="step" :err="err" @submit="create" />
</section>
</template>

<script setup>
import { ref, onMounted } from "vue"
import Account from "./account.vue"
import Billing from "./billing.vue"

let err = ref("")
const step = ref(0)
const token = ref("")

function getCookie(name) {
	var re = new RegExp(name + "=([^;]+)")
	var value = re.exec(document.cookie)

	return (value != null) ? unescape(value[1]) : null
}

function getUser() {
	token.value = getCookie("skouter")

	return fetch(`/api/user`,
		{method: 'GET',
		headers: {
			"Accept": "application/json",
			"Authorization": `Bearer ${token.value}`,
    		},
	}).then(response => {
		if (response.ok) {
			return response.json()
		}
	})
}

function create(user) {
  console.log(user)
  
  fetch(`/api/user`,
	    {method: 'POST',
	        body: JSON.stringify(user),
    		headers: {
        	"Accept": "application/json",
    		},
        }).then(resp => {
            if (resp.ok) {
              return resp.json().then(u => { err.value = "" }).
              then( () => intent(user) )
            } else {
              resp.text().then( e => err.value = e)
            }
        })
}

function intent(user) {
  console.log(user)
  
  return fetch(`/api/user/subscribe`,
	    {method: 'POST',
	        body: JSON.stringify(user),
    		headers: {
        	"Accept": "application/json",
        	"Authorization": `Bearer ${token.value}`,
    		},
        }).then(resp => {
            if (resp.ok) {
              return resp.json().then(u => { err.value = "" })
            } else {
              resp.text().then( e => err.value = e)
            }
        })
}

onMounted(() => {
  getUser().then( u => {
    intent(u)
  })
})
</script>

<style scoped>
section {
	max-width: 400px;
	margin: auto;
}
</style>