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 "emailSettings" . }}
14 </div>
15 </section>
16 </div>
17{{ end }}
18
19{{ define "emailSettings" }}
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">Email Addresses</h2>
23 <p class="text-gray-500 dark:text-gray-400">
24 Commits authored using emails listed here will be associated with your Tangled profile.
25 </p>
26 </div>
27 <div class="col-span-1 md:col-span-1 md:justify-self-end">
28 {{ template "addEmailButton" . }}
29 </div>
30 </div>
31 <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">
32 {{ range .Emails }}
33 {{ template "user/settings/fragments/emailListing" (list $ .) }}
34 {{ else }}
35 <div class="flex items-center justify-center p-2 text-gray-500">
36 no emails added yet
37 </div>
38 {{ end }}
39 </div>
40{{ end }}
41
42{{ define "addEmailButton" }}
43 <button
44 class="btn flex items-center gap-2"
45 popovertarget="add-email-modal"
46 popovertargetaction="toggle">
47 {{ i "plus" "size-4" }}
48 add email
49 </button>
50 <div
51 id="add-email-modal"
52 popover
53 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">
54 {{ template "addEmailModal" . }}
55 </div>
56{{ end}}
57
58{{ define "addEmailModal" }}
59<form
60 hx-put="/settings/emails"
61 hx-indicator="#spinner"
62 hx-swap="none"
63 class="flex flex-col gap-2"
64>
65 <p class="uppercase p-0">ADD EMAIL</p>
66 <p class="text-sm text-gray-500 dark:text-gray-400">Commits using this email will be associated with your profile.</p>
67 <input
68 type="email"
69 id="email-address"
70 name="email"
71 required
72 placeholder="your@email.com"
73 class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400"
74 />
75 <div class="flex gap-2 pt-2">
76 <button
77 type="button"
78 popovertarget="add-email-modal"
79 popovertargetaction="hide"
80 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"
81 >
82 {{ i "x" "size-4" }} cancel
83 </button>
84 <button type="submit" class="btn w-1/2 flex items-center">
85 <span class="inline-flex gap-2 items-center">{{ i "plus" "size-4" }} add</span>
86 <span id="spinner" class="group">
87 {{ i "loader-circle" "ml-2 w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
88 </span>
89 </button>
90 </div>
91 <div id="settings-emails-error" class="text-red-500 dark:text-red-400"></div>
92 <div id="settings-emails-success" class="text-green-500 dark:text-green-400"></div>
93</form>
94{{ end }}