Implement Scanner-View

flutter/lib/pages/channel_scanner/channel_scanner.dart

@@ -0,0 +1,159 @@
+import 'dart:convert';
+
+import 'package:flutter/material.dart';
+import 'package:font_awesome_flutter/font_awesome_flutter.dart';
+import 'package:mobile_scanner/mobile_scanner.dart';
+import 'package:simplecloudnotifier/components/layout/scaffold.dart';
+import 'package:simplecloudnotifier/models/scan_result.dart';
+import 'package:simplecloudnotifier/pages/channel_scanner/channel_scanner_result_channelsubscribe.dart';
+import 'package:simplecloudnotifier/pages/channel_scanner/channel_scanner_result_channelview.dart';
+import 'package:simplecloudnotifier/pages/channel_scanner/channel_scanner_result_messagesend.dart';
+import 'package:simplecloudnotifier/utils/ui.dart';
+
+class ChannelScannerPage extends StatefulWidget {
+  const ChannelScannerPage({super.key});
+
+  @override
+  State<ChannelScannerPage> createState() => _ChannelScannerPageState();
+}
+
+class _ChannelScannerPageState extends State<ChannelScannerPage> {
+  final MobileScannerController _controller = MobileScannerController(
+    formats: const [BarcodeFormat.qrCode],
+  );
+
+  ScanResult? scanResult = null;
+
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SCNScaffold(
+      title: "Scanner",
+      showSearch: false,
+      showShare: false,
+      child: SingleChildScrollView(
+        child: Padding(
+          padding: const EdgeInsets.fromLTRB(24, 16, 24, 16),
+          child: Column(
+            children: [
+              SizedBox(height: 16),
+              if (scanResult == null) ...[
+                Center(
+                  child: Container(
+                    decoration: BoxDecoration(
+                      borderRadius: BorderRadius.circular(UI.DefaultBorderRadius),
+                    ),
+                    clipBehavior: Clip.hardEdge,
+                    child: SizedBox(
+                      height: 300,
+                      width: 300,
+                      child: MobileScanner(
+                        fit: BoxFit.cover,
+                        controller: _controller,
+                        onDetect: _handleBarcode,
+                      ),
+                    ),
+                  ),
+                ),
+                SizedBox(height: 16),
+              ],
+              Center(
+                child: ConstrainedBox(
+                  constraints: BoxConstraints(maxWidth: 300, minWidth: 300, minHeight: 200),
+                  child: _buildScanResult(context),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  void _handleBarcode(BarcodeCapture barcodes) {
+    setState(() {
+      if (barcodes.barcodes.isEmpty) {
+        scanResult = null;
+      } else {
+        scanResult = ScanResult.parse(barcodes.barcodes[0].rawValue ?? '');
+        print('parsed: ${jsonEncode(barcodes.barcodes[0].rawValue)} as ${scanResult.runtimeType.toString()}');
+      }
+    });
+  }
+
+  Widget _buildScanResult(BuildContext context) {
+    if (scanResult == null) {
+      return UI.box(
+        padding: EdgeInsets.fromLTRB(16, 32, 16, 8),
+        context: context,
+        child: Center(
+          child: Column(
+            spacing: 32,
+            children: [
+              Icon(FontAwesomeIcons.solidEmptySet, size: 64, color: Theme.of(context).colorScheme.onPrimaryContainer.withAlpha(48)),
+              Text("Please scan a Channel QR Code to subscribe to it", style: TextStyle(fontStyle: FontStyle.italic), textAlign: TextAlign.center),
+            ],
+          ),
+        ),
+      );
+    }
+
+    if (scanResult! is ScanResultMessageSend) {
+      return UI.box(
+        padding: EdgeInsets.fromLTRB(16, 8, 16, 8),
+        context: context,
+        child: ChannelScannerResultMessageSend(value: scanResult! as ScanResultMessageSend),
+      );
+    }
+
+    if (scanResult! is ScanResultChannel) {
+      return UI.box(
+        padding: EdgeInsets.fromLTRB(16, 8, 16, 8),
+        context: context,
+        child: ChannelScannerResultChannelView(value: scanResult! as ScanResultChannel),
+      );
+    }
+
+    if (scanResult! is ScanResultChannelSubscribe) {
+      return UI.box(
+        padding: EdgeInsets.fromLTRB(16, 8, 16, 8),
+        context: context,
+        child: ChannelScannerResultChannelSubscribe(value: scanResult! as ScanResultChannelSubscribe),
+      );
+    }
+
+    if (scanResult! is ScanResultError) {
+      return UI.box(
+        padding: EdgeInsets.fromLTRB(16, 32, 16, 8),
+        context: context,
+        child: Center(
+          child: Column(
+            spacing: 32,
+            children: [
+              Icon(FontAwesomeIcons.solidTriangleExclamation, size: 64, color: Colors.red[900]),
+              Text((scanResult! as ScanResultError).message, textAlign: TextAlign.center),
+            ],
+          ),
+        ),
+      );
+    }
+
+    return UI.box(
+      padding: EdgeInsets.fromLTRB(16, 32, 16, 8),
+      context: context,
+      child: Center(
+        child: Column(
+          spacing: 32,
+          children: [
+            Icon(FontAwesomeIcons.solidTriangleExclamation, size: 64, color: Colors.red[900]),
+            Text("Please scan a Channel QR Code to subscribe to it", style: TextStyle(fontStyle: FontStyle.italic), textAlign: TextAlign.center),
+          ],
+        ),
+      ),
+    );
+  }
+}

flutter/lib/pages/channel_scanner/channel_scanner_result_channelsubscribe.dart

@@ -0,0 +1,198 @@
+import 'package:flutter/material.dart';
+import 'package:font_awesome_flutter/font_awesome_flutter.dart';
+import 'package:provider/provider.dart';
+import 'package:simplecloudnotifier/api/api_client.dart';
+import 'package:simplecloudnotifier/models/channel.dart';
+import 'package:simplecloudnotifier/models/scan_result.dart';
+import 'package:simplecloudnotifier/models/subscription.dart';
+import 'package:simplecloudnotifier/models/user.dart';
+import 'package:simplecloudnotifier/pages/channel_view/channel_view.dart';
+import 'package:simplecloudnotifier/state/app_auth.dart';
+import 'package:simplecloudnotifier/state/application_log.dart';
+import 'package:simplecloudnotifier/utils/navi.dart';
+import 'package:simplecloudnotifier/utils/toaster.dart';
+import 'package:simplecloudnotifier/utils/ui.dart';
+
+class ChannelScannerResultChannelSubscribe extends StatefulWidget {
+  final ScanResultChannelSubscribe value;
+
+  const ChannelScannerResultChannelSubscribe({required this.value}) : super();
+
+  @override
+  State<ChannelScannerResultChannelSubscribe> createState() => _ChannelScannerResultChannelSubscribeState();
+}
+
+class _ChannelScannerResultChannelSubscribeState extends State<ChannelScannerResultChannelSubscribe> {
+  Future<(ChannelPreview, UserPreview)?> _fetchDataFuture;
+
+  _ChannelScannerResultChannelSubscribeState() : _fetchDataFuture = Future.value(null); // Initial dummy future
+
+  Subscription? overrideSubscription = null;
+
+  @override
+  void initState() {
+    super.initState();
+
+    final auth = Provider.of<AppAuth>(context, listen: false);
+    setState(() {
+      _fetchDataFuture = _fetchData(auth);
+    });
+  }
+
+  Future<(ChannelPreview, UserPreview)?> _fetchData(AppAuth auth) async {
+    ChannelPreview? channel = null;
+    try {
+      channel = await APIClient.getChannelPreview(auth, widget.value.channelID);
+    } catch (e, stackTrace) {
+      Toaster.error("Error", 'Failed to fetch channel preview: ${e.toString()}');
+      ApplicationLog.error('Failed to fetch channel (preview) for ${widget.value.channelID}', trace: stackTrace);
+      return null;
+    }
+
+    UserPreview? user = null;
+    try {
+      user = await APIClient.getUserPreview(auth, widget.value.ownerUserID);
+    } catch (e, stackTrace) {
+      Toaster.error("Error", 'Failed to fetch user preview: ${e.toString()}');
+      ApplicationLog.error('Failed to fetch user (preview) for ${widget.value.ownerUserID}', trace: stackTrace);
+      return null;
+    }
+
+    return (channel, user);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return FutureBuilder<(ChannelPreview, UserPreview)?>(
+      future: _fetchDataFuture,
+      builder: (context, snapshot) {
+        final auth = Provider.of<AppAuth>(context, listen: false);
+
+        if (snapshot.connectionState == ConnectionState.waiting) {
+          return const Center(child: CircularProgressIndicator());
+        }
+
+        if (snapshot.hasError) {
+          return Text('Error: ${snapshot.error}'); //TODO better error display
+        }
+
+        if (snapshot.data == null) {
+          return Column(
+            spacing: 32,
+            children: [
+              Icon(FontAwesomeIcons.solidTriangleExclamation, size: 64, color: Colors.red[900]),
+              Text("Failed to parse QR", textAlign: TextAlign.center),
+            ],
+          );
+        }
+
+        final (channel, user) = snapshot.data!;
+
+        final sub = overrideSubscription ?? channel.subscription;
+
+        return Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Text("SCN Channel", style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 20), textAlign: TextAlign.center),
+            const SizedBox(height: 16),
+            Row(
+              children: [
+                ConstrainedBox(child: Text("Name: ", style: const TextStyle(fontWeight: FontWeight.bold)), constraints: const BoxConstraints(minWidth: 100)),
+                Expanded(child: SingleChildScrollView(child: Text(channel.displayName), scrollDirection: Axis.horizontal)),
+              ],
+            ),
+            Row(
+              children: [
+                ConstrainedBox(child: Text("InternalName: ", style: const TextStyle(fontWeight: FontWeight.bold)), constraints: const BoxConstraints(minWidth: 100)),
+                Expanded(child: SingleChildScrollView(child: Text(channel.internalName, style: const TextStyle(fontStyle: FontStyle.italic)), scrollDirection: Axis.horizontal)),
+              ],
+            ),
+            Row(
+              children: [
+                ConstrainedBox(child: Text("ChannelID: ", style: const TextStyle(fontWeight: FontWeight.bold)), constraints: const BoxConstraints(minWidth: 100)),
+                Expanded(child: SingleChildScrollView(child: Text(channel.channelID, style: const TextStyle(fontStyle: FontStyle.italic)), scrollDirection: Axis.horizontal)),
+              ],
+            ),
+            Row(
+              children: [
+                ConstrainedBox(child: Text("Messages: ", style: const TextStyle(fontWeight: FontWeight.bold)), constraints: const BoxConstraints(minWidth: 100)),
+                Expanded(child: SingleChildScrollView(child: Text(channel.messagesSent.toString()), scrollDirection: Axis.horizontal)),
+              ],
+            ),
+            if (channel.descriptionName != null && channel.descriptionName!.isNotEmpty)
+              Row(
+                children: [
+                  ConstrainedBox(child: Text("Description:", style: const TextStyle(fontWeight: FontWeight.bold)), constraints: const BoxConstraints(minWidth: 100)),
+                  Expanded(child: SingleChildScrollView(child: Text(channel.descriptionName!), scrollDirection: Axis.horizontal)),
+                ],
+              ),
+            const SizedBox(height: 16),
+            Row(
+              children: [
+                ConstrainedBox(child: Text("Owner:", style: const TextStyle(fontWeight: FontWeight.bold)), constraints: const BoxConstraints(minWidth: 100)),
+                Expanded(child: SingleChildScrollView(child: Text((user.username ?? user.userID) + ((auth.userID != null && auth.userID! == user.userID) ? "\n(you)" : "")), scrollDirection: Axis.horizontal)),
+              ],
+            ),
+            Row(
+              children: [
+                ConstrainedBox(child: Text("UserID:", style: const TextStyle(fontWeight: FontWeight.bold)), constraints: const BoxConstraints(minWidth: 100)),
+                Expanded(child: SingleChildScrollView(child: Text(user.userID, style: const TextStyle(fontStyle: FontStyle.italic)), scrollDirection: Axis.horizontal)),
+              ],
+            ),
+            const SizedBox(height: 16),
+            Row(
+              children: [
+                ConstrainedBox(child: Text("Status:", style: const TextStyle(fontWeight: FontWeight.bold)), constraints: const BoxConstraints(minWidth: 100)),
+                Expanded(child: SingleChildScrollView(child: Text(_formatSubscriptionStatus(sub)), scrollDirection: Axis.horizontal)),
+              ],
+            ),
+            const SizedBox(height: 48),
+            if (sub == null)
+              UI.button(
+                text: 'Request Subscription',
+                onPressed: _onSubscribe,
+                color: Theme.of(context).colorScheme.primary,
+                textColor: Theme.of(context).colorScheme.onPrimary,
+              ),
+            if (sub != null && sub.confirmed)
+              UI.button(
+                text: 'Go to channel',
+                onPressed: () {
+                  Navi.pushOnRoot(context, () => ChannelViewPage(channelID: widget.value.channelID, preloadedData: null, needsReload: null));
+                },
+                color: Theme.of(context).colorScheme.primary,
+                textColor: Theme.of(context).colorScheme.onPrimary,
+              ),
+          ],
+        );
+      },
+    );
+  }
+
+  void _onSubscribe() async {
+    final auth = Provider.of<AppAuth>(context, listen: false);
+    try {
+      var sub = await APIClient.subscribeToChannelbyID(auth, widget.value.channelID, subscribeKey: widget.value.subscribeKey);
+      if (sub.confirmed) {
+        Toaster.success("Success", "Subscription request sent and auto-confirmed");
+      } else {
+        Toaster.success("Success", "Subscription request sent - pending confirmation");
+      }
+      setState(() {
+        overrideSubscription = sub;
+      });
+    } catch (e) {
+      Toaster.error("Error", 'Failed to send subscription-request: ${e.toString()}');
+    }
+  }
+
+  String _formatSubscriptionStatus(Subscription? sub) {
+    if (sub == null) {
+      return "Not Subscribed";
+    } else if (sub.confirmed) {
+      return "Already Subscribed";
+    } else {
+      return "Unconfirmed Subscription";
+    }
+  }
+}

flutter/lib/pages/channel_scanner/channel_scanner_result_channelview.dart

@@ -0,0 +1,157 @@
+import 'package:flutter/material.dart';
+import 'package:font_awesome_flutter/font_awesome_flutter.dart';
+import 'package:provider/provider.dart';
+import 'package:simplecloudnotifier/api/api_client.dart';
+import 'package:simplecloudnotifier/models/channel.dart';
+import 'package:simplecloudnotifier/models/scan_result.dart';
+import 'package:simplecloudnotifier/models/subscription.dart';
+import 'package:simplecloudnotifier/models/user.dart';
+import 'package:simplecloudnotifier/state/app_auth.dart';
+import 'package:simplecloudnotifier/state/application_log.dart';
+import 'package:simplecloudnotifier/utils/toaster.dart';
+
+class ChannelScannerResultChannelView extends StatefulWidget {
+  final ScanResultChannel value;
+
+  const ChannelScannerResultChannelView({required this.value}) : super();
+
+  @override
+  State<ChannelScannerResultChannelView> createState() => _ChannelScannerResultChannelViewState();
+}
+
+class _ChannelScannerResultChannelViewState extends State<ChannelScannerResultChannelView> {
+  Future<(ChannelPreview, UserPreview)?> _fetchDataFuture;
+
+  _ChannelScannerResultChannelViewState() : _fetchDataFuture = Future.value(null); // Initial dummy future
+
+  @override
+  void initState() {
+    super.initState();
+
+    final auth = Provider.of<AppAuth>(context, listen: false);
+    setState(() {
+      _fetchDataFuture = _fetchData(auth);
+    });
+  }
+
+  Future<(ChannelPreview, UserPreview)?> _fetchData(AppAuth auth) async {
+    ChannelPreview? channel = null;
+    try {
+      channel = await APIClient.getChannelPreview(auth, widget.value.channelID);
+    } catch (e, stackTrace) {
+      Toaster.error("Error", 'Failed to fetch channel preview: ${e.toString()}');
+      ApplicationLog.error('Failed to fetch channel (preview) for ${widget.value.channelID}', trace: stackTrace);
+      return null;
+    }
+
+    UserPreview? user = null;
+    try {
+      user = await APIClient.getUserPreview(auth, widget.value.ownerUserID);
+    } catch (e, stackTrace) {
+      Toaster.error("Error", 'Failed to fetch user preview: ${e.toString()}');
+      ApplicationLog.error('Failed to fetch user (preview) for ${widget.value.ownerUserID}', trace: stackTrace);
+      return null;
+    }
+
+    return (channel, user);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return FutureBuilder<(ChannelPreview, UserPreview)?>(
+      future: _fetchDataFuture,
+      builder: (context, snapshot) {
+        if (snapshot.connectionState == ConnectionState.waiting) {
+          return const Center(child: CircularProgressIndicator());
+        }
+
+        if (snapshot.hasError) {
+          return Text('Error: ${snapshot.error}'); //TODO better error display
+        }
+
+        if (snapshot.data == null) {
+          return Column(
+            spacing: 32,
+            children: [
+              Icon(FontAwesomeIcons.solidTriangleExclamation, size: 64, color: Colors.red[900]),
+              Text("Failed to parse QR", textAlign: TextAlign.center),
+            ],
+          );
+        }
+
+        final (channel, user) = snapshot.data!;
+
+        return Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Text("SCN Channel", style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 20), textAlign: TextAlign.center),
+            const SizedBox(height: 16),
+            Row(
+              children: [
+                ConstrainedBox(child: Text("Name: ", style: const TextStyle(fontWeight: FontWeight.bold)), constraints: const BoxConstraints(minWidth: 100)),
+                Expanded(child: SingleChildScrollView(child: Text(channel.displayName), scrollDirection: Axis.horizontal)),
+              ],
+            ),
+            Row(
+              children: [
+                ConstrainedBox(child: Text("InternalName: ", style: const TextStyle(fontWeight: FontWeight.bold)), constraints: const BoxConstraints(minWidth: 100)),
+                Expanded(child: SingleChildScrollView(child: Text(channel.internalName, style: const TextStyle(fontStyle: FontStyle.italic)), scrollDirection: Axis.horizontal)),
+              ],
+            ),
+            Row(
+              children: [
+                ConstrainedBox(child: Text("ChannelID: ", style: const TextStyle(fontWeight: FontWeight.bold)), constraints: const BoxConstraints(minWidth: 100)),
+                Expanded(child: SingleChildScrollView(child: Text(channel.channelID, style: const TextStyle(fontStyle: FontStyle.italic)), scrollDirection: Axis.horizontal)),
+              ],
+            ),
+            Row(
+              children: [
+                ConstrainedBox(child: Text("Messages: ", style: const TextStyle(fontWeight: FontWeight.bold)), constraints: const BoxConstraints(minWidth: 100)),
+                Expanded(child: SingleChildScrollView(child: Text(channel.messagesSent.toString()), scrollDirection: Axis.horizontal)),
+              ],
+            ),
+            if (channel.descriptionName != null && channel.descriptionName!.isNotEmpty)
+              Row(
+                children: [
+                  ConstrainedBox(child: Text("Description:", style: const TextStyle(fontWeight: FontWeight.bold)), constraints: const BoxConstraints(minWidth: 100)),
+                  Expanded(child: SingleChildScrollView(child: Text(channel.descriptionName!), scrollDirection: Axis.horizontal)),
+                ],
+              ),
+            const SizedBox(height: 16),
+            Row(
+              children: [
+                ConstrainedBox(child: Text("Owner:", style: const TextStyle(fontWeight: FontWeight.bold)), constraints: const BoxConstraints(minWidth: 100)),
+                Expanded(child: SingleChildScrollView(child: Text(user.username ?? user.userID), scrollDirection: Axis.horizontal)),
+              ],
+            ),
+            Row(
+              children: [
+                ConstrainedBox(child: Text("UserID:", style: const TextStyle(fontWeight: FontWeight.bold)), constraints: const BoxConstraints(minWidth: 100)),
+                Expanded(child: SingleChildScrollView(child: Text(user.userID, style: const TextStyle(fontStyle: FontStyle.italic)), scrollDirection: Axis.horizontal)),
+              ],
+            ),
+            const SizedBox(height: 16),
+            Row(
+              children: [
+                ConstrainedBox(child: Text("Status:", style: const TextStyle(fontWeight: FontWeight.bold)), constraints: const BoxConstraints(minWidth: 100)),
+                Expanded(child: SingleChildScrollView(child: Text(_formatSubscriptionStatus(channel.subscription)), scrollDirection: Axis.horizontal)),
+              ],
+            ),
+            const SizedBox(height: 48),
+            Text('QR Code contains no subscription-key\nCannot subscribe to channel', textAlign: TextAlign.center, style: const TextStyle(fontStyle: FontStyle.italic)),
+          ],
+        );
+      },
+    );
+  }
+
+  String _formatSubscriptionStatus(Subscription? sub) {
+    if (sub == null) {
+      return "Not Subscribed";
+    } else if (sub.confirmed) {
+      return "Already Subscribed";
+    } else {
+      return "Unconfirmed Subscription";
+    }
+  }
+}

flutter/lib/pages/channel_scanner/channel_scanner_result_messagesend.dart

@@ -0,0 +1,239 @@
+import 'package:flutter/material.dart';
+import 'package:font_awesome_flutter/font_awesome_flutter.dart';
+import 'package:provider/provider.dart';
+import 'package:simplecloudnotifier/api/api_client.dart';
+import 'package:simplecloudnotifier/models/channel.dart';
+import 'package:simplecloudnotifier/models/keytoken.dart';
+import 'package:simplecloudnotifier/models/scan_result.dart';
+import 'package:simplecloudnotifier/models/user.dart';
+import 'package:simplecloudnotifier/state/app_auth.dart';
+import 'package:simplecloudnotifier/state/application_log.dart';
+import 'package:simplecloudnotifier/utils/toaster.dart';
+import 'package:simplecloudnotifier/utils/ui.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+class ChannelScannerResultMessageSend extends StatefulWidget {
+  final ScanResultMessageSend value;
+
+  const ChannelScannerResultMessageSend({required this.value}) : super();
+
+  @override
+  State<ChannelScannerResultMessageSend> createState() => _ChannelScannerResultMessageSendState();
+}
+
+class _ChannelScannerResultMessageSendState extends State<ChannelScannerResultMessageSend> {
+  Future<(UserPreview, KeyTokenPreview?)?> _fetchDataFuture;
+
+  _ChannelScannerResultMessageSendState() : _fetchDataFuture = Future.value(null); // Initial dummy future
+
+  late TextEditingController _ctrlMessage;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _ctrlMessage = TextEditingController();
+
+    final auth = Provider.of<AppAuth>(context, listen: false);
+    setState(() {
+      _fetchDataFuture = _fetchData(auth);
+    });
+  }
+
+  @override
+  void dispose() {
+    _ctrlMessage.dispose();
+    super.dispose();
+  }
+
+  Future<(UserPreview, KeyTokenPreview?)?> _fetchData(AppAuth auth) async {
+    UserPreview? user = null;
+    try {
+      user = await APIClient.getUserPreview(auth, widget.value.userID);
+    } catch (e, stackTrace) {
+      Toaster.error("Error", 'Failed to fetch user preview: ${e.toString()}');
+      ApplicationLog.error('Failed to fetch user (preview) for ${widget.value.userID}', trace: stackTrace);
+      return null;
+    }
+
+    KeyTokenPreview? key = null;
+    if (widget.value.userKey != null) {
+      try {
+        key = await APIClient.getKeyTokenPreviewByToken(auth, widget.value.userKey!);
+      } catch (e, stackTrace) {
+        Toaster.error("Error", 'Failed to fetch keytoken preview: ${e.toString()}');
+        ApplicationLog.error('Failed to fetch keytoken (preview) for ${widget.value.userID}', trace: stackTrace);
+        return null;
+      }
+    }
+
+    return (user, key);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return FutureBuilder<(UserPreview, KeyTokenPreview?)?>(
+      future: _fetchDataFuture,
+      builder: (context, snapshot) {
+        if (snapshot.connectionState == ConnectionState.waiting) {
+          return const Center(child: CircularProgressIndicator());
+        }
+
+        if (snapshot.hasError) {
+          return Text('Error: ${snapshot.error}'); //TODO better error display
+        }
+
+        if (snapshot.data == null) {
+          return Column(
+            spacing: 32,
+            children: [
+              Icon(FontAwesomeIcons.solidTriangleExclamation, size: 64, color: Colors.red[900]),
+              Text("Failed to parse QR", textAlign: TextAlign.center),
+            ],
+          );
+        }
+
+        final (user, key) = snapshot.data!;
+
+        return Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Text((widget.value.userKey == null) ? "SCN User" : "SCN User & Key", style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 20), textAlign: TextAlign.center),
+            const SizedBox(height: 16),
+            if (user.username != null)
+              Row(
+                children: [
+                  ConstrainedBox(child: Text("Name: ", style: const TextStyle(fontWeight: FontWeight.bold)), constraints: const BoxConstraints(minWidth: 100)),
+                  Expanded(child: SingleChildScrollView(child: Text(user.username!), scrollDirection: Axis.horizontal)),
+                ],
+              ),
+            Row(
+              children: [
+                ConstrainedBox(child: Text("UserID:", style: const TextStyle(fontWeight: FontWeight.bold)), constraints: const BoxConstraints(minWidth: 100)),
+                Expanded(child: SingleChildScrollView(child: Text(user.userID, style: const TextStyle(fontStyle: FontStyle.italic)), scrollDirection: Axis.horizontal)),
+              ],
+            ),
+            const SizedBox(height: 16),
+            if (key != null) ...[
+              Row(
+                children: [
+                  ConstrainedBox(child: Text("KeyID:", style: const TextStyle(fontWeight: FontWeight.bold)), constraints: const BoxConstraints(minWidth: 100)),
+                  Expanded(child: SingleChildScrollView(child: Text(key.keytokenID, style: const TextStyle(fontStyle: FontStyle.italic)), scrollDirection: Axis.horizontal)),
+                ],
+              ),
+              Row(
+                children: [
+                  ConstrainedBox(child: Text("KeyName:", style: const TextStyle(fontWeight: FontWeight.bold)), constraints: const BoxConstraints(minWidth: 100)),
+                  Expanded(child: SingleChildScrollView(child: Text(key.name), scrollDirection: Axis.horizontal)),
+                ],
+              ),
+              Row(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  ConstrainedBox(child: Text("Permissions:", style: const TextStyle(fontWeight: FontWeight.bold)), constraints: const BoxConstraints(minWidth: 100)),
+                  Expanded(
+                    child: SingleChildScrollView(
+                      child: Text(_formatPermissions(key.permissions) + "\n" + (key.allChannels ? "(all channels)" : '(${key.channels.length} channels)')),
+                      scrollDirection: Axis.horizontal,
+                    ),
+                  ),
+                ],
+              ),
+            ],
+            const SizedBox(height: 16),
+            if (widget.value.userKey == null)
+              Text(
+                'QR Code contains no key\nCannot send messages',
+                textAlign: TextAlign.center,
+                style: const TextStyle(fontStyle: FontStyle.italic),
+              ),
+            if (widget.value.userKey != null) ..._buildSend(context),
+          ],
+        );
+      },
+    );
+  }
+
+  List<Widget> _buildSend(BuildContext context) {
+    return [
+      FractionallySizedBox(
+        widthFactor: 1.0,
+        child: TextField(
+          controller: _ctrlMessage,
+          decoration: const InputDecoration(
+            border: OutlineInputBorder(),
+            labelText: 'Text',
+          ),
+        ),
+      ),
+      const SizedBox(height: 4),
+      Row(
+        children: [
+          Expanded(
+            child: UI.button(
+              text: 'Send Message',
+              onPressed: _onSend,
+              color: Theme.of(context).colorScheme.primary,
+              textColor: Theme.of(context).colorScheme.onPrimary,
+            ),
+          ),
+          const SizedBox(width: 8),
+          UI.button(
+            text: 'Web',
+            onPressed: _onOpenWeb,
+            color: Theme.of(context).colorScheme.secondary,
+            textColor: Theme.of(context).colorScheme.onSecondary,
+          ),
+        ],
+      ),
+    ];
+  }
+
+  void _onSend() async {
+    if (_ctrlMessage.text.isEmpty) {
+      Toaster.error("Error", 'Please enter a message');
+      return;
+    }
+
+    if (widget.value.userKey == null) return;
+
+    try {
+      await APIClient.sendMessage(widget.value.userID, widget.value.userKey!, _ctrlMessage.text);
+      Toaster.success("Success", 'Message sent');
+    } catch (e, stackTrace) {
+      Toaster.error("Error", 'Failed to send message: ${e.toString()}');
+      ApplicationLog.error('Failed to send message', trace: stackTrace);
+    }
+  }
+
+  void _onOpenWeb() async {
+    try {
+      final Uri uri = Uri.parse(widget.value.url);
+
+      ApplicationLog.debug('Opening URL: [ ${uri.toString()} ]');
+
+      if (await canLaunchUrl(uri)) {
+        await launchUrl(uri);
+      } else {
+        Toaster.error("Error", 'Cannot open URL on this system');
+      }
+    } catch (exc, trace) {
+      ApplicationLog.error('Failed to open URL: ' + exc.toString(), additional: 'URL: ${widget.value.url}', trace: trace);
+    }
+  }
+
+  String _formatPermissions(String v) {
+    var splt = v.split(';');
+
+    if (splt.length == 0) return "None";
+
+    List<String> result = [];
+
+    if (splt.contains("A")) result.add(" - Admin");
+    if (splt.contains("UR")) result.add(" - Read Account");
+    if (splt.contains("CR")) result.add(" - Read Messages");
+    if (splt.contains("CS")) result.add(" - Send Messages");
+
+    return result.join("\n");
+  }
+}