skouter/components/login.vue

<template>
<div class="page">

<section class="form inputs">
<h3>Login</h3>
<label>Email</label>
<input v-model="email" required>
<label>Password</label>
<input v-model="password" type="password" required>
<button @click="login">Login</button>
<div class="error"> {{error}} </div>
</section>


</div>
</template>

<script>
function login() {
	this.error = ""
	return fetch(`/api/login`,
		{method: 'POST',
    		body: JSON.stringify( {email: this.email, password: this.password} ),
	}).then(response => {
		if (response.ok) {
			return response.text()
		} else {
			this.error = "Invalid credentials"
		}
	}).then(result => {
		if (!result || !result.length) return // Exit if there is no token
		this.$emit('login')
		window.location.hash = ''
	})

}
export default {
	emits: [ 'login' ],
	methods: { login },
	data() {
		return { email: "", password: "", error: ""}
	},
}
</script>