kot.pink
1{{ define "title" }}{{ .Tab }} settings · {{ .RepoInfo.FullName }}{{ end }}
2
3{{ define "repoContent" }}
4 <section class="w-full grid grid-cols-1 md:grid-cols-4 gap-2">
5 <div class="col-span-1">
6 {{ template "repo/settings/fragments/sidebar" . }}
7 </div>
8 <div class="col-span-1 md:col-span-3 flex flex-col gap-6 p-2">
9 {{ template "spindleSettings" . }}
10 {{ if $.CurrentSpindle }}
11 {{ template "secretSettings" . }}
12 {{ end }}
13 <div id="operation-error" class="text-red-500 dark:text-red-400"></div>
14 </div>
15 </section>
16{{ end }}
17
18{{ define "spindleSettings" }}
19 <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
20 <div class="col-span-1 md:col-span-2">
21 <h2 class="text-sm pb-2 uppercase font-bold">Spindle</h2>
22 <p class="text-gray-500 dark:text-gray-400">
23 Choose a spindle to execute your workflows on. Only repository owners
24 can configure spindles. Spindles can be selfhosted,
25 <a class="text-gray-500 dark:text-gray-400 underline" href="https://tangled.sh/@tangled.sh/core/blob/master/docs/spindle/hosting.md">
26 click to learn more.
27 </a>
28 </p>
29 </div>
30 {{ if not $.RepoInfo.Roles.IsOwner }}
31 <div class="col-span-1 md:col-span-1 md:justify-self-end group flex gap-2 items-stretch">
32 {{ or $.CurrentSpindle "No spindle configured" }}
33 </div>
34 {{ else }}
35 <form hx-post="/{{ $.RepoInfo.FullName }}/settings/spindle" class="col-span-1 md:col-span-1 md:justify-self-end group flex gap-2 items-stretch">
36 <select
37 id="spindle"
38 name="spindle"
39 required
40 class="p-1 max-w-64 border border-gray-200 bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700">
41 {{/* For some reason, we can't use an empty string in a <select> in all scenarios unless it is preceded by a disabled select?? No idea, could just be a Firefox thing? */}}
42 <option value="[[none]]" class="py-1" {{ if not $.CurrentSpindle }}selected{{ end }}>
43 {{ if not $.CurrentSpindle }}
44 Choose a spindle
45 {{ else }}
46 Disable pipelines
47 {{ end }}
48 </option>
49 {{ range $.Spindles }}
50 <option value="{{ . }}" class="py-1" {{ if eq . $.CurrentSpindle }}selected{{ end }}>
51 {{ . }}
52 </option>
53 {{ end }}
54 </select>
55 <button class="btn flex gap-2 items-center" type="submit" {{ if not $.RepoInfo.Roles.IsOwner }}disabled{{ end }}>
56 {{ i "check" "size-4" }}
57 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
58 </button>
59 </form>
60 {{ end }}
61 </div>
62{{ end }}
63
64{{ define "secretSettings" }}
65 <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
66 <div class="col-span-1 md:col-span-2">
67 <h2 class="text-sm pb-2 uppercase font-bold">SECRETS</h2>
68 <p class="text-gray-500 dark:text-gray-400">
69 Secrets are accessible in workflow runs via environment variables. Anyone
70 with collaborator access to this repository can add and use secrets in
71 workflow runs.
72 </p>
73 </div>
74 <div class="col-span-1 md:col-span-1 md:justify-self-end">
75 {{ template "addSecretButton" . }}
76 </div>
77 </div>
78 <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">
79 {{ range .Secrets }}
80 {{ template "repo/settings/fragments/secretListing" (list $ .) }}
81 {{ else }}
82 <div class="flex items-center justify-center p-2 text-gray-500">
83 no secrets added yet
84 </div>
85 {{ end }}
86 </div>
87{{ end }}
88
89{{ define "addSecretButton" }}
90 <button
91 class="btn flex items-center gap-2"
92 popovertarget="add-secret-modal"
93 popovertargetaction="toggle">
94 {{ i "plus" "size-4" }}
95 add secret
96 </button>
97 <div
98 id="add-secret-modal"
99 popover
100 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">
101 {{ template "addSecretModal" . }}
102 </div>
103{{ end}}
104
105{{ define "addSecretModal" }}
106<form
107 hx-put="/{{ $.RepoInfo.FullName }}/settings/secrets"
108 hx-indicator="#spinner"
109 hx-swap="none"
110 class="flex flex-col gap-2"
111>
112 <p class="uppercase p-0">ADD SECRET</p>
113 <p class="text-sm text-gray-500 dark:text-gray-400">Secrets are available as environment variables in the workflow.</p>
114 <input
115 type="text"
116 id="secret-key"
117 name="key"
118 required
119 placeholder="SECRET_NAME"
120 />
121 <textarea
122 type="text"
123 id="secret-value"
124 name="value"
125 required
126 placeholder="secret value"></textarea>
127 <div class="flex gap-2 pt-2">
128 <button
129 type="button"
130 popovertarget="add-secret-modal"
131 popovertargetaction="hide"
132 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"
133 >
134 {{ i "x" "size-4" }} cancel
135 </button>
136 <button type="submit" class="btn w-1/2 flex items-center">
137 <span class="inline-flex gap-2 items-center">{{ i "plus" "size-4" }} add</span>
138 <span id="spinner" class="group">
139 {{ i "loader-circle" "ml-2 w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
140 </span>
141 </button>
142 </div>
143 <div id="add-secret-error" class="text-red-500 dark:text-red-400"></div>
144</form>
145{{ end }}