Change profile image

[euanmillar]

AS a user I WANT to be able to change my profile icon SO THAT i can personalise my account.

Description Allows a user to update their profile image

Mobile has a small window to drag and place image

Users can increase the size and drag to position.

Minimum size is the width of the circle. They can't drag beyond. Or resize beyond.

Design https://www.figma.com/file/YsucvwEW6lGAOiW9jUp7Cyiw/7.-Settings?node-id=229%3A4111

Copy https://www.notion.so/opencrvs/10-Profile-image-ed5faaf30d6944f88a2fde29f80fa73b

Acceptance criteria GIVEN I am on the settings page WHEN I click on the profile image THEN show the file browser with file types restricted to jpg or png.

GIVEN I have chosen an image, if the file size is less than 5MB THEN show the modal to crop and resize the image

Clicking Change image should re-open the file browser

The crop and resize feature can be built using a React OpenSource library if you wish, however it should be a recent and well supported library with high number of contributors and preferably TypeScript - but we can discuss. The below user experience is preferred but not necessarily essential.

The crop and resize feature can be built entirely in client > components, not packages > components

Dragging

GIVEN my image has been uploaded WHEN I drag on the image THEN move the image in the desired location

GIVEN I am dragging an image WHEN i drag the image to the edge of the circle THEN stop the image from being dragged any further

Resizing

GIVEN I am sliding the resize bar WHEN I am incresing/decreasing the size of my image THEN increase and decrease the size of the image

GIVEN I am sliding the resize bar WHEN I am decreasing the size to the width of the circle THEN stop the image from being decreased any further

Set profile image

GIVEN I have positioned my image WHEN I click change THEN close the modal and set their profile image

When the user clicks "Apply", show the loading animation

If the user has no internet connection, the Apply button must be disabled.

Default avatar already exists, but if the user has internet connectivity, then replace the default with an avatar using user initials from UI Avatars API

• [x] Research and find a image crop / resize lib
• [x] Build the UI in the client - estimation based on using a lib ( Image crop / resize and loader ) - 3
• [x] If the user has internet connectivity replace all avatars that have not been customised by replacing the svg default with https://eu.ui-avatars.com/avatar-placeholder/ - 2
• [x] Create a saveAvatar resolver in the gateway in the features > user > root-resolvers.ts file. It should send the image data to user-mgnt service only if the image file type and size are acceptable. The image should be compressed to be as small as possible. If there are any unsupported types, throw an error. - 2
• [x] In the user-mgnt service create a saveAvatar handler that updates the user model in a new optional field to store the base64 avatar - 2
• [x] Update all user-mgnt handlers to include the optional field in the TypeScript response types (getUser, getUsers etc ...) and also update in the Joi validations. - 1
• [x] Update the GraphQL schema for user and all resolvers such as getUser, searchUsers etc to include the optional avatar. I dont think we need to do this for the System Admin Team Create / Edit User forms as sys admin will not update the avatar. - 1
• [x] In the client we need to render the profile images in Settings and in the Header, and in the Team section Office view and Audit view for sys admins and registrars - 2

[Zangetsu101]

@jpye-finch Any suggestions on where to put the error messages?

[jpye-finch]

@Zangetsu101 errors such as failed to upload?

[Zangetsu101]

@jpye-finch image type not supported or image size exceeded.

[SyedaAfrida]

bug:

1. Default avatar do not appear immediately when there is no internet connection. It appears after clicking any tab

2. Zoomed image is uploaded and do not have option to decease size of what is uploaded

3. Showing apply button and not disabled for invalid image. Should be saved button (disabled)

4. Profile icon is updated after refresh in settings page

5. Sometimes default avatar shows for some users in team tab even when there is internet connection

6. "Profile image successfully updated" toast keeps on appearing in Settings page. This bug is only found in farajaland-staging . This is not occuring in farajaland-qa

Concern: there is no option to delete an image

[Zangetsu101]

@SyedaAfrida

1. This is actually the expected behavior as the ui-avatar was already loaded when the user was online. So if the user goes offline afterwards it will still be there.
2. This is kinda limited by the library we are using so if we want to change this I guess we will need a separate improvement ticket for that.
3. I had actually missed that one. Fixed in #2748.
4. Nice find! I was also able to make some improvements when fixing this. Similarly fixed in #2748.
5. I think this is related to internet connectivity as the default avatar is a fallback for the ui-avatar(as in the avatar with the user's initials)
6. I wasn't able to reproduce this.

[azaworld]

https://user-images.githubusercontent.com/70468099/171614192-8dcd88be-e3ca-4b10-afa7-bf6382f18883.mp4

[azaworld]

https://user-images.githubusercontent.com/70468099/171614242-9244aa50-7f86-4b73-95d7-a6b81e93dbf9.mp4

this is tested. waiting for review though it's passed. @anny320

[anny320]

completed