yubioath-flutter/lib/oath/views/add_account_page.dart

import 'dart:convert';
import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:logging/logging.dart';

import '../../app/logging.dart';
import '../../app/message.dart';
import '../../app/models.dart';
import '../../app/state.dart';
import '../../cancellation_exception.dart';
import '../../desktop/models.dart';
import '../../widgets/choice_filter_chip.dart';
import '../../widgets/file_drop_target.dart';
import '../../widgets/responsive_dialog.dart';
import '../../widgets/utf8_utils.dart';
import '../models.dart';
import '../state.dart';
import 'utils.dart';

final _log = Logger('oath.view.add_account_page');

final _secretFormatterPattern =
    RegExp('[abcdefghijklmnopqrstuvwxyz234567 ]', caseSensitive: false);

enum _QrScanState { none, scanning, success, failed }

class OathAddAccountPage extends ConsumerStatefulWidget {
  final DevicePath devicePath;
  final OathState state;
  final bool openQrScanner;
  const OathAddAccountPage(this.devicePath, this.state,
      {super.key, required this.openQrScanner});

  @override
  ConsumerState<ConsumerStatefulWidget> createState() =>
      _OathAddAccountPageState();
}

class _OathAddAccountPageState extends ConsumerState<OathAddAccountPage> {
  final _issuerController = TextEditingController();
  final _accountController = TextEditingController();
  final _secretController = TextEditingController();
  final _periodController = TextEditingController(text: '$defaultPeriod');
  bool _touch = false;
  OathType _oathType = defaultOathType;
  HashAlgorithm _hashAlgorithm = defaultHashAlgorithm;
  int _digits = defaultDigits;
  bool _validateSecretLength = false;
  _QrScanState _qrState = _QrScanState.none;
  bool _isObscure = true;
  List<int> _periodValues = [20, 30, 45, 60];
  List<int> _digitsValues = [6, 8];

  _scanQrCode(QrScanner qrScanner) async {
    try {
      setState(() {
        // If we have a previous scan result stored, clear it
        if (_qrState == _QrScanState.success) {
          _issuerController.text = '';
          _accountController.text = '';
          _secretController.text = '';
          _oathType = defaultOathType;
          _hashAlgorithm = defaultHashAlgorithm;
          _periodController.text = '$defaultPeriod';
          _digits = defaultDigits;
        }
        _qrState = _QrScanState.scanning;
      });
      final otpauth = await qrScanner.scanQr();
      if (otpauth == null) {
        if (!mounted) return;
        showMessage(context, 'No QR code found');
        setState(() {
          _qrState = _QrScanState.failed;
        });
      } else {
        final data = CredentialData.fromUri(Uri.parse(otpauth));
        _loadCredentialData(data);
      }
    } 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,
        'Failed reading QR code: $errorMessage',
        duration: const Duration(seconds: 4),
      );
      setState(() {
        _qrState = _QrScanState.failed;
      });
    }
  }

  _loadCredentialData(CredentialData data) {
    setState(() {
      _issuerController.text = data.issuer ?? '';
      _accountController.text = data.name;
      _secretController.text = data.secret;
      _oathType = data.oathType;
      _hashAlgorithm = data.hashAlgorithm;
      _periodValues = [data.period];
      _periodController.text = '${data.period}';
      _digitsValues = [data.digits];
      _digits = data.digits;
      _isObscure = true;
      _qrState = _QrScanState.success;
    });
  }

  @override
  void initState() {
    super.initState();

    final qrScanner = ref.read(qrScannerProvider);
    if (qrScanner != null && widget.openQrScanner) {
      WidgetsBinding.instance.addPostFrameCallback((_) {
        _scanQrCode(qrScanner);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    final period = int.tryParse(_periodController.text) ?? -1;
    final remaining = getRemainingKeySpace(
      oathType: _oathType,
      period: period,
      issuer: _issuerController.text,
      name: _accountController.text,
    );
    final issuerRemaining = remaining.first;
    final nameRemaining = remaining.second;

    final secret = _secretController.text.replaceAll(' ', '');
    final secretLengthValid = secret.length * 5 % 8 < 5;
    final isValid = _accountController.text.isNotEmpty &&
        secret.isNotEmpty &&
        issuerRemaining >= -1 &&
        nameRemaining >= 0 &&
        period > 0;

    final qrScanner = ref.watch(qrScannerProvider);

    void submit() async {
      if (secretLengthValid) {
        final issuer = _issuerController.text;

        final cred = CredentialData(
          issuer: issuer.isEmpty ? null : issuer,
          name: _accountController.text,
          secret: secret,
          oathType: _oathType,
          hashAlgorithm: _hashAlgorithm,
          digits: _digits,
          period: period,
        );

        try {
          await ref
              .read(credentialListProvider(widget.devicePath).notifier)
              .addAccount(cred.toUri(), requireTouch: _touch);
          if (!mounted) return;
          Navigator.of(context).pop();
          showMessage(context, 'Account added');
        } on CancellationException catch (_) {
          // ignored
        } catch (e) {
          _log.error('Failed to add account', 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,
            'Failed adding account: $errorMessage',
            duration: const Duration(seconds: 4),
          );
        }
      } else {
        setState(() {
          _validateSecretLength = true;
        });
      }
    }

    return ResponsiveDialog(
      title: const Text('Add account'),
      actions: [
        TextButton(
          onPressed: isValid ? submit : null,
          child: const Text('Save', key: Key('save_btn')),
        ),
      ],
      child: FileDropTarget(
        onFileDropped: (fileData) async {
          if (qrScanner != null) {
            final b64Image = base64Encode(fileData);
            final otpauth = await qrScanner.scanQr(b64Image);
            if (otpauth == null) {
              if (!mounted) return;
              showMessage(context, 'No QR code found');
            } else {
              final data = CredentialData.fromUri(Uri.parse(otpauth));
              _loadCredentialData(data);
            }
          }
        },
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextField(
              key: const Key('issuer'),
              controller: _issuerController,
              autofocus: !widget.openQrScanner,
              enabled: issuerRemaining > 0,
              maxLength: max(issuerRemaining, 1),
              inputFormatters: [limitBytesLength(issuerRemaining)],
              buildCounter: buildByteCounterFor(_issuerController.text),
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Issuer (optional)',
                helperText: '', // Prevents dialog resizing when enabled = false
                prefixIcon: Icon(Icons.business_outlined),
              ),
              textInputAction: TextInputAction.next,
              onChanged: (value) {
                setState(() {
                  // Update maxlengths
                });
              },
              onSubmitted: (_) {
                if (isValid) submit();
              },
            ),
            TextField(
              key: const Key('name'),
              controller: _accountController,
              maxLength: max(nameRemaining, 1),
              buildCounter: buildByteCounterFor(_accountController.text),
              inputFormatters: [limitBytesLength(nameRemaining)],
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Account name',
                helperText: '', // Prevents dialog resizing when enabled = false
                prefixIcon: Icon(Icons.person_outline),
              ),
              textInputAction: TextInputAction.next,
              onChanged: (value) {
                setState(() {
                  // Update maxlengths
                });
              },
              onSubmitted: (_) {
                if (isValid) submit();
              },
            ),
            TextField(
              key: const Key('secret'),
              controller: _secretController,
              obscureText: _isObscure,
              inputFormatters: <TextInputFormatter>[
                FilteringTextInputFormatter.allow(_secretFormatterPattern)
              ],
              decoration: InputDecoration(
                  suffixIcon: IconButton(
                    icon: Icon(
                      _isObscure ? Icons.visibility : Icons.visibility_off,
                      color: IconTheme.of(context).color,
                    ),
                    onPressed: () {
                      setState(() {
                        _isObscure = !_isObscure;
                      });
                    },
                  ),
                  border: const OutlineInputBorder(),
                  prefixIcon: const Icon(Icons.key_outlined),
                  labelText: 'Secret key',
                  errorText: _validateSecretLength && !secretLengthValid
                      ? 'Invalid length'
                      : null),
              readOnly: _qrState == _QrScanState.success,
              textInputAction: TextInputAction.done,
              onChanged: (value) {
                setState(() {
                  _validateSecretLength = false;
                });
              },
              onSubmitted: (_) {
                if (isValid) submit();
              },
            ),
            if (qrScanner != null)
              Padding(
                padding: const EdgeInsets.only(top: 16.0),
                child: ActionChip(
                    autofocus: true,
                    avatar: _qrState != _QrScanState.scanning
                        ? (_qrState == _QrScanState.success
                            ? const Icon(Icons.qr_code)
                            : const Icon(Icons.qr_code_scanner_outlined))
                        : const CircularProgressIndicator(strokeWidth: 2.0),
                    label: _qrState == _QrScanState.success
                        ? const Text('Scanned QR code')
                        : const Text('Scan QR code'),
                    onPressed: () {
                      _scanQrCode(qrScanner);
                    }),
              ),
            const Divider(),
            Wrap(
              crossAxisAlignment: WrapCrossAlignment.center,
              spacing: 4.0,
              runSpacing: 8.0,
              children: [
                if (widget.state.version.isAtLeast(4, 2))
                  FilterChip(
                    label: const Text('Require touch'),
                    selected: _touch,
                    onSelected: (value) {
                      setState(() {
                        _touch = value;
                      });
                    },
                  ),
                ChoiceFilterChip<OathType>(
                  items: OathType.values,
                  value: _oathType,
                  selected: _oathType != defaultOathType,
                  itemBuilder: (value) => Text(value.displayName),
                  onChanged: _qrState != _QrScanState.success
                      ? (value) {
                          setState(() {
                            _oathType = value;
                          });
                        }
                      : null,
                ),
                ChoiceFilterChip<HashAlgorithm>(
                  items: HashAlgorithm.values,
                  value: _hashAlgorithm,
                  selected: _hashAlgorithm != defaultHashAlgorithm,
                  itemBuilder: (value) => Text(value.displayName),
                  onChanged: _qrState != _QrScanState.success
                      ? (value) {
                          setState(() {
                            _hashAlgorithm = value;
                          });
                        }
                      : null,
                ),
                if (_oathType == OathType.totp)
                  ChoiceFilterChip<int>(
                    items: _periodValues,
                    value:
                        int.tryParse(_periodController.text) ?? defaultPeriod,
                    selected:
                        int.tryParse(_periodController.text) != defaultPeriod,
                    itemBuilder: ((value) => Text('$value sec')),
                    onChanged: _qrState != _QrScanState.success
                        ? (period) {
                            setState(() {
                              _periodController.text = '$period';
                            });
                          }
                        : null,
                  ),
                ChoiceFilterChip<int>(
                  items: _digitsValues,
                  value: _digits,
                  selected: _digits != defaultDigits,
                  itemBuilder: (value) => Text('$value digits'),
                  onChanged: _qrState != _QrScanState.success
                      ? (digits) {
                          setState(() {
                            _digits = digits;
                          });
                        }
                      : null,
                ),
              ],
            ),
          ]
              .map((e) => Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8.0),
                    child: e,
                  ))
              .toList(),
        ),
      ),
    );
  }
}