[FLORA-288] Hide 2FA/TOTP input on login page by default

[kd-e]

Proposed changes

• Made the 2fa input hidden by default, visible on checkbox change
• Fixed the Alpine js binding for ariaControls_: aria-controls can be just a regular attribute
• Fixed/added spacing between the checkbox and label

Contributor checklist

• My PR is related to Hide 2FA/TOTP input on login page by default #1116
• I have read and understood the CONTRIBUTING guide
• I have inserted my change and a link to this PR in the CHANGELOG
• I have updated documentation in ./docs/docs if a public feature has a behaviour change

[linear]

FLORA-288

[elland]

Haskell side looks good to me. Testing locally works as expected.

[tchoutri]

Tested locally

[TixieSalander]

Except this little thing, looks good to me! 👌

[TixieSalander]

Considering Flora is a MPA with no client-side navigation stuff to be careful with, I think it can be simplified by directly calling the update once on Alpine's init:

Suggested change

	, xInit_ "const sync = () => { open = $refs.useTotp.checked }; sync(); window.addEventListener('pageshow', sync);"
	, xInit_ "open = $refs.useTotp.checked"

[kd-e]

This works for init but on back/forth open doesn't get updated even though the checked state persists:

I'm still getting used to alpine's directives but I think maybe this would be better and more correct than the eventListener? 🙈

, xData_ "{ open: false, sync() { this.open = this.$refs.useTotp.checked; }}"
, xInit_ "sync()"
, xOn_ "pageshow.window" "sync()"

[TixieSalander]

Thats weird it should still work without any global event listener.

• x-init set the open variable to the checkbox's state on page load
• x-model="open" on the checkbox set a 2way data binding between the checkbox's value and the open variable, so the open variable is updated automatically when the checkbox's state is changed
• and the x-bind:hidden and x-bind:inert are updated when the open variable changes

After applying the suggested change above and nothing else, It works on my end. Did you made other changes since your last commit by any chance? :s

[kd-e]

Nope, no other changes on my end. I did some more testing with your suggestion and it works on Firefox and Safari on macOS but not on Chrome/Vivaldi xD fun! Firefox even persists checked+hidden/inert on page reload, except on first load with the checkbox unchecked, then the 2fa code input wrapper flashes. Hilarious

Screen.Recording.2026-07-03.at.08.51.11.mov

I'll apply your suggestion though to keep things simple 👍