67 lines
2.0 KiB
Vue
67 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
definePageMeta({
|
|
layout: 'login'
|
|
})
|
|
|
|
const errorMessage = ref('')
|
|
|
|
const login = async () => {
|
|
// Clear any previous error messages
|
|
errorMessage.value = ''
|
|
|
|
const payload = {
|
|
username: document.getElementById('username')?.value,
|
|
password: document.getElementById('password')?.value
|
|
}
|
|
const config = useRuntimeConfig()
|
|
const apiBase = config.public.apiBase
|
|
const api_url = `${apiBase}/auth/token`
|
|
|
|
try {
|
|
const { data: user } = await useFetch(api_url, {
|
|
method: 'POST',
|
|
body: payload
|
|
})
|
|
|
|
if (!user.value) {
|
|
errorMessage.value = 'Kirjautuminen epäonnistui. Tarkista käyttäjätunnus ja salasana.'
|
|
return
|
|
}
|
|
|
|
localStorage.setItem('user', JSON.stringify(user.value))
|
|
navigateTo('/')
|
|
} catch (error) {
|
|
errorMessage.value = 'Kirjautuminen epäonnistui. Palvelimeen ei saada yhteyttä.'
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="p-6">
|
|
<div class="flex flex-col gap-4 m-6 bg-slate-300 rounded-2xl p-6 shadow-md text-sm">
|
|
<h1 class="text-center font-bold text-lg">Kirjaudu</h1>
|
|
<form @submit.prevent="login" class="">
|
|
<div v-if="errorMessage" class="error-message p-2 my-2 bg-red-100 text-red-700 rounded border border-red-300">
|
|
{{ errorMessage }}
|
|
</div>
|
|
<label>Käyttäjätunnus
|
|
<input class="textfield" type="text" id="username" placeholder="Käyttäjätunnus" />
|
|
</label>
|
|
<label>Salasana
|
|
<input class="textfield" type="password" id="password" placeholder="Salasana" />
|
|
</label>
|
|
<button type="submit" class="btn-primary">Kirjaudu</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.textfield {
|
|
border: none;
|
|
border-bottom: 1px solid #ccc;
|
|
max-width: 80%;
|
|
padding: 6px;
|
|
}
|
|
</style>
|