~sircmpwn/sr.ht-dev

meta.sr.ht: 2 random things v1 PROPOSED

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
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
Export patchset (mbox)
How do I use this?

Copy & paste the following snippet into your terminal to import this patchset into git:

curl -s https://lists.sr.ht/~sircmpwn/sr.ht-dev/patches/48585/mbox | git am -3
Learn more about email & git

[PATCH meta.sr.ht 1/3] use checkboxes for oauth2 scopes Export this patch

<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
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

[PATCH meta.sr.ht 2/3] make gpg command copyable & include email address Export this patch

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

[PATCH meta.sr.ht 3/3] add PGP public key placeholder in text box Export this patch

---
 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