recovery key work

assets/i18n/en.json

@@ -54,11 +54,16 @@
     },
     "show_recovery_key_page": {
         "titlebar": "Save Recovery Key",
-        "instructions": "You must save this recovery key somewhere safe. This key is the ONLY way to recover your VeilidChat account in the event of a forgotton password or a lost, stolen, or compromised device.",
+        "recovery_key": "Recovery Key",
+        "instructions": "Your recovery key is important!",
+        "instructions_details": "This key is the ONLY way to recover your VeilidChat account in the event of a forgotton password or a lost, stolen, or compromised device.",
         "instructions_options": "Here are some options for your recovery key:",
         "instructions_print": "Print the recovery key and keep it somewhere safe",
-        "instructions_write": "View the recovery key and write it down on paper",
+        "instructions_view": "View the recovery key and write it down on paper",
-        "instructions_send": "Send the recovery key to another app to save it"
+        "instructions_share": "Share the recovery key to another app to save it",
+        "print": "Print",
+        "view": "View",
+        "share": "Share"
     },
     "button": {
         "ok": "Ok",

lib/account_manager/views/show_recovery_key_page.dart

@@ -1,3 +1,6 @@
+import 'dart:math';
+
+import 'package:async_tools/async_tools.dart';
 import 'package:awesome_extensions/awesome_extensions.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_translate/flutter_translate.dart';
@@ -5,6 +8,7 @@ import 'package:go_router/go_router.dart';
 import 'package:veilid_support/veilid_support.dart';
 
 import '../../layout/default_app_bar.dart';
+import '../../theme/theme.dart';
 import '../../tools/tools.dart';
 import '../../veilid_processor/veilid_processor.dart';
 
@@ -29,12 +33,89 @@ class ShowRecoveryKeyPageState extends State<ShowRecoveryKeyPage> {
     });
   }
 
+  Widget _recoveryKeyWidget(SecretKey _secretKey) {
+    final theme = Theme.of(context);
+    final textTheme = theme.textTheme;
+    final scaleConfig = theme.extension<ScaleConfig>()!;
+
+    final cardsize =
+        min<double>(MediaQuery.of(context).size.shortestSide - 48.0, 400);
+
+    final phonoString = prettyPhonoString(
+      encodePhono(_secretKey.decode()),
+      wordsPerLine: 2,
+    );
+    return Dialog(
+        shape: RoundedRectangleBorder(
+            side: const BorderSide(width: 2),
+            borderRadius:
+                BorderRadius.circular(16 * scaleConfig.borderRadiusScale)),
+        backgroundColor: Colors.white,
+        child: ConstrainedBox(
+            constraints: BoxConstraints(
+                minWidth: cardsize,
+                maxWidth: cardsize,
+                minHeight: cardsize,
+                maxHeight: cardsize),
+            child: Column(mainAxisSize: MainAxisSize.min, children: [
+              Text(
+                      style: textTheme.headlineSmall!.copyWith(
+                        color: Colors.black,
+                        fontWeight: FontWeight.bold,
+                      ),
+                      translate('show_recovery_key_page.recovery_key'))
+                  .paddingAll(32),
+              Text(
+                  style: textTheme.headlineSmall!.copyWith(
+                      color: Colors.black, fontFamily: 'Source Code Pro'),
+                  phonoString)
+            ])));
+  }
+
+  Widget _optionBox(
+      {required String instructions,
+      required Icon buttonIcon,
+      required String buttonText,
+      required void Function() onClick}) {
+    final theme = Theme.of(context);
+    final scale = theme.extension<ScaleScheme>()!;
+    final scaleConfig = theme.extension<ScaleConfig>()!;
+
+    return Container(
+            constraints: const BoxConstraints(maxWidth: 400),
+            decoration: BoxDecoration(
+                color: scale.primaryScale.subtleBackground,
+                borderRadius:
+                    BorderRadius.circular(8 * scaleConfig.borderRadiusScale),
+                border: Border.all(color: scale.primaryScale.border)),
+            child: Column(
+                crossAxisAlignment: CrossAxisAlignment.stretch,
+                children: [
+                  Text(
+                      style: theme.textTheme.labelMedium!
+                          .copyWith(color: scale.primaryScale.appText),
+                      softWrap: true,
+                      textAlign: TextAlign.center,
+                      instructions),
+                  ElevatedButton(
+                      onPressed: onClick,
+                      child: Row(mainAxisSize: MainAxisSize.min, children: [
+                        buttonIcon.paddingLTRB(0, 8, 12, 8),
+                        Text(textAlign: TextAlign.center, buttonText)
+                      ])).paddingLTRB(0, 12, 0, 0).toCenter()
+                ]).paddingAll(12))
+        .paddingLTRB(24, 0, 24, 12);
+  }
+
   @override
   // ignore: prefer_expression_function_bodies
   Widget build(BuildContext context) {
     final secretKey = widget._secretKey;
+    final theme = Theme.of(context);
+    final scale = theme.extension<ScaleScheme>()!;
+    final scaleConfig = theme.extension<ScaleConfig>()!;
 
-    return Scaffold(
+    return StyledScaffold(
         // resizeToAvoidBottomInset: false,
         appBar: DefaultAppBar(
             title: Text(translate('show_recovery_key_page.titlebar')),
@@ -47,9 +128,67 @@ class ShowRecoveryKeyPageState extends State<ShowRecoveryKeyPage> {
                     await GoRouterHelper(context).push('/settings');
                   })
             ]),
-        body: Column(children: [
+        body: SingleChildScrollView(
-          Text('ASS: $secretKey'),
+            child: Column(children: [
-          ElevatedButton(
+          Text(
+                  style: theme.textTheme.headlineSmall,
+                  textAlign: TextAlign.center,
+                  translate('show_recovery_key_page.instructions'))
+              .paddingAll(24),
+          ConstrainedBox(
+                  constraints: const BoxConstraints(maxWidth: 400),
+                  child: Text(
+                      softWrap: true,
+                      textAlign: TextAlign.center,
+                      translate('show_recovery_key_page.instructions_details')))
+              .toCenter()
+              .paddingLTRB(24, 0, 24, 24),
+          Text(
+                  textAlign: TextAlign.center,
+                  translate('show_recovery_key_page.instructions_options'))
+              .paddingLTRB(12, 0, 12, 12),
+          _optionBox(
+              instructions:
+                  translate('show_recovery_key_page.instructions_print'),
+              buttonIcon: const Icon(Icons.print),
+              buttonText: translate('show_recovery_key_page.print'),
+              onClick: () {
+                //
+                setState(() {
+                  _codeHandled = true;
+                });
+              }),
+          _optionBox(
+              instructions:
+                  translate('show_recovery_key_page.instructions_view'),
+              buttonIcon: const Icon(Icons.edit_document),
+              buttonText: translate('show_recovery_key_page.view'),
+              onClick: () {
+                //
+                singleFuture(this, () async {
+                  await showDialog<void>(
+                      context: context,
+                      builder: (context) => _recoveryKeyWidget(secretKey));
+                });
+
+                setState(() {
+                  _codeHandled = true;
+                });
+              }),
+          _optionBox(
+              instructions:
+                  translate('show_recovery_key_page.instructions_share'),
+              buttonIcon: const Icon(Icons.ios_share),
+              buttonText: translate('show_recovery_key_page.share'),
+              onClick: () {
+                //
+                setState(() {
+                  _codeHandled = true;
+                });
+              }),
+          Offstage(
+              offstage: !_codeHandled,
+              child: ElevatedButton(
                       onPressed: () {
                         if (context.mounted) {
                           Navigator.canPop(context)
@@ -57,7 +196,10 @@ class ShowRecoveryKeyPageState extends State<ShowRecoveryKeyPage> {
                               : GoRouterHelper(context).go('/');
                         }
                       },
-              child: Text(translate('button.finish')))
+                      child: Text(translate('button.finish')).paddingAll(8))
-        ]).paddingSymmetric(horizontal: 24, vertical: 8));
+                  .paddingAll(12))
+        ])));
   }
+
+  bool _codeHandled = false;
 }