<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 } from "vue"
import Account from "./account.vue"
import Billing from "./billing.vue"

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

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

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