Add button to print wifi page

[ianjmacintosh]

Let's make it easier for someone to get a "Here's the wifi" paper on the back of their door.

Some things I think the page will need:

• Put the universal wifi logo and "Wi-Fi" in big letters on it
• Include the SSID and the password
• Include the QR code (duh)
• Make sure the font used is SUPER unambiguous

[ianjmacintosh]

I'm not sure what the use cases here are, so I'm going to imagine a few. These are guesses -- wild speculation in other words -- and absolutely not a substitute for actual UX research.

Hospitality worker: Wants to find a website on Google to generate a free QR code that he can dump into a Google Doc and print it out on the front office printer. Well, sort of. The outcome here is that he wants guests to leave him alone about the wifi password, so he's imagining a big piece of paper that says "THIS IS THE WIFI PASSWORD" is going to get him there. There's LOTS of assumptions hidden in here, but that's my starting point.

• Hospitality worker needs to find my site on Google
• He needs to be able to enter the network name and password
• He needs to have enough agency and confidence in my solution to try it out
• He needs to be able to save the image to his phone or desktop or whatever
• He needs to be able to embed the image in his Google Doc if he's going that route
• He needs to be able to send the doc to a computer with a printer

[ianjmacintosh]

Guy who has guests and wants to have a print-out on the back of his front door:

• Doesn't have a printer, gotta figure out how to get the QR code to the print shop
• Doesn't want to sit and diddle around in Google Docs, he just wants something normal-looking his friends and family can use to get on the wifi

Waiter who wants to show a photo on his phone to the guests at his table instead of writing down the password on a piece of paper:

• Just needs to be able to take a screenshot of an image that includes the network name and the password

For this to look normal and to work, the network name and password should be visible in a font that is totally unambiguous; lowercase L's that don't look like uppercase I's or number 1's or pipe chars. Uppercase O's that don't look like lowercase O's or zeroes.

[ianjmacintosh]

Based on this, I think I need a few things.

• Clicking the image should open an image of the QR code at a URL containing a URL-encoded string of the QR code's contents
  • Because that URL could get slammed by third-parties who also want free QR codes, this should be rate-limited and potentially require a nonce to load (CSRF? I can't remember the term off-handedly). Having a URL is useful, but I'm not sure I really want it shared? Need to test this a bit with some real users to understand it better
• Need to generate a printable page containing the required info for sharing the wifi so our guy doesn't need to make a Google Doc

[ianjmacintosh]

I think for my first rendition of this, the user should be able to click on the QR code and get sent to a URL to retrieve the image

I think I'll need to review my image generator thing I did for articles on my personal site for this

[ianjmacintosh]

https://dash.cloudflare.com/01c27887d4d17324ae5a36aa874dedd5/ianjmacintosh.com/security/waf/rate-limiting-rules

[ianjmacintosh]

This issue has a bunch of junk that's not really relevant anymore... clean-up time!

[ianjmacintosh]

I think it's important that the user understands the QR code stores the info in plaintext. In other words, the QR code will contain the password (as well as all the other network info) in plain text. Anyone with a QR code reader app can get all that info from it, including the password. If you wouldn't give someone the password, don't give them the QR code.