1. Checkboxes instead of <select multiple> for OAuth 2 scope selection. See
extended commit message on why.

2. Move gpg command out of placeholder, and copyable for convenience. Also
includes the user's email address for more convenience.

Jackson (3):
  use checkboxes for oauth2 scopes
  make gpg command copyable & include email address
  add PGP public key placeholder in text box

 metasrht/templates/keys.html                  |  8 ++++-
 .../oauth2-personal-token-registration.html   | 31 ++++++++++---------
 2 files changed, 24 insertions(+), 15 deletions(-)

-- 
2.43.0

<select multiple> has a ton of issues regarding accessibility, keyboard
navigation, mobile usability, etc. See also
https://www.htmhell.dev/adventcalendar/2023/13/#lessselect-multiplegreater

The format of the form data is the same (using the name "grants" for
all checkboxes), so server side changes are not required.
---
The format of the scope picker is a header (which has a small line below the
text), and a bunch of checkboxes with scopes.

 .../oauth2-personal-token-registration.html   | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/metasrht/templates/oauth2-personal-token-registration.html b/metasrht/templates/oauth2-personal-token-registration.html
index 1b041e7..c915450 100644
--- a/metasrht/templates/oauth2-personal-token-registration.html
+++ b/metasrht/templates/oauth2-personal-token-registration.html
@@ -25,22 +25,25 @@
       <details class=".details" {% if valid and not valid.ok %}open{% endif %}>
         <summary>Limit scope of access grant</summary>
         <div class="form-group">
-          <label for="grants">Select access grants (multiple selections are permitted)</label>
-          <select id="grants" name="grants" size="8" class="form-control" multiple>
-            {% for group in access_grants %}
-            <optgroup label="{{group['name']}}">
+          <label>Select access grants</label>
+          {% for group in access_grants %}
+	    <div class="form-group">
+	      <h4>{{group['name']}}</h4>
               {% for scope in group['scopes'] %}
-              {% set val = group['name'] + "/" + scope %}
-              <option
-                value="{{val}}"
-                {% if grants and (val + ":RO" in grants or val + ":RW" in grants) %}
-                selected
-                {% endif %}
-              >{{scope}}</option>
+                {% set val = group['name'] + "/" + scope %}
+	        <input
+	          type="checkbox"
+	          name="grants"
+	          value="{{val}}"
+	          id="{{val}}"
+	          {% if grants and (val + ":RO" in grants or val + ":RW" in grants) %}
+	          checked
+	          {% endif %} />
+	        <label for="{{val}}">{{scope}}</label>
+	        <br>
               {% endfor %}
-            </optgroup>
-            {% endfor %}
-          </select>
+	    </div>
+          {% endfor %}
         </div>
         <div class="form-group">
           <label class="checkbox">
-- 
2.43.0

also deletes the gpg command from the placeholder
---
 metasrht/templates/keys.html | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/metasrht/templates/keys.html b/metasrht/templates/keys.html
index 95adcd9..2be88d4 100644
--- a/metasrht/templates/keys.html
+++ b/metasrht/templates/keys.html
@@ -118,8 +118,11 @@
             name="pgp-key"
             style="font-family: monospace"
             rows="5"
-            placeholder="gpg --armor --export-options export-minimal --export 616C736F207468652067616D650A"
           >{{pgp_key or ""}}</textarea>
+          <div id="gpg-command-section" class="form-text text-muted">
+            You can use the following command to export your PGP key:<br>
+            <code id="gpg-command">gpg --armor --export-options export-minimal --export {{email or current_user.email}}</code>
+          </div>
           <small id="sshkey-details" class="form-text text-muted">
             A list of your PGP public keys is available to the public via
             <a
-- 
2.43.0

---
 metasrht/templates/keys.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/metasrht/templates/keys.html b/metasrht/templates/keys.html
index 2be88d4..424436f 100644
--- a/metasrht/templates/keys.html
+++ b/metasrht/templates/keys.html
@@ -118,6 +118,9 @@
             name="pgp-key"
             style="font-family: monospace"
             rows="5"
+            placeholder="-----BEGIN PGP PUBLIC KEY BLOCK-----
+[...]
+-----END PGP PUBLIC KEY BLOCK-----"
           >{{pgp_key or ""}}</textarea>
           <div id="gpg-command-section" class="form-text text-muted">
             You can use the following command to export your PGP key:<br>
-- 
2.43.0

Hey,

i personally find using checkboxes for OAuth-scopes annoying. They often
lack of enabling multiple scopes at once, for example like Mastodon
does. You have to check every single scope by hand.

I liked the "dragging"-feature sourcehut has, where you can just drag your
required scopes all at once.

This is just my personal opinion. Of course, if it's unusuable with
accessibility devices, etc., it's maybe worth using checkboxes instead.

But maybe a "Select all" (or "select all hg.sr.ht") button would be nice
to add.

Thanks!

fossdd

I've pushed all patches except the first. Thanks!

I'll leave it up to Drew to decide what to do about the first.