edgedb / edgedb

A graph-relational database with declarative schema, built-in migration system, and a next-generation query language
https://edgedb.com
Apache License 2.0
12.94k stars 398 forks source link

Fix invisible link button in auth emails #7629

Open scotttrinh opened 1 month ago

scotttrinh commented 1 month ago

For the transactional emails that the auth extension sends, some email clients do not correctly render our link buttons.

Reported here: https://discord.com/channels/841451783728529451/1258007610943344650/1258896880025337867

Image

zerosym commented 2 weeks ago

Came across this myself and was just about to write up a new issue. I don't know if the discord user's issue is the same as mine, but this is what's happening in my experience at least.

Suspected issue with the invisible button

If the brand_color configuration in the edgedb auth UI is left as default, the {brand_color} template values evaluate to None, leading to a seemingly invisible button in the email, as the text color is set to white.

image

image

This is problematic since even if you do not enter a brand color the color picker icon defaults to a blue, leading you to believe something is in fact used. It is also not a required field in the UI.

image

I noticed a default value was added in the code for brand_value about 6mo ago, but it doesn't seem to be set. I am using docker image v5.6, which that commit seems to be a part of.

Template output is not a valid css color

Even with a valid brand_color the attribute output is incorrect, as it is not prefixed by a #. This is easily verified in browser dev tools. bgcolor appears to be more relaxed in terms of parsing the value so it ends up being used as a fallback.

image

Bonus points

Finally, if your brand color happens to be a light shade the white text color of the button becomes difficult to read. I would expect it to invert such as what happens with the login form button.

image

image

Related code

https://github.com/edgedb/edgedb/blob/9d6f484ea8a14a7d1f10c7a334c765fa34924337/edb/server/protocol/auth_ext/ui/__init__.py#L851-L863