kot.pink
1{{ define "title" }}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="flex flex-col">
8 {{ block "profile" . }} {{ end }}
9 {{ block "keys" . }} {{ end }}
10 {{ block "emails" . }} {{ end }}
11 </div>
12{{ end }}
13
14{{ define "profile" }}
15<h2 class="text-sm font-bold py-2 px-6 uppercase dark:text-gray-300">profile</h2>
16<section class="rounded bg-white dark:bg-gray-800 drop-shadow-sm px-6 py-4 mb-6 w-full lg:w-fit">
17 <dl class="grid grid-cols-[auto_1fr] gap-x-4 dark:text-gray-200">
18 {{ if .LoggedInUser.Handle }}
19 <dt class="font-bold">handle</dt>
20 <dd>@{{ .LoggedInUser.Handle }}</dd>
21 {{ end }}
22 <dt class="font-bold">did</dt>
23 <dd>{{ .LoggedInUser.Did }}</dd>
24 <dt class="font-bold">pds</dt>
25 <dd>{{ .LoggedInUser.Pds }}</dd>
26 </dl>
27</section>
28{{ end }}
29
30{{ define "keys" }}
31<h2 class="text-sm font-bold py-2 px-6 uppercase dark:text-gray-300">ssh keys</h2>
32<section class="rounded bg-white dark:bg-gray-800 drop-shadow-sm px-6 py-4 mb-6 w-full lg:w-fit">
33 <p class="mb-8 dark:text-gray-300">SSH public keys added here will be broadcasted to knots that you are a member of, <br> allowing you to push to repositories there.</p>
34 <div id="key-list" class="flex flex-col gap-6 mb-8">
35 {{ range $index, $key := .PubKeys }}
36 <div class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4">
37 <div class="flex flex-col gap-1">
38 <div class="inline-flex items-center gap-4">
39 {{ i "key" "w-3 h-3 dark:text-gray-300" }}
40 <p class="font-bold dark:text-white">{{ .Name }}</p>
41 </div>
42 <p class="text-sm text-gray-500 dark:text-gray-400">added {{ .Created | timeFmt }}</p>
43 <div class="overflow-x-auto whitespace-nowrap flex-1 max-w-full">
44 <code class="text-sm text-gray-500 dark:text-gray-400">{{ .Key }}</code>
45 </div>
46 </div>
47 <button
48 class="btn text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 gap-2 group"
49 title="Delete key"
50 hx-delete="/settings/keys?name={{urlquery .Name}}&rkey={{urlquery .Rkey}}&key={{urlquery .Key}}"
51 hx-confirm="Are you sure you want to delete the key '{{ .Name }}'?"
52 >
53 {{ i "trash-2" "w-5 h-5" }}
54 <span class="hidden md:inline">delete</span>
55 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
56 </button>
57 </div>
58 {{ end }}
59 </div>
60 <form
61 hx-put="/settings/keys"
62 hx-indicator="#add-sshkey-spinner"
63 hx-swap="none"
64 class="max-w-2xl mb-8 space-y-4"
65 >
66 <input
67 type="text"
68 id="name"
69 name="name"
70 placeholder="key name"
71 required
72 class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400"/>
73
74 <input
75 id="key"
76 name="key"
77 placeholder="ssh-rsa AAAAAA..."
78 required
79 class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400"/>
80
81 <button class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 flex gap-2 items-center" type="submit">
82 <span>add key</span>
83 <span id="add-sshkey-spinner" class="group">
84 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
85 </span>
86 </button>
87
88 <div id="settings-keys" class="error dark:text-red-400"></div>
89 </form>
90</section>
91{{ end }}
92
93{{ define "emails" }}
94<h2 class="text-sm font-bold py-2 px-6 uppercase dark:text-gray-300">email addresses</h2>
95<section class="rounded bg-white dark:bg-gray-800 drop-shadow-sm px-6 py-4 mb-6 w-full lg:w-fit">
96<p class="mb-8 dark:text-gray-300">Commits authored using emails listed here will be associated with your Tangled profile.</p>
97 <div id="email-list" class="flex flex-col gap-6 mb-8">
98 {{ range $index, $email := .Emails }}
99 <div class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4">
100 <div class="flex flex-col gap-2">
101 <div class="inline-flex items-center gap-4">
102 {{ i "mail" "w-3 h-3 dark:text-gray-300" }}
103 <p class="font-bold dark:text-white">{{ .Address }}</p>
104 <div class="inline-flex items-center gap-1">
105 {{ if .Verified }}
106 <span class="text-xs bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 px-2 py-1 rounded">verified</span>
107 {{ else }}
108 <span class="text-xs bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 px-2 py-1 rounded">unverified</span>
109 {{ end }}
110 {{ if .Primary }}
111 <span class="text-xs bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 px-2 py-1 rounded">primary</span>
112 {{ end }}
113 </div>
114 </div>
115 <p class="text-sm text-gray-500 dark:text-gray-400">added {{ .CreatedAt | timeFmt }}</p>
116 </div>
117 <div class="flex gap-2 items-center">
118 {{ if not .Verified }}
119 <button
120 class="btn flex gap-2 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600"
121 hx-post="/settings/emails/verify/resend"
122 hx-swap="none"
123 href="#"
124 hx-vals='{"email": "{{ .Address }}"}'>
125 {{ i "rotate-cw" "w-5 h-5" }}
126 <span class="hidden md:inline">resend</span>
127 </button>
128 {{ end }}
129 {{ if and (not .Primary) .Verified }}
130 <a
131 class="text-sm dark:text-blue-400 dark:hover:text-blue-300"
132 hx-post="/settings/emails/primary"
133 hx-swap="none"
134 href="#"
135 hx-vals='{"email": "{{ .Address }}"}'>
136 set as primary
137 </a>
138 {{ end }}
139 {{ if not .Primary }}
140 <form
141 hx-delete="/settings/emails"
142 hx-confirm="Are you sure you wish to delete the email '{{ .Address }}'?"
143 hx-indicator="#delete-email-{{ .Address }}-spinner"
144 >
145 <input type="hidden" name="email" value="{{ .Address }}">
146 <button
147 class="btn text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 flex gap-2 items-center"
148 title="Delete email"
149 type="submit"
150 >
151 {{ i "trash-2" "w-5 h-5" }}
152 <span class="hidden md:inline">delete</span>
153 <span id="delete-email-{{ .Address }}-spinner" class="group">
154 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
155 </span>
156 </button>
157 </form>
158 {{ end }}
159 </div>
160 </div>
161 {{ end }}
162 </div>
163 <form
164 hx-put="/settings/emails"
165 hx-swap="none"
166 class="max-w-2xl mb-8 space-y-4"
167 hx-indicator="#add-email-spinner"
168 >
169 <input
170 type="email"
171 id="email"
172 name="email"
173 placeholder="your@email.com"
174 required
175 class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400"
176 >
177
178 <button
179 class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 flex gap-2 items-center"
180 type="submit"
181 >
182 <span>add email</span>
183 <span id="add-email-spinner" class="group">
184 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
185 </span>
186 </button>
187
188 <div id="settings-emails-error" class="error dark:text-red-400"></div>
189 <div id="settings-emails-success" class="success dark:text-green-400"></div>
190 </form>
191</section>
192{{ end }}