mirror of
https://git.selfprivacy.org/kherel/selfprivacy.org.app.git
synced 2024-09-29 23:07:51 +00:00
feat(backups): Update the UI of the encryption key modal
This commit is contained in:
parent
3b1e71d771
commit
cfcfd5d708
|
@ -198,6 +198,10 @@
|
||||||
"autobackup_set_period": "Set period",
|
"autobackup_set_period": "Set period",
|
||||||
"autobackup_period_set": "Period set",
|
"autobackup_period_set": "Period set",
|
||||||
"backups_encryption_key": "Encryption key",
|
"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",
|
"pending_jobs": "Currently running backup jobs",
|
||||||
"snapshots_title": "Snapshot list"
|
"snapshots_title": "Snapshot list"
|
||||||
},
|
},
|
||||||
|
@ -538,4 +542,4 @@
|
||||||
"reset_onboarding_description": "Reset onboarding switch to show onboarding screen again",
|
"reset_onboarding_description": "Reset onboarding switch to show onboarding screen again",
|
||||||
"cubit_statuses": "Cubit loading statuses"
|
"cubit_statuses": "Cubit loading statuses"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -156,9 +156,9 @@ class BackupDetailsPage extends StatelessWidget {
|
||||||
builder: (final BuildContext context) =>
|
builder: (final BuildContext context) =>
|
||||||
DraggableScrollableSheet(
|
DraggableScrollableSheet(
|
||||||
expand: false,
|
expand: false,
|
||||||
maxChildSize: 0.6,
|
maxChildSize: 0.9,
|
||||||
minChildSize: 0.3,
|
minChildSize: 0.5,
|
||||||
initialChildSize: 0.3,
|
initialChildSize: 0.7,
|
||||||
builder: (final context, final scrollController) =>
|
builder: (final context, final scrollController) =>
|
||||||
CopyEncryptionKeyModal(
|
CopyEncryptionKeyModal(
|
||||||
scrollController: scrollController,
|
scrollController: scrollController,
|
||||||
|
@ -172,6 +172,9 @@ class BackupDetailsPage extends StatelessWidget {
|
||||||
title: Text(
|
title: Text(
|
||||||
'backup.backups_encryption_key'.tr(),
|
'backup.backups_encryption_key'.tr(),
|
||||||
),
|
),
|
||||||
|
subtitle: Text(
|
||||||
|
'backup.backups_encryption_key_subtitle'.tr(),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
const SizedBox(height: 16),
|
const SizedBox(height: 16),
|
||||||
if (backupJobs.isNotEmpty)
|
if (backupJobs.isNotEmpty)
|
||||||
|
|
|
@ -20,9 +20,6 @@ class ChangeAutobackupsPeriodModal extends StatefulWidget {
|
||||||
|
|
||||||
class _ChangeAutobackupsPeriodModalState
|
class _ChangeAutobackupsPeriodModalState
|
||||||
extends State<ChangeAutobackupsPeriodModal> {
|
extends State<ChangeAutobackupsPeriodModal> {
|
||||||
// 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;
|
Duration? selectedPeriod;
|
||||||
|
|
||||||
static const List<Duration> autobackupPeriods = [
|
static const List<Duration> autobackupPeriods = [
|
||||||
|
|
|
@ -20,6 +20,7 @@ class CopyEncryptionKeyModal extends StatefulWidget {
|
||||||
|
|
||||||
class _CopyEncryptionKeyModalState extends State<CopyEncryptionKeyModal> {
|
class _CopyEncryptionKeyModalState extends State<CopyEncryptionKeyModal> {
|
||||||
bool isKeyVisible = false;
|
bool isKeyVisible = false;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(final BuildContext context) {
|
Widget build(final BuildContext context) {
|
||||||
final String encryptionKey =
|
final String encryptionKey =
|
||||||
|
@ -35,52 +36,77 @@ class _CopyEncryptionKeyModalState extends State<CopyEncryptionKeyModal> {
|
||||||
textAlign: TextAlign.center,
|
textAlign: TextAlign.center,
|
||||||
),
|
),
|
||||||
const SizedBox(height: 8),
|
const SizedBox(height: 8),
|
||||||
Row(
|
Text(
|
||||||
crossAxisAlignment: CrossAxisAlignment.center,
|
'backup.backups_encryption_key_description'.tr(),
|
||||||
mainAxisAlignment: MainAxisAlignment.center,
|
style: Theme.of(context).textTheme.bodyMedium,
|
||||||
children: [
|
textAlign: TextAlign.center,
|
||||||
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<NavigationService>()
|
|
||||||
.showSnackBar('basis.copied_to_clipboard'.tr());
|
|
||||||
Clipboard.setData(
|
|
||||||
ClipboardData(
|
|
||||||
text: encryptionKey,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
},
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
),
|
||||||
Flexible(
|
const SizedBox(height: 8),
|
||||||
child: isKeyVisible
|
Container(
|
||||||
? SelectableText(
|
decoration: BoxDecoration(
|
||||||
|
borderRadius: BorderRadius.circular(20),
|
||||||
|
color: Theme.of(context).colorScheme.surfaceVariant,
|
||||||
|
),
|
||||||
|
padding: const EdgeInsets.all(16),
|
||||||
|
child: Stack(
|
||||||
|
children: [
|
||||||
|
SelectableText(
|
||||||
encryptionKey,
|
encryptionKey,
|
||||||
style: Theme.of(context).textTheme.titleMedium?.copyWith(
|
style: Theme.of(context).textTheme.titleMedium?.copyWith(
|
||||||
color: Theme.of(context).colorScheme.onBackground,
|
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||||
),
|
|
||||||
)
|
|
||||||
: Text(
|
|
||||||
''.padLeft(encryptionKey.length, '●'),
|
|
||||||
style: Theme.of(context).textTheme.titleMedium?.copyWith(
|
|
||||||
color: Theme.of(context).colorScheme.onBackground,
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
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<NavigationService>()
|
||||||
|
.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()),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue