HTTPS UI switch

[andrewn]

UI switch for toggling HTTP/S (closes #170).

When logged in, shows an HTTPS checkbox that saves the flag to the API, toggles a page reload and redirection to the correct protocol. The correct protocol is also redirected to on sketch load.

---

Old PR content, left here for archive:

Work-in-progress UI switch for toggling HTTP/S (#170).

I've put a checkbox in as the UI for now until the feature is functional.

This updates the current project's serveStatic flag in the Redux store, but does not do any redirection yet.

I've hit a problem where redirection across domains/reloading the page will lose the state of the flag because the project will not have been saved so I've started work on #334.

Some possible approaches:

1. Only allow logged in users to switch HTTP/S using this toggle, and auto-save the project when the serveSecure flag is toggled. This is probably simplest.

2. Auto-save anonymous projects to the API so the flag can be stored in the backend. The projects would need to be linked to a user when they log in.

3. Use something like cross-storage to persist the redux store across origins. But this means that all browser tabs using the Editor will have the same set of data. I feel like this could be confusing and a source of bugs?

They all sound quite complex and have different trade offs so would be good to get some feedback from @catarak.

[catarak]

I think 1 is good--I think we want to point users to log in, as having anonymous sketches led to a lot of confusion. I think it's okay to give people a stripped down version of the editor if they aren't logged in. A user can still reload the page in https if they really want to.

Also cc @lmccart @machinic for design input.

[lmccart]

@catarak I agree, I think that sounds reasonable

[machinic]

My immediate feedback would be to increase the distance between the label for auto refresh and the checkbox for https — a full 20px separating them would be good. Currently, one could mistake that for a trailing checkbox rather than a leading one.

Ultimately, there will be a different location for the toggle in the upcoming design changes.

[andrewn]

Thanks for the feedback @machinic and @lmccart!

• Spacing around HTTPS checkbox
• Placeholder help icon button that launches modal
• Modal and content explaining when you'd choose HTTPS/HTTP
• Only shows checkbox when user is signed in
• Selecting checkbox saves project and reloads page on correct protocol
• Sketch page redirects to correct protocol on load
• API now persists serveSecure to datastore on server

@catarak This is ready for review.

Checkbox and help icon:

Modal:

[catarak]

Maybe put all of the tag styles in styles/base/_bass.scss? Remember we're not using CSS modules here so everything is ~ global ~

[andrewn]

I thought SASS would expand these rules to .help-modal__section ul to scope it to the HelpModal content? I wasn't sure we'd want to apply globally.

But I can totally move to _bass.scss if you prefer?

[catarak]

oops my bad, did not see that they were nested in .help-modal__section. this is for a different PR, but i think a lot of the overlay/modal styles could probably be cleaned up and made more generic 😄

[catarak]

i have only one comment but otherwise this is great and works great! v excited to use this feature in a workshop