feat(app): add emergency button and info to secure page if not working

app/lib/common/widgets/hyperlink.dart

@@ -1,17 +1,23 @@
 import '../module.dart';
 
 class Hyperlink extends StatelessWidget {
-  const Hyperlink({ required this.text, required this.onTap, this.style });
+  const Hyperlink({
+    required this.text,
+    required this.onTap,
+    this.style,
+    this.color,
+  });
   final String text;
   final void Function() onTap;
   final TextStyle? style;
+  final Color? color;
 
   @override
   Widget build(BuildContext context) {
     final linkStyle = TextStyle(
-      color: PharMeTheme.secondaryColor,
+      color: color ?? PharMeTheme.secondaryColor,
       decoration: TextDecoration.underline,
-      decorationColor: PharMeTheme.secondaryColor,
+      decorationColor: color ?? PharMeTheme.secondaryColor,
     );
     return GestureDetector(
       onTap: onTap,

app/lib/l10n/app_en.arb

@@ -4,6 +4,8 @@
   "@action_cancel": {},
   "action_continue": "Continue",
   "@action_continue": {},
+  "action_ok": "OK",
+  "@action_ok": {},
   "action_understood": "Understood",
   "@action_understood": {},
   "action_back_to_app": "Back to App",
@@ -13,6 +15,22 @@
   "action_finish": "Finish",
   "@action_finish": {},
 
+  "action_back_to_pharme": "Back to PharMe",
+  "@action_back_to_pharme": {},
+  "secure_page_explanation_link": "Why am I seeing this screen?",
+  "@secure_page_explanation_link": {},
+  "secure_page_dialog_title": "This screen hides and protects your health information",
+  "@secure_page_dialog_title": {},
+  "secure_page_dialog_body": "\nIt should only show if PharMe is running in the background. Sometimes PharMe does not detect this correctly.\n\nPlease use the \"{buttonText}\" button to hide this screen.",
+  "@secure_page_dialog_body": {
+    "placeholders": {
+      "buttonText": {
+        "type": "String",
+        "example": "Back to PharMe"
+      }
+    }
+  },
+
   "error_title": "Something went wrong",
   "@error_title": {},
   "error_uncaught_message_first_part": "PharMe has encountered an unknown error. ",

app/lib/secure/pages/secure.dart

@@ -1,11 +1,78 @@
+import 'dart:async';
+
 import '../../common/module.dart';
 
 @RoutePage()
-class SecurePage extends StatelessWidget {
+class SecurePage extends HookWidget {
   const SecurePage({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return PharMeLogoPage();
+    final appActive = useState(false);
+    final showHelp = useState(false);
+    useEffect(() {
+      final timer = Timer(
+        Duration(milliseconds: 500), () {
+          if (appActive.value) showHelp.value = true;
+        },
+      );
+      return timer.cancel;
+    });
+    useOnAppLifecycleStateChange((previous, current) async {
+      if (current == AppLifecycleState.resumed) {
+        appActive.value = true;
+      }
+      if (
+        current == AppLifecycleState.inactive ||
+        current == AppLifecycleState.paused
+      ) {
+        appActive.value = false;
+        showHelp.value = false;
+      }
+    });
+    final buttonText = context.l10n.action_back_to_pharme;
+    return PharMeLogoPage(
+      child: Padding(
+        padding: EdgeInsets.all(PharMeTheme.largeSpace),
+        child: Visibility(
+          visible: showHelp.value,
+          maintainAnimation: true,
+          maintainSize: false,
+          maintainState: true,
+          child:  AnimatedOpacity(
+            opacity: showHelp.value ? 1.0 : 0.0,
+            duration: Duration(milliseconds: 500),
+            child: Column(
+              children: [
+                FullWidthButton(
+                  buttonText,
+                  () => routeBackAfterSecurePage(context.router),
+                ),
+                SizedBox(height: PharMeTheme.mediumSpace),
+                Hyperlink(
+                  text: context.l10n.secure_page_explanation_link,
+                  color: PharMeTheme.buttonColor,
+                  onTap: () => showAdaptiveDialog(
+                    context: context,
+                    builder: (context) => DialogWrapper(
+                      title: context.l10n.secure_page_dialog_title,
+                      content: DialogContentText(
+                        context.l10n.secure_page_dialog_body(buttonText),
+                      ),
+                      actions: [
+                        DialogAction(
+                          text: context.l10n.action_ok,
+                          onPressed: () => Navigator.pop(context),
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
   }
-}
+}