this repo has no description
tangled.org
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 <label for="key-name" class="uppercase p-0">
67 add ssh key
68 </label>
69 <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>
70 <input
71 type="text"
72 id="key-name"
73 name="name"
74 required
75 placeholder="key name"
76 class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400"
77 />
78 <textarea
79 type="text"
80 id="key-value"
81 name="key"
82 required
83 placeholder="ssh-rsa AAAAB3NzaC1yc2E..."
84 class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400"></textarea>
85 <div class="flex gap-2 pt-2">
86 <button
87 type="button"
88 popovertarget="add-key-modal"
89 popovertargetaction="hide"
90 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"
91 >
92 {{ i "x" "size-4" }} cancel
93 </button>
94 <button type="submit" class="btn w-1/2 flex items-center">
95 <span class="inline-flex gap-2 items-center">{{ i "plus" "size-4" }} add</span>
96 <span id="spinner" class="group">
97 {{ i "loader-circle" "ml-2 w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
98 </span>
99 </button>
100 </div>
101 <div id="settings-keys" class="text-red-500 dark:text-red-400"></div>
102</form>
103{{ end }}