1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
<template>
<div
class="flex min-h-screen items-center justify-center px-4 py-12 sm:px-6 lg:px-8"
>
<UCard class="w-full max-w-md bg-gray-900">
<div class="flex flex-col items-center">
<h1
class="text-center text-2xl font-bold tracking-tight text-white"
>
Sign in to your account
</h1>
<p class="mt-2 text-center text-sm text-gray-200">
Or
<NuxtLink
to="/register"
class="font-medium text-primary hover:text-primary-dark underline"
>
create a new account
</NuxtLink>
</p>
</div>
<div class="mt-8">
<form
@submit.prevent="handleSubmit"
class="space-y-6"
method="POST"
>
<UFormField label="Username" name="username">
<UInput
v-model="username"
name="username"
autocomplete="username"
required
placeholder="mario.rossi"
class="w-full"
/>
</UFormField>
<UFormField label="Password" name="password">
<UInput
v-model="password"
type="password"
name="password"
autocomplete="current-password"
required
placeholder="*****"
class="w-full"
/>
</UFormField>
<div>
<UButton
type="submit"
block
:loading="isLoading"
color="primary"
variant="solid"
class="cursor-pointer"
>
Sign in
</UButton>
</div>
</form>
</div>
</UCard>
</div>
</template>
<script setup>
const username = ref("");
const password = ref("");
const error = ref("");
const isLoading = ref(false);
const toast = useToast();
const config = useRuntimeConfig();
const handleSubmit = async (event) => {
event.preventDefault();
try {
error.value = null;
isLoading.value = true;
await fetch(`${config.public.apiBase}/auth/login`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
username: username.value,
password: password.value,
}),
}).then(async (response) => {
const body = await response.json();
if (response.status != 200) {
toast.add({
title: "Login Failed",
description: body.error,
color: "error",
});
} else {
toast.add({
title: "Login Successful",
description: "You have been successfully logged in",
color: "success",
});
localStorage.setItem("token", body.token);
setTimeout(() => {
window.location.href = "/play";
}, 1000);
}
});
} catch (err) {
error.value =
err.response?.data?.message || "An error occurred during login";
toast.add({
title: "Login Failed",
description: error.value,
color: "error",
});
} finally {
isLoading.value = false;
}
};
</script>
|
