tenseleyflow/shithub / 5cedcb7

Browse files

web/templates + css: combined SSH+GPG settings page + add-form + chip styles

Authored by mfwolffe <wolffemf@dukes.jmu.edu>
SHA
5cedcb705411e20ba469c030ded639fe08c21ad7
Parents
8d1327e
Tree
d024422

4 changed files

StatusFile+-
M internal/web/static/css/shithub.css 40 0
M internal/web/templates/_settings_nav.html 1 1
M internal/web/templates/settings/keys.html 43 2
A internal/web/templates/settings/keys_gpg_add.html 22 0
internal/web/static/css/shithub.cssmodified
@@ -11493,3 +11493,43 @@ button.shithub-repo-action {
1149311493
     flex-direction: column;
1149411494
   }
1149511495
 }
11496
+
11497
+/* ─── S51 GPG keys settings additions ─────────────────────────────── */
11498
+/* Section heading row with a right-aligned "New GPG key" button.    */
11499
+.shithub-settings-section-head {
11500
+  display: flex;
11501
+  align-items: baseline;
11502
+  justify-content: space-between;
11503
+  gap: 12px;
11504
+  margin-bottom: 8px;
11505
+}
11506
+/* Bold-label prefix in the key row metadata ("Email address:",       */
11507
+/* "Key ID:", "Subkeys:").                                            */
11508
+.shithub-key-meta-label {
11509
+  font-weight: 600;
11510
+  margin-right: 4px;
11511
+}
11512
+/* Outlined pill rendering of the GPG UID email, mirroring gh's       */
11513
+/* visual.                                                            */
11514
+.shithub-email-chip {
11515
+  display: inline-block;
11516
+  padding: 1px 6px;
11517
+  font-family: var(--shithub-mono, ui-monospace, SFMono-Regular, monospace);
11518
+  font-size: 12px;
11519
+  border: 1px solid rgba(110, 118, 129, 0.4);
11520
+  border-radius: 999px;
11521
+  color: inherit;
11522
+}
11523
+/* "SSH" / "GPG" type badge on the left of each key row.              */
11524
+.shithub-key-type-badge {
11525
+  display: inline-block;
11526
+  padding: 1px 6px;
11527
+  font-family: var(--shithub-mono, ui-monospace, SFMono-Regular, monospace);
11528
+  font-size: 10px;
11529
+  font-weight: 600;
11530
+  letter-spacing: 0.05em;
11531
+  border: 1px solid rgba(110, 118, 129, 0.4);
11532
+  border-radius: 4px;
11533
+  margin-right: 8px;
11534
+  vertical-align: middle;
11535
+}
internal/web/templates/_settings_nav.htmlmodified
@@ -28,7 +28,7 @@
2828
         <a href="/settings/security/2fa/enable">Two-factor auth</a>
2929
       </li>
3030
       <li{{ if eq .SettingsActive "keys" }} class="active"{{ end }}>
31
-        <a href="/settings/keys">SSH keys</a>
31
+        <a href="/settings/keys">SSH and GPG keys</a>
3232
       </li>
3333
       <li{{ if eq .SettingsActive "organizations" }} class="active"{{ end }}>
3434
         <a href="/settings/organizations">Organizations</a>
internal/web/templates/settings/keys.htmlmodified
@@ -2,8 +2,10 @@
22
 <div class="shithub-settings-page">
33
   {{ template "settings-nav" . }}
44
   <div class="shithub-settings-content">
5
-    <h1>SSH keys</h1>
5
+    <h1>SSH and GPG keys</h1>
6
+
67
     <section class="shithub-settings-section">
8
+      <h2>SSH keys</h2>
79
       <p>SSH keys let you push and clone over SSH without typing a password. Generate one with <code>ssh-keygen -t ed25519</code> and paste the contents of the <code>.pub</code> file below.</p>
810
911
       {{ if .Keys }}
@@ -11,6 +13,7 @@
1113
         {{ range .Keys }}
1214
         <li class="shithub-key-row">
1315
           <div>
16
+            <span class="shithub-key-type-badge">SSH</span>
1417
             <strong>{{ .Title }}</strong>
