fix(settings): Provide visual feedback 4 encryption toggle

[nfebe]

Show visual feedback if user clicks on encryption toggle when it cannot be activated.

Demo

feedback-no-encryption-module.webm

Other improvement

• Object.entries([]) would return an empty array, that leads to the find
• return undefined.
• encryptionReady and encryptionEnabled also returns undefined when no encryption module is available or functional (I guess).

Resolves : #48829

[skjnldsv]

Can't we just disable the checkbox-switch and show a warning note?

[nfebe]

Can't we just disable the checkbox-switch and show a warning note?

That is one option, I am just did this around the feedback from a user.... cc: @marcoambrosini @jancborchardt

Plus that has the limitation that we have to display the warning at all times somewhere on the page as disabled components do not respond to events.

[marcoambrosini]

Can't we just disable the checkbox-switch and show a warning note?

I think this is the way to go @nfebe

--
In general we don't want hover feedback or cursor: pointer on a switch that cannot be activated.

[nfebe]

This means we would display the warning around (ontop, beside, under) the toggle? cc; @marcoambrosini

[marcoambrosini]

Usually we place warning text underneath the inputs. We have this built into the password input component for example. Maybe it would even make sense to include this in the component? @skjnldsv wdyt?

[nfebe]

[marcoambrosini]

Hi Fon,

a couple of question:
*The switch still does not look disabled can we implement that look?

• What do you mean by "Please enable an encryption module or app"? I mean what's the difference between them?

[nfebe]

*The switch still does not look disabled can we implement that look?

Would that be blurring it out? What is the look?

What do you mean by "Please enable an encryption module or app"? I mean what's the difference between them?

The encryption system allows support for different encryption modules. The "default encryption module" is implemented in the app "Default encryption module".

So in this case they are the same thing hence the use of OR.

[skjnldsv]

Would that be blurring it out? What is the look?

use :disabled="true".
Right now it looks off but not disabled. If it cannot be enabled because encryption is not ready, it should be shown as this:

[marcoambrosini]

The encryption system allows support for different encryption modules. The "default encryption module" is implemented in the app "Default encryption module".

Perfect, then for the text I think we should use:
"Encryption is not available. Please enable the Encryption app or an encryption module"
Both for "encription app" and "encryption module" I think we should add links to the documentation. Or 1 link for the whole sentence is also ok if we have a unified documentation about all the possibilities here.

[nfebe]

use :disabled="true".
Right now it looks off but not disabled. If it cannot be enabled because encryption is not ready, it should be shown as this:

Well, I was asking because that is what was there before this was ever a pull request and my initial changes removed that, and then added the timeout effect but it as was restored and just the notice added under the toggle.

server/apps/settings/src/components/Encryption.vue

Line 11 in 61bac10

:disabled="encryptionEnabled"