64 lines
1.4 KiB
Vue
64 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue"
|
|
|
|
const username = ref("")
|
|
const password = ref("")
|
|
const error = ref("")
|
|
|
|
const { setToken } = useAuth()
|
|
const { apiFetch } = useApi()
|
|
const router = useRouter()
|
|
|
|
async function login() {
|
|
error.value = ""
|
|
|
|
try {
|
|
const data = await apiFetch("/auth/token", {
|
|
method: "POST",
|
|
body: new URLSearchParams({
|
|
username: username.value,
|
|
password: password.value
|
|
}),
|
|
headers: {
|
|
"Content-Type": "application/x-www-form-urlencoded"
|
|
}
|
|
})
|
|
|
|
setToken(data.access_token)
|
|
router.push("/")
|
|
} catch (e: any) {
|
|
error.value = "Login fehlgeschlagen"
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="max-w-sm mx-auto mt-20 p-6 bg-white shadow rounded">
|
|
<h1 class="text-2xl font-bold mb-4">Login</h1>
|
|
|
|
<form @submit.prevent="login" class="space-y-4">
|
|
<input
|
|
v-model="username"
|
|
type="text"
|
|
placeholder="Username"
|
|
class="w-full p-2 border rounded"
|
|
/>
|
|
|
|
<input
|
|
v-model="password"
|
|
type="password"
|
|
placeholder="Password"
|
|
class="w-full p-2 border rounded"
|
|
/>
|
|
|
|
<button
|
|
type="submit"
|
|
class="w-full bg-blue-600 text-white p-2 rounded hover:bg-blue-700"
|
|
>
|
|
Login
|
|
</button>
|
|
|
|
<p v-if="error" class="text-red-600">{{ error }}</p>
|
|
</form>
|
|
</div>
|
|
</template>
|