83 lines
2.2 KiB
Vue
83 lines
2.2 KiB
Vue
<template>
|
|
|
|
<v-app>
|
|
<top-bar :show-back-icon="true" :page-title="pageTitle" />
|
|
<v-main>
|
|
<v-container>
|
|
<v-form name="login-form">
|
|
<div class="mb-3">
|
|
<label for="username">Username: </label>
|
|
<input type="text" id="username" v-model="input.username" />
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="password">Password: </label>
|
|
<input type="password" id="password" v-model="input.password" />
|
|
</div>
|
|
|
|
</v-form>
|
|
</v-container>
|
|
|
|
<v-btn @click.prevent="login">ลงชื่อเข้าใช้</v-btn>
|
|
<v-btn :to="{name: 'register'}">ฉันต้องการสมัครสมาชิก</v-btn>
|
|
|
|
</v-main>
|
|
</v-app>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import {RouterLink} from 'vue-router';
|
|
import TopBar from '@/components/TopBar.vue';
|
|
|
|
export default {
|
|
components: {
|
|
TopBar
|
|
},
|
|
name: 'Login',
|
|
data() {
|
|
return {
|
|
pageTitle: 'ลงชื่อเข้าใช้',
|
|
input: {
|
|
username: '',
|
|
password: ''
|
|
}
|
|
};
|
|
},
|
|
methods: {
|
|
login() {
|
|
if (this.input.username !== '' && this.input.password !== '') {
|
|
console.log('Authenticated: Checking with Backend');
|
|
fetch(`http://localhost:5000/api/users/login`, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
username: this.input.username,
|
|
password: this.input.password,
|
|
}),
|
|
})
|
|
.then((res) => {
|
|
if (res.ok) {
|
|
return res.json();
|
|
} else {
|
|
throw Error(`Login failed (${res.status})`);
|
|
}
|
|
})
|
|
.then((data) => {
|
|
console.log(data.success);
|
|
sessionStorage.setItem('current_user', data.user.username);
|
|
this.$router.push({ name: 'home' });
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
// Handle the error, e.g., display an error message to the user
|
|
});
|
|
} else {
|
|
console.log('Username and Password cannot be empty');
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
</script>
|