code_widget.dart 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
  1. import 'dart:async';
  2. import 'package:clipboard/clipboard.dart';
  3. import 'package:ente_auth/core/configuration.dart';
  4. import 'package:ente_auth/ente_theme_data.dart';
  5. import 'package:ente_auth/l10n/l10n.dart';
  6. import 'package:ente_auth/models/code.dart';
  7. import 'package:ente_auth/onboarding/view/setup_enter_secret_key_page.dart';
  8. import 'package:ente_auth/onboarding/view/view_qr_page.dart';
  9. import 'package:ente_auth/store/code_store.dart';
  10. import 'package:ente_auth/ui/code_timer_progress.dart';
  11. import 'package:ente_auth/ui/utils/icon_utils.dart';
  12. import 'package:ente_auth/utils/dialog_util.dart';
  13. import 'package:ente_auth/utils/toast_util.dart';
  14. import 'package:ente_auth/utils/totp_util.dart';
  15. import 'package:flutter/material.dart';
  16. import 'package:flutter_slidable/flutter_slidable.dart';
  17. import 'package:logging/logging.dart';
  18. class CodeWidget extends StatefulWidget {
  19. final Code code;
  20. const CodeWidget(this.code, {Key? key}) : super(key: key);
  21. @override
  22. State<CodeWidget> createState() => _CodeWidgetState();
  23. }
  24. class _CodeWidgetState extends State<CodeWidget> {
  25. Timer? _everySecondTimer;
  26. final ValueNotifier<String> _currentCode = ValueNotifier<String>("");
  27. final ValueNotifier<String> _nextCode = ValueNotifier<String>("");
  28. final Logger logger = Logger("_CodeWidgetState");
  29. bool _isInitialized = false;
  30. late bool hasConfiguredAccount;
  31. @override
  32. void initState() {
  33. super.initState();
  34. _everySecondTimer =
  35. Timer.periodic(const Duration(milliseconds: 500), (Timer t) {
  36. String newCode = _getCurrentOTP();
  37. if (newCode != _currentCode.value) {
  38. _currentCode.value = newCode;
  39. if (widget.code.type == Type.totp) {
  40. _nextCode.value = _getNextTotp();
  41. }
  42. }
  43. });
  44. hasConfiguredAccount = Configuration.instance.hasConfiguredAccount();
  45. }
  46. @override
  47. void dispose() {
  48. _everySecondTimer?.cancel();
  49. _currentCode.dispose();
  50. _nextCode.dispose();
  51. super.dispose();
  52. }
  53. @override
  54. Widget build(BuildContext context) {
  55. if (!_isInitialized) {
  56. _currentCode.value = _getCurrentOTP();
  57. if (widget.code.type == Type.totp) {
  58. _nextCode.value = _getNextTotp();
  59. }
  60. _isInitialized = true;
  61. }
  62. final l10n = context.l10n;
  63. return Container(
  64. margin: const EdgeInsets.only(left: 16, right: 16, bottom: 8, top: 8),
  65. child: Slidable(
  66. key: ValueKey(widget.code.hashCode),
  67. endActionPane: ActionPane(
  68. extentRatio: 0.60,
  69. motion: const ScrollMotion(),
  70. children: [
  71. const SizedBox(
  72. width: 4,
  73. ),
  74. SlidableAction(
  75. onPressed: _onShowQrPressed,
  76. backgroundColor: Colors.grey.withOpacity(0.1),
  77. borderRadius: const BorderRadius.all(Radius.circular(12.0)),
  78. foregroundColor:
  79. Theme.of(context).colorScheme.inverseBackgroundColor,
  80. icon: Icons.qr_code_2_outlined,
  81. label: "QR",
  82. padding: const EdgeInsets.only(left: 4, right: 0),
  83. spacing: 8,
  84. ),
  85. const SizedBox(
  86. width: 4,
  87. ),
  88. SlidableAction(
  89. onPressed: _onEditPressed,
  90. backgroundColor: Colors.grey.withOpacity(0.1),
  91. borderRadius: const BorderRadius.all(Radius.circular(12.0)),
  92. foregroundColor:
  93. Theme.of(context).colorScheme.inverseBackgroundColor,
  94. icon: Icons.edit_outlined,
  95. label: l10n.edit,
  96. padding: const EdgeInsets.only(left: 4, right: 0),
  97. spacing: 8,
  98. ),
  99. const SizedBox(
  100. width: 4,
  101. ),
  102. SlidableAction(
  103. onPressed: _onDeletePressed,
  104. backgroundColor: Colors.grey.withOpacity(0.1),
  105. borderRadius: const BorderRadius.all(Radius.circular(12.0)),
  106. foregroundColor: const Color(0xFFFE4A49),
  107. icon: Icons.delete,
  108. label: l10n.delete,
  109. padding: const EdgeInsets.only(left: 0, right: 0),
  110. spacing: 8,
  111. ),
  112. ],
  113. ),
  114. child: ClipRRect(
  115. borderRadius: BorderRadius.circular(8),
  116. child: Container(
  117. color: Theme.of(context).colorScheme.codeCardBackgroundColor,
  118. child: Material(
  119. color: Colors.transparent,
  120. child: InkWell(
  121. customBorder: RoundedRectangleBorder(
  122. borderRadius: BorderRadius.circular(10),
  123. ),
  124. onTap: () {
  125. _copyToClipboard();
  126. },
  127. onLongPress: () {
  128. _copyToClipboard();
  129. },
  130. child: _getCardContents(l10n),
  131. ),
  132. ),
  133. ),
  134. ),
  135. ),
  136. );
  137. }
  138. SizedBox _getCardContents(AppLocalizations l10n) {
  139. return SizedBox(
  140. child: Column(
  141. crossAxisAlignment: CrossAxisAlignment.start,
  142. mainAxisAlignment: MainAxisAlignment.center,
  143. children: [
  144. if (widget.code.type == Type.totp)
  145. CodeTimerProgress(
  146. period: widget.code.period,
  147. ),
  148. const SizedBox(
  149. height: 16,
  150. ),
  151. _getTopRow(),
  152. const SizedBox(height: 4),
  153. _getBottomRow(l10n),
  154. const SizedBox(
  155. height: 20,
  156. ),
  157. ],
  158. ),
  159. );
  160. }
  161. Container _getBottomRow(AppLocalizations l10n) {
  162. return Container(
  163. padding: const EdgeInsets.only(left: 16, right: 16),
  164. child: Row(
  165. mainAxisAlignment: MainAxisAlignment.start,
  166. crossAxisAlignment: CrossAxisAlignment.end,
  167. children: [
  168. Expanded(
  169. child: ValueListenableBuilder<String>(
  170. valueListenable: _currentCode,
  171. builder: (context, value, child) {
  172. return Text(
  173. value,
  174. style: const TextStyle(fontSize: 24),
  175. );
  176. },
  177. ),
  178. ),
  179. widget.code.type == Type.totp
  180. ? Column(
  181. crossAxisAlignment: CrossAxisAlignment.end,
  182. children: [
  183. Text(
  184. l10n.nextTotpTitle,
  185. style: Theme.of(context).textTheme.bodySmall,
  186. ),
  187. ValueListenableBuilder<String>(
  188. valueListenable: _nextCode,
  189. builder: (context, value, child) {
  190. return Text(
  191. value,
  192. style: const TextStyle(
  193. fontSize: 18,
  194. color: Colors.grey,
  195. ),
  196. );
  197. },
  198. ),
  199. ],
  200. )
  201. : Column(
  202. crossAxisAlignment: CrossAxisAlignment.end,
  203. children: [
  204. Text(
  205. l10n.nextTotpTitle,
  206. style: Theme.of(context).textTheme.bodySmall,
  207. ),
  208. InkWell(
  209. onTap: _onNextHotpTapped,
  210. child: const Icon(
  211. Icons.forward_outlined,
  212. size: 32,
  213. color: Colors.grey,
  214. ),
  215. ),
  216. ],
  217. ),
  218. ],
  219. ),
  220. );
  221. }
  222. Padding _getTopRow() {
  223. return Padding(
  224. padding: const EdgeInsets.only(left: 16, right: 16),
  225. child: Row(
  226. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  227. crossAxisAlignment: CrossAxisAlignment.start,
  228. children: [
  229. Column(
  230. crossAxisAlignment: CrossAxisAlignment.start,
  231. children: [
  232. Text(
  233. safeDecode(widget.code.issuer).trim(),
  234. style: Theme.of(context).textTheme.titleLarge,
  235. ),
  236. const SizedBox(height: 2),
  237. Text(
  238. safeDecode(widget.code.account).trim(),
  239. style: Theme.of(context).textTheme.bodySmall?.copyWith(
  240. fontSize: 12,
  241. color: Colors.grey,
  242. ),
  243. ),
  244. ],
  245. ),
  246. Row(
  247. mainAxisAlignment: MainAxisAlignment.end,
  248. children: [
  249. (widget.code.hasSynced != null && widget.code.hasSynced!) ||
  250. !hasConfiguredAccount
  251. ? const SizedBox.shrink()
  252. : const Icon(
  253. Icons.sync_disabled,
  254. size: 20,
  255. color: Colors.amber,
  256. ),
  257. const SizedBox(width: 12),
  258. IconUtils.instance.getIcon(
  259. safeDecode(widget.code.issuer).trim(),
  260. ),
  261. ],
  262. ),
  263. ],
  264. ),
  265. );
  266. }
  267. void _copyToClipboard() {
  268. FlutterClipboard.copy(_getCurrentOTP())
  269. .then((value) => showToast(context, context.l10n.copiedToClipboard));
  270. }
  271. void _onNextHotpTapped() {
  272. if (widget.code.type == Type.hotp) {
  273. CodeStore.instance
  274. .addCode(
  275. widget.code.copyWith(counter: widget.code.counter + 1),
  276. shouldSync: true,
  277. )
  278. .ignore();
  279. }
  280. }
  281. Future<void> _onEditPressed(_) async {
  282. final Code? code = await Navigator.of(context).push(
  283. MaterialPageRoute(
  284. builder: (BuildContext context) {
  285. return SetupEnterSecretKeyPage(code: widget.code);
  286. },
  287. ),
  288. );
  289. if (code != null) {
  290. CodeStore.instance.addCode(code);
  291. }
  292. }
  293. Future<void> _onShowQrPressed(_) async {
  294. // ignore: unused_local_variable
  295. final Code? code = await Navigator.of(context).push(
  296. MaterialPageRoute(
  297. builder: (BuildContext context) {
  298. return ViewQrPage(code: widget.code);
  299. },
  300. ),
  301. );
  302. }
  303. void _onDeletePressed(_) async {
  304. final l10n = context.l10n;
  305. await showChoiceActionSheet(
  306. context,
  307. title: l10n.deleteCodeTitle,
  308. body: l10n.deleteCodeMessage,
  309. firstButtonLabel: l10n.delete,
  310. isCritical: true,
  311. firstButtonOnTap: () async {
  312. await CodeStore.instance.removeCode(widget.code);
  313. },
  314. );
  315. }
  316. String _getCurrentOTP() {
  317. try {
  318. return getOTP(widget.code);
  319. } catch (e) {
  320. return context.l10n.error;
  321. }
  322. }
  323. String _getNextTotp() {
  324. try {
  325. assert(widget.code.type == Type.totp);
  326. return getNextTotp(widget.code);
  327. } catch (e) {
  328. return context.l10n.error;
  329. }
  330. }
  331. }