Add dynamic CSS support

[BlackDex]

Together with dani-garcia/bw_web_builds#180 this PR will add support for dynamic CSS changes.

For example, we could hide the register link if signups are not allowed. In the future show or hide the SSO button depending on if it is enabled or not.

There also is a special user.vaultwarden.scss file so that users can add custom CSS without the need to modify the default (static) changes. This will prevent future changes from not being applied and still have the custom user changes to be added.

Also added a special redirect when someone goes directly to /index.html as that might cause issues with loading other scripts and files.

This is still a WIP to fine tune and add some more dynamic options where applicable.

[BlackDex]

@Timshel This might be nice for your SSO PR :)

[BlackDex]

I think the examples are probably better to be somewhere on the wiki and just have a commented link to this wiki in the user.vaultwarden.scss.hbs file it self.

[BlackDex]

Some examples here for the user file:

/**** START Custom User Changes ****/

/* Hide `Authenticator app` 2FA (First item of the list) */
app-two-factor-setup ul.list-group.list-group-2fa li.list-group-item:nth-child(1) {
  @extend %vw-hide;
}

/* Hide `YubiKey OTP security key` 2FA (Second item of the list) */
/* Note: This will also be hidden automatically if the Yubikey config is net set */
app-two-factor-setup ul.list-group.list-group-2fa li.list-group-item:nth-child(2) {
  @extend %vw-hide;
}

/* Hide `Duo` 2FA (Third item of the list) */
app-two-factor-setup ul.list-group.list-group-2fa li.list-group-item:nth-child(3) {
  @extend %vw-hide;
}

/* Hide `FIDO2 WebAuthn` 2FA (Fourth item of the list) */
app-two-factor-setup ul.list-group.list-group-2fa li.list-group-item:nth-child(4) {
  @extend %vw-hide;
}

/* Hide `Email` 2FA (Fifth item of the list) */
/* Note: This will also be hidden automatically if email is not enabled */
app-two-factor-setup ul.list-group.list-group-2fa li.list-group-item:nth-child(5) {
  @extend %vw-hide;
}

/* Use a custom login logo */
app-login img.logo {
	content: url(../images/my-custom-login.logo.png) !important;
}

/* Use a custom top left logo global */
bit-icon > svg {
  display: none !important;
}
bit-icon::before {
  display: block;
  content: "" !important;
  width: 175px !important;
  height: 30px !important;
  background-image: url(../images/my-custom-global-logo.png) !important;
  background-repeat: no-repeat !important;
  background-size: contain;
}

/* Use a custom top left logo different per vault/admin */
bit-icon > svg {
  display: none !important;
}
bit-icon::before {
  display: block;
  content: "" !important;
  width: 175px !important;
  height: 30px !important;
  background-repeat: no-repeat !important;
  background-size: contain;
}
app-user-layout bit-icon::before {
  background-image: url(../images/my-custom-password-manager-logo.png) !important;
}
app-organization-layout bit-icon::before {
  background-image: url(../images/my-custom-admin-console-logo.png) !important;
}

/**** END Custom User Changes ****/

[BlackDex]

I removed the examples from the source and added a (temporary) link to the wiki where we (and other users) can add and update examples for the custom CSS entries.

[Letgamer]

would it be possible with the dynamic CSS support to enable dark mode by default?

[BlackDex]

would it be possible with the dynamic CSS support to enable dark mode by default?

I do not think that is possible.
But I'm not sure either. Maybe it is possible to change the default class? But I'm not sure.

[stefan0xC]

@BlackDex we could change the web-vault so it defaults to using the system theme. I tested this over a year ago bitwarden/clients@636a359 (edit: I've tried cherry-picking the commit and it has to be adapted as the places where this is set has changed - but yeah it's not possible via CSS - unless you want to redefine the light and dark theme which I wouldn't recommend). update: bitwarden/clients@8e009de should be compatible with v2024.6.2

[BlackDex]

Ok, @stefan0xC & @dani-garcia.

Instead of caching internally or stop loading Vaultwarden in case a template error was made I now fallback to the inner templates.

The main reason for this is, if someone adjusts the templates at runtime it will still fail and would make it also hard to fallback on.

This way, we will always use the fallback if any error occurs and the CSS will still be rendered, but just not with the extra modifications.

[stefan0xC]

If you want to reproduce, I've just tested if the fallbacks work with a missing closing bracket

body {
--custom-property: {{web_vault_version}};

[BlackDex]

@stefan0xC i have fixed it now. Tested it both with and without the template reloading.
And both with and without overwriting both scss template files.

[stefan0xC]

Tested it and seems to work as intended. Only in case of an TemplateError (e.g. an unclosed {{#if}} statement) the loading of handlebar templates will panic on startup.

thread 'main' panicked at src/config.rs:1374:78:
called `Result::unwrap()` on an `Err` value: TemplateError { reason: InvalidSyntax("expected escape, expression, html_expression, decorator_expression, partial_expression, invert_tag, invert_chain_tag, helper_block_start, helper_block_end, decorator_block_start, partial_block_start, raw_block_start, hbs_comment, or hbs_comment_compact"), template_name: Some("scss/vaultwarden.scss"), line_no: Some(5), column_no: Some(1), segment: Some("   2 | }\n   3 | {{#if bla}}\n") }
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace

But I think this is fine.

[BlackDex]

That Startup panic isn't something we can really catch, as that is done during template loading. And it's the responsibility of the user who edits the templates of course, same goes for when we adjust templates for the mails or admin interface.

We could always add fallbacks for everything, and in case of errors ignore the users adjustments. But that is out of scope for this PR i think.

[BlackDex]

Ok. I created a basic Wiki page for now. https://github.com/dani-garcia/vaultwarden/wiki/Customize-Vaultwarden-CSS
We can add more examples and detailed information there regarding this feature.