1518
             <span class="shithub-key-meta">{{ .KeyType }}{{ if .KeyBits }} · {{ .KeyBits }} bits{{ end }}</span>
1619
             <code class="shithub-key-fp">{{ .FingerprintSha256 }}</code>
@@ -29,7 +32,7 @@
2932
     </section>
3033
3134
     <section class="shithub-settings-section">
32
-      <h2>Add a key</h2>
35
+      <h3>Add an SSH key</h3>
3336
       {{ with .AddError }}<p class="shithub-flash shithub-flash-error" role="alert">{{ . }}</p>{{ end }}
3437
       <form method="POST" action="/settings/keys" novalidate>
3538
         <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
@@ -45,6 +48,44 @@
4548
         <button type="submit" class="shithub-button shithub-button-primary">Add SSH key</button>
4649
       </form>
4750
     </section>
51
+
52
+    <section class="shithub-settings-section">
53
+      <div class="shithub-settings-section-head">
54
+        <h2>GPG keys</h2>
55
+        <a class="shithub-button shithub-button-primary" href="/settings/keys/gpg/new">New GPG key</a>
56
+      </div>
57
+      <p>This is a list of GPG keys associated with your account. Remove any keys that you do not recognize.</p>
58
+
59
+      {{ if .GPGKeys }}
60
+      <ul class="shithub-key-list">
61
+        {{ range .GPGKeys }}
62
+        <li class="shithub-key-row">
63
+          <div class="shithub-key-row-body">
64
+            <span class="shithub-key-type-badge">GPG</span>
65
+            {{ if .Name }}<strong>{{ .Name }}</strong>{{ end }}
66
+            {{ range .Emails }}
67
+              <div><span class="shithub-key-meta-label">Email address:</span>
68
+                   <span class="shithub-email-chip">{{ .Email }}</span></div>
69
+            {{ end }}
70
+            <div><span class="shithub-key-meta-label">Key ID:</span>
71
+                 <code class="shithub-key-fp">{{ .KeyID }}</code></div>
72
+            {{ if .SubkeyIDs }}
73
+            <div><span class="shithub-key-meta-label">Subkeys:</span>
74
+                 <code class="shithub-key-fp">{{ range $i, $id := .SubkeyIDs }}{{ if $i }}, {{ end }}{{ $id }}{{ end }}</code></div>
75
+            {{ end }}
76
+            <div class="shithub-key-last">Added on {{ .CreatedAt.Format "Jan 2, 2006" }}</div>
77
+          </div>
78
+          <form method="POST" action="/settings/keys/gpg/{{ .ID }}/delete" novalidate>
79
+            <input type="hidden" name="csrf_token" value="{{ $.CSRFToken }}">
80
+            <button type="submit" class="shithub-button shithub-button-danger">Delete</button>
81
+          </form>
82
+        </li>
83
+        {{ end }}
84
+      </ul>
85
+      {{ else }}
86
+      <p class="shithub-key-empty">No GPG keys yet.</p>
87
+      {{ end }}
88
+    </section>
4889
   </div>
4990
 </div>
5091
 {{- end }}
internal/web/templates/settings/keys_gpg_add.htmladded
@@ -0,0 +1,22 @@
1
+{{ define "page" -}}
2
+<div class="shithub-settings-page">
3
+  {{ template "settings-nav" . }}
4
+  <div class="shithub-settings-content">
5
+    <h1>Add new GPG key</h1>
6
+    {{ with .AddError }}<p class="shithub-flash shithub-flash-error" role="alert">{{ . }}</p>{{ end }}
7
+    <form method="POST" action="/settings/keys/gpg" novalidate>
8
+      <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
9
+      <label>
10
+        <span>Title</span>
11
+        <input type="text" name="title" maxlength="80" value="{{ .AddTitle }}">
12
+      </label>
13
+      <label>
14
+        <span>Key</span>
15
+        <textarea name="armored_key" rows="10" required spellcheck="false"
16
+                  placeholder="Begins with '-----BEGIN PGP PUBLIC KEY BLOCK-----'">{{ .AddBlob }}</textarea>
17
+      </label>
18
+      <button type="submit" class="shithub-button shithub-button-primary">Add GPG key</button>
19
+    </form>
20
+  </div>
21
+</div>
22
+{{- end }}