diff --git a/assets/translations/en.json b/assets/translations/en.json index f1ef524f..b442b683 100644 --- a/assets/translations/en.json +++ b/assets/translations/en.json @@ -198,6 +198,10 @@ "autobackup_set_period": "Set period", "autobackup_period_set": "Period set", "backups_encryption_key": "Encryption key", + "backups_encryption_key_subtitle": "Keep it in a safe place.", + "backups_encryption_key_copy": "Copy the encryption key", + "backups_encryption_key_show": "Show the encryption key", + "backups_encryption_key_description": "This key is used to encrypt your backups. If you lose it, you will not be able to restore your backups. Keep it in a safe place, as it will be useful if you ever need to restore from backups manually.", "pending_jobs": "Currently running backup jobs", "snapshots_title": "Snapshot list" }, @@ -538,4 +542,4 @@ "reset_onboarding_description": "Reset onboarding switch to show onboarding screen again", "cubit_statuses": "Cubit loading statuses" } -} \ No newline at end of file +} diff --git a/lib/ui/pages/backups/backup_details.dart b/lib/ui/pages/backups/backup_details.dart index 54136412..44995577 100644 --- a/lib/ui/pages/backups/backup_details.dart +++ b/lib/ui/pages/backups/backup_details.dart @@ -156,9 +156,9 @@ class BackupDetailsPage extends StatelessWidget { builder: (final BuildContext context) => DraggableScrollableSheet( expand: false, - maxChildSize: 0.6, - minChildSize: 0.3, - initialChildSize: 0.3, + maxChildSize: 0.9, + minChildSize: 0.5, + initialChildSize: 0.7, builder: (final context, final scrollController) => CopyEncryptionKeyModal( scrollController: scrollController, @@ -172,6 +172,9 @@ class BackupDetailsPage extends StatelessWidget { title: Text( 'backup.backups_encryption_key'.tr(), ), + subtitle: Text( + 'backup.backups_encryption_key_subtitle'.tr(), + ), ), const SizedBox(height: 16), if (backupJobs.isNotEmpty) diff --git a/lib/ui/pages/backups/change_period_modal.dart b/lib/ui/pages/backups/change_period_modal.dart index f3fb2ce3..dbee981e 100644 --- a/lib/ui/pages/backups/change_period_modal.dart +++ b/lib/ui/pages/backups/change_period_modal.dart @@ -20,9 +20,6 @@ class ChangeAutobackupsPeriodModal extends StatefulWidget { class _ChangeAutobackupsPeriodModalState extends State { - // This is a modal with radio buttons to select the autobackup period - // Period might be none, selected from predefined list or custom - // Store in state the selected period Duration? selectedPeriod; static const List autobackupPeriods = [ diff --git a/lib/ui/pages/backups/copy_encryption_key_modal.dart b/lib/ui/pages/backups/copy_encryption_key_modal.dart index 5421b2a8..7b9ce40f 100644 --- a/lib/ui/pages/backups/copy_encryption_key_modal.dart +++ b/lib/ui/pages/backups/copy_encryption_key_modal.dart @@ -20,6 +20,7 @@ class CopyEncryptionKeyModal extends StatefulWidget { class _CopyEncryptionKeyModalState extends State { bool isKeyVisible = false; + @override Widget build(final BuildContext context) { final String encryptionKey = @@ -35,52 +36,77 @@ class _CopyEncryptionKeyModalState extends State { textAlign: TextAlign.center, ), const SizedBox(height: 8), - Row( - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisAlignment: MainAxisAlignment.center, - children: [ - IconButton( - icon: Icon( - isKeyVisible - ? Icons.visibility_outlined - : Icons.visibility_off_outlined, - ), - onPressed: () { - setState( - () { - isKeyVisible = !isKeyVisible; - }, - ); - }, - ), - IconButton( - icon: const Icon(Icons.copy_all_outlined), - onPressed: () { - getIt() - .showSnackBar('basis.copied_to_clipboard'.tr()); - Clipboard.setData( - ClipboardData( - text: encryptionKey, - ), - ); - }, - ), - ], + Text( + 'backup.backups_encryption_key_description'.tr(), + style: Theme.of(context).textTheme.bodyMedium, + textAlign: TextAlign.center, ), - Flexible( - child: isKeyVisible - ? SelectableText( + const SizedBox(height: 8), + Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(20), + color: Theme.of(context).colorScheme.surfaceVariant, + ), + padding: const EdgeInsets.all(16), + child: Stack( + children: [ + SelectableText( encryptionKey, style: Theme.of(context).textTheme.titleMedium?.copyWith( - color: Theme.of(context).colorScheme.onBackground, - ), - ) - : Text( - ''.padLeft(encryptionKey.length, '●'), - style: Theme.of(context).textTheme.titleMedium?.copyWith( - color: Theme.of(context).colorScheme.onBackground, + color: Theme.of(context).colorScheme.onSurfaceVariant, ), ), + Positioned.fill( + child: InkWell( + onTap: () { + setState( + () { + isKeyVisible = !isKeyVisible; + }, + ); + }, + child: AnimatedOpacity( + duration: const Duration(milliseconds: 200), + opacity: isKeyVisible ? 0 : 1, + child: Container( + color: Theme.of(context).colorScheme.surfaceVariant, + child: Row( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + const Icon(Icons.visibility_outlined), + const SizedBox(width: 8), + Text( + 'backup.backups_encryption_key_show'.tr(), + style: Theme.of(context) + .textTheme + .bodyMedium + ?.copyWith( + color: Theme.of(context) + .colorScheme + .onSurfaceVariant, + ), + ), + ], + )), + ), + ), + ), + ], + )), + const SizedBox(height: 8), + FilledButton.icon( + onPressed: () { + getIt() + .showSnackBar('basis.copied_to_clipboard'.tr()); + Clipboard.setData( + ClipboardData( + text: encryptionKey, + ), + ); + }, + icon: const Icon(Icons.copy_all_outlined), + label: Text('backup.backups_encryption_key_copy'.tr()), ), ], );