Add user profile picture

[OmeGak]

Partially addresses #936.

This PR adds:

• A file upload field in the user personal details form.
• Display of the profile picture in the user profile dashboard.

Functional testing instructions

Upload profile pic:

1. Go to user profile settings (user/<user_id>/profile/)
2. Upload a file from your computer
3. Verify that the picture is uploaded successfully
4. Verify that the profile picture is displayed in the user profile dashboard (user/<user_id>/dashboard/)

Delete profile pic:

1. Go to user profile settings (user/<user_id>/profile/)
2. Delete the profile picture
3. Verify that the profile picture is not displayed in the user profile dashboard (user/<user_id>/dashboard/)

Screenshots

[ThiefMaster]

When testing with my octocat avatar it somehow got completely destroyed during the conversion. Not sure why this happened though...

It also looks a bit strange right now if the picture is smaller than the circle where it's displayed.

---

When I tried it with a non-transparent version it worked fine btw and looks great!

[ThiefMaster]

Regarding the upload UI, would it make sense to have a separate box for it on the page instead of including it in the "Details" box?

[OmeGak]

When testing with my octocat avatar it somehow got completely destroyed during the conversion. Not sure why this happened though...

I'll look into this. Probably something that I need to pass to PIL to preserve the transparency.

Regarding the upload UI, would it make sense to have a separate box for it on the page instead of including it in the "Details" box?

I've tried a few variations, but I'm not crazy about any of them.

	label	no label
top
bottom

[ThiefMaster]

True. Doesn't look super amazing. Any other ideas here @indico/development-team?

[panagiotappl]

I personally like both the top label and bottom label ideas. IMO, they look good. I would probably expect to see that on top rather than the bottom part of the page.

[OmeGak]

I personally like both the top label and bottom label ideas. IMO, they look good. I would probably expect to see that on top rather than the bottom part of the page.

Two concerns:

• What would you do with the Block User button? I would not leave it on the bottom box, but putting it on the Profile Picture box looks semantically wrong.
• The label looks redundant, as the box has the same title. We could change the label or box title to something else, but at that point we'll be contorting the UI just for the sake of having two boxes.

Personally, I would just leave it as it is, with a single box.

[panagiotappl]

Maybe it's better to leave it in the same box after all. I don't think it looks bad if it's in the same box anyway. I don't see why the picture cannot be in basic details.

[panagiotappl]

I'm sorry. I accidentally clicked "Close and comment" . :(

[OmeGak]

@ThiefMaster, upload of transparent images is now working fine. I was removing the alpha channel. This fixes it:

- if pic.mode != 'RGB':
+ if pic.mode not in {'RGB', 'RGBA'}:
     pic = pic.convert('RGB')

[plourenco]

I like the top options, I'm not sure why but it seems straightforward to have a picture as one of the first details to be edited.

Apart from that, perhaps I could suggest having the image squared (side-by-side) with the details inputs? The same way we're now using in #4408.