Customisations - Web interface

[Nephiaust]

This is an enhancement request.

Using the pre-built releases, can there be a way to customise the interface of the portal. To brand it or similar?

[Luzifer]

At the moment the interface is built using the node / webpack toolchain and then included into the binaries which is also used to generate the checksums for resource integrity to ensure no attacker is modifying the code and therefore grabbing data… So in short: Currently it is not possible.

What exactly would you want to customize?

• The name in the top bar?
• The attribution in the footer?
• Texts in general?
• The whole layout?

[Nephiaust]

Can I say all of the above?

Would it be possible to stick an upload API in, to allow you to submit something like a template and the associated files. So the build itself doesnt have to change, and all the checksums are still valid. Just allowing it to be extended with additional parts.

[Luzifer]

Can I say all of the above?

Of course you can! 🙂 In the end I'm currently trying to figure out whether this can be easily enabled and if so how would be the best way to do so…

I'd refrain from an upload-API as OTS itself has no authentication / authorization mechanisms and IMHO implementing them would be overkill…

What I could do is to create an "overlay filesystem" for some path to be specified when starting. Assets would be served from that directory and if either the directory or the file inside the directory does not exist it falls back to the baked-in assets. This would give the chance to override the baked-in assets.

On the other hand you'd still need to build the frontend with your customizations and put them there. Not sure whether this gives what much of a benefit over building the frontend and then compiling the server once to bake in the assets…

For changing just the name in the header-bar and disabling the footer one could simply add some config parameters and read those through an extra API which then would change the frontend behavior. Just replacing texts / layout would mean you'd need to rebuild…

[Nephiaust]

That actually sounds cool, the overlay part. Then it would serve the same purpose without comprising the platform. Having the config editable would be a good start.

The problem (for me at least) is I couldnt even workout how to get it to build.... I barely even got Go installed

[HappyMan4]

This would be an awesome addition to your ots project.
Additionally I don't have a problem to link to your github project page, but when using in an enterprise environment where customers can see the whole gui I would prefer to omit the word "Luzifer" as this could lead to some sort of discomfort at the customers side. If the link could be named "Github/OTS" or something like this it would be much better than "Luzifer/OTS".
This should not be misunderstood as an insult as I personally like your github username "Luzifer". 😊

So and yes, please add the possibility to change the layout/colors so that it can better fit our enterprise CI/CD.

[Luzifer]

Good points…

So basically the outcome of this should be to have the chance to

• disable the branding
• change the application title
• re-style the application
• maybe change the branding altogether to maybe have some more users keep it being comfortable by not having "Luzifer" in the interface

Which would also contribute to people stopping to fork the project, delete all attribution (and therefore violate the license) to have their customized version…

I'm still not a 100% sure how to proceed - unordered thoughts follows: Overwriting the template requires to re-build the whole application… Just overwriting the style would be adding another CSS file overwriting the Bootstrap / Bootswatch theme… With the light/dark theme switcher it would be advisable to patch the src/style.scss file… One could remove the switcher in case of a custom theme… Maybe it would be possible to separate the theme from the application to make it easier to override it… When separating is possible the application could contain a "default" theme with light/dark theme and a custom theme would be built through a similar scss file and the author of the custom theme could just hide the switch…

@Nephiaust you talked about changing the template itself: Is your intention too to just re-style the interface (CI/CD) or do you want to replace more than that? So would having the style separated from the application address your needs? 🤔

[HappyMan4]

For us it would initially be sufficient in the first place to just be able to change the following css attributes for both light and dark modes:

• header bar colors (.bg-primary)
• maybe a chance to display the own logo (png), important for customers to recognize it as a company-belonging service
• the button colors (.btn*)
• the link colors (a)

And if you would change the Github link to something like "Github project page" or whatever this would be a great benefit. 👍

[Nephiaust]

@Luzifer as @HappyMan4 suggests, its a good start. It would be nice to customise the whole page; but being able to at least change the colours, adding a logo (or 2) would be a good start.

[mshedsilegx]

For customizations, I think an overlay as what gitea is doing would be perfect.
https://docs.gitea.com/administration/customizing-gitea

Totally agree with comments of @HappyMan4, I am in a similar situation.

[Luzifer]

Please have a look at the latest (not yet released) version of OTS having support for frontend customizations and let me know whether you need more / other customization options:

Documentation for the new customization feature:
https://github.com/Luzifer/ots#customization

A Docker image is available here:
luzifer/ots:latest

[HappyMan4]

As soon as you release the new version I will give it a go. Just set up a testmachine and prepared everything for testing.
Thanks a bunch for taking the time! 👍

[mshedsilegx]

I did a build of 1.0.0-d3e92c7. All is working well for me.

[Luzifer]

Then lets wait for #87 and afterwards create a new release and close this? The new overlay directory and customization options should cover everything wished for in this ticket… 🤔

[HappyMan4]

Hey guys, I think I need some help.
With your comment on #87 I got the scripts compiled with the command

go build -ldflags "-X main.version=$(git describe --tags --always || echo dev)" -mod=readonly

But when calling the webui on the ip address it says

: error calling assetSRI: opening file: open webfonts/fa-solid-900.woff2: file does not exist

I just created a webfonts/fa-solid-900.woff2 and also frontend/webfonts/fa-solid-900.woff2 and recompiled, but the error stays - what am I doing wrong?

[Luzifer]

Please execute make default (or just make) - you're missing (at least) the download-libs step.

[HappyMan4]

Luzifer, thank you. I just didn't have any docker* things installed so make default failed.
Installed docker.io and everything compiles now with "make default" and "go build" command. Now I'm able to test out customizations.

[Luzifer]

Yeah I'm not exactly happy that the build requires Docker to build in a specific Node 18 environment (before switching the build tooling some days ago it was Node 14) but managing this on the host machine is just pain… Having all the stuff for frontend-dev in place it should(TM) build on a recent (18+) Node installation using make generate-inner generate-apidocs download_libs but yeah… To have a reliable build environment the default is to use a Docker container for this… :/