finxol.io
A very simple bookmarking webapp
bookmarker.finxol.deno.net/
feat: add logout button
+32
-8
+6
server/routes/account.ts
+6
server/routes/account.ts
···
3
3
import { Variables } from "../utils/globals.ts"
4
4
import { kv } from "../utils/kv.ts"
5
5
import { ApiKey } from "../utils/auth.ts"
6
+
import { deleteCookie } from "hono/cookie"
6
7
7
8
const app = new Hono<Variables>()
8
9
.get("/me", async (ctx) => {
9
10
const user = ctx.get("user")
10
11
return await Promise.resolve(ctx.json(user))
12
+
})
13
+
.post("/logout", (ctx) => {
14
+
deleteCookie(ctx, "access_token")
15
+
deleteCookie(ctx, "refresh_token")
16
+
return ctx.json({ success: true })
11
17
})
12
18
.put("/key", async (ctx) => {
13
19
const user = ctx.get("user")
+6
-6
src/routes/account.css
+6
-6
src/routes/account.css
···
151
151
font-size: 0.85rem;
152
152
}
153
153
154
-
.spinner {
155
-
animation: spin 1s linear infinite;
156
-
}
154
+
section.actions {
155
+
display: flex;
156
+
gap: calc(var(--spacing) * 0.5);
157
+
justify-content: flex-end;
157
158
158
-
@keyframes spin {
159
-
to {
160
-
transform: rotate(360deg);
159
+
button {
160
+
--saturation: 80%;
161
161
}
162
162
}
+20
-2
src/routes/account.tsx
+20
-2
src/routes/account.tsx
···
1
-
import { createFileRoute } from "@tanstack/solid-router"
1
+
import { createFileRoute, useNavigate } from "@tanstack/solid-router"
2
2
import { useMutation, useQuery, useQueryClient } from "@tanstack/solid-query"
3
3
import { createSignal, For, Show } from "solid-js"
4
4
import { client } from "../apiclient.ts"
···
19
19
20
20
function RouteComponent() {
21
21
const [keyCopied, setKeyCopied] = createSignal(false)
22
+
const navigate = useNavigate()
23
+
const queryClient = useQueryClient()
22
24
23
-
const queryClient = useQueryClient()
24
25
const query = useQuery(() => ({
25
26
queryKey: [client.api.v1.account.me.$url().pathname],
26
27
queryFn: async () => {
···
82
83
navigator.clipboard.writeText(text)
83
84
setKeyCopied(true)
84
85
setTimeout(() => setKeyCopied(false), 2000)
86
+
}
87
+
88
+
async function logout() {
89
+
await client.api.v1.account.logout.$post()
90
+
console.log("Logged out")
91
+
navigate({ to: "/", reloadDocument: true })
85
92
}
86
93
87
94
return (
···
196
203
</For>
197
204
</ul>
198
205
</Show>
206
+
</section>
207
+
208
+
<section class="actions">
209
+
<button
210
+
type="button"
211
+
class="button-icon button-ghost button-danger"
212
+
title="Log out"
213
+
onClick={logout}
214
+
>
215
+
Log out
216
+
</button>
199
217
</section>
200
218
</>
201
219
)}