update web-vault to v2024.3.0 (new vertical layout) #157

stefan0xC · 2024-03-06T09:55:19Z

There have been two new web-vault releases yesterday: web-v2024.2.3 and web-v2024.2.4 which would change the layout quite drastically (cf. bitwarden/clients@38d8fbd).
[UPDATE] The article that explains the layout change has been published: https://bitwarden.com/blog/bitwarden-design-updating-the-navigation-in-the-web-app/

The patch file differs further from previous files because with the layout change there are more drastic changes. I.e. the navbar at the top was removed (and replaced with a vertical bar), there's no footer once you are logged in and the Organizations link at the top to manage organizations was moved to the product-switcher. Since the svgs will be embedded into the page I've created two logos to differentiate between the Password Manager and the Admin Console (which is currently only for managing organizations and should not be confused with the /admin panel.)

Password Manager:

Admin Console:

There are also some further changes that we should add to keep vaultwarden compatible with the web-vault.
E.g. flexible collections (bitwarden/clients@0c3b569), login with passkey support (bitwarden/clients@3a0603a),

Since the feature flag for login with passkey has been removed (i.e. the option will be shown even though we don't have the necessary endpoints) I've hidden/removed the components for now.

The patch currently looks like this:

Light mode:

Dark mode:

As far as I've quickly tested it at least the core functionality (i.e. creating, modifying, deleting accounts, items, organizations, collections, sends, ...) still works.

stefan0xC · 2024-03-09T07:53:32Z

I've added the two logos to the resources folder and created a basic script that replaces both logos (this currently requires a sed with in-place-editing capabilities).

Also changed the color scheme of the light mode a bit because I think that this new vertical layout is the perfect opportunity to introduce such a change. Note: I've refrained from making more changes as Bitwarden is still in the process of migrating the web-vault to their components library (and people not wanting this change can easily revert the changes to the tw-theme.css file).

tessus · 2024-03-20T23:17:20Z

@stefan0xC how complex is it to add the endpoints for logging into vw via passkeys? Is this something I can help you with? I doubt I can work on this alone, but if you start with it, I can work on smaller tasks you assign to me. would that help, or is this more work than someone doing this alone?

stefan0xC · 2024-03-21T08:23:52Z

@tessus I'm not sure because I have not looked into it. If I were to tackle it I would also like to update the webauthn-rs crate to the latest version (which probably is a more complex task) but I have not had time to dive into it. This update is probably not required to implement the endpoints though so don't let it deter you if you want to take a crack at it.

BlackDex · 2024-03-21T08:33:23Z

I'm not 100% sure, but the main reason we want to update to the latest webauthn-rs crate is also because it has better support for edge cases. The best would be if we could use the Safe API version of it instead of use the Core part manually.

Only, not sure if that can be done.

BlackDex · 2024-03-21T15:13:21Z

I have some items which we need to address on the server side before we can release this:

fn post_rotatekey This doesn't work anymore (might be in previous version also btw).
bitwarden/clients@a62f8cd
Do we need to exclude the duo-redirect connectors also from adding some security headers?
Duo seems to work for me using the web-vault though. I'm not getting a redirect.
And I think it is only for Organization Duo MFA, which we do not support.
bitwarden/clients@c481d92
bitwarden/clients@c91ceb2
This caught my eye also, not fully sure, but it might be linked only to the new flex collections?
bitwarden/clients@5c6245a
Didn't we added support for vault-item-encryption already? They seem to have bumped the minimum server version.
If that is the case, we need to update ours as well.
bitwarden/clients@c199f02

I'm not seeing any other issues here.
The rest seems to work ok.

BlackDex · 2024-03-21T15:41:33Z

So, I'm fine btw with approving this PR, but I'm probably going to wait to release it until after we at least made adjustments to the key rotation code.

BlackDex · 2024-03-21T15:44:11Z

Ow, they just release v2024.3.0 🤣

BlackDex · 2024-03-25T22:39:10Z

Since the key-rotation is already broken in the other versions also, lets just merge and release :).
Thanks @stefan0xC !

tessus · 2024-03-25T23:19:13Z

Is there a certain release required for this to work? e.g. 1.30.5 or a certain commit? I know that WIP PR would have been nice, but as you said it was already broken for a few releases.

BlackDex · 2024-03-25T23:20:59Z

It works with the current testing release as far as i could tell.

tessus · 2024-03-25T23:26:11Z

Ah, I see. Thanks for the info.

I am asking because I also create RPM packages for Fedora, but I guess they are mostly for myself (I don't track who downloads them). However, I usually have a Requires: vaultwarden >= xxxx in the web-vault package.

tessus · 2024-03-26T02:06:56Z

@stefan0xC why do the password manager and the admin console use a different background color in the light theme, but use the same background color in dark theme?
Is this on purpose or an oversight?

stefan0xC · 2024-03-26T06:31:06Z

@tessus the main background-color is the same?

If you mean the side-panel: That's presumably a design decision by Bitwarden.

In light mode they use --color-background-alt3 for the password manager (rgb(18, 82, 163)) which I have changed to rgb(33, 37, 41) and --color-secondary-100 for the admin console (rgb(240, 240, 240)), which I have not changed.

bw_web_builds/patches/v2024.3.0.patch

Lines 698 to 719 in ac7f24e

    
           diff --git a/libs/components/src/tw-theme.css b/libs/components/src/tw-theme.css 
        
           index 75a8fa6380..733dbe9413 100644 
        
           --- a/libs/components/src/tw-theme.css 
        
           +++ b/libs/components/src/tw-theme.css 
        
           @@ -6,12 +6,12 @@ 
        
              --color-background: 255 255 255; 
        
              --color-background-alt: 251 251 251; 
        
              --color-background-alt2: 23 92 219; 
        
           -  --color-background-alt3: 18 82 163; 
        
           -  --color-background-alt4: 13 60 119; 
        
           +  --color-background-alt3: 33 37 41; /* bg of menu panel */ 
        
           +  --color-background-alt4: 16 18 21; /* bg of active menu item */ 
        
           -  --color-primary-300: 103 149 232; 
        
           -  --color-primary-500: 23 93 220; 
        
           -  --color-primary-700: 18 82 163; 
        
           +  --color-primary-300: 108 117 125; /* hover of menu items */ 
        
           +  --color-primary-500: 18 82 163; /* color of links and buttons */ 
        
           +  --color-primary-700: 13 60 119; /* hover of links and buttons */ 
        
              --color-secondary-100: 240 240 240; 
        
              --color-secondary-300: 206 212 220;

In dark mode both --color-background-alt3 and --color-secondary-100 have the same value (rgb(47, 52, 61))

tessus · 2024-03-26T06:43:05Z

@stefan0xC I was talking about the side panel:

vs

But in dark mode they look the same. It's all good if this is not a bug. It just seemed off to me that the backgrounds are different in the light theme but the same in the dark theme.

misilot · 2024-03-26T13:46:03Z

Does this PR bring in the Duo Universal prompt support? That came with web-vault 2024.2.3?

https://bitwarden.com/help/releasenotes/#2024-2-3

BlackDex · 2024-03-26T16:23:29Z

Does this PR bring in the Duo Universal prompt support? That came with web-vault 2024.2.3?

https://bitwarden.com/help/releasenotes/#2024-2-3

Technically the client side adds this feature, but for this to fully work we need to make changes to the server side too.
Which have not been done.

Key rotation was changed since 2024.1.x. Multiple other items were added to be rotated like password-reset and emergency-access data to be part of just one POST instead of having multiple. See: dani-garcia/bw_web_builds#157

gigaion · 2024-04-06T03:02:32Z

Looks like Bitwarden came out with a v2024.3.1 with a nice feature add of bullk collection moving.

https://github.com/bitwarden/clients/releases/tag/web-v2024.3.1

stefan0xC · 2024-04-06T07:06:41Z

@gigaion I've already made a PR #159

BlackDex · 2024-04-06T07:11:43Z

Though i didn't find that feature out-off-the-box. So it probably needs a feature flag and server-side adjustments.

Key rotation was changed since 2024.1.x. Multiple other items were added to be rotated like password-reset and emergency-access data to be part of just one POST instead of having multiple. See: dani-garcia/bw_web_builds#157

lukasj98 · 2024-04-06T22:26:27Z

I think the light theme for the panel would be better for the regular password manager and for the admin the dark could you change this

BlackDex · 2024-04-06T22:41:18Z

You mean, light theme when on the personal manager, and the dark theme when on the organization manager?

That would be strange, and also not wanted in most cases i think, I have dark themes for almost everything for example.

lukasj98 · 2024-04-06T23:02:31Z

Why not the original color ?

lukasj98 · 2024-04-06T23:03:40Z

But I think it would be better if it would change according to the color scheme settings

Key rotation was changed since 2024.1.x. Multiple other items were added to be rotated like password-reset and emergency-access data to be part of just one POST instead of having multiple. See: dani-garcia/bw_web_builds#157

stefan0xC added 3 commits March 6, 2024 04:53

update web-vault to v2024.2.4

c761ceb

update web-vault to v2024.2.5

8544453

change light mode color scheme

3f796d0

stefan0xC changed the title ~~update web-vault to v2024.2.4 (new vertical layout)~~ update web-vault to v2024.2.5 (new vertical layout) Mar 9, 2024

stefan0xC added 3 commits March 9, 2024 10:55

create script to replace svg icons

21ffad4

make it work with docker

9b23b36

normalize commit id length

b4b89ef

stefan0xC force-pushed the update-to-v2024.3.x branch from e91fc29 to b4b89ef Compare March 9, 2024 09:56

Timshel mentioned this pull request Mar 12, 2024

SSO using OpenID Connect dani-garcia/vaultwarden#3899

Open

BlackDex approved these changes Mar 21, 2024

View reviewed changes

update web-vault to v2024.3.0

a249de3

stefan0xC changed the title ~~update web-vault to v2024.2.5 (new vertical layout)~~ update web-vault to v2024.3.0 (new vertical layout) Mar 21, 2024

stefan0xC mentioned this pull request Mar 21, 2024

update web-vault to v2024.2.2 and change color of navbar #156

Closed

BlackDex mentioned this pull request Mar 22, 2024

Update Key Rotation web-vault v2024.3.x dani-garcia/vaultwarden#4446

Merged

BlackDex approved these changes Mar 25, 2024

View reviewed changes

BlackDex merged commit ac7f24e into dani-garcia:master Mar 25, 2024

stefan0xC deleted the update-to-v2024.3.x branch March 25, 2024 22:42

stefan0xC mentioned this pull request Apr 4, 2024

update web-vault to v2024.3.1 (new vertical layout) dani-garcia/vaultwarden#4468

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

update web-vault to v2024.3.0 (new vertical layout) #157

update web-vault to v2024.3.0 (new vertical layout) #157

stefan0xC commented Mar 6, 2024 •

edited

Loading

stefan0xC commented Mar 9, 2024 •

edited

Loading

tessus commented Mar 20, 2024

stefan0xC commented Mar 21, 2024

BlackDex commented Mar 21, 2024

BlackDex commented Mar 21, 2024

BlackDex commented Mar 21, 2024

BlackDex commented Mar 21, 2024

BlackDex commented Mar 25, 2024

tessus commented Mar 25, 2024

BlackDex commented Mar 25, 2024

tessus commented Mar 25, 2024

tessus commented Mar 26, 2024

stefan0xC commented Mar 26, 2024 •

edited

Loading

tessus commented Mar 26, 2024

misilot commented Mar 26, 2024

BlackDex commented Mar 26, 2024

gigaion commented Apr 6, 2024

stefan0xC commented Apr 6, 2024

BlackDex commented Apr 6, 2024

lukasj98 commented Apr 6, 2024

BlackDex commented Apr 6, 2024

lukasj98 commented Apr 6, 2024

lukasj98 commented Apr 6, 2024

update web-vault to v2024.3.0 (new vertical layout) #157

update web-vault to v2024.3.0 (new vertical layout) #157

Conversation

stefan0xC commented Mar 6, 2024 • edited Loading

stefan0xC commented Mar 9, 2024 • edited Loading

tessus commented Mar 20, 2024

stefan0xC commented Mar 21, 2024

BlackDex commented Mar 21, 2024

BlackDex commented Mar 21, 2024

BlackDex commented Mar 21, 2024

BlackDex commented Mar 21, 2024

BlackDex commented Mar 25, 2024

tessus commented Mar 25, 2024

BlackDex commented Mar 25, 2024

tessus commented Mar 25, 2024

tessus commented Mar 26, 2024

stefan0xC commented Mar 26, 2024 • edited Loading

tessus commented Mar 26, 2024

misilot commented Mar 26, 2024

BlackDex commented Mar 26, 2024

gigaion commented Apr 6, 2024

stefan0xC commented Apr 6, 2024

BlackDex commented Apr 6, 2024

lukasj98 commented Apr 6, 2024

BlackDex commented Apr 6, 2024

lukasj98 commented Apr 6, 2024

lukasj98 commented Apr 6, 2024

stefan0xC commented Mar 6, 2024 •

edited

Loading

stefan0xC commented Mar 9, 2024 •

edited

Loading

stefan0xC commented Mar 26, 2024 •

edited

Loading