[Story] Improve user guidance during QR code login

[mxandreas]

Description

Currently the scanning the QR code with EX and showing the QR code on EW device for login are only available on the nightly builds. The reason for that is that MAS (which is a prerequisite for the QR code login) is not yet available in most homeservers.

However, it is assumed that deploying MAS on various homeservers will span across a long period of time (and some homeservers may not ever get it), it is desired to make it more clear for the users that this function depends on something their homeserver does not (yet) have.

In iterations with @amshakal @americanrefugee we landed on the following:

• On EX intro screen, add a subtle hint: "Only available if your account provider supports it"
• On EW,
  • Always show the Avatar > Link new device menu item, and if not supported, then instead of showing the QR code, show that it is not supported (designs below).
  • In the Settings > Sessions show always the Link new device section but disable the Show QR code button when not supported and add a text that it is not supported (designs below).

This would allow us to release the QR code login in the publish/production versions.

Acceptance criteria

No response

Leads

• Tech: @manuroe
• Design: @amshakal

Size estimate

S

Dependencies

• None

Out of scope

• Nothing

Open questions

Questions

Beta Give feedback

No tasks being tracked yet.

Subtasks

Android

Beta Give feedback

1. [Task] Show a hint that QR code login is only available when the account provider supports. element-x-android#3632
   T-Task +1
   
2. Enable Login with QR code in release builds. element-x-android#3646
   PR-Change Z-NextRelease +2

iOS

Beta Give feedback

1. [Task] Show a hint that QR code login is only available when the account provider supports it element-x-ios#3385
   T-Task +1
2. Show the Login with QR Code button. element-x-ios#3392
   pr-feature +1

Web

Beta Give feedback

1. Always show link new device flow even if unsupported matrix-react-sdk#147
   T-Enhancement X-Upcoming-Release-Blocker +2
   
2. Make the "Link new device" available in production release: Available since Oct, 22nd in https://github.com/element-hq/element-web/releases/tag/v1.11.82

Sign-off

Android

• Design sign-off on completion
• QA sign-off on completion
• Product sign-off on completion

iOS

• Design sign-off on completion
• QA sign-off on completion
• Product sign-off on completion

[pmaier1]

Makes sense to me (apart from the fact that only a tiny fraction of users out there use a homeserver that actually supports QR code login 🤷‍♂️).

[mxandreas]

@americanrefugee Has done the design updates for both EX and EW side:

• iOS
• Android
• Web

[bmarty]

I have added the string screen_qr_code_login_initial_state_subtitle to localazy (@element-hq/element-x-ios-reviewers)

[mxandreas]

For visibility. It was confirmed that the desired changes on EW take more effort (and can't be released as part of the security release) due to the fact that we can't simply un-lab all the functionality (and need to do it just for the QR code parts).

Since it is now known that this is overall feasible (just delayed by a week), I proposed we continue with the release of EX as planned (e.g. showing the QR code login button), given we have a warning/hint that it needs to be supported by the account provider.

cc @daniellekirkwood @manuroe @t3chguy @pmaier1

[manuroe]

Changes in EW are available in prod since yesterday. We can close this work.
Thanks all!