Design Certificate UI

[humphd]

In our meeting today, we discussed the need for a Certificate UI design, similar to what's happening with the current Figma design for the Domains. I wanted to include some thoughts on what I think will be necessary.

Click on "Certificates" should take the user to a screen with some text explaining what a Certificate is (a paragraph). There should also be a button to Request a certificate from Let's Encrypt.

Clicking this button will start a long async process. We have to go back and forth with Let's Encrypt and Route53 to do the order, set DNS records, pass various challenges, etc. After the user clicks the Request button, the UI should disable the button, and indicate that the process has been started and the user will receive an e-mail when complete.

In the background, Remix can try checking if the certificate is available yet, or wait a bit, and try again. This process can continue for as long as necessary until the certificate records are ready in the DB.

Once the certificate is available, the UI should change to show the following:

1. Large textarea to show the certificate PEM. A certificate looks like this:

----BEGIN CERTIFICATE-----
MIIFMjCCAxoCCQCVordquLnq8TANBgkqhkiG9w0BAQUFADBbMQswCQYDVQQGEwJB
VTETMBEGA1UECBMKU29tZS1TdGF0ZTEhMB8GA1UEChMYSW50ZXJuZXQgV2lkZ2l0
cyBQdHkgTHRkMRQwEgYDVQQDEwtleGFtcGxlLmNvbTAeFw0xNzA5MTQxNDMzMTRa
Fw0xODA5MTQxNDMzMTRaMFsxCzAJBgNVBAYTAkFVMRMwEQYDVQQIEwpTb21lLVN0
YXRlMSEwHwYDVQQKExhJbnRlcm5ldCBXaWRnaXRzIFB0eSBMdGQxFDASBgNVBAMT
C2V4YW1wbGUuY29tMIICIjANBgkqhkiG9w0BAQEFAAOCAg8AMIICCgKCAgEAwi2P
YBNGl1n78niRGDKgcsWK03TcTeVbQ1HztA57Rr1iDHAZNx3Mv4E/Sha8VKbKoshc
mUcOS3AlmbIZX+7+9c7lL2oD+vtUZF1YUR/69fWuO72wk6fKj/eofxH9Ud5KFje8
qrYZdJWKkPMdWlYgjD6qpA5wl60NiuxmUr44ADZDytqHzNThN3wrFruz74PcMfak
cSUMxkh98LuNeGtqHpEAw+wliko3oDD4PanvDvp5mRgiQVKHEGT7dm85Up+W1iJK
J65fkc/j940MaLbdISZYYCT5dtPgCGKCHgVuVrY+OXFJrD3TTm94ILsR/BkS/VSK
NigGVPXg3q8tgIS++k13CzLUO0PNRMuod1RD9j5NEc2CVic9rcH06ugZyHlOcuVv
vRsPGd52BPn+Jf1aePKPPQHxT9i5GOs80CJw0eduZCDZB32biRYNwUtjFkHbu8ii
2IGkvhnWonjd4w5wOldG+RPr+XoFCIaHp5TszQ+HnUTLIXKtBgzzCKjK4eZqrck7
xpo5B5m5V7EUxBze2LYVky+GsDsqL8CggQqJL4ZKuZVoxgPwhnDy5nMs057NCU9E
nXcauMW9UEqEHu5NXnmGJrCvQ56wjYN3lgvCHEtmIpsRjCCWaBJYiawu1J5ZAf1y
GTVNh8pEvO//zL9ImUxrSfOGUeFiN1tzSFlTfbcCAwEAATANBgkqhkiG9w0BAQUF
AAOCAgEAdZZpgWv79CgF5ny6HmMaYgsXJKJyQE9RhJ1cmzDY8KAF+nzT7q4Pgt3W
bA9bpdji7C0WqKjX7hLipqhgFnqb8qZcodEKhX788qBj4X45+4nT6QipyJlz5x6K
cCn/v9gQNKks7U+dBlqquiVfbXaa1EAKMeGtqinf+Y51nR/fBcr/P9TBnSJqH61K
DO3qrE5KGTwHQ9VXoeKyeppGt5sYf8G0vwoHhtPTOO8TuLEIlFcXtzbC3zAtmQj6
Su//fI5yjuYTkiayxMx8nCGrQhQSXdC8gYpYd0os7UY01DVu4BTCXEvf0GYXtiGJ
eG8lQT/eu7WdK83uJ93U/BMYzoq4lSVcqY4LNxlfAQXKhaAbioA5XyT7co7FQ0g+
s2CGBUKa11wPDe8M2GVLPsxT2bXDQap5DQyVIuTwjtgL0tykGxPJPAnL2zuUy6T3
/YzrWaJ9Os+6mUCVdLnXtDgZ10Ujel7mq6wo9Ns+u07grXZkXpmJYnJXBrwOsY8K
Za5vFwgJrDXhWe+Fmgt1EP5VIqRCQAxH2iYvAaELi8udbN/ZiUU3K9t79MP/M3U/
tEWAubHXsaAv03jRy43X0VjlZHmagU/4dU7RBWfyuwRarYIXLNT2FCd2z4kd3fsL
3rB5iI+RH0uoNuOa1+UApfFCv0O65TYkp5jEWSlU8PhKYD43nXA=
-----END CERTIFICATE-----

2. Large textarea to show the private key. We need to include some text to tell the user that this is meant to be kept private. A private key will look like this:

-----BEGIN RSA PRIVATE KEY-----
MIIEowIBAAKCAQEAvpnaPKLIKdvx98KW68lz8pGaRRcYersNGqPjpifMVjjE8LuC
oXgPU0HePnNTUjpShBnynKCvrtWhN+haKbSp+QWXSxiTrW99HBfAl1MDQyWcukoE
b9Cw6INctVUN4iRvkn9T8E6q174RbcnwA/7yTc7p1NCvw+6B/aAN9l1G2pQXgRdY
C/+G6o1IZEHtWhqzE97nY5QKNuUVD0V09dc5CDYBaKjqetwwv6DFk/GRdOSEd/6b
W+20z0qSHpa3YNW6qSp+x5pyYmDrzRIR03os6DauZkChSRyc/Whvurx6o85D6qpz
ywo8xwNaLZHxTQPgcIA5su9ZIytv9LH2E+lSwwIDAQABAoIBAFml8cD9a5pMqlW3
f9btTQz1sRL4Fvp7CmHSXhvjsjeHwhHckEe0ObkWTRsgkTsm1XLu5W8IITnhn0+1
iNr+78eB+rRGngdAXh8diOdkEy+8/Cee8tFI3jyutKdRlxMbwiKsouVviumoq3fx
OGQYwQ0Z2l/PvCwy/Y82ffq3ysC5gAJsbBYsCrg14bQo44ulrELe4SDWs5HCjKYb
EI2b8cOMucqZSOtxg9niLN/je2bo/I2HGSawibgcOdBms8k6TvsSrZMr3kJ5O6J+
77LGwKH37brVgbVYvbq6nWPL0xLG7dUv+7LWEo5qQaPy6aXb/zbckqLqu6/EjOVe
ydG5JQECgYEA9kKfTZD/WEVAreA0dzfeJRu8vlnwoagL7cJaoDxqXos4mcr5mPDT
kbWgFkLFFH/AyUnPBlK6BcJp1XK67B13ETUa3i9Q5t1WuZEobiKKBLFm9DDQJt43
uKZWJxBKFGSvFrYPtGZst719mZVcPct2CzPjEgN3Hlpt6fyw3eOrnoECgYEAxiOu
jwXCOmuGaB7+OW2tR0PGEzbvVlEGdkAJ6TC/HoKM1A8r2u4hLTEJJCrLLTfw++4I
ddHE2dLeR4Q7O58SfLphwgPmLDezN7WRLGr7Vyfuv7VmaHjGuC3Gv9agnhWDlA2Q
gBG9/R9oVfL0Dc7CgJgLeUtItCYC31bGT3yhV0MCgYEA4k3DG4L+RN4PXDpHvK9I
pA1jXAJHEifeHnaW1d3vWkbSkvJmgVf+9U5VeV+OwRHN1qzPZV4suRI6M/8lK8rA
Gr4UnM4aqK4K/qkY4G05LKrik9Ev2CgqSLQDRA7CJQ+Jn3Nb50qg6hFnFPafN+J7        
7juWln08wFYV4Atpdd+9XQECgYBxizkZFL+9IqkfOcONvWAzGo+Dq1N0L3J4iTIk
w56CKWXyj88d4qB4eUU3yJ4uB4S9miaW/eLEwKZIbWpUPFAn0db7i6h3ZmP5ZL8Q
qS3nQCb9DULmU2/tU641eRUKAmIoka1g9sndKAZuWo+o6fdkIb1RgObk9XNn8R4r
psv+aQKBgB+CIcExR30vycv5bnZN9EFlIXNKaeMJUrYCXcRQNvrnUIUBvAO8+jAe
CdLygS5RtgOLZib0IVErqWsP3EI1ACGuLts0vQ9GFLQGaN1SaMS40C9kvns1mlDu
LhIhYpJ8UsCVt5snWo2N+M+6ANh5tpWdQnEK6zILh4tRbuzaiHgb
-----END RSA PRIVATE KEY-----

3. We need a way to copy either of these PEM strings to the clipboard.
4. We need a way to download either of these as files
5. We should also show the user information about the dates when this certificate is valid (from, to)
6. We should also give info about how to understand and use these.

[Myrfion]

Hello @humphd, I did some updates on the Certificate UI design and I would appreciate your feedback on that: https://www.figma.com/file/XAcnMIC1y4qumWinSalHI9/Starchart-UI?node-id=2105%3A2109&t=G1CD9TRcUmXAM98Z-1

[humphd]

OK, here's my initial feedback. I'd also encourage you to chat with @dadolhay, since he's thinking a lot about how this flow will work.

Initial Certificate Screen

https://www.figma.com/proto/XAcnMIC1y4qumWinSalHI9/Starchart-UI?node-id=2281%3A2371&scaling=scale-down&page-id=2105%3A2109

I think we need explanatory text here. What is a certificate? What can I do with it? Who is Let's Encrypt? What will happen when I click this button?

I also think you should drop "Let's Encrypt" from the button text and use "Request a Certificate". I notice that this is also what AWS uses on their UI.

I also think we should show the user which domains will be included in their certificate. Here is what Amazon does, for example:

In our case, we're going to include two domains:

1. username.domain.com
2. *.username.domain.com

It would be good to show the user this, and add some info about what the * will mean (i.e., "This certificate will be valid for all subdomains owned by the user").

Certificate being Created

https://www.figma.com/proto/XAcnMIC1y4qumWinSalHI9/Starchart-UI?node-id=2294%3A2713&scaling=scale-down&page-id=2105%3A2109

The process is going to take a while, and I'm not sure that a spinner is the right UI. It might be better to have some text that says, "We've requested your certificate and will notify you when it's ready." We could add polling later to update the UI when it does become available, in case a user does want to wait.

Certificate Details

https://www.figma.com/proto/XAcnMIC1y4qumWinSalHI9/Starchart-UI?node-id=2294%3A2794&scaling=scale-down&page-id=2105%3A2109

I like how you did "Created On" and "Expires On". Can you add two buttons beside this:

1. Renew - to request a new certificate with a later expiry
2. Revoke - to revoke the certificate (e.g., if it has been compromised for some reason)

The Clipboard Copy buttons should either go over-top of the text area, like GitHub does (see top-right):

Or you should move it to be a proper button beside "Download"

I would get rid of "Check public key" and always show it.

For the Private Key, similar feedback. I would also consider obscuring it (e.g., replace all but the first 5 characters with 'x' or something) and have a button to "Reveal" it. The point of this is to help teach the user that this is not something to be shared.

[Ririio]

The process is going to take a while, and I'm not sure that a spinner is the right UI. It might be better to have some text that says, "We've requested your certificate and will notify you when it's ready." We could add polling later to update the UI when it does become available, in case a user does want to wait.

I was thinking that maybe we can keep the spinner or make the button disabled when it's being processed. We can then switch it to a "view certificate" when it's finished? . We can prompt the user in regards to notification when they press the "request a certificate" button like a modal of some kind.

[humphd]

I think a spinner is good when you're looking at something that will take a few seconds. If you get into minutes, I think it's less useful.

A lot of sites will show some more stable UI (e.g., a dialog box or inline panel), which indicates that a long-running process is underway. For example:

We won't have a progress indicator, but we could use something like Chakra's Animated Progress bar to indicate "something is still happening."

So my proposal would be, when a user goes to this page:

• If you haven't created a certificate, and we're not in the process of creating one, show the Text (explain) + Button (request)
• If you have a certificate, we take you to the details
• If we're in the process of creating a certificate for you, we show you this "in progress" screen vs. the button.