fix: Bootstrap hint

lib/components/dialogs/bootstrap_dialog.dart

@@ -91,6 +91,7 @@ class _BootstrapDialogState extends State<BootstrapDialog> {
           style: TextStyle(
             fontSize: 18,
             wordSpacing: 38,
+            fontFamily: 'monospace',
           ),
         ),
       );
@@ -129,8 +130,8 @@ class _BootstrapDialogState extends State<BootstrapDialog> {
               _recoveryKeyInputError ?? L10n.of(context).pleaseEnterSecurityKey;
           body = PlatformInfos.isCupertinoStyle
               ? CupertinoTextField(
-                  minLines: 2,
-                  maxLines: 2,
+                  minLines: 1,
+                  maxLines: 1,
                   autofocus: true,
                   autocorrect: false,
                   autofillHints: _recoveryKeyInputLoading
@@ -139,46 +140,22 @@ class _BootstrapDialogState extends State<BootstrapDialog> {
                   controller: _recoveryKeyTextEditingController,
                 )
               : TextField(
-                  minLines: 2,
-                  maxLines: 2,
+                  minLines: 1,
+                  maxLines: 1,
                   autofocus: true,
                   autocorrect: false,
                   autofillHints: _recoveryKeyInputLoading
                       ? null
                       : [AutofillHints.password],
                   controller: _recoveryKeyTextEditingController,
+                  decoration: InputDecoration(
+                    border: UnderlineInputBorder(),
+                    filled: false,
+                    hintText: L10n.of(context).securityKey,
+                  ),
                 );
           buttons.add(AdaptiveFlatButton(
-            textColor: Colors.red,
-            label: 'Lost security key',
-            onPressed: () async {
-              if (OkCancelResult.ok ==
-                  await showOkCancelAlertDialog(
-                    context: context,
-                    useRootNavigator: false,
-                    title: L10n.of(context).securityKeyLost,
-                    message: L10n.of(context).wipeChatBackup,
-                    okLabel: L10n.of(context).ok,
-                    cancelLabel: L10n.of(context).cancel,
-                    isDestructiveAction: true,
-                  )) {
-                _createBootstrap(true);
-              }
-            },
-          ));
-          buttons.add(AdaptiveFlatButton(
-            label: L10n.of(context).transferFromAnotherDevice,
-            onPressed: () async {
-              final req = await Matrix.of(context)
-                  .client
-                  .userDeviceKeys[Matrix.of(context).client.userID]
-                  .startVerification();
-              await KeyVerificationDialog(request: req).show(context);
-              Navigator.of(context, rootNavigator: false).pop();
-            },
-          ));
-          buttons.add(AdaptiveFlatButton(
-              label: L10n.of(context).next,
+              label: L10n.of(context).unlockChatBackup,
               onPressed: () async {
                 setState(() {
                   _recoveryKeyInputError = null;
@@ -197,6 +174,35 @@ class _BootstrapDialogState extends State<BootstrapDialog> {
                   setState(() => _recoveryKeyInputLoading = false);
                 }
               }));
+          buttons.add(AdaptiveFlatButton(
+            label: L10n.of(context).transferFromAnotherDevice,
+            onPressed: () async {
+              final req = await Matrix.of(context)
+                  .client
+                  .userDeviceKeys[Matrix.of(context).client.userID]
+                  .startVerification();
+              await KeyVerificationDialog(request: req).show(context);
+              Navigator.of(context, rootNavigator: false).pop();
+            },
+          ));
+          buttons.add(AdaptiveFlatButton(
+            textColor: Colors.red,
+            label: L10n.of(context).securityKeyLost,
+            onPressed: () async {
+              if (OkCancelResult.ok ==
+                  await showOkCancelAlertDialog(
+                    context: context,
+                    useRootNavigator: false,
+                    title: L10n.of(context).securityKeyLost,
+                    message: L10n.of(context).wipeChatBackup,
+                    okLabel: L10n.of(context).ok,
+                    cancelLabel: L10n.of(context).cancel,
+                    isDestructiveAction: true,
+                  )) {
+                _createBootstrap(true);
+              }
+            },
+          ));
           break;
         case BootstrapState.askWipeCrossSigning:
           WidgetsBinding.instance.addPostFrameCallback(

lib/l10n/intl_en.arb

@@ -498,7 +498,7 @@
     "type": "text",
     "placeholders": {}
   },
-  "pleaseEnterSecurityKey": "Please enter your security key",
+  "pleaseEnterSecurityKey": "Please enter your security key:",
   "@pleaseEnterSecurityKey": {
     "type": "text",
     "placeholders": {}
@@ -2006,6 +2006,11 @@
       "unreadChats": {}
     }
   },
+  "unlockChatBackup": "Unlock chat backup",
+  "@unlockChatBackup": {
+    "type": "text",
+    "placeholders": {}
+  },
   "yourPublicKey": "Your public key",
   "@yourPublicKey": {
     "type": "text",

lib/views/settings.dart

@@ -378,6 +378,34 @@ class _SettingsState extends State<Settings> {
                         .textTheme
                         .headline6
                         .color)),
+            actions: [
+              FutureBuilder(
+                  future: crossSigningCachedFuture,
+                  builder: (context, snapshot) {
+                    final needsBootstrap = Matrix.of(context)
+                                .client
+                                .encryption
+                                .crossSigning
+                                .enabled ==
+                            false ||
+                        snapshot.data == false;
+                    final isUnknownSession =
+                        Matrix.of(context).client.isUnknownSession;
+                    final displayHeader = needsBootstrap || isUnknownSession;
+                    if (!displayHeader) return Container();
+                    return TextButton.icon(
+                      icon: Icon(Icons.cloud, color: Colors.red),
+                      label: Text(
+                        L10n.of(context).chatBackup,
+                        style: TextStyle(color: Colors.red),
+                      ),
+                      onPressed: () async {
+                        await BootstrapDialog().show(context);
+                        AdaptivePageLayout.of(context).popUntilIsFirst();
+                      },
+                    );
+                  }),
+            ],
             backgroundColor: Theme.of(context).appBarTheme.color,
             flexibleSpace: FlexibleSpaceBar(
               background: ContentBanner(profile?.avatarUrl,