Break up OATH widgets into separate files.

lib/app/main_page.dart

@@ -7,7 +7,7 @@ import 'models.dart';
 import 'state.dart';
 
 import '../../about_page.dart';
-import '../../oath/oath_screen.dart';
+import '../oath/views/oath_screen.dart';
 
 class MainPage extends ConsumerWidget {
   const MainPage({Key? key}) : super(key: key);

lib/oath/oath_screen.dart

@@ -1,29 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
-
-import '../app/models.dart';
-import 'state.dart';
-
-class OathScreen extends ConsumerWidget {
-  final DeviceNode device;
-  const OathScreen(this.device, {Key? key}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final state = ref.watch(oathStateProvider(device.path));
-
-    if (state == null) {
-      return const CircularProgressIndicator();
-    }
-
-    return Center(
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          Text('YubiKey: ${device.name}'),
-          Text('OATH ID: ${state.deviceId}'),
-        ],
-      ),
-    );
-  }
-}

lib/oath/state.dart

@@ -5,6 +5,7 @@ import 'dart:math';
 
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:shared_preferences/shared_preferences.dart';
 
 import '../core/state.dart';
 import 'models.dart';
@@ -191,16 +192,25 @@ class CredentialListNotifier extends StateNotifier<List<OathPair>?> {
 final favoriteProvider =
     StateNotifierProvider.family<FavoriteNotifier, bool, String>(
   (ref, credentialId) {
-    return FavoriteNotifier(credentialId);
+    return FavoriteNotifier(ref.watch(prefProvider), credentialId);
   },
 );
 
 class FavoriteNotifier extends StateNotifier<bool> {
-  final String _id;
-  FavoriteNotifier(this._id) : super(false);
+  final SharedPreferences prefs;
+  final String _key;
+  FavoriteNotifier._(this.prefs, this._key)
+      : super(prefs.getBool(_key) ?? false);
 
-  toggleFavorite() {
-    state = !state;
+  factory FavoriteNotifier(SharedPreferences prefs, String credentialId) {
+    return FavoriteNotifier._(prefs, 'OATH_STATE_FAVORITE_$credentialId');
+  }
+
+  toggleFavorite() async {
+    await prefs.setBool(_key, !state);
+    if (mounted) {
+      state = !state;
+    }
   }
 }
 

lib/oath/views/account_list.dart

@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+
+import '../../app/models.dart';
+import '../models.dart';
+import 'account_view.dart';
+
+class AccountList extends StatelessWidget {
+  final DeviceNode device;
+  final List<OathPair> credentials;
+  const AccountList(this.device, this.credentials, {Key? key})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    if (credentials.isEmpty) {
+      return const Center(
+        child: Text('No credentials'),
+      );
+    }
+
+    return ListView(
+      shrinkWrap: true,
+      children: [
+        ...credentials.map(
+          (entry) => AccountView(device, entry.credential, entry.code),
+        ),
+      ],
+    );
+  }
+}

lib/oath/views/account_view.dart

@@ -0,0 +1,97 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../../widgets/circle_timer.dart';
+import '../../app/models.dart';
+import '../models.dart';
+import '../state.dart';
+
+class AccountView extends ConsumerWidget {
+  final DeviceNode device;
+  final OathCredential credential;
+  final OathCode? code;
+  const AccountView(this.device, this.credential, this.code, {Key? key})
+      : super(key: key);
+
+  bool get _expired =>
+      (code?.validTo ?? 0) * 1000 < DateTime.now().millisecondsSinceEpoch;
+
+  String get _avatarLetter {
+    var name = credential.issuer ?? credential.name;
+    return name.substring(0, 1).toUpperCase();
+  }
+
+  String get _label => '${credential.issuer} (${credential.name})';
+
+  String get _code {
+    var value = code?.value;
+    if (value == null) {
+      return '••• •••';
+    } else if (value.length < 6) {
+      return value;
+    } else {
+      var i = value.length ~/ 2;
+      return value.substring(0, i) + ' ' + value.substring(i);
+    }
+  }
+
+  Color get _color =>
+      Colors.primaries.elementAt(_label.hashCode % Colors.primaries.length);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final favorite = ref.watch(favoriteProvider(credential.id));
+
+    return Padding(
+      padding: const EdgeInsets.all(8.0),
+      child: Row(children: [
+        CircleAvatar(
+          backgroundColor: _color,
+          child: Text(_avatarLetter, style: const TextStyle(fontSize: 18)),
+        ),
+        const SizedBox(width: 8.0),
+        Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(_code,
+                style: _expired
+                    ? Theme.of(context)
+                        .textTheme
+                        .headline6
+                        ?.copyWith(color: Colors.grey)
+                    : Theme.of(context).textTheme.headline6),
+            Text(_label, style: Theme.of(context).textTheme.caption),
+          ],
+        ),
+        const Spacer(),
+        Row(
+          children: [
+            IconButton(
+              onPressed: () {
+                ref
+                    .read(favoriteProvider(credential.id).notifier)
+                    .toggleFavorite();
+              },
+              icon: Icon(favorite ? Icons.star : Icons.star_border),
+            ),
+            SizedBox.square(
+              dimension: 16,
+              child: code != null && code!.validTo - code!.validFrom < 600
+                  ? CircleTimer(code!.validFrom * 1000, code!.validTo * 1000)
+                  : null,
+            ),
+            if (code == null)
+              IconButton(
+                icon: const Icon(Icons.refresh),
+                onPressed: () {
+                  ref
+                      .read(credentialListProvider(device.path).notifier)
+                      .calculate(credential);
+                },
+              )
+          ],
+        ),
+      ]),
+    );
+  }
+}

lib/oath/views/add_account_page.dart

@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../../app/state.dart';
+import '../../app/models.dart';
+
+class OathAddAccountPage extends ConsumerWidget {
+  final DeviceNode device;
+  const OathAddAccountPage({required this.device, Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    // If current device changes, we need to pop back to the main Page.
+    ref.listen<DeviceNode?>(currentDeviceProvider, (previous, next) {
+      //TODO: This can probably be checked better to make sure it's the main page.
+      Navigator.of(context).popUntil((route) => route.isFirst);
+    });
+
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('Add account'),
+      ),
+      body: Column(
+        children: [
+          Text('Placeholder. Add account to ${device.name}'),
+        ],
+      ),
+    );
+  }
+}

lib/oath/views/oath_screen.dart

@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../../app/models.dart';
+import '../models.dart';
+import '../state.dart';
+import 'account_list.dart';
+import 'account_view.dart';
+import 'add_account_page.dart';
+
+class OathScreen extends ConsumerWidget {
+  final DeviceNode device;
+  const OathScreen(this.device, {Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final state = ref.watch(oathStateProvider(device.path));
+
+    if (state == null) {
+      return const CircularProgressIndicator();
+    }
+
+    if (state.locked) {
+      return Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text('YubiKey: ${device.name}'),
+            Text('OATH ID: ${state.deviceId}'),
+          ],
+        ),
+      );
+    } else {
+      final accounts = ref.watch(credentialListProvider(device.path));
+      if (accounts == null) {
+        return Column(
+          children: const [
+            Text('Reading...'),
+          ],
+        );
+      }
+      return Column(
+        children: [
+          TextField(
+            onChanged: (value) {
+              ref.read(searchFilterProvider.notifier).setFilter(value);
+            },
+            decoration: const InputDecoration(labelText: 'Search'),
+          ),
+          AccountList(device, ref.watch(filteredCredentialsProvider(accounts))),
+          TextButton(
+            onPressed: () {
+              Navigator.of(context).push(
+                MaterialPageRoute(
+                    builder: (context) => OathAddAccountPage(device: device)),
+              );
+            },
+            child: const Text('Add'),
+          ),
+        ],
+      );
+    }
+  }
+}

lib/widgets/circle_timer.dart

@@ -0,0 +1,63 @@
+import 'package:flutter/material.dart';
+
+import 'progress_circle.dart';
+
+class CircleTimer extends StatefulWidget {
+  final int validFromMs;
+  final int validToMs;
+  const CircleTimer(this.validFromMs, this.validToMs, {Key? key})
+      : super(key: key);
+
+  @override
+  State<StatefulWidget> createState() => _CircleTimerState();
+}
+
+class _CircleTimerState extends State<CircleTimer>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _animator;
+  late Tween<double> _tween;
+  late Animation<double> _progress;
+
+  void _animate() {
+    var period = widget.validToMs - widget.validFromMs;
+    var now = DateTime.now().millisecondsSinceEpoch;
+    _tween.begin = 1.0 - (now - widget.validFromMs) / period;
+    var timeLeft = widget.validToMs - now;
+    if (timeLeft > 0) {
+      _animator.duration = Duration(milliseconds: timeLeft.toInt());
+      _animator.forward();
+    }
+  }
+
+  @override
+  void initState() {
+    super.initState();
+
+    _animator = AnimationController(vsync: this);
+    _tween = Tween(end: 0);
+    _progress = _tween.animate(_animator)
+      ..addListener(() {
+        setState(() {});
+      });
+
+    _animate();
+  }
+
+  @override
+  void didUpdateWidget(CircleTimer oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    _animator.reset();
+    _animate();
+  }
+
+  @override
+  void dispose() {
+    _animator.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ProgressCircle(Colors.grey, _progress.value);
+  }
+}

lib/widgets/progress_circle.dart

@@ -0,0 +1,39 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+
+class ProgressCircle extends StatelessWidget {
+  final Color color;
+  final double progress;
+  const ProgressCircle(this.color, this.progress, {Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomPaint(
+      painter: _CirclePainter(color, progress),
+    );
+  }
+}
+
+class _CirclePainter extends CustomPainter {
+  final Color color;
+  final double progress;
+  _CirclePainter(this.color, this.progress);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    var radius = min(size.width, size.height) / 2;
+    canvas.drawArc(
+      Rect.fromCircle(center: Offset(radius, radius), radius: radius),
+      -pi / 2,
+      -progress * 2 * pi,
+      true,
+      Paint()..color = color,
+    );
+  }
+
+  @override
+  bool shouldRepaint(_CirclePainter oldDelegate) {
+    return oldDelegate.progress != progress || oldDelegate.color != color;
+  }
+}