[Category] Theming

[voidmain]

Problem

Currently, the theme writing experience in the FusionAuth UI leaves a bit to be desired. As a developer, it would be nice if it was simpler and faster to create a customized theme.

Solution

The UI for editing themes could be improved in a number of ways in order to help make the overall experience better. Here are some specific pain points to address:

• Saving and previewing changes is painful. When I was building a new theme, my workflow was like this:

  1. Open the editor
  2. Edit a template file
  3. Click save
  4. Open the Preview in a new tab (if it isn't already open)
  5. Hit refresh and see how it looks

  While this method works, it is slow and error prone. Additionally, if the changes don't look good, I have to go into the editor again and now I've lost my place. This is especially true for Helpers since it is a long file and takes a while to scroll and find the place I was at. An improved method would be like this:

  1. Open the editor
  2. Edit some files
  3. Hit CMD+S to save the changes via AJAX (the page should not reload)
  4. The preview tab gets notified of the update and automatically reloads the iframe (maybe via a websocket)

• If there is a FreeMarker error in the Preview, you can’t really see it because the iFrame doesn’t scroll well. This can be fixed by outputting FreeMarker errors to the console or some other location in the UI

• Tabs vs. spaces is painful. And indents should be 2 instead of 4 (or configurable) and should always be spaces. Selecting multiple lines and hitting tab or shift+tab doesn't really work well.

• Shortcuts exist, but they aren’t documented. We should have a legend somewhere.

• The message editor is not resizeable. It would be nice if I could make it full screen

• No way to search in the editor instead of on the page. This is painful in the messages and Helpers files

• In the Preview, the wait page still reloads. We should disable this in the Preview at least. Also, the wait screen has a big FOUC if the background of the theme is not white.

• There is not an easy way to edit everything in an editor and hook that up to the preview. Not sure if this is possible, but it would make life MUCH simpler. Perhaps we could write a Chrome extension that hooks up to IntelliJ and other editors such that the files are synced with FusionAuth.

Related

• https://github.com/FusionAuth/fusionauth-site/issues/1814
• https://github.com/FusionAuth/fusionauth-issues/issues/404
• https://github.com/FusionAuth/fusionauth-issues/issues/1403
• https://github.com/FusionAuth/fusionauth-issues/issues/1506
• https://github.com/FusionAuth/fusionauth-issues/issues/1869
• https://github.com/FusionAuth/fusionauth-issues/issues/2029
• https://github.com/FusionAuth/fusionauth-issues/issues/2230
• https://github.com/FusionAuth/fusionauth-issues/issues/2440
• https://github.com/FusionAuth/fusionauth-issues/issues/2432 (the point about having the logout link be available on the email verification page (I think)).
• https://github.com/FusionAuth/fusionauth-issues/issues/2758
• https://github.com/FusionAuth/fusionauth-issues/issues/2769

How to vote

Please give us a thumbs up or thumbs down as a reaction to help us prioritize this feature. Feel free to comment if you have a particular need or comment on how this feature should work.