Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add dynamic CSS support #4940

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Conversation

BlackDex
Copy link
Collaborator

@BlackDex BlackDex commented Sep 11, 2024

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
Copy link
Collaborator Author

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

@BlackDex BlackDex force-pushed the dynamic-css branch 6 times, most recently from 4c1ff0a to 522a14a Compare September 11, 2024 14:54
@BlackDex
Copy link
Collaborator Author

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
Copy link
Collaborator Author

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
Copy link
Collaborator Author

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
Copy link

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

@BlackDex
Copy link
Collaborator Author

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
Copy link
Contributor

stefan0xC commented Sep 13, 2024

@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

src/api/web.rs Outdated Show resolved Hide resolved
@BlackDex
Copy link
Collaborator Author

BlackDex commented Oct 5, 2024

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.

Copy link
Contributor

@stefan0xC stefan0xC left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

src/static/templates/scss/vaultwarden.scss.hbs Outdated Show resolved Hide resolved
src/api/web.rs Outdated Show resolved Hide resolved
src/api/web.rs Show resolved Hide resolved
src/api/web.rs Outdated Show resolved Hide resolved
@BlackDex
Copy link
Collaborator Author

@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.

Copy link
Contributor

@stefan0xC stefan0xC left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

src/api/web.rs Show resolved Hide resolved
src/api/web.rs Show resolved Hide resolved
@BlackDex
Copy link
Collaborator Author

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
Copy link
Collaborator Author

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.

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.

Signed-off-by: BlackDex <[email protected]>
- Add both Vaultwarden and web-vault versions to the css_options.
- Fallback to the inner templates if rendering or compiling the scss fails.
  This ensures the basics are always working even if someone breaks the templates.

Signed-off-by: BlackDex <[email protected]>
The fallback now works by using an alternative `reg!` macro.
This adds an extra template register which prefixes the template with `fallback_`.

Signed-off-by: BlackDex <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants