[SG-58] Avatar color selector #3691

BrandonM-Bitwarden · 2022-10-05T01:14:22Z

Type of change

- [ ] Bug fix
- [X] New feature development
- [ ] Tech debt (refactoring, code cleanup, dependency upgrades, etc)
- [ ] Build/deploy pipeline (DevOps)
- [ ] Other

Objective

We want to add the ability for users to select the avatar color that will represent an account in the header of the app, so that they can better distinguish between accounts with similar or the same initials.

Code changes

Backend: bitwarden/server#2330

+ dynamic-avatar.component – A component that encapsulates the bit-avatar component and listens for changes in the avatar color values via the AvatarService.
+ selectable-avatar.component – A component that encapsulates the bit-avatar component and reacts to click events by toggling their selection state and firing events.
~ navbar.comonent – Changed bit-avatar to dynamic-avatar so it can react to changes.
+ change-avatar.component – The components that gets put into a modal and allows users to pick avatar colors as needed.
~ profile.component - Changed bit-avatar to dynamic-avatar so it can react to changes and added a button to open the change-avatar modal.
~ loose-components.module – Added needed component references.
~ organization-name-badge.component – Made color rely on a state lookup and fallback to default.
~ messages.json – language stuff.
~ jslib-services.module – Added new services references.
+ avatar-update.service – Added service that handles loading and saving colors from state and api along with emitting events.
~ api.service – Added new avatar color API endpoints.
~ state.service – Added new avatar color state endpoints.
~ utils.ts – Added RegEx Validator for hex colors.
~ account.ts – Added color property.
+ update-avatar.request – Added request body model for API endpoint save call.
~ profile.response – Added color property.
~ avatar.component – Added more sizes and title input.

Screenshots

Button to open modal

Avatar change modal

Custom color picker

Avatar colors

Colors used elsewhere!

Before you submit

Please add unit tests where it makes sense to do so (encouraged but not required)
If this change requires a documentation update - notify the documentation team
If this change has particular deployment requirements - notify the DevOps team

…nto change/SG-58

differsthecat

I'm not seeing this change here, but can you update the OrganizationNameBadgeComponent to use the color selected by the user?

…nto change/SG-58

Hinton · 2022-10-24T09:41:25Z

I skimmed the PR, since I've migrated the old avatars to the new component library component. Some things to consider:

Should the users custom color be visible to everyone or only themselves?
- If only for themselves, how do we handled it in user lists like organization people?
- If not only for themselves, we need a way to send in the required data vs fetching it from state
To me it feels like we should be building a new "smart" component on top of the avatar component. The avatar component currently handles a few different use cases.
- Their own
- Other users
- Organizations
- Providers
Ideally components in the component library should depend on as little as possible and be purely presentational.

differsthecat

There's a failing build on CLI because of the addition of avatar service to sync service; I'd try setting the value in state service instead of injecting the avatar service here.

…nto change/SG-58

Fixed

differsthecat

Looks good @BrandonM-Bitwarden !

libs/common/src/services/account/avatar-update.service.ts

apps/web/src/app/components/dynamic-avatar.component.ts

Relevant blockers have been resolved. Thanks.

* SG-920 + SG-921 * Update change-avatar.component.html * Update selectable-avatar.component.ts

… the Account Settings menu (#4359) * SG-926 * fix: comment * fix: undo * fix: imp

trmartin4 · 2023-01-01T15:27:44Z

Approving this to be PRed into master, as it has been fully tested in the changes/SG-58 branch.

* changes * merge * undo * work * stuffs * chore: added custom color picker * oops * chore: everything but the broken sink * picker v2 * fix: cleanup * fix: linty * fix: use tailwind * fix: use tailwind * undo: merge error * remove: old color picker * fix: merge issue * chore: use input vs component * fix: move logic out! * fix: revert changes to bit-avatar * fix: cleanup undos * feat: color lookup for "me" badge in vault * fix: naming stuff * fix: event emitter * fix: linty * fix: protect * fix: remove v1 states work: navatar * fix: big * fix: messages merge issue * bug: differing bg colors for generated components * feat: added sync stuff * fix: cli * fix: remove service refs, use state * fix: moved from EventEmitter to Subjects * fix: srs * fix: strict stuff is nice tbh * SG-920 + SG-921 (#4342) * SG-920 + SG-921 * Update change-avatar.component.html * Update selectable-avatar.component.ts * [SG-926] [SG-58] [Defect] - Selected Avatar color does not persist in the Account Settings menu (#4359) * SG-926 * fix: comment * fix: undo * fix: imp * work: done with static values (#4272) * [SG-35] (#4361) Co-authored-by: Todd Martin <[email protected]>

BrandonM-Bitwarden and others added 11 commits September 5, 2022 23:59

changes

d50b9e1

Merge branch 'master' into change/SG-58

741f6a5

merge

7d06496

undo

9217788

work

208aa25

stuffs

ca7535f

chore: added custom color picker

4898ccb

oops

85d0820

chore: everything but the broken sink

4fad306

picker v2

23daae6

Merge branch 'master' into change/SG-58

30b8356

BrandonM-Bitwarden added enhancement web labels Oct 5, 2022

BrandonM-Bitwarden self-assigned this Oct 5, 2022

BrandonM-Bitwarden added 2 commits October 4, 2022 21:46

Merge branch 'change/SG-58' of https://github.com/bitwarden/clients i…

4260e09

…nto change/SG-58

fix: cleanup

4821f3c

BrandonM-Bitwarden requested a review from a team October 5, 2022 01:57

BrandonM-Bitwarden mentioned this pull request Oct 5, 2022

[SG-58] Avatar color selector bitwarden/server#2330

Merged

BrandonM-Bitwarden requested review from addisonbeck and differsthecat October 11, 2022 18:46

BrandonM-Bitwarden added 2 commits October 12, 2022 12:57

fix: linty

d42b681

Merge branch 'master' into change/SG-58

9a53a6d

differsthecat reviewed Oct 13, 2022

View reviewed changes

BrandonM-Bitwarden added 6 commits October 13, 2022 14:30

fix: use tailwind

ea06342

fix: use tailwind

6d042c3

Merge branch 'change/SG-58' of https://github.com/bitwarden/clients i…

e092824

…nto change/SG-58

Merge branch 'master' into change/SG-58

a123118

undo: merge error

94ccbc8

remove: old color picker

eb71f36

differsthecat previously requested changes Nov 16, 2022

View reviewed changes

BrandonM-Bitwarden added 3 commits November 16, 2022 15:59

fix: cli

627a8ba

fix: remove service refs, use state

50f523c

Merge branch 'change/SG-58' of https://github.com/bitwarden/clients i…

2372db3

…nto change/SG-58

differsthecat previously approved these changes Nov 17, 2022

View reviewed changes

Hinton previously requested changes Nov 17, 2022

View reviewed changes

libs/common/src/services/account/avatar-update.service.ts Outdated Show resolved Hide resolved

apps/web/src/app/components/dynamic-avatar.component.ts Outdated Show resolved Hide resolved

fix: moved from EventEmitter to Subjects

4f14316

BrandonM-Bitwarden dismissed differsthecat’s stale review via 4f14316 November 21, 2022 02:40

differsthecat previously approved these changes Nov 21, 2022

View reviewed changes

trmartin4 added the needs-qa Marks a PR as requiring QA approval label Nov 28, 2022

Merge branch 'master' into change/SG-58

d23c8fb

BrandonM-Bitwarden dismissed differsthecat’s stale review via d23c8fb November 29, 2022 01:14

BrandonM-Bitwarden added 6 commits November 28, 2022 20:36

fix: srs

2904f47

fix: strict stuff is nice tbh

0c212a6

SG-920 + SG-921 (#4342)

7c36280

* SG-920 + SG-921 * Update change-avatar.component.html * Update selectable-avatar.component.ts

[SG-926] [SG-58] [Defect] - Selected Avatar color does not persist in…

fc45270

… the Account Settings menu (#4359) * SG-926 * fix: comment * fix: undo * fix: imp

work: done with static values (#4272)

569fe07

[SG-35] (#4361)

f2553df

Merge branch 'master' into change/SG-58

a0238b0

trmartin4 self-requested a review January 1, 2023 15:28

trmartin4 approved these changes Jan 1, 2023

View reviewed changes

trmartin4 merged commit d41b3b1 into master Jan 1, 2023

trmartin4 removed the needs-qa Marks a PR as requiring QA approval label Jan 1, 2023

BrandonM-Bitwarden deleted the change/SG-58 branch March 16, 2023 21:33

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[SG-58] Avatar color selector #3691

[SG-58] Avatar color selector #3691

BrandonM-Bitwarden commented Oct 5, 2022 •

edited

Loading

differsthecat left a comment

Hinton commented Oct 24, 2022 •

edited

Loading

differsthecat left a comment

differsthecat left a comment

trmartin4 commented Jan 1, 2023

[SG-58] Avatar color selector #3691

[SG-58] Avatar color selector #3691

Conversation

BrandonM-Bitwarden commented Oct 5, 2022 • edited Loading

Type of change

Objective

Code changes

Screenshots

Before you submit

differsthecat left a comment

Choose a reason for hiding this comment

Hinton commented Oct 24, 2022 • edited Loading

differsthecat left a comment

Choose a reason for hiding this comment

differsthecat left a comment

Choose a reason for hiding this comment

trmartin4 commented Jan 1, 2023

BrandonM-Bitwarden commented Oct 5, 2022 •

edited

Loading

Hinton commented Oct 24, 2022 •

edited

Loading