[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/1890
• https://github.com/FusionAuth/fusionauth-issues/issues/2029
• https://github.com/FusionAuth/fusionauth-issues/issues/2030
• 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/2875

Related Simple Themes

• https://github.com/FusionAuth/fusionauth-issues/issues/2758
• https://github.com/FusionAuth/fusionauth-issues/issues/2769
• https://github.com/FusionAuth/fusionauth-issues/issues/2805
• https://github.com/FusionAuth/fusionauth-issues/issues/2833

Related Bugs

• https://github.com/FusionAuth/fusionauth-issues/issues/2817
• https://github.com/FusionAuth/fusionauth-issues/issues/2823

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.

[mooreds]

I would also love for there to be a couple of prebuilt themes. There's just a lot going on and unless you understand everything it's easy to get overwhelmed. For instance, all I wanted to do was customize the login and logout pages, but there's so much going on that I wasn't sure exactly what I needed to change. I ended up breaking my login and having to go into the database to roll back to the standard FA theme.

[Bertg]

If I may, I'd like to add an other suggestion.

More and more frontend development is happening using React/Vue, as it can provide an excellent developer and user experience. It would be great if FusionAuth could provide example implementations of how the pages implemented using these technologies could look like.

Looking at the authorisation page I already see 5 IF statements. That's 32 different states this page can take (not considering the sub pages). Going into this without a proper test suite is a nightmare.

So in conclusion, my 2 suggestions:

• Provide example implementations for React / Vue
• Provide a way to "test" a theme

[mooreds]

@Bertg thanks for the feedback. I'm not sure I quite understand.

If you are going to use react/vue for your auth screens, it might make sense to use the login api directly, rather than the hosted login pages. The major win for using the hosted login pages is that it lives on FusionAuth and the workflows are already defined.

If you want to use react/vue and just make API calls, why wouldn't you use the login api and ignore the themed login pages?

What am I missing?