julien.rbrt.fr
forked from
tangled.org/core
Monorepo for Tangled — https://tangled.org
1{{ define "title" }}knots{{ end }}
2{{ define "content" }}
3 <div class="p-6">
4 <p class="text-xl font-bold dark:text-white">Knots</p>
5 </div>
6 <div class="flex flex-col">
7 <h2 class="text-sm font-bold py-2 px-6 uppercase dark:text-gray-300">register a knot</h2>
8 <section class="rounded bg-white dark:bg-gray-800 drop-shadow-sm px-6 py-4 mb-6 w-full lg:w-fit">
9 <p class="mb-8 dark:text-gray-300">Generate a key to initialize your knot server.</p>
10 <form
11 hx-post="/knots/key"
12 class="max-w-2xl mb-8 space-y-4"
13 hx-indicator="#generate-knot-key-spinner"
14 >
15 <input
16 type="text"
17 id="domain"
18 name="domain"
19 placeholder="knot.example.com"
20 required
21 class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400"
22 >
23 <button class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 flex gap-2 items-center" type="submit">
24 <span>generate key</span>
25 <span id="generate-knot-key-spinner" class="group">
26 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
27 </span>
28 </button>
29 <div id="settings-knots-error" class="error dark:text-red-400"></div>
30 </form>
31 </section>
32
33 <h2 class="text-sm font-bold py-2 px-6 uppercase dark:text-gray-300">my knots</h2>
34 <section class="rounded bg-white dark:bg-gray-800 drop-shadow-sm px-6 py-4 mb-6 w-full lg:w-fit">
35 <div id="knots-list" class="flex flex-col gap-6 mb-8">
36 {{ range .Registrations }}
37 {{ if .Registered }}
38 <div class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4">
39 <div class="flex flex-col gap-1">
40 <div class="inline-flex items-center gap-4">
41 {{ i "git-branch" "w-3 h-3 dark:text-gray-300" }}
42 <a href="/knots/{{ .Domain }}">
43 <p class="font-bold dark:text-white">{{ .Domain }}</p>
44 </a>
45 </div>
46 <p class="text-sm text-gray-500 dark:text-gray-400">owned by {{ .ByDid }}</p>
47 <p class="text-sm text-gray-500 dark:text-gray-400">registered {{ .Registered | timeFmt }}</p>
48 </div>
49 </div>
50 {{ end }}
51 {{ else }}
52 <p class="text-sm text-gray-500 dark:text-gray-400">No knots registered</p>
53 {{ end }}
54 </div>
55 </section>
56
57 <h2 class="text-sm font-bold py-2 px-6 uppercase dark:text-gray-300">pending registrations</h2>
58 <section class="rounded bg-white dark:bg-gray-800 drop-shadow-sm px-6 py-4 mb-6 w-full lg:w-fit">
59 <div id="pending-knots-list" class="flex flex-col gap-6 mb-8">
60 {{ range .Registrations }}
61 {{ if not .Registered }}
62 <div class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4">
63 <div class="flex flex-col gap-1">
64 <div class="inline-flex items-center gap-4">
65 <p class="font-bold dark:text-white">{{ .Domain }}</p>
66 <div class="inline-flex items-center gap-1">
67 <span class="text-xs bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 px-2 py-1 rounded">
68 pending
69 </span>
70 </div>
71 </div>
72 <p class="text-sm text-gray-500 dark:text-gray-400">opened by {{ .ByDid }}</p>
73 <p class="text-sm text-gray-500 dark:text-gray-400">created {{ .Created | timeFmt }}</p>
74 </div>
75 <div class="flex gap-2 items-center">
76 <button
77 class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 flex gap-2 items-center group"
78 hx-post="/knots/{{ .Domain }}/init"
79 >
80 {{ i "square-play" "w-5 h-5" }}
81 <span class="hidden md:inline">initialize</span>
82 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
83 </button>
84 </div>
85 </div>
86 {{ end }}
87 {{ else }}
88 <p class="text-sm text-gray-500 dark:text-gray-400">No pending registrations</p>
89 {{ end }}
90 </div>
91 </section>
92 </div>
93{{ end }}