source: ReserveNGo-frontend/src/components/Project/register_.vue

<script>


import { userStore } from '@/PiniaStores/UserStore.js'
import {useRouter} from 'vue-router'
import router from '@/router/index.js'

export default {
  data() {
    return {
      path: '',
      url: 'http://localhost:8080/api/auth/register/',

      form_info:{
        firstName: '',
        lastName: '',
        email: '',
        password: '',
        phoneNumber: '',

      },
     /* data: {
        id: 0,
        firstName: "",
        lastName: "",
        email: "",
        phoneNumber: "",
        role: "",
        token: ""
      },*/
      userStore_: userStore(),
      router: useRouter()

    }
  },

  methods: {
    async register() {
      await fetch(this.wholeUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          firstName: this.form_info.firstName,
          lastName: this.form_info.lastName,
          email: this.form_info.email,
          password: this.form_info.password,
          phoneNumber: this.form_info.phoneNumber
        })
      })
        .then((response) => response.json())
        .then((json) => {
          this.userStore_.setLocalStorage(json);
          router.push('/');
        });
    //console.log("Data received:", this.data);
          //this.userStore_.setLocalStorage(json)
        //console.log(json)

     //console.log(this.userStore_.data)
    }

  },
  computed: {
    wholeUrl(){
      return this.url+this.path;
    },
    testJson(){
      return JSON.stringify({
        firstName: this.form_info.firstName,
        lastName: this.form_info.lastName,
        email: this.form_info.email,
        password: this.form_info.password,
        phoneNumber: this.form_info.phoneNumber})
    }
  }


}



</script>

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

<!--      <form @submit.prevent="register" method="POST">-->
<!--      <form v-bind:action="wholeUrl" method="POST">-->

  <div class="col-3">
    <form @submit.prevent="register" method="POST">
      <label for="name" class="form-label" >Name</label>
      <input v-model="this.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>