kot.pink
1{{ define "title" }}{{ .Tab }} settings{{ end }}
2
3{{ define "content" }}
4 <div class="p-6">
5 <p class="text-xl font-bold dark:text-white">Settings</p>
6 </div>
7 <div class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto drop-shadow-sm dark:text-white">
8 <section class="w-full grid grid-cols-1 md:grid-cols-4 gap-6">
9 <div class="col-span-1">
10 {{ template "user/settings/fragments/sidebar" . }}
11 </div>
12 <div class="col-span-1 md:col-span-3 flex flex-col gap-6">
13 {{ template "sshKeysSettings" . }}
14 </div>
15 </section>
16 </div>
17{{ end }}
18
19{{ define "sshKeysSettings" }}
20 <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
21 <div class="col-span-1 md:col-span-2">
22 <h2 class="text-sm pb-2 uppercase font-bold">SSH Keys</h2>
23 <p class="text-gray-500 dark:text-gray-400">
24 SSH public keys added here will be broadcasted to knots that you are a member of,
25 allowing you to push to repositories there.
26 </p>
27 </div>
28 <div class="col-span-1 md:col-span-1 md:justify-self-end">
29 {{ template "addKeyButton" . }}
30 </div>
31 </div>
32 <div class="flex flex-col rounded border border-gray-200 dark:border-gray-700 divide-y divide-gray-200 dark:divide-gray-700 w-full">
33 {{ range .PubKeys }}
34 {{ template "user/settings/fragments/keyListing" (list $ .) }}
35 {{ else }}
36 <div class="flex items-center justify-center p-2 text-gray-500">
37 no keys added yet
38 </div>
39 {{ end }}
40 </div>
41{{ end }}
42
43{{ define "addKeyButton" }}
44 <button
45 class="btn flex items-center gap-2"
46 popovertarget="add-key-modal"
47 popovertargetaction="toggle">
48 {{ i "plus" "size-4" }}
49 add key
50 </button>
51 <div
52 id="add-key-modal"
53 popover
54 class="bg-white w-full md:w-96 dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 drop-shadow dark:text-white backdrop:bg-gray-400/50 dark:backdrop:bg-gray-800/50">
55 {{ template "addKeyModal" . }}
56 </div>
57{{ end}}
58
59{{ define "addKeyModal" }}
60<form
61 hx-put="/settings/keys"
62 hx-indicator="#spinner"
63 hx-swap="none"
64 class="flex flex-col gap-2"
65>
66 <p class="uppercase p-0">ADD SSH KEY</p>
67 <p class="text-sm text-gray-500 dark:text-gray-400">SSH keys allow you to push to repositories in knots you're a member of.</p>
68 <input
69 type="text"
70 id="key-name"
71 name="name"
72 required
73 placeholder="key name"
74 class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400"
75 />
76 <textarea
77 type="text"
78 id="key-value"
79 name="key"
80 required
81 placeholder="ssh-rsa AAAAB3NzaC1yc2E..."
82 class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400"></textarea>
83 <div class="flex gap-2 pt-2">
84 <button
85 type="button"
86 popovertarget="add-key-modal"
87 popovertargetaction="hide"
88 class="btn w-1/2 flex items-center gap-2 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
89 >
90 {{ i "x" "size-4" }} cancel
91 </button>
92 <button type="submit" class="btn w-1/2 flex items-center">
93 <span class="inline-flex gap-2 items-center">{{ i "plus" "size-4" }} add</span>
94 <span id="spinner" class="group">
95 {{ i "loader-circle" "ml-2 w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
96 </span>
97 </button>
98 </div>
99 <div id="settings-keys" class="text-red-500 dark:text-red-400"></div>
100</form>
101{{ end }}