Add dynamic CSS support #4940

BlackDex · 2024-09-11T12:38:54Z

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 · 2024-09-11T12:39:45Z

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

BlackDex · 2024-09-11T14:56:10Z

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 · 2024-09-12T17:29:48Z

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 · 2024-09-12T17:35:58Z

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 · 2024-09-13T14:53:09Z

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

BlackDex · 2024-09-13T15:57:40Z

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 · 2024-09-13T16:16:32Z

@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

BlackDex · 2024-10-05T14:19:17Z

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.

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 <black.dex@gmail.com>

- 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 <black.dex@gmail.com>

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}};

stefan0xC · 2024-10-10T10:59:57Z

src/static/templates/scss/vaultwarden.scss.hbs

+/* Replace the Bitwarden Shield at the top left with a Vaultwarden icon */
+.bwi-shield:before {
+  content: "" !important;
+  width: 32px !important;
+  height: 40px !important;
+  display: block !important;
+  background-image: url(../images/icon-white.png) !important;
+  background-repeat: no-repeat;
+  background-position-y: bottom;
+}


This is not used in web-v2024.6.2 as far as I know (only in the 404.html which we don't ship) and in the next one this would have to be adapted/rewritten anyway, so we could leave this change out for now.

Ah, it was also still in the bw_web_builds.

stefan0xC · 2024-10-10T21:12:54Z

src/api/web.rs

+    ) {
+        Ok(css) => css,
+        Err(e) => {
+            // Something went wrong compiling the scss. Fallback to the built-in tempaltes


Suggested change

// Something went wrong compiling the scss. Fallback to the built-in tempaltes

// Something went wrong compiling the scss. Fallback to the built-in templates

stefan0xC · 2024-10-10T21:50:07Z

src/api/web.rs

+        "sends_allowed": CONFIG.sends_allowed(),
+    });
+
+    let scss = match CONFIG.render_template("scss/vaultwarden.scss", &css_options) {


While providing a custom user.vaultwarden.scss.hbs file (with a scss syntax error) I noticed that there is no fallback as it just panics.

Did you compiled it with your changes in place, in the templates folder? Or located in a totally different location?

Because i had the same issue when i was testing and compiled the bad fallback into Vaultwarden it self hehe

overwritten via data/templates/scss/user.vaultwarden.scss.hbs and also tested if it makes a difference if i overwrite data/templates/scss/vaultwarden.scss.hbs instead

Hmm, it should fallback. Ill have to revisit this part of the code again.

Do you have perhaps activated reload_templates? Because then it falls back to the initially loaded templates, whatever they maybe and not necessarily the statically compiled ones (cf. #4940 (comment)).

stefan0xC · 2024-10-10T21:58:37Z

src/api/web.rs

+            // Something went wrong loading the template. Fallback to the built-in templates
+            warn!("Loading scss/vaultwarden.scss.hbs or scss/user.vaultwarden.scss.hbs failed. {e}");
+            CONFIG
+                .render_inner_template("scss/vaultwarden.scss", &css_options)


Not sure if there's a difference between calling first render_template which calls render_inner_template and calling render_inner_template directly?

The difference is that the first loads templates on disk, the latter only extracts them from the built-in files.

Because of the #[inline]? Why would that be the case?

No, because that code part uses the files stored in the inner key which are built-in during compile-time.

but there's nothing before the call to differentiate the two cases

vaultwarden/src/config.rs

Line 1265 in 68d04f1

self.render_inner_template(name, data)

so I don't understand how this would be different. I meant it previously also used the inner key, so why would there be a difference?

I mean as far as I understand it all the registered templates are overwritten by

vaultwarden/src/config.rs

Lines 1359 to 1362 in 68d04f1

// And then load user templates to overwrite the defaults

// Use .hbs extension for the files

// Templates get registered with their relative name

hb.register_templates_directory(path, DirectorySourceOptions::default()).unwrap();

BlackDex mentioned this pull request Sep 11, 2024

Add dynamic CSS support dani-garcia/bw_web_builds#180

Open

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

BlackDex force-pushed the dynamic-css branch from 522a14a to ea687c7 Compare September 12, 2024 17:34

stefan0xC reviewed Sep 14, 2024

View reviewed changes

src/api/web.rs Outdated Show resolved Hide resolved

BlackDex force-pushed the dynamic-css branch from e278240 to d232db8 Compare October 5, 2024 14:14

BlackDex requested review from stefan0xC and dani-garcia October 5, 2024 14:24

BlackDex force-pushed the dynamic-css branch from 296f785 to 2133fc2 Compare October 6, 2024 09:32

BlackDex marked this pull request as ready for review October 6, 2024 09:34

BlackDex added 2 commits October 6, 2024 14:59

BlackDex force-pushed the dynamic-css branch from 2133fc2 to 68d04f1 Compare October 6, 2024 12:59

BlackDex requested review from stefan0xC and dani-garcia and removed request for stefan0xC and dani-garcia October 10, 2024 10:18

stefan0xC suggested changes Oct 10, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add dynamic CSS support #4940

Add dynamic CSS support #4940

BlackDex commented Sep 11, 2024 •

edited

Loading

BlackDex commented Sep 11, 2024

BlackDex commented Sep 11, 2024

BlackDex commented Sep 12, 2024

BlackDex commented Sep 12, 2024

Letgamer commented Sep 13, 2024

BlackDex commented Sep 13, 2024

stefan0xC commented Sep 13, 2024 •

edited

Loading

BlackDex commented Oct 5, 2024

stefan0xC left a comment

stefan0xC Oct 10, 2024

BlackDex Oct 10, 2024

stefan0xC Oct 10, 2024

BlackDex Oct 10, 2024

stefan0xC Oct 10, 2024

BlackDex Oct 10, 2024

stefan0xC Oct 10, 2024 •

edited

Loading

BlackDex Oct 10, 2024

stefan0xC Oct 10, 2024 •

edited

Loading

stefan0xC Oct 10, 2024

BlackDex Oct 10, 2024

stefan0xC Oct 10, 2024

BlackDex Oct 10, 2024

stefan0xC Oct 10, 2024

	// Something went wrong compiling the scss. Fallback to the built-in tempaltes
	// Something went wrong compiling the scss. Fallback to the built-in templates

	// And then load user templates to overwrite the defaults
	// Use .hbs extension for the files
	// Templates get registered with their relative name
	hb.register_templates_directory(path, DirectorySourceOptions::default()).unwrap();

Add dynamic CSS support #4940

Are you sure you want to change the base?

Add dynamic CSS support #4940

Conversation

BlackDex commented Sep 11, 2024 • edited Loading

BlackDex commented Sep 11, 2024

BlackDex commented Sep 11, 2024

BlackDex commented Sep 12, 2024

BlackDex commented Sep 12, 2024

Letgamer commented Sep 13, 2024

BlackDex commented Sep 13, 2024

stefan0xC commented Sep 13, 2024 • edited Loading

BlackDex commented Oct 5, 2024

stefan0xC left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stefan0xC Oct 10, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stefan0xC Oct 10, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

BlackDex commented Sep 11, 2024 •

edited

Loading

stefan0xC commented Sep 13, 2024 •

edited

Loading

stefan0xC Oct 10, 2024 •

edited

Loading

stefan0xC Oct 10, 2024 •

edited

Loading