profile photo for users

[franpb14]

The feature #627 is finished, now the users can upload and crop their phots from their computer. I used "ActiveStorage" to store the photos and is configured to use /storage on local, to crop the photos I used "MiniMagick" and JavaScript. For the resize I used "image_processing".

Here is the video with the feature working:

Issue_627_PC.mp4

And here is the video with the feature working on mobile (I implemented more front-end, so I saw it as appropriate):

Issue_627_mobile.mp4

Note: the responsive works like this in develop that's why I haven't changed it, it seems that reaching the xs size doesn't collapse as it should.

closes #627.

[franpb14]

@markets the problem with codeclimate coverage is that "avatar.js" is not covered?

[markets]

hello @franpb14 looks cool! I just made a quick review and I have some comments:

• the cropper panel seems a bit distorted in some axis (bottom & right), right? This looks a bit weird, can we fix it 🙏?
• for the crop in Ruby, can we use directly the https://github.com/janko/image_processing API? Seems more readable compared to raw mini_magick IMO

[franpb14]

• the cropper panel seems a bit distorted in some axis (bottom & right), right? This looks a bit weird, can we fix it 🙏🏼 ?

Yes, I was looking for a way to mark that dragging from those edges made the resize, but yes, it looks a bit weird. Do I just put them normal or do I look for a way to mark it? @markets

[markets]

How it will look "normal"?

[franpb14]

As top and left edge

[markets]

Ah! got it, then I'd say yes 😃

[markets]

@franpb14 I pushed some clean up here: 608680f

Pending stuff before testing:

• Prepare ENV vars for AWS in infra: https://github.com/coopdevs/timeoverflow-provisioning (AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, AWS_BUCKET, AWS_REGION) for staging and production

@sseerrggii maybe Pau can help us with that?

[sseerrggii]

@sauloperez could you help with that?

Prepare ENV vars for AWS in infra: https://github.com/coopdevs/timeoverflow-provisioning (AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, AWS_BUCKET, AWS_REGION) for staging and production

[sseerrggii]

it will work on staging? or I should wait @markets ?

[markets]

We should wait @sseerrggii, we'll need to create the bucket and provision the ENV vars first.

[sauloperez]

@sseerrggii and I thought this could be a good fit for @konykon with the help of @danypr92

[konykon]

@sseerrggii and I thought this could be a good fit for @konykon with the help of @danypr92

Ok we will do it.

[konykon]

@sseerrggii @markets ENV vars for AWS added.

[markets]

Nice! thanks @konykon 👍🏼

@sseerrggii if staging server is provisioned, we can deploy this branch to staging.

[sseerrggii]

When I tested on staging I got an error, details from Rollbar:

MiniMagick::Error: You must have ImageMagick or GraphicsMagick installed (Most recent call first)
Show 15 non-project frames
File /var/www/timeoverflow/releases/20210602101248/app/controllers/users_controller.rb line 145 in crop_image_and_save
File /var/www/timeoverflow/releases/20210602101248/app/controllers/users_controller.rb line 74 in update_avatar
Show 245 non-project frames

Maybe we need to install ImageMagick on staging and production too? @markets

[markets]

Ah right! we'll also need ImageMagick in our servers.

[sauloperez]

#classic 😂

[sauloperez]

sounds like something you could also do if you have some room @konykon . It's basically installing the imagemagick package through apt. 👍 ?

[konykon]

When I tested on staging I got an error, details from Rollbar:

MiniMagick::Error: You must have ImageMagick or GraphicsMagick installed (Most recent call first)
Show 15 non-project frames
File /var/www/timeoverflow/releases/20210602101248/app/controllers/users_controller.rb line 145 in crop_image_and_save
File /var/www/timeoverflow/releases/20210602101248/app/controllers/users_controller.rb line 74 in update_avatar
Show 245 non-project frames

Maybe we need to install ImageMagick on staging and production too? @markets

@sseerrggii Installed, can you try again?

[sseerrggii]

Yes! Seams that ImageMagick is installed now.

Now I get this error

Aws::S3::Errors::NoSuchBucket: The specified bucket does not exist (Most recent call first)

In AWS what I see this

[markets]

@sseerrggii @konykon now that I see this screenshot, I'd like to suggest to create 2 different buckets:

• timeoverflow_staging
• timeoverflow_production

[sseerrggii]

@markets I created to buckets but with "-" insted of "_" because it's a not allowed character

• timeoverflow-staging
• timeoverflow-production

What is the next step?

[markets]

ok! thanks @sseerrggii! Now, ideally the timeoverflow-provisioning repo should reflect this change, and provide those ENV vars taking into account we have separated buckets for each environment (IMO the bucket names don't need to be encrypted).

[konykon]

@markets I adapted the bucket and region variables but the same error appears.
Aws::S3::Errors::NoSuchBucket: The specified bucket does not exist
I see AWS suggests to use an IAM User or Role to access S3 Storage Lens dashboards, in order to do that you must grant the requisite IAM permissions to a new or existing IAM user.
https://docs.aws.amazon.com/AmazonS3/latest/userguide/storage_lens_iam_permissions.html
I created a user but it doesn't allow me to login.

After the last intent another error appeared as well, it seems to be related with the Ruby app.
ActiveStorage::FileNotFoundError: ActiveStorage::FileNotFoundError

[markets]

Maybe we just need to re-deploy (or re-start) the app?

Because the Rails master process doesn't know about those new ENV vars added (they are read here at boot time: https://github.com/coopdevs/timeoverflow/pull/635/files#diff-188abe2a4493506d81577fbbee0b279b889e59f50d509402fbbfb620c8e58780R9-R14), so probably a process re-start will pick them up.

[sseerrggii]

That's it @markets restarting the app works fine! 🎉

[sseerrggii]

One more thing, in production the image is saved on S3 but it's not showing properly

Rollbar says

Aws::S3::Errors::BadRequest: Aws::S3::Errors::BadRequest

I checked the buckets and both staging & production have the same configuration, what do you think @konykon @markets ?

[markets]

👋🏼 @sseerrggii @konykon I just checked in production, and I got this error message:

So, it seems a miss-configuration of the bucket region?

Error parsing the X-Amz-Credential parameter; the region 'us-east-1' is wrong; expecting 'eu-west-3'

Not sure why 🤔 , as this seems ok: https://github.com/coopdevs/timeoverflow-provisioning/pull/192/files

Did you provision the production server with latest changes?

[sseerrggii]

Yes, we re-provision production and now works fine!!

Thanks @markets @konykon and @franpb14

It was a long journey, but we made it! 💥

[markets]

Thank you so much to everybody involved in this project! 👏🏼 ⌛ 🚀