🎨 Improve design and process of adding clients using qr code

[jospoortvliet]

A recent improvement to app token management in #42334 triggered me to create an issue.

We should make the QR code that can be used to log in with an app more visible. The mobile apps show a nice scan-qr logo on their login page, and all the user has to do is...

0. Open a Nextcloud mobile app and notice the QR code icon. Clicking it just gives you the camera, so now you have to...
1. go to Nextcloud, go to settings/user/security (note: this is NOT explained on your phone - it should be)
2. scroll all the way down
3. enter a name like 'my phone'
4. choose "show QR code for mobile apps"
5. scan the QR code

Users who go to, for example, /settings/user/sync-clients will have to search a little longer, as they won't find anything.

Now I propose two solutions.

1. We simplify the process and
2. We explain the process.

Simplification

The first, simplification, is for the server. We can do a few things:

• Put the QR code on top of the security page with a name that suggests to the user that there they can scan a QR code. I propose to just show the QR code on top, but if that is technically or security-wise difficult, show a blurred QR code that 'reveals itself when clicked' AKA, gets generated on click.
• Put the QR code on the sync clients user settings in Nextcloud
• Put the QR code in the first setup page/welcome wizard/about thingy (not sure what the name is...)

Explanation

Second, the explanation. I suggest that the mobile client don't immediately open the camera when the QR code is clicked, but either show the camera feed in the bottom-half of the screen and a description of how to get the QR code to show in the top half, or first show how to get the QR code full-screen and then, after the user clicks OK, show the camera.

REF #42334 and the comments there.

[tempestrock]

I very much second this. Just found this entry because I had no clue what to do when the camera opened on my phone.