| 1 | <script>
|
|---|
| 2 |
|
|---|
| 3 |
|
|---|
| 4 | import { userStore } from '@/PiniaStores/UserStore.js'
|
|---|
| 5 | import {useRouter} from 'vue-router'
|
|---|
| 6 | import router from '@/router/index.js'
|
|---|
| 7 |
|
|---|
| 8 | export default {
|
|---|
| 9 | data() {
|
|---|
| 10 | return {
|
|---|
| 11 | path: '',
|
|---|
| 12 | url: 'http://localhost:8080/api/auth/register/',
|
|---|
| 13 |
|
|---|
| 14 | form_info:{
|
|---|
| 15 | firstName: '',
|
|---|
| 16 | lastName: '',
|
|---|
| 17 | email: '',
|
|---|
| 18 | password: '',
|
|---|
| 19 | phoneNumber: '',
|
|---|
| 20 |
|
|---|
| 21 | },
|
|---|
| 22 | /* data: {
|
|---|
| 23 | id: 0,
|
|---|
| 24 | firstName: "",
|
|---|
| 25 | lastName: "",
|
|---|
| 26 | email: "",
|
|---|
| 27 | phoneNumber: "",
|
|---|
| 28 | role: "",
|
|---|
| 29 | token: ""
|
|---|
| 30 | },*/
|
|---|
| 31 | userStore_: userStore(),
|
|---|
| 32 | router: useRouter()
|
|---|
| 33 |
|
|---|
| 34 | }
|
|---|
| 35 | },
|
|---|
| 36 |
|
|---|
| 37 | methods: {
|
|---|
| 38 | async register() {
|
|---|
| 39 | await fetch(this.wholeUrl, {
|
|---|
| 40 | method: 'POST',
|
|---|
| 41 | headers: { 'Content-Type': 'application/json' },
|
|---|
| 42 | body: JSON.stringify({
|
|---|
| 43 | firstName: this.form_info.firstName,
|
|---|
| 44 | lastName: this.form_info.lastName,
|
|---|
| 45 | email: this.form_info.email,
|
|---|
| 46 | password: this.form_info.password,
|
|---|
| 47 | phoneNumber: this.form_info.phoneNumber
|
|---|
| 48 | })
|
|---|
| 49 | })
|
|---|
| 50 | .then((response) => response.json())
|
|---|
| 51 | .then((json) => {
|
|---|
| 52 | this.userStore_.setLocalStorage(json);
|
|---|
| 53 | router.push('/');
|
|---|
| 54 | });
|
|---|
| 55 | //console.log("Data received:", this.data);
|
|---|
| 56 | //this.userStore_.setLocalStorage(json)
|
|---|
| 57 | //console.log(json)
|
|---|
| 58 |
|
|---|
| 59 | //console.log(this.userStore_.data)
|
|---|
| 60 | }
|
|---|
| 61 |
|
|---|
| 62 | },
|
|---|
| 63 | computed: {
|
|---|
| 64 | wholeUrl(){
|
|---|
| 65 | return this.url+this.path;
|
|---|
| 66 | },
|
|---|
| 67 | testJson(){
|
|---|
| 68 | return JSON.stringify({
|
|---|
| 69 | firstName: this.form_info.firstName,
|
|---|
| 70 | lastName: this.form_info.lastName,
|
|---|
| 71 | email: this.form_info.email,
|
|---|
| 72 | password: this.form_info.password,
|
|---|
| 73 | phoneNumber: this.form_info.phoneNumber})
|
|---|
| 74 | }
|
|---|
| 75 | }
|
|---|
| 76 |
|
|---|
| 77 |
|
|---|
| 78 | }
|
|---|
| 79 |
|
|---|
| 80 |
|
|---|
| 81 |
|
|---|
| 82 | </script>
|
|---|
| 83 |
|
|---|
| 84 | <template>
|
|---|
| 85 | <div class="container-xxl">
|
|---|
| 86 | <div class="row justify-content-center">
|
|---|
| 87 |
|
|---|
| 88 | <!-- <form @submit.prevent="register" method="POST">-->
|
|---|
| 89 | <!-- <form v-bind:action="wholeUrl" method="POST">-->
|
|---|
| 90 |
|
|---|
| 91 | <div class="col-3">
|
|---|
| 92 | <form @submit.prevent="register" method="POST">
|
|---|
| 93 | <label for="name" class="form-label" >Name</label>
|
|---|
| 94 | <input v-model="this.form_info.firstName" type="text" id="name" name="firstName" class="form-control" placeholder="Name" required>
|
|---|
| 95 |
|
|---|
| 96 | <label for="surname" class="form-label">Surname</label>
|
|---|
| 97 | <input v-model="form_info.lastName" type="text" id="surname" name="lastName" class="form-control" placeholder="Surname" required>
|
|---|
| 98 |
|
|---|
| 99 | <label for="phone_number" class="form-label">Phone Number</label>
|
|---|
| 100 | <input v-model="form_info.phoneNumber" type="text" id="phone_number" name="phoneNumber" class="form-control" required>
|
|---|
| 101 |
|
|---|
| 102 | <label for="email" class="form-label">Email Address</label>
|
|---|
| 103 | <input v-model="form_info.email" type="email" id="email" name="email" class="form-control" placeholder="someone@example.com" required>
|
|---|
| 104 |
|
|---|
| 105 | <label for="password" class="form-label">Password</label>
|
|---|
| 106 | <input v-model="form_info.password" type="password" id="password" name="password" class="form-control">
|
|---|
| 107 |
|
|---|
| 108 | <label for="role" class="form-label">Role</label>
|
|---|
| 109 | <select class="form-control" id="role" v-model="path">
|
|---|
| 110 |
|
|---|
| 111 | <option value="customer">Customer</option>
|
|---|
| 112 |
|
|---|
| 113 | <option value="local-worker">Local Worker</option>
|
|---|
| 114 |
|
|---|
| 115 | <option value="local-manager">Local Manager</option>
|
|---|
| 116 |
|
|---|
| 117 | </select>
|
|---|
| 118 |
|
|---|
| 119 | <button type="submit" class="btn btn-dark">Register</button>
|
|---|
| 120 | </form>
|
|---|
| 121 | </div>
|
|---|
| 122 |
|
|---|
| 123 | </div>
|
|---|
| 124 |
|
|---|
| 125 |
|
|---|
| 126 | </div>
|
|---|
| 127 |
|
|---|
| 128 | </template>
|
|---|
| 129 |
|
|---|
| 130 | <style scoped>
|
|---|
| 131 |
|
|---|
| 132 | </style>
|
|---|
