<script>


export default {
  data() {
    return {
      path: '',
      url: 'http://localhost:8080/api/auth/register/',
      form_info:{
        firstName: '',
        lastName: '',
        email: '',
        password: '',
        phoneNumber: '',

      },
      data: {}

    }
  },

  methods: {
    register() {
      fetch(this.url+this.path, {
        method: 'POST',
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({firstName: this.firstName, lastName: this.lastName, email: this.email, password: this.password})
      }).then((response) => {response.json()})
        .then((json) => this.data = json)

    }

  },
  /*computed: {
    somevariabletest(){
      return this.url+this.path;
    }
  }*/


}



</script>

<template>
  <div class="container-xxl">
    <div class="row justify-content-center">


  <div class="col-3">
    <form @submit.prevent="register()" method="POST">
      <label for="name" class="form-label" >Name</label>
      <input v-model="form_info.firstName" type="text" id="name" name="firstName" class="form-control" placeholder="Name" required>

      <label for="surname" class="form-label">Surname</label>
      <input v-model="form_info.lastName" type="text" id="surname" name="lastName" class="form-control" placeholder="Surname" required>

      <label for="phone_number" class="form-label">Phone Number</label>
      <input v-model="form_info.phoneNumber" type="text" id="phone_number" name="phoneNumber" class="form-control" required>

      <label for="email" class="form-label">Email Address</label>
      <input v-model="form_info.email" type="email" id="email" name="email" class="form-control" placeholder="someone@example.com" required>

      <label for="password" class="form-label">Password</label>
      <input v-model="form_info.password" type="password" id="password" name="password" class="form-control">

      <label for="role" class="form-label">Role</label>
      <select class="form-control" id="role" v-model="path">

        <option value="customer">Customer</option>

        <option value="local-worker">Local Worker</option>

        <option value="local-manager">Local Manager</option>

      </select>

      <button type="submit" class="btn btn-dark">Register</button>
    </form>
    </div>

    </div>


  </div>

</template>

<style scoped>

</style>
