Commit a8760df6 authored by root's avatar root
Browse files

Posting form working

parent 23dee6a9
This diff is collapsed.
......@@ -7,6 +7,9 @@
"preview": "vite preview --port 5050"
},
"dependencies": {
"body-parser": "^1.19.2",
"cors": "^2.8.5",
"express": "^4.17.2",
"vue": "^3.2.31",
"vue-router": "^4.0.12"
},
......
......@@ -8,13 +8,28 @@ import SupportIcon from './icons/IconSupport.vue'
</script>
<script>
const API_URL = "http://localhost:3001/login";
export default {
data() {
return {
email: '',
data: () => ({
dataToPost: {
email: "",
password: ""
}
}),
methods: {
connection() {
fetch(API_URL, {
method: "POST",
body: JSON.stringify(this.dataToPost),
headers: {
"content-type": "application/json"
}
})
.then(response => console.log(response.body))
.then(data => console.log(data));
}
}
}
}
};
</script>
......@@ -24,15 +39,17 @@ export default {
<div class="border">
<img id="loginLogo" src="../assets/loginLogo.png">
<div class="form-group">
<label>Username</label>
<input class="form-control" v-model="username" placeholder="Enter Username" />
</div>
<div class="form-group">
<label>Password</label>
<input class="form-control" type='password' v-model="password" placeholder="Enter Password" />
</div>
<button id="submitButton" type="submit">Login</button>
<form @submit.prevent="connection" method="POST">
<div class="form-group">
<label>Email</label>
<input class="form-control" v-model="dataToPost.email" placeholder="Enter Email" required/>
</div>
<div class="form-group">
<label>Password</label>
<input class="form-control" type='password' v-model="dataToPost.password" placeholder="Enter Password" required/>
</div>
<button id="submitButton" type="submit">Login</button>
</form>
</div>
</template>
......
......@@ -8,13 +8,32 @@ import SupportIcon from './icons/IconSupport.vue'
</script>
<script>
const API_URL = "http://localhost:3001/register";
export default {
data() {
return {
email: '',
data: () => ({
dataToPost: {
email: "",
username: "",
firstName: "",
lastName: "",
password: "",
repeatPassword: ""
}
}),
methods: {
connection() {
fetch(API_URL, {
method: "POST",
body: JSON.stringify(this.dataToPost),
headers: {
"content-type": "application/json"
}
})
.then(response => response)
.then(data => console.log(data));
}
}
}
}
};
</script>
......@@ -23,33 +42,35 @@ export default {
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="border">
<h2>Sign Up</h2>
<p id="textAboveSignup">Please fill in the form to create an account</p>
<div class="form-group">
<label>Email</label>
<input class="form-control" type="email" v-model="email" placeholder="Enter Email" />
</div>
<div class="form-group">
<label>Username</label>
<input class="form-control" v-model="username" placeholder="Username" />
</div>
<div class="form-group">
<label>First Name</label>
<input class="form-control" v-model="firstName" placeholder="First Name" />
</div>
<div class="form-group">
<label>Last Name</label>
<input class="form-control" v-model="lastName" placeholder="Last Name" />
</div>
<div class="form-group">
<label>Password</label>
<input class="form-control" type='password' v-model="password" placeholder="Create your Password" />
</div>
<div class="form-group">
<label>Repeat Password</label>
<input class="form-control" type='password' v-model="repeatPassword" placeholder="Create your Password" />
</div>
<button id="submitButton" type="submit">Sign Up</button>
<form action="/registration" method="POST">
<h2>Sign Up</h2>
<p id="textAboveSignup">Please fill in the form to create an account</p>
<div class="form-group">
<label>Email</label>
<input class="form-control" type="email" v-model="dataToPost.email" placeholder="Enter Email" required/>
</div>
<div class="form-group">
<label>Username</label>
<input class="form-control" v-model="dataToPost.username" placeholder="Username" required/>
</div>
<div class="form-group">
<label>First Name</label>
<input class="form-control" v-model="dataToPost.firstName" placeholder="First Name" required/>
</div>
<div class="form-group">
<label>Last Name</label>
<input class="form-control" v-model="dataToPost.lastName" placeholder="Last Name" required/>
</div>
<div class="form-group">
<label>Password</label>
<input class="form-control" type='password' v-model="dataToPost.password" placeholder="Create your Password" required/>
</div>
<div class="form-group">
<label>Repeat Password</label>
<input class="form-control" type='password' v-model="dataToPost.repeatPassword" placeholder="Create your Password" required/>
</div>
<button id="submitButton" type="submit">Sign Up</button>
</form>
</div>
</template>
......
......@@ -6,4 +6,9 @@ const app = createApp(App)
app.use(router)
// app.post('/add', (req,res) => {
// console.log("New employee has been added");
// res.send("New employee has been added");
// });
app.mount('#app')
......@@ -10,7 +10,7 @@ const router = createRouter({
component: HomeView
},
{
path: '/about',
path: '/register',
name: 'register',
// route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment