123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650 |
- import 'dart:async';
- import 'dart:io';
- import 'dart:ui' as ui;
- import 'package:clipboard/clipboard.dart';
- import 'package:ente_auth/core/configuration.dart';
- import 'package:ente_auth/ente_theme_data.dart';
- import 'package:ente_auth/l10n/l10n.dart';
- import 'package:ente_auth/models/code.dart';
- import 'package:ente_auth/onboarding/view/setup_enter_secret_key_page.dart';
- import 'package:ente_auth/onboarding/view/view_qr_page.dart';
- import 'package:ente_auth/services/local_authentication_service.dart';
- import 'package:ente_auth/services/preference_service.dart';
- import 'package:ente_auth/store/code_store.dart';
- import 'package:ente_auth/ui/code_timer_progress.dart';
- import 'package:ente_auth/ui/utils/icon_utils.dart';
- import 'package:ente_auth/utils/dialog_util.dart';
- import 'package:ente_auth/utils/platform_util.dart';
- import 'package:ente_auth/utils/toast_util.dart';
- import 'package:ente_auth/utils/totp_util.dart';
- import 'package:flutter/material.dart';
- import 'package:flutter_context_menu/flutter_context_menu.dart';
- import 'package:flutter_slidable/flutter_slidable.dart';
- import 'package:flutter_svg/flutter_svg.dart';
- import 'package:fluttertoast/fluttertoast.dart';
- import 'package:logging/logging.dart';
- import 'package:move_to_background/move_to_background.dart';
- class CodeWidget extends StatefulWidget {
- final Code code;
- final List<String> tags;
- const CodeWidget(this.code, this.tags, {super.key});
- @override
- State<CodeWidget> createState() => _CodeWidgetState();
- }
- class _CodeWidgetState extends State<CodeWidget> {
- Timer? _everySecondTimer;
- final ValueNotifier<String> _currentCode = ValueNotifier<String>("");
- final ValueNotifier<String> _nextCode = ValueNotifier<String>("");
- final Logger logger = Logger("_CodeWidgetState");
- bool _isInitialized = false;
- late bool hasConfiguredAccount;
- late bool _shouldShowLargeIcon;
- late bool _hideCode;
- bool isMaskingEnabled = false;
- @override
- void initState() {
- super.initState();
- isMaskingEnabled = PreferenceService.instance.shouldHideCodes();
- _hideCode = isMaskingEnabled;
- _everySecondTimer =
- Timer.periodic(const Duration(milliseconds: 500), (Timer t) {
- String newCode = _getCurrentOTP();
- if (newCode != _currentCode.value) {
- _currentCode.value = newCode;
- if (widget.code.type == Type.totp) {
- _nextCode.value = _getNextTotp();
- }
- }
- });
- hasConfiguredAccount = Configuration.instance.hasConfiguredAccount();
- }
- @override
- void dispose() {
- _everySecondTimer?.cancel();
- _currentCode.dispose();
- _nextCode.dispose();
- super.dispose();
- }
- @override
- Widget build(BuildContext context) {
- if (isMaskingEnabled != PreferenceService.instance.shouldHideCodes()) {
- isMaskingEnabled = PreferenceService.instance.shouldHideCodes();
- _hideCode = isMaskingEnabled;
- }
- _shouldShowLargeIcon = PreferenceService.instance.shouldShowLargeIcons();
- if (!_isInitialized) {
- _currentCode.value = _getCurrentOTP();
- if (widget.code.type == Type.totp) {
- _nextCode.value = _getNextTotp();
- }
- _isInitialized = true;
- }
- final l10n = context.l10n;
- return Container(
- margin: const EdgeInsets.only(left: 16, right: 16, bottom: 8, top: 8),
- child: Builder(
- builder: (context) {
- if (PlatformUtil.isDesktop()) {
- return ContextMenuRegion(
- contextMenu: ContextMenu(
- entries: <ContextMenuEntry>[
- MenuItem(
- label: 'QR',
- icon: Icons.qr_code_2_outlined,
- onSelected: () => _onShowQrPressed(null),
- ),
- MenuItem(
- label: widget.code.isPinned ? l10n.unpinText : l10n.pinText,
- icon: widget.code.isPinned
- ? Icons.push_pin
- : Icons.push_pin_outlined,
- onSelected: () => _onShowQrPressed(null),
- ),
- MenuItem(
- label: l10n.edit,
- icon: Icons.edit,
- onSelected: () => _onEditPressed(null),
- ),
- const MenuDivider(),
- MenuItem(
- label: l10n.delete,
- value: "Delete",
- icon: Icons.delete,
- onSelected: () => _onDeletePressed(null),
- ),
- ],
- padding: const EdgeInsets.all(8.0),
- ),
- child: _clippedCard(l10n),
- );
- }
- return Slidable(
- key: ValueKey(widget.code.hashCode),
- endActionPane: ActionPane(
- extentRatio: 0.90,
- motion: const ScrollMotion(),
- children: [
- const SizedBox(
- width: 14,
- ),
- SlidableAction(
- onPressed: _onShowQrPressed,
- backgroundColor: Colors.grey.withOpacity(0.1),
- borderRadius: const BorderRadius.all(Radius.circular(8)),
- foregroundColor:
- Theme.of(context).colorScheme.inverseBackgroundColor,
- icon: Icons.qr_code_2_outlined,
- label: "QR",
- padding: const EdgeInsets.only(left: 4, right: 0),
- spacing: 8,
- ),
- const SizedBox(
- width: 14,
- ),
- CustomSlidableAction(
- onPressed: _onPinPressed,
- backgroundColor: Colors.grey.withOpacity(0.1),
- borderRadius: const BorderRadius.all(Radius.circular(8)),
- foregroundColor:
- Theme.of(context).colorScheme.inverseBackgroundColor,
- child: Column(
- mainAxisAlignment: MainAxisAlignment.center,
- children: [
- if (widget.code.isPinned)
- SvgPicture.asset(
- "assets/svg/pin-active.svg",
- colorFilter: ui.ColorFilter.mode(
- Theme.of(context).colorScheme.primary,
- BlendMode.srcIn,
- ),
- )
- else
- SvgPicture.asset(
- "assets/svg/pin-inactive.svg",
- colorFilter: ui.ColorFilter.mode(
- Theme.of(context).colorScheme.primary,
- BlendMode.srcIn,
- ),
- ),
- const SizedBox(height: 8),
- Text(
- widget.code.isPinned ? l10n.unpinText : l10n.pinText,
- ),
- ],
- ),
- padding: const EdgeInsets.only(left: 4, right: 0),
- ),
- const SizedBox(
- width: 14,
- ),
- SlidableAction(
- onPressed: _onEditPressed,
- backgroundColor: Colors.grey.withOpacity(0.1),
- borderRadius: const BorderRadius.all(Radius.circular(8)),
- foregroundColor:
- Theme.of(context).colorScheme.inverseBackgroundColor,
- icon: Icons.edit_outlined,
- label: l10n.edit,
- padding: const EdgeInsets.only(left: 4, right: 0),
- spacing: 8,
- ),
- const SizedBox(
- width: 14,
- ),
- SlidableAction(
- onPressed: _onDeletePressed,
- backgroundColor: Colors.grey.withOpacity(0.1),
- borderRadius: const BorderRadius.all(Radius.circular(8)),
- foregroundColor: const Color(0xFFFE4A49),
- icon: Icons.delete,
- label: l10n.delete,
- padding: const EdgeInsets.only(left: 0, right: 0),
- spacing: 8,
- ),
- ],
- ),
- child: Builder(
- builder: (context) => _clippedCard(l10n),
- ),
- );
- },
- ),
- );
- }
- Widget _clippedCard(AppLocalizations l10n) {
- return Container(
- height: 132,
- decoration: BoxDecoration(
- borderRadius: BorderRadius.circular(8),
- color: Theme.of(context).colorScheme.codeCardBackgroundColor,
- boxShadow: widget.code.isPinned
- ? [
- BoxShadow(
- color: const Color(0xFF000000).withOpacity(0.03),
- blurRadius: 2,
- offset: const Offset(0, 7),
- ),
- BoxShadow(
- color: const Color(0xFF000000).withOpacity(0.09),
- blurRadius: 2,
- offset: const Offset(0, 4),
- ),
- BoxShadow(
- color: const Color(0xFF000000).withOpacity(0.16),
- blurRadius: 1,
- offset: const Offset(0, 1),
- ),
- BoxShadow(
- color: const Color(0xFF000000).withOpacity(0.18),
- blurRadius: 1,
- offset: const Offset(0, 0),
- ),
- ]
- : [],
- ),
- child: ClipRRect(
- borderRadius: BorderRadius.circular(8),
- child: Material(
- color: Colors.transparent,
- child: InkWell(
- customBorder: RoundedRectangleBorder(
- borderRadius: BorderRadius.circular(10),
- ),
- onTap: () {
- _copyCurrentOTPToClipboard();
- },
- onDoubleTap: isMaskingEnabled
- ? () {
- setState(
- () {
- _hideCode = !_hideCode;
- },
- );
- }
- : null,
- onLongPress: () {
- _copyCurrentOTPToClipboard();
- },
- child: _getCardContents(l10n),
- ),
- ),
- ),
- );
- }
- Widget _getCardContents(AppLocalizations l10n) {
- return Stack(
- children: [
- if (widget.code.isPinned)
- Align(
- alignment: Alignment.topRight,
- child: CustomPaint(
- painter: PinBgPainter(
- color: Theme.of(context).brightness == Brightness.dark
- ? const Color(0xFF390C4F)
- : const Color(0xFFF9ECFF),
- ),
- size: const Size(39, 39),
- ),
- ),
- Column(
- crossAxisAlignment: CrossAxisAlignment.start,
- mainAxisAlignment: MainAxisAlignment.spaceBetween,
- children: [
- if (widget.code.type == Type.totp)
- CodeTimerProgress(
- period: widget.code.period,
- ),
- const SizedBox(height: 16),
- Row(
- children: [
- _shouldShowLargeIcon ? _getIcon() : const SizedBox.shrink(),
- Expanded(
- child: Column(
- children: [
- _getTopRow(),
- const SizedBox(height: 4),
- _getBottomRow(l10n),
- ],
- ),
- ),
- ],
- ),
- const SizedBox(
- height: 20,
- ),
- ],
- ),
- if (widget.code.isPinned) ...[
- Align(
- alignment: Alignment.topRight,
- child: Padding(
- padding: const EdgeInsets.only(right: 6, top: 6),
- child: SvgPicture.asset("assets/svg/pin-card.svg"),
- ),
- ),
- ],
- ],
- );
- }
- Widget _getBottomRow(AppLocalizations l10n) {
- return Container(
- padding: const EdgeInsets.only(left: 16, right: 16),
- child: Row(
- mainAxisAlignment: MainAxisAlignment.start,
- crossAxisAlignment: CrossAxisAlignment.end,
- children: [
- Expanded(
- child: ValueListenableBuilder<String>(
- valueListenable: _currentCode,
- builder: (context, value, child) {
- return Material(
- type: MaterialType.transparency,
- child: Text(
- _getFormattedCode(value),
- style: const TextStyle(fontSize: 24),
- ),
- );
- },
- ),
- ),
- widget.code.type == Type.totp
- ? GestureDetector(
- onTap: () {
- _copyNextToClipboard();
- },
- child: Column(
- crossAxisAlignment: CrossAxisAlignment.end,
- children: [
- Text(
- l10n.nextTotpTitle,
- style: Theme.of(context).textTheme.bodySmall,
- ),
- ValueListenableBuilder<String>(
- valueListenable: _nextCode,
- builder: (context, value, child) {
- return Material(
- type: MaterialType.transparency,
- child: Text(
- _getFormattedCode(value),
- style: const TextStyle(
- fontSize: 18,
- color: Colors.grey,
- ),
- ),
- );
- },
- ),
- ],
- ),
- )
- : Column(
- crossAxisAlignment: CrossAxisAlignment.end,
- children: [
- Text(
- l10n.nextTotpTitle,
- style: Theme.of(context).textTheme.bodySmall,
- ),
- InkWell(
- onTap: _onNextHotpTapped,
- child: const Icon(
- Icons.forward_outlined,
- size: 32,
- color: Colors.grey,
- ),
- ),
- ],
- ),
- ],
- ),
- );
- }
- Widget _getTopRow() {
- return Padding(
- padding: const EdgeInsets.only(left: 16, right: 16),
- child: Row(
- mainAxisAlignment: MainAxisAlignment.spaceBetween,
- crossAxisAlignment: CrossAxisAlignment.start,
- children: [
- Column(
- crossAxisAlignment: CrossAxisAlignment.start,
- children: [
- Text(
- safeDecode(widget.code.issuer).trim(),
- style: Theme.of(context).textTheme.titleLarge,
- ),
- const SizedBox(height: 2),
- Text(
- safeDecode(widget.code.account).trim(),
- style: Theme.of(context).textTheme.bodySmall?.copyWith(
- fontSize: 12,
- color: Colors.grey,
- ),
- ),
- ],
- ),
- Row(
- mainAxisAlignment: MainAxisAlignment.end,
- children: [
- (widget.code.hasSynced != null && widget.code.hasSynced!) ||
- !hasConfiguredAccount
- ? const SizedBox.shrink()
- : const Icon(
- Icons.sync_disabled,
- size: 20,
- color: Colors.amber,
- ),
- const SizedBox(width: 12),
- _shouldShowLargeIcon ? const SizedBox.shrink() : _getIcon(),
- ],
- ),
- ],
- ),
- );
- }
- Widget _getIcon() {
- return Padding(
- padding: _shouldShowLargeIcon
- ? const EdgeInsets.only(left: 16)
- : const EdgeInsets.all(0),
- child: IconUtils.instance.getIcon(
- context,
- safeDecode(widget.code.issuer).trim(),
- width: _shouldShowLargeIcon ? 42 : 24,
- ),
- );
- }
- void _copyCurrentOTPToClipboard() async {
- _copyToClipboard(
- _getCurrentOTP(),
- confirmationMessage: context.l10n.copiedToClipboard,
- );
- }
- void _copyNextToClipboard() {
- _copyToClipboard(
- _getNextTotp(),
- confirmationMessage: context.l10n.copiedNextToClipboard,
- );
- }
- void _copyToClipboard(
- String content, {
- required String confirmationMessage,
- }) async {
- final shouldMinimizeOnCopy =
- PreferenceService.instance.shouldMinimizeOnCopy();
- await FlutterClipboard.copy(content);
- showToast(context, confirmationMessage);
- if (Platform.isAndroid && shouldMinimizeOnCopy) {
- // ignore: unawaited_futures
- MoveToBackground.moveTaskToBack();
- }
- }
- void _onNextHotpTapped() {
- if (widget.code.type == Type.hotp) {
- CodeStore.instance
- .addCode(
- widget.code.copyWith(counter: widget.code.counter + 1),
- shouldSync: true,
- )
- .ignore();
- }
- }
- Future<void> _onEditPressed(_) async {
- bool isAuthSuccessful = await LocalAuthenticationService.instance
- .requestLocalAuthentication(context, context.l10n.editCodeAuthMessage);
- await PlatformUtil.refocusWindows();
- if (!isAuthSuccessful) {
- return;
- }
- final Code? code = await Navigator.of(context).push(
- MaterialPageRoute(
- builder: (BuildContext context) {
- return SetupEnterSecretKeyPage(
- code: widget.code,
- tags: widget.tags,
- );
- },
- ),
- );
- if (code != null) {
- await CodeStore.instance.addCode(code);
- }
- }
- Future<void> _onShowQrPressed(_) async {
- bool isAuthSuccessful = await LocalAuthenticationService.instance
- .requestLocalAuthentication(context, context.l10n.showQRAuthMessage);
- await PlatformUtil.refocusWindows();
- if (!isAuthSuccessful) {
- return;
- }
- // ignore: unused_local_variable
- final Code? code = await Navigator.of(context).push(
- MaterialPageRoute(
- builder: (BuildContext context) {
- return ViewQrPage(code: widget.code);
- },
- ),
- );
- }
- Future<void> _onPinPressed(_) async {
- bool currentlyPinned = widget.code.isPinned;
- final display = widget.code.display;
- final Code code = widget.code.copyWith(
- display: display.copyWith(pinned: !currentlyPinned),
- );
- unawaited(
- CodeStore.instance.addCode(code).then(
- (value) => Fluttertoast.showToast(
- msg: !currentlyPinned
- ? context.l10n.pinnedCodeMessage(widget.code.issuer)
- : context.l10n.unpinnedCodeMessage(widget.code.issuer),
- ),
- ),
- );
- }
- void _onDeletePressed(_) async {
- bool isAuthSuccessful =
- await LocalAuthenticationService.instance.requestLocalAuthentication(
- context,
- context.l10n.deleteCodeAuthMessage,
- );
- if (!isAuthSuccessful) {
- return;
- }
- FocusScope.of(context).requestFocus();
- final l10n = context.l10n;
- await showChoiceActionSheet(
- context,
- title: l10n.deleteCodeTitle,
- body: l10n.deleteCodeMessage,
- firstButtonLabel: l10n.delete,
- isCritical: true,
- firstButtonOnTap: () async {
- await CodeStore.instance.removeCode(widget.code);
- },
- );
- }
- String _getCurrentOTP() {
- try {
- return getOTP(widget.code);
- } catch (e) {
- return context.l10n.error;
- }
- }
- String _getNextTotp() {
- try {
- assert(widget.code.type == Type.totp);
- return getNextTotp(widget.code);
- } catch (e) {
- return context.l10n.error;
- }
- }
- String _getFormattedCode(String code) {
- if (_hideCode) {
- // replace all digits with •
- code = code.replaceAll(RegExp(r'\d'), '•');
- }
- if (code.length == 6) {
- return "${code.substring(0, 3)} ${code.substring(3, 6)}";
- }
- return code;
- }
- }
- class PinBgPainter extends CustomPainter {
- final Color color;
- final PaintingStyle paintingStyle;
- PinBgPainter({
- this.color = Colors.black,
- this.paintingStyle = PaintingStyle.fill,
- });
- @override
- void paint(Canvas canvas, Size size) {
- Paint paint = Paint()
- ..color = color
- ..style = paintingStyle;
- canvas.drawPath(getTrianglePath(size.width, size.height), paint);
- }
- Path getTrianglePath(double x, double y) {
- return Path()
- ..moveTo(0, 0)
- ..lineTo(x, 0)
- ..lineTo(x, y)
- ..lineTo(0, 0);
- }
- @override
- bool shouldRepaint(PinBgPainter oldDelegate) {
- return oldDelegate.color != color ||
- oldDelegate.paintingStyle != paintingStyle;
- }
- }
|