enh(settings): Refactor UI for session and app token management

[susnux]

• Resolves: [Bug]: Rename device token → "[object InputEvent]" #42318

Summary

This modernizes the auth token / app password / app token (what ever name you like) UI:

1. Fix some accessibility issues due to not grouped form elements
2. Group API related functions within a store
3. Cleanup and fix styles (e.g. background color on wiped devices is broken on before)
4. Remove deprecated functions

Screenshots

before	after

Checklist

• Code is properly formatted
• Sign-off message is added to all commits
• Tests (unit, integration, api and/or acceptance) are included
• Screenshots before/after for front-end changes
• Documentation (manuals or wiki) has been updated or is not required
• Backports requested where applicable (ex: critical bugfixes)

[emoral435]

Tested, and looked over the code - Looks good to me, really nice PR, however, best for others to also agree with my opinion :) 👍

[TtuxX]

Hi there :) Really nice UI improvement, thanks a lot !
Would there be a possible solution to solve having a too long list with many sessions ?
I have been using Nextcloud for several years and I literally need to scroll for few seconds to arrive to the app password creation field.
Would it be possible to move the app password creation section at the top, and have the history list afterwards ?

[susnux]

I have been using Nextcloud for several years and I literally need to scroll for few seconds to arrive to the app password creation field.

Why are there so many sessions? Do you keep using them? If not they probably should be better revoked? (Maybe we need a batch / select-all-and-revoke action?).

But yes, moving to the top will be possible.

[susnux]

/backport 960bec9 to stable28

[jospoortvliet]

I have been using Nextcloud for several years and I literally need to scroll for few seconds to arrive to the app password creation field.

Why are there so many sessions? Do you keep using them? If not they probably should be better revoked? (Maybe we need a batch / select-all-and-revoke action?).

But yes, moving to the top will be possible.

Hi, did you? This would be really a good move - most ppl probably have a ton of open sessions and having to scroll down for this makes no sense. It should ideally be always on top, not below the sessions.

As a matter of fact, I think this belongs in the 2FA settings... it is for use with 2FA, is it not? @nextcloud/designers

[jospoortvliet]

Sorry, don't mean to be negative, it was very important that this was redesigned, but if it's not made more visible it still won't be used by people. Honestly, there should imho simply be a big button completely on top of the user security settings that says something like "log in with QR code or app password" and when you press it, it shows the QR code you can then just scan with your mobile phone.

Even better, we should simply show the QR code on top of the personal security settings, always, or if that is not possible or horribly insecure, have it shown as a static blurred image you can click to show the actual QR code.

We support this feature, it is prominent on the phone, showing you can scan a QR instead of entering all those details, but no user will realistically ever find WHERE TO SCAN THE QR CODE!

The app password is secondary - show QR first, always. And maybe the app password below it. Steps to log in using QR now:

1. open the 'login' on Nextcloud app on phone
2. Click the small QR code icon & allow video access
3. go to Nextcloud, personal settings/security (note: this is NOT explained on your phone - it should be)
4. scroll all the way down
5. enter a name like 'my phone'
6. choose "show QR code for mobile apps"
7. scan the QR code

It should be:

1. open the 'login' on Nextcloud app on phone
2. Click the small QR code icon & allow video access. Your phone now explains you need to:
3. go to Nextcloud, personal settings/security
4. Scan the QR code (maybe click it to show if it is blurred for security reasons)

That would make it easy and practical to use for many, perhaps even most users...

Another idea: show it also on the "about" screen. Just show the users' qr code and tell them - scan this with your phone - it links to app store, then scan a 2nd time after installing the app and you are logged in. Bet it's not possible, but if it is... we should do it!

[JonasMayerDev]

I agree with @jospoortvliet. It should be easier to get to the qr code. What about having a general QR Code or a shortcut on the /index.php/settings/user/sync-clients page. I don't see much value there but a collection of links. I think this is the best fitting place for an QR Code to quickly log in with a mobile device and has the advantage that it not overcrowds the security page... Just an idea, I have no idea if it is feasible :)