Make TLS admin UI better

[kentonv]

#3299 introduces support for Let's Encrypt, and adds an admin UI for controlling it.

The UI is very bad, because I'm terrible at UI. See the PR for discussion.

Would someone like to take on revamping this UI to be good?

[zenhack]

To try to identify a couple specific problems, to make this a bit closer to actionable:

• There's not really much context given at the top of the page; most of the other admin panel pages have a short description of what the page is for/how to use it where this page has it's call for help with the UI.
• In most of the other parts of the Admin UI, things split out under different headings are orthogonal settings, where it makes sense to think of them in isolation from one another. By contrast, here we have automatic renewal and manual upload as separate sections, but these are alternatives and the user needs to choose one or the other.
• There's a section for the current cert details, but it just shows expiration date & next renewal, and there is info about the current cert spread throughout the page, which adds to a feeling of disorganization.

[ocdtrekkie]

While I suppose I can wait until the release including this PR... can I get a quick screenshot of what the current panel looks like on this issue?

[zenhack]

Here you go:

[ocdtrekkie]

@zenhack is spot on that we should improve the Current Certificate Details to include more than the renewal date: I would get the Subject Name/Subject Alternate Names of the cert to display up there, along with the Issuer Name of the cert, above the expiry dates. The spacing between the two dates is extraneous, I'd tighten that up.

I am not sure if "DNS provider:" is as it is because of what the UI looks pre-configured, but way too much space is dedicated to effectively: "DNS provider: Configured provider: Sandcats.io". I feel like that should be listed above Directory URL: under the ACME account: subheading.

I feel like if we tighten up Automatic Certificate Renewal and add a bit to Current Certificate Details so people clearly can see what cert they have, it'll feel pretty good.

[ocdtrekkie]

I think visually the problem here is that excessive whitespace is making it hard to visualize the sections at a glance. The giant void between DNS provider: and ACME provider: along with the subheadings having bold text that's thicker than the main Automatic Certificate Renewal header make it very hard at a glance to realize "Fetch Now" is actually part of the Automatic Certificate Renewal section.

How do I change DNS providers? Do I forget my ACME account as well? If so, there's not a good reason for these to be separate sections at all.

Should the "will attempt renewal" info be part of the Current Certificate Details, or part of Automatic Renewal? I almost feel like one might consider putting the "Fetch Now" button close to that date, so the date it will do it itself, and your override to do it now are visually linked.

[zenhack]

Quoting Jacob Weisz (2020-04-27 12:46:17)

How do I change DNS providers? Do I forget my ACME account as well? If so, there's not a good reason for these to be separate sections at all.

From looking at the code, it looks like if you're not using sandcats there's a configure dns/forget dns button there. It's a bit awkward for sandcats since there's nothing to configure; we should probably special-case this beyond just not showing the button.

I almost feel like one might consider putting the "Fetch Now" button close to that date, so the date it will do it itself, and your override to do it now are visually linked.

I like this idea.

[kentonv]

(Also missing from the screenshot are the awful modal dialogs for creating a new ACME account and configuring a DNS provider...)

[zenhack]

Also of note: there's no logic to handle the case where the server just isn't using tls, so if you go to this page on such a machine the dates are just blank.

After stepping back a bit to think about how this page should be used, here's a sketch of an idea for a reworked design:

• When you land on this page, it displays something like:

---

✔️ Your Sandstorm Server is using TLS.

DNS provider: Cloudflare [change]

Certificate source: ACME (Let's Encrypt). [change]

Certifcate expires at: {{date}}

Will attempt renewal at: {{date}} [renew now]

---

The DNS & let's encrypt config would show up as a modal when you click on the [change] buttons. The "certificate source" modal would provide alternatives for manual upload, acme, or sandcats (with irrelevant options omitted based on the server's BASE_URL).

Thoughts?

[ocdtrekkie]

That sounds reasonable, @zenhack

Probably the only downside is that the existing UI conveys the various options listed, but I suppose it need not do so when it's already configured. I think it's important that if your server is not using TLS, we have a blurb or bullet list that communicates the options you have to set up TLS support.

It is also probably a bit sad that enabling TLS requires both going through the setup wizard on the admin panel, and then also modifying the sandstorm.conf file.

[stoltenhoff]

hi there and yes, i would be happy and proud to support your project :-)
i'm an ui/ux-designer based in the very north of germany.
unfortunately i have no coding-skills to support sandstorm yet, but i'm using
it daily and it's still my favourite solution.

[ocdtrekkie]

@stoltenhoff Awesome. If you have any insight into how we should improve this, or I don't know, if you imagine creating a mockup design for us to try to code, anything would be appreciated I think. How can we help you help us?

[stoltenhoff]

@ocdtrekkie i'm very happy to hear that. actually i have nothing to criticize on the surface, but indeed i would like to develop mockups with a few ideas and details. in principle i don't need anything and i've got everything at hand with my installation :-)
(are there any other layouts/areas that you are currently not happy with?)

[ocdtrekkie]

@stoltenhoff I think right now the TLS admin UI is the "big one", since most everything else had a designer involved with the core UI. If you see something you'd suggest improving though, I think we'd love the opinions.

There are possibly apps that could use design tweaks too, though. @zenhack is writing a calendar app for Sandstorm for instance, which probably will need some polish (and currently doesn't even have an app icon yet).

[llwp]

Here you go:

Is there currently a way in the UI to change DNS provider? (sandcats to individual cloudflare being an obvious choice). I think this might be helpful.

Looking at this UI, it feels like there are 2 workflow states (1. no certificate detected/existing and 2. replace existing/known certificate) and it feels like there might be some use for "tab sections" maybe for the various forms/configurations..

@stoltenhoff did you work on this? We can connect offline to sync up if needed. If not I can take a swing. Meantime I'm going to poke around with my installs.

Also interested in that calendar (webdav anyone?) implementation @zenhack is working on... ;)

[ocdtrekkie]

@llwp I think the DNS provider config solely exists to serve the ACME account, so forgetting that should clear out your configured DNS provider too.

Also, https://github.com/zenhack/sandcal/ but it isn't quite ready for it's first release yet!

[zenhack]

There is an option to change dns providers, but it doesn't appear in the above screenshot because I'm using sandcats, which precludes that -- if you're using your own domain it's configurable, but if you're using a sandcats.io domain, then by definition your dns provider is sandcats.

I'm planning on digging back into the calendar this upcoming week, now that the TTRSS stuff has mostly settled, but yes it's got a few glaring missing features that would turn heads; see the issue tracker. Webdav is definitely something I'd like to see at some point; feel free to open the ticket.

[llwp]

I found the provider list in the ui ... thanks! For reference there are several options:

[zenhack]

Re: the two workflows, it's actually kinda awkward in that, in theory, that sounds right, but in practice if you don't already have a cert (workflow 1) then it's not actually possible to securely reach this page in the first place.

Right now if you're in the situation of having an up-and-running sandstorm box that doesn't have a valid cert already, you're in one of two situations:

1. The box is simply configured not to use HTTPS. This could be because it's a local dev server, or because HTTPS is being handled by a reverse proxy (e.g. ngnix) in front of Sandstorm.
2. Sandstorm is configured to use https, but the cert is broken in some way.

Some day workflow 1 might be useful when moving from scenario 1 to an https setup, but right now that requires modifications to sandstorm.conf anyway, so it's not currently possible to do that via the web UI. (Maybe we should open an issue about being able to change BASE_URL via the UI? Is there one already?)

In scenario 2, it isn't safe to use this page; the user is going to have to use the CLI to recover.

So perhaps for now we should just focus on workflow 2 (replacing an existing cert), and for workflow 1 this page basically just becomes a stub that says you don't have HTTPS set up, and maybe links to the docs?

[misaka00251]

Hi,

I can't find any example options when selecting "DNS provider". I'm using Cloudflare, and I can't find how to write the configuration in JSON.

[ocdtrekkie]

Hi,

I can't find any example options when selecting "DNS provider". I'm using Cloudflare, and I can't find how to write the configuration in JSON.

So the documentation for the Cloudflare plugin is here: https://github.com/nodecraft/acme-dns-01-cloudflare though it's not super clear.

I believe it's very simple though, after creating an API token with the right permission, I think it's just: { token: 'xxx' }

There is a couple other options you can set but I don't think they are necessary.

[misaka00251]

I think it's just: { token: 'xxx' }

Thank you! Another question, I can't find the cert file. I'm not familiar with the Sandstorm file structure...

[ocdtrekkie]

@misaka00251 The certificate used to be stored in the file system, now it is stored in the database.

This script provides an example of how to extract them (on a regular basis, if you so need): https://github.com/Michael-S/sandstorm_certs_extract_cron

[rasos]

Great that LE wildcards are now supported in sandstorm. I would like to read on the TLS admin page whether it is possible to switch on an existing subdomain.sandcats.io server (ours runs since 2017) to my own wildcard domain.

[zenhack]

@rasos, it's not currently possible to use this page to make the switch; you would need to change BASE_URL and WILDCARD_HOST in sandstorm.conf, and then use the cli to update the certs, since your existing certs will be invalid for the new domain, so you won't be able to reach the admin page. I think that's all that needs doing.

Perhaps we could at least add some pointers about what to do on this page, though making it possible to do the switch from the admin UI alone requires deeper changes than just reorganizing the UI.

[rasos]

Sure, a pointer in the doc would be sufficient on that page, how to migrate to an own wildcard domain. Seems not to complicated, except the hen and egg of deploying certificates. Didn't even know that sandstorm has a cli (and found nothing about it in https://docs.sandstorm.io/en/latest/ except how to enter a misbehaving grain). And we should mention that users would loose all existing links pointing from outside to grains (Quick Survey etc).

[ocdtrekkie]

Yeah, the CLI commands for handling Sandstorm certs haven't been documented well yet. I was going to write something at some point.

Note that while existing links will break, if you update the domain part of the link, it should still be otherwise valid. (One of my wishlist items would be for Sandcats to "forward" links to a new destination, or for Sandstorm to support multiple base URLs, such that you could continue to make your Sandcats address available even after you add your own domain.

[ocdtrekkie]

Here are the TLS configuration commands: https://github.com/sandstorm-io/sandstorm/pull/3383/files#diff-e3ac29862d16d52c69ebf8bdc2313d97e1f3f075d1512f9b99265e394c92e87f

configure-acme-challenge is going to be the most frustrating part (it's not needed for Sandcats), because you need to figure out the right JSON configuration for your respective DNS provider.

[nanoscopic]

The DNS config is pretty hard to understand. It just leads to a JSON box. There is a link there to more ( wrong ) documentation on what should go there. At the very least the wiki should provide examples of working JSON for each of the different DNS options.