feat(setup-wizard): improve E2EE dialog UX and password field

- Only show the passphrase and "Obfuscate Properties" controls once
  end-to-end encryption is enabled, instead of leaving them visible
  but disabled.
- Replace the password show/hide checkbox with an icon toggle button.
- Let translated labels wrap to their content instead of being
  clipped into a fixed-width column (this clipped longer translated
  labels, e.g. in German and Spanish).
- Scope the onboarding invitation link's 44px touch-target padding to
  mobile, so on desktop it renders as a normal inline link instead of
  a stray, oddly-padded button.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Zeedif
2026-08-23 20:23:50 -06:00
co-authored by Claude Sonnet 5
parent 694371898a
commit 6b37ea8778
9 changed files with 108 additions and 25 deletions
@@ -52,13 +52,6 @@
<Guidance>{translateMessage("Please configure your end-to-end encryption settings.")}</Guidance>
<InputRow label={translateMessage("End-to-End Encryption")}>
<input type="checkbox" bind:checked={encryptionSettings.encrypt} />
<Password
name="e2ee-passphrase"
placeholder={translateMessage("Enter your passphrase")}
bind:value={encryptionSettings.passphrase}
disabled={!encryptionSettings.encrypt}
required={encryptionSettings.encrypt}
/>
</InputRow>
<InfoNote title={translateMessage("Strongly Recommended")}>
{translateMessage(
@@ -69,22 +62,29 @@
"Also, please note that if you are using Peer-to-Peer synchronization, this configuration will be used when you switch to other methods and connect to a remote server in the future."
)}
</InfoNote>
<InfoNote warning>
{translateMessage("This setting must be the same even when connecting to multiple synchronisation destinations.")}
</InfoNote>
<InputRow label={translateMessage("Obfuscate Properties")}>
<input
type="checkbox"
bind:checked={encryptionSettings.usePathObfuscation}
disabled={!encryptionSettings.encrypt}
/>
</InputRow>
<InfoNote>
{translateMessage(
"Obfuscating properties (e.g., path of file, size, creation and modification dates) adds an additional layer of security by making it harder to identify the structure and names of your files and folders on the remote server. This helps protect your privacy and makes it more difficult for unauthorized users to infer information about your data."
)}
</InfoNote>
{#if encryptionSettings.encrypt}
<InputRow label={translateMessage("Passphrase")}>
<Password
name="e2ee-passphrase"
placeholder={translateMessage("Enter your passphrase")}
bind:value={encryptionSettings.passphrase}
required
/>
</InputRow>
<InfoNote warning>
{translateMessage(
"This setting must be the same even when connecting to multiple synchronisation destinations."
)}
</InfoNote>
<InputRow label={translateMessage("Obfuscate Properties")}>
<input type="checkbox" bind:checked={encryptionSettings.usePathObfuscation} />
</InputRow>
<InfoNote>
{translateMessage(
"Obfuscating properties (e.g., path of file, size, creation and modification dates) adds an additional layer of security by making it harder to identify the structure and names of your files and folders on the remote server. This helps protect your privacy and makes it more difficult for unauthorized users to infer information about your data."
)}
</InfoNote>
{/if}
<ExtraItems title={translateMessage("Advanced")}>
<InputRow label={translateMessage("Encryption Algorithm")}>