yubioath-flutter/lib/fido/views/add_fingerprint_dialog.dart

292 lines
9.4 KiB
Dart
Raw Normal View History

2022-10-04 13:12:54 +03:00
/*
2024-07-04 15:36:42 +03:00
* Copyright (C) 2022-2024 Yubico.
2022-10-04 13:12:54 +03:00
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
2022-05-12 09:34:51 +03:00
// ignore_for_file: sort_child_properties_last
2022-03-23 11:49:20 +03:00
import 'dart:async';
import 'package:flutter/material.dart';
2022-09-09 11:07:46 +03:00
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
2022-03-23 11:49:20 +03:00
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:logging/logging.dart';
2024-03-08 11:30:47 +03:00
import 'package:material_symbols_icons/symbols.dart';
2022-03-23 11:49:20 +03:00
import '../../app/logging.dart';
2022-03-25 17:43:32 +03:00
import '../../app/message.dart';
2023-11-10 17:24:53 +03:00
import '../../app/models.dart';
2022-06-13 17:45:26 +03:00
import '../../desktop/models.dart';
2023-11-10 17:24:53 +03:00
import '../../fido/models.dart';
import '../../widgets/app_input_decoration.dart';
2023-11-10 17:24:53 +03:00
import '../../widgets/app_text_form_field.dart';
import '../../widgets/responsive_dialog.dart';
2022-07-06 16:22:15 +03:00
import '../../widgets/utf8_utils.dart';
2022-03-23 11:49:20 +03:00
import '../state.dart';
2022-03-23 19:50:49 +03:00
final _log = Logger('fido.views.add_fingerprint_dialog');
2022-03-23 11:49:20 +03:00
class AddFingerprintDialog extends ConsumerStatefulWidget {
final DevicePath devicePath;
2022-05-12 10:56:55 +03:00
const AddFingerprintDialog(this.devicePath, {super.key});
2022-03-23 11:49:20 +03:00
@override
ConsumerState<ConsumerStatefulWidget> createState() =>
_AddFingerprintDialogState();
}
class _AddFingerprintDialogState extends ConsumerState<AddFingerprintDialog>
with SingleTickerProviderStateMixin {
late FocusNode _nameFocus;
late AnimationController _animator;
late Animation<Color?> _color;
late StreamSubscription<FingerprintEvent> _subscription;
int _samples = 0;
int _remaining = 5;
Fingerprint? _fingerprint;
String _label = '';
@override
void dispose() {
_animator.dispose();
_nameFocus.dispose();
2024-03-05 11:48:36 +03:00
_subscription.cancel();
2022-03-23 11:49:20 +03:00
super.dispose();
}
2023-12-19 18:09:55 +03:00
Animation<Color?> _animateColor(bool success,
2022-03-24 14:39:49 +03:00
{Function? atPeak, bool reverse = true}) {
2023-12-19 18:09:55 +03:00
final theme = Theme.of(context);
final darkMode = theme.brightness == Brightness.dark;
final beginColor = darkMode ? Colors.white : Colors.black;
final endColor =
success ? theme.colorScheme.primary : theme.colorScheme.error;
2022-03-23 11:49:20 +03:00
final animation =
2023-12-19 18:09:55 +03:00
ColorTween(begin: beginColor, end: endColor).animate(_animator);
2022-03-23 11:49:20 +03:00
_animator.forward().then((_) {
2022-03-24 14:39:49 +03:00
if (reverse) {
atPeak?.call();
_animator.reverse();
}
2022-03-23 11:49:20 +03:00
});
return animation;
}
@override
void initState() {
super.initState();
_nameFocus = FocusNode();
_animator = AnimationController(
vsync: this, duration: const Duration(milliseconds: 250));
2023-12-19 18:09:55 +03:00
_color = ColorTween().animate(_animator);
2022-03-23 11:49:20 +03:00
_subscription = ref
.read(fingerprintProvider(widget.devicePath).notifier)
2022-03-23 11:49:20 +03:00
.registerFingerprint()
.listen((event) {
setState(() {
event.when(capture: (remaining) {
2023-12-19 18:09:55 +03:00
_color = _animateColor(true, atPeak: () {
2022-03-23 11:49:20 +03:00
setState(() {
_samples += 1;
_remaining = remaining;
});
2022-03-24 14:39:49 +03:00
}, reverse: remaining > 0);
2022-03-23 11:49:20 +03:00
}, complete: (fingerprint) {
_remaining = 0;
// Add delay to show that progressbar is filled
Timer(const Duration(milliseconds: 200), () {
setState(() {
_fingerprint = fingerprint;
});
// This needs a short delay to ensure the field is enabled first
Timer(const Duration(milliseconds: 100), _nameFocus.requestFocus);
});
2022-03-23 11:49:20 +03:00
}, error: (code) {
2022-05-03 12:24:25 +03:00
_log.debug('Fingerprint capture error (code: $code)');
2023-12-19 18:09:55 +03:00
_color = _animateColor(false);
2022-03-23 11:49:20 +03:00
});
});
2022-03-23 19:50:49 +03:00
}, onError: (error, stacktrace) {
2022-05-03 12:24:25 +03:00
_log.error('Error adding fingerprint', error, stacktrace);
2024-08-13 16:22:22 +03:00
if (!mounted) return;
2022-03-23 11:49:20 +03:00
Navigator.of(context).pop();
final l10n = AppLocalizations.of(context)!;
2022-06-13 17:45:26 +03:00
final String errorMessage;
// TODO: Make this cleaner than importing desktop specific RpcError.
if (error is RpcError) {
if (error.status == 'user-action-timeout') {
errorMessage = l10n.l_user_action_timeout_error;
} else if (error.status == 'connection-error') {
errorMessage = l10n.l_failed_connecting_to_fido;
} else {
errorMessage = error.message;
}
2022-06-13 17:45:26 +03:00
} else {
errorMessage = error.toString();
}
showMessage(
context,
l10n.l_adding_fingerprint_failed(errorMessage),
2022-06-13 17:45:26 +03:00
duration: const Duration(seconds: 4),
);
2022-03-23 11:49:20 +03:00
});
}
String _getMessage() {
2023-02-28 21:05:46 +03:00
final l10n = AppLocalizations.of(context)!;
2022-03-23 11:49:20 +03:00
if (_samples == 0) {
2023-02-28 21:05:46 +03:00
return l10n.p_press_fingerprint_begin;
2022-03-23 11:49:20 +03:00
}
if (_fingerprint == null) {
2023-02-28 21:05:46 +03:00
return l10n.l_keep_touching_yk;
2022-03-23 11:49:20 +03:00
} else {
2023-02-28 21:05:46 +03:00
return l10n.l_fingerprint_captured;
2022-03-23 11:49:20 +03:00
}
}
void _submit() async {
2023-02-28 21:05:46 +03:00
final l10n = AppLocalizations.of(context)!;
2022-06-13 17:45:26 +03:00
try {
await ref
.read(fingerprintProvider(widget.devicePath).notifier)
.renameFingerprint(_fingerprint!, _label);
if (!mounted) return;
Navigator.of(context).pop(true);
showMessage(context, l10n.s_fingerprint_added);
2022-06-13 17:45:26 +03:00
} catch (e) {
final String errorMessage;
// TODO: Make this cleaner than importing desktop specific RpcError.
if (e is RpcError) {
errorMessage = e.message;
} else {
errorMessage = e.toString();
}
showMessage(
context,
l10n.l_setting_name_failed(errorMessage),
2022-06-13 17:45:26 +03:00
duration: const Duration(seconds: 4),
);
}
}
2022-03-23 11:49:20 +03:00
@override
Widget build(BuildContext context) {
2023-02-28 21:05:46 +03:00
final l10n = AppLocalizations.of(context)!;
2022-03-23 11:49:20 +03:00
final progress = _samples == 0 ? 0.0 : _samples / (_samples + _remaining);
return ResponsiveDialog(
title: Text(l10n.s_add_fingerprint),
child: Padding(
padding: const EdgeInsets.only(top: 38, bottom: 4, right: 18, left: 18),
child: Column(
2023-12-19 18:09:55 +03:00
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Column(
children: [
Padding(
2023-12-19 18:09:55 +03:00
padding: const EdgeInsets.all(8.0),
child: Text(
_getMessage(),
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 16, fontWeight: FontWeight.normal),
),
),
Padding(
padding: _fingerprint == null
? const EdgeInsets.all(34)
: const EdgeInsets.only(top: 4, bottom: 12),
child: AnimatedBuilder(
animation: _color,
builder: (context, _) {
return Icon(
2024-03-08 11:30:47 +03:00
_fingerprint == null
? Symbols.fingerprint
: Symbols.check,
size: 128.0,
color: _color.value,
);
},
),
2022-03-23 11:49:20 +03:00
),
if (_fingerprint == null)
2023-12-19 18:09:55 +03:00
Container(
constraints: const BoxConstraints(maxWidth: 360),
child: LinearProgressIndicator(
value: progress,
),
),
if (_fingerprint != null) ...[
Text(
l10n.l_name_fingerprint,
style: const TextStyle(
fontSize: 16, fontWeight: FontWeight.normal),
),
const SizedBox(height: 16),
Container(
constraints: const BoxConstraints(maxWidth: 360),
child: AppTextFormField(
focusNode: _nameFocus,
maxLength: 15,
inputFormatters: [limitBytesLength(15)],
buildCounter: buildByteCounterFor(_label),
autofocus: true,
decoration: AppInputDecoration(
border: const OutlineInputBorder(),
labelText: l10n.s_name,
2024-03-08 11:30:47 +03:00
prefixIcon: const Icon(Symbols.fingerprint),
),
onChanged: (value) {
setState(() {
_label = value.trim();
});
},
onFieldSubmitted: (_) {
2024-07-04 15:36:42 +03:00
if (_label.isNotEmpty) {
_submit();
} else {
_nameFocus.requestFocus();
}
},
).init(),
)
2023-12-19 18:09:55 +03:00
]
],
),
]
.map((e) => Padding(
child: e,
padding: const EdgeInsets.symmetric(vertical: 8.0),
))
.toList(),
),
2022-03-23 11:49:20 +03:00
),
onCancel: () {
_subscription.cancel();
},
actions: [
if (_fingerprint != null)
2023-12-19 18:09:55 +03:00
TextButton(
onPressed: _label.isNotEmpty ? _submit : null,
child: Text(l10n.s_save),
)
2022-03-23 11:49:20 +03:00
],
);
}
}