feat: Nicer chat backup design

assets/l10n/intl_en.arb

@@ -398,11 +398,15 @@
     "type": "text",
     "placeholders": {}
   },
+  "setupChatBackup": "Set up chat backup",
+  "iWroteDownTheKey": "I wrote down the key",
+  "yourChatBackupHasBeenSetUp": "Your chat backup has been set up.",
   "chatBackup": "Chat backup",
   "@chatBackup": {
     "type": "text",
     "placeholders": {}
   },
+  "setupChatBackupDescription": "To protect your messages, we have generated a security key for you. Please keep this in a safe place, such as a password manager.",
   "chatBackupDescription": "Your chat backup is secured with a security key. Please make sure you don't lose it.",
   "@chatBackupDescription": {
     "type": "text",

lib/pages/bootstrap_dialog.dart

@@ -1,6 +1,4 @@
 import 'package:adaptive_dialog/adaptive_dialog.dart';
-import 'package:fluffychat/config/setting_keys.dart';
-import 'package:fluffychat/utils/matrix_sdk_extensions.dart/flutter_matrix_hive_database.dart';
 import 'package:matrix/encryption.dart';
 import 'package:matrix/encryption/utils/bootstrap.dart';
 import 'package:matrix/matrix.dart';
@@ -67,12 +65,6 @@ class _BootstrapDialogState extends State<BootstrapDialog> {
     });
   }
 
-  void cancelAndDontAskAgain() async {
-    await (widget.client.database as FlutterMatrixHiveStore)
-        .put(SettingKeys.dontAskForBootstrapKey, true);
-    Navigator.of(context, rootNavigator: false).pop<bool>(false);
-  }
-
   @override
   Widget build(BuildContext context) {
     _wipe ??= widget.wipe;
@@ -83,43 +75,58 @@ class _BootstrapDialogState extends State<BootstrapDialog> {
     titleText = L10n.of(context).loadingPleaseWait;
 
     if (bootstrap == null) {
-      titleText = L10n.of(context).chatBackup;
+      titleText = L10n.of(context).setupChatBackup;
-      body = Text(L10n.of(context).chatBackupDescription);
+      body = Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Image.asset('assets/backup.png', fit: BoxFit.contain),
+          Text(L10n.of(context).setupChatBackupDescription),
+        ],
+      );
       buttons.add(AdaptiveFlatButton(
         label: L10n.of(context).next,
         onPressed: () => _createBootstrap(false),
       ));
-      buttons.add(AdaptiveFlatButton(
-        label: L10n.of(context).dontAskAgain,
-        onPressed: cancelAndDontAskAgain,
-        textColor: Colors.red,
-      ));
     } else if (bootstrap.newSsssKey?.recoveryKey != null &&
         _recoveryKeyStored == false) {
       final key = bootstrap.newSsssKey.recoveryKey;
       titleText = L10n.of(context).securityKey;
-      body = Container(
+      return Scaffold(
-        alignment: Alignment.center,
+        appBar: AppBar(
-        width: 200,
+          leading: IconButton(
-        height: 128,
+            icon: Icon(Icons.close),
-        child: Text(
+            onPressed: Navigator.of(context).pop,
-          key,
-          textAlign: TextAlign.center,
-          style: TextStyle(
-            fontSize: 18,
-            wordSpacing: 38,
-            fontFamily: 'monospace',
           ),
+          title: Text(L10n.of(context).securityKey),
+        ),
+        body: ListView(
+          padding: const EdgeInsets.all(16.0),
+          children: [
+            TextField(
+              minLines: 4,
+              maxLines: 4,
+              readOnly: true,
+              controller: TextEditingController(text: key),
+            ),
+            const SizedBox(height: 16),
+            ElevatedButton.icon(
+              icon: Icon(Icons.copy_outlined),
+              label: Text(L10n.of(context).copyToClipboard),
+              onPressed: () => Clipboard.setData(ClipboardData(text: key)),
+            ),
+            const SizedBox(height: 16),
+            ElevatedButton.icon(
+              style: ElevatedButton.styleFrom(
+                primary: Theme.of(context).secondaryHeaderColor,
+                onPrimary: Theme.of(context).primaryColor,
+              ),
+              icon: Icon(Icons.check_outlined),
+              label: Text(L10n.of(context).iWroteDownTheKey),
+              onPressed: () => setState(() => _recoveryKeyStored = true),
+            ),
+          ],
         ),
       );
-      buttons.add(AdaptiveFlatButton(
-        label: L10n.of(context).copyToClipboard,
-        onPressed: () => Clipboard.setData(ClipboardData(text: key)),
-      ));
-      buttons.add(AdaptiveFlatButton(
-        label: L10n.of(context).next,
-        onPressed: () => setState(() => _recoveryKeyStored = true),
-      ));
     } else {
       switch (bootstrap.state) {
         case BootstrapState.loading:
@@ -151,22 +158,20 @@ class _BootstrapDialogState extends State<BootstrapDialog> {
           break;
         case BootstrapState.openExistingSsss:
           _recoveryKeyStored = true;
-          titleText =
+          return Scaffold(
-              _recoveryKeyInputError ?? L10n.of(context).pleaseEnterSecurityKey;
+            appBar: AppBar(
-          body = PlatformInfos.isCupertinoStyle
+              leading: IconButton(
-              ? CupertinoTextField(
+                icon: Icon(Icons.close),
-                  minLines: 1,
+                onPressed: Navigator.of(context).pop,
-                  maxLines: 1,
+              ),
-                  autofocus: true,
+              title: Text(L10n.of(context).pleaseEnterSecurityKey),
-                  autocorrect: false,
+            ),
-                  autofillHints: _recoveryKeyInputLoading
+            body: ListView(
-                      ? null
+              padding: const EdgeInsets.all(16.0),
-                      : [AutofillHints.password],
+              children: [
-                  controller: _recoveryKeyTextEditingController,
+                TextField(
-                )
+                  minLines: 4,
-              : TextField(
+                  maxLines: 4,
-                  minLines: 1,
-                  maxLines: 1,
                   autofocus: true,
                   autocorrect: false,
                   autofillHints: _recoveryKeyInputLoading
@@ -174,63 +179,90 @@ class _BootstrapDialogState extends State<BootstrapDialog> {
                       : [AutofillHints.password],
                   controller: _recoveryKeyTextEditingController,
                   decoration: InputDecoration(
-                    border: UnderlineInputBorder(),
+                    hintText: 'Abc123 Def456',
-                    filled: false,
+                    labelText: L10n.of(context).securityKey,
-                    hintText: L10n.of(context).securityKey,
+                    errorText: _recoveryKeyInputError,
                   ),
-                );
+                ),
-          buttons.add(AdaptiveFlatButton(
+                const SizedBox(height: 16),
-              label: L10n.of(context).unlockChatBackup,
+                ElevatedButton.icon(
-              onPressed: () async {
+                    icon: Icon(Icons.lock_open_outlined),
-                setState(() {
+                    label: Text(L10n.of(context).unlockChatBackup),
-                  _recoveryKeyInputError = null;
+                    onPressed: () async {
-                  _recoveryKeyInputLoading = true;
+                      setState(() {
-                });
+                        _recoveryKeyInputError = null;
-                try {
+                        _recoveryKeyInputLoading = true;
-                  await bootstrap.newSsssKey.unlock(
+                      });
-                    keyOrPassphrase: _recoveryKeyTextEditingController.text,
+                      try {
-                  );
+                        await bootstrap.newSsssKey.unlock(
-                  await bootstrap.openExistingSsss();
+                          keyOrPassphrase:
-                } catch (e, s) {
+                              _recoveryKeyTextEditingController.text,
-                  Logs().w('Unable to unlock SSSS', e, s);
+                        );
-                  setState(() => _recoveryKeyInputError =
+                        await bootstrap.openExistingSsss();
-                      L10n.of(context).oopsSomethingWentWrong);
+                      } catch (e, s) {
-                } finally {
+                        Logs().w('Unable to unlock SSSS', e, s);
-                  setState(() => _recoveryKeyInputLoading = false);
+                        setState(() => _recoveryKeyInputError =
-                }
+                            L10n.of(context).oopsSomethingWentWrong);
-              }));
+                      } finally {
-          buttons.add(AdaptiveFlatButton(
+                        setState(() => _recoveryKeyInputLoading = false);
-            label: L10n.of(context).transferFromAnotherDevice,
+                      }
-            onPressed: () async {
+                    }),
-              final req = await showFutureLoadingDialog(
+                const SizedBox(height: 16),
-                context: context,
+                Row(children: [
-                future: () => widget.client.userDeviceKeys[widget.client.userID]
+                  Expanded(child: Divider()),
-                    .startVerification(),
+                  Padding(
-              );
+                    padding: const EdgeInsets.all(12.0),
-              if (req.error != null) return;
+                    child: Text(L10n.of(context).or),
-              await KeyVerificationDialog(request: req.result).show(context);
+                  ),
-              Navigator.of(context, rootNavigator: false).pop();
+                  Expanded(child: Divider()),
-            },
+                ]),
-          ));
+                const SizedBox(height: 16),
-          buttons.add(AdaptiveFlatButton(
+                ElevatedButton.icon(
-            textColor: Colors.red,
+                  style: ElevatedButton.styleFrom(
-            label: L10n.of(context).securityKeyLost,
+                    primary: Theme.of(context).secondaryHeaderColor,
-            onPressed: () async {
+                    onPrimary: Theme.of(context).primaryColor,
-              if (OkCancelResult.ok ==
+                  ),
-                  await showOkCancelAlertDialog(
+                  icon: Icon(Icons.transfer_within_a_station_outlined),
-                    useRootNavigator: false,
+                  label: Text(L10n.of(context).transferFromAnotherDevice),
-                    context: context,
+                  onPressed: () async {
-                    title: L10n.of(context).securityKeyLost,
+                    final req = await showFutureLoadingDialog(
-                    message: L10n.of(context).wipeChatBackup,
+                      context: context,
-                    okLabel: L10n.of(context).ok,
+                      future: () => widget
-                    cancelLabel: L10n.of(context).cancel,
+                          .client.userDeviceKeys[widget.client.userID]
-                    isDestructiveAction: true,
+                          .startVerification(),
-                  )) {
+                    );
-                _createBootstrap(true);
+                    if (req.error != null) return;
-              }
+                    await KeyVerificationDialog(request: req.result)
-            },
+                        .show(context);
-          ));
+                    Navigator.of(context, rootNavigator: false).pop();
-          break;
+                  },
+                ),
+                const SizedBox(height: 16),
+                ElevatedButton.icon(
+                  style: ElevatedButton.styleFrom(
+                    primary: Theme.of(context).secondaryHeaderColor,
+                    onPrimary: Colors.red,
+                  ),
+                  icon: Icon(Icons.delete_outlined),
+                  label: Text(L10n.of(context).securityKeyLost),
+                  onPressed: () async {
+                    if (OkCancelResult.ok ==
+                        await showOkCancelAlertDialog(
+                          useRootNavigator: false,
+                          context: context,
+                          title: L10n.of(context).securityKeyLost,
+                          message: L10n.of(context).wipeChatBackup,
+                          okLabel: L10n.of(context).ok,
+                          cancelLabel: L10n.of(context).cancel,
+                          isDestructiveAction: true,
+                        )) {
+                      _createBootstrap(true);
+                    }
+                  },
+                )
+              ],
+            ),
+          );
         case BootstrapState.askWipeCrossSigning:
           WidgetsBinding.instance.addPostFrameCallback(
             (_) => bootstrap.wipeCrossSigning(_wipe),
@@ -270,8 +302,8 @@ class _BootstrapDialogState extends State<BootstrapDialog> {
           body = Column(
             mainAxisSize: MainAxisSize.min,
             children: [
-              Icon(Icons.check_circle, color: Colors.green, size: 40),
+              Image.asset('assets/backup.png', fit: BoxFit.contain),
-              Text(L10n.of(context).keysCached),
+              Text(L10n.of(context).yourChatBackupHasBeenSetUp),
             ],
           );
           buttons.add(AdaptiveFlatButton(

lib/widgets/encryption_button.dart

@@ -95,7 +95,7 @@ class _EncryptionButtonState extends State<EncryptionButton> {
                 : (allUsersValid ? Colors.green : Colors.orange);
           } else if (!widget.room.encrypted &&
               widget.room.joinRules != JoinRules.public) {
-            color = null;
+            color = Colors.red;
           }
           return IconButton(
             tooltip: widget.room.encrypted