/
app.vue
99 lines (96 loc) · 1.98 KB
/
app.vue
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
<script setup>
const { loggedIn, fetch: refreshSession, clear } = useUserSession()
const toast = useToast()
const loginModal = ref(false)
const logging = ref(false)
const password = ref('')
useSeoMeta({
ogSiteName: 'Atinotes',
ogType: 'website',
twitterCard: 'summary_large_image',
twitterSite: 'atinux'
})
async function login() {
if (!password.value) return
logging.value = true
await $fetch('/api/login', {
method: 'POST',
body: { password: password.value }
})
.then(async () => {
await refreshSession()
loginModal.value = false
})
.catch(err => toast.add({
title: 'Wrong password',
description: err.data?.message,
color: 'red'
}))
password.value = ''
logging.value = false
}
</script>
<template>
<Head>
<Html lang="en" />
</Head>
<NuxtLoadingIndicator />
<UHeader>
<template #logo>
Atinotes
</template>
<template #right>
<UColorModeButton />
<UButton
icon="i-simple-icons-github"
to="https://github.com/atinux/atinotes"
target="_blank"
color="gray"
variant="ghost"
/>
<UButton
v-if="loggedIn"
color="gray"
@click="clear"
>
Logout
</UButton>
<UButton
v-else
color="gray"
@click="loginModal = true"
>
Login
</UButton>
</template>
</UHeader>
<UMain>
<UContainer>
<NuxtPage />
</UContainer>
</UMain>
<UModal v-model="loginModal">
<UCard>
<UForm
class="space-y-2"
@submit="login"
>
<UFormGroup label="Password">
<UInput
v-model="password"
type="password"
icon="i-heroicons-lock-closed"
/>
</UFormGroup>
<UButton
type="submit"
:disabled="password.length < 1"
:loading="logging"
>
Login
</UButton>
</UForm>
</UCard>
</UModal>
<UNotifications />
</template>