Add room intro warning when e2ee is not enabled

[germain-gg]

Fixes element-hq/element-web#15675

This message is triggered as part of RoomIntro (it will be more visible once #5887 lands) and only is displayed if:

• It is a private room
• The server is configured so that private conversation should be encrypted by default
• The current room is not encrypted

@matrix-org/design keen to hear your thoughts on this as I could not find any "inline" alert to explain a potentially dangerous action. Everything happens in a modal which seemed too intrusive for this scenario in my opinion.
More than happy to tweak this to make sure that it provides the most consistent experience possible

[jryans]

Seems fine code wise, though I suspect Design will want to tweak this one way or another.

[nadonomy]

@gsouquet after exploring some options I ended up arriving at this:

https://www.figma.com/file/ccOtQyqevLDXE6UktupgN3/E2E-Room-Warnings?node-id=4%3A3188

It made sense to me to use the same contextual warnings we do to communicate encryption state, and by persisting it's place in the timeline we can afford to be more verbose in the copy, which let's us (1) build trust & confidence (2) not alarm the user & (3) offer help on how to remedy.

Let me know if you have any thoughts!

[germain-gg]

Here is a screenshot of the implementation on Element Web (cc @nadonomy)

[nadonomy]

@gsouquet thanks! This is looking great.

I have some copy requests actually with the benefit of fresh eyes. 😀 Able to make the language more terse and front-load sentiment clearer.

Would you mind updating the title to:

End-to-end encryption isn't enabled

And then the body copy to:

Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites. Enable encryption in Settings.

[t3chguy]

Could we please avoid relying on internal/private fields, it makes Typescript conversions that bit riskier. Not so bad here as TS caught it but if it was in JS 💥