code_widget.dart 12 KB

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