Feature #953
closed
Profile picture in "personal data" tab and identityInfo (info cards)
Added by Petr Hanák almost 7 years ago.
Updated over 3 years ago.
Estimated time:
(Total: 64.00 h)
Description
Target:
Easy to upload profile picture
Required functionality:
- User can upload image if he has a permission
- User can upload image to others if he has permission
- If no profile picture is chosen, there is no picture at all
- Miniature should be in "Personal data" tab and also on identityInfo (info cards)
- User can upload image thru dragging to dropzone or by clicking on it
- Control of image suffix
- Control if it's actually an image
- When uploading to server there will be possibility of automatic resizing to smaller size
- Possibility of synchronisation from the source system
- Possibility of putting image into system (jpegPhoto attribute in LDAP etc.)
This ticket will be divided into following phases. It will be controlled at the end of each one to keep code and implementation clean.
1) Upload and display image
2) Miniatures
3) IdentityInfo (info cards)
4) Permissions
5) Synchronisation/provisioning
- Status changed from In Progress to Needs feedback
- Assignee changed from Petr Hanák to Radek Tomiška
Here is implementation of first part.
I had to do a lot of study about our architecture and technologies in CzechIdM, so it took me a lot of time.
1) Upload and display image
I used IdmAttachmentManager for working with data. For now identity has got only the id of one image.
When you upload new picture, the old one is deleted so you can do it many times.
Picture is children element of dropzone, so you can drop another on it or just click it.
Commit:
https://github.com/bcvsolutions/CzechIdMng/commit/4d649f50a6e87b52d6ac7b4e524136a7df457362
Next required functionality:
- collective import of images from customers file system
- connecting images to identities will be automatic with id or username (every image should have identificator in its name for collective upload and connect)
Comments from meet up
- show supported formats (e.g. when unsuccessful image upload)
- keep original image (original size) = possibility of editing cut out in the future
- tests - upload from more persons at one moment
- how long does it take to display profile with picture for more people at one moment
- edit buttons only on mouse over
- If the user doesn't have rights for image handling and no picture is uploaded on his profile, don't show anything on his profile
- Don't show delete button when uploaded picture but user doesn't have rights for image delete
- configurable multipart file size limit? + handle size error message (on BE before file is received in REST controller)
(there is no limit from tomcat in synchronization, It's important to handle this situation as well)
- picture is smaller than configured image pixel size = ?
a) message about low quality of image
b) upload low quality image
c) upload image but show original size (small square in the center)
- configurable thumbnail size (pixels)
- Try to find React component for image editing before showing on profile
- add file name to "fake image" error
- Assignee changed from Radek Tomiška to Petr Hanák
- Assignee changed from Petr Hanák to Radek Tomiška
Functions implemented:
- User can upload image if he has a permission
- User can upload image to others if he has permission
- If no profile picture is chosen, there is no picture at all
- Miniature should be in "Personal data" tab and also on identityInfo (info cards)
- User can upload image thru dragging to dropzone or by clicking on it
- Verify image suffix
- Image Cropper component for image edit and crop
- Cropper is set to cut 1:1 and resize to 300x300px after cropping so the problem with spring rest upload limit is solved
- Restyling of identity info cards - I chose centered style and It would be nice to think about restyling other info cards in this style
- Info cards has got hide-able email and phone attributes when It's not filled in profile and default image
To improve:
- dynamic behavior of aesthetics - dropzone should fill the square place on profile
- when you put idm to larger resolution / monitor, the behavior of profile is awful
- when user can't upload image, he shouldn't see dropzone
- when you first open IdM, there is not an image on info card
- control of file when it has got image suffix but It's not actually an image (I was verifying image format on BE as well as cropping image, but not sure how to do it with actuall solution - verify on FE before it goes to Cropper)
- my suggestion for identity info card on profile is to stay thin even when resizing window to smaller size -> its getting a lot wider which is not looking good.)
Branch:
https://github.com/bcvsolutions/CzechIdMng/commits/phanak/953-profile-picture?before=b7269f1c603bae21e7c435c230b02b5d56dbe7cb+35
- Category changed from Identities to Profile
- Status changed from Needs feedback to In Progress
- Assignee changed from Radek Tomiška to Petr Hanák
- Target version set to Malachite (9.0.0)
I did test, review and refactoring. I fixed all issues above and:
- created new entity for identity profile (IdmProfile)
- security policies are implemented now (SelfProfileEvaluator, ProfileByIdentityEvaluator) => is possible to edit picture, even if identity attributes cannot be edited (e.g. i can edit my picture but not my username)
- frontend was improved - picture is loaded only once, added show loadings, fixed refreshes etc.
- business logic was moved from controller to service (this is the main point from feedback => business logic has to be in service layer)
- i fixed formatting issues on frontend
- i fixed uploaded / dowloaded image mimetype (it's not hard coded now)
- i fixed removing image, when identity detail is saved
- added test for referential integrity
- new entity added to ERD diagram
- ImageUtils removed - unused methods, wrong package
Commit with review notes:
https://github.com/bcvsolutions/CzechIdMng/commit/682c17aff8998609b640ab297990aff3cde26fae
Merged into develop.
Remains:
- add integration test for created services (IdmProfileService) and security evaluators (above) etc (check coverage for new services).
- add documentation + for created events (for profile) and security evaluators (+ update default user role setting - e.g. profile autocomplete is needed)
- #1028 - add please simple validation on backend to image size only and file name extension (the same as on frontend).
- #1029: 5) Synchronisation / provisioning
This ticket can be closed, after test and documentation will be added. Other things could be implemented in sub tasks .)
- Target version changed from Malachite (9.0.0) to Moonstone (9.1.0)
- Target version changed from Moonstone (9.1.0) to Morganite (9.2.0)
- Target version changed from Morganite (9.2.0) to Onyx (9.3.0)
- Status changed from In Progress to Closed
- Target version changed from Onyx (9.3.0) to Morganite (9.2.2)
- Related to Task #1774: Contract garantee isn't seperate by comma added
Also available in: Atom
PDF
