Adds an autocomplete feature to the Username field

Allows users to select from previously used usernames to speed up the creation
of new entries with common usernames such as their primary email address.

Author: luckyrat

lib/cubit/autocomplete_cubit.dart

@@ -0,0 +1,25 @@
+import 'package:bloc/bloc.dart';
+import 'package:flutter/material.dart';
+
+part 'autocomplete_state.dart';
+
+class AutocompleteCubit extends Cubit<AutocompleteState> {
+  List<String> _usernames = [];
+
+  AutocompleteCubit() : super(AutocompleteInitial());
+
+  void setUsernames(List<String> usernames) {
+    _usernames = List.from(usernames);
+    emit(AutocompleteUsernamesLoaded(List.unmodifiable(_usernames)));
+  }
+
+  void addUsername(String username) {
+    final trimmed = username.trim();
+    if (trimmed.isEmpty) return;
+    _usernames.removeWhere((u) => u == trimmed);
+    _usernames.insert(0, trimmed);
+    emit(AutocompleteUsernamesLoaded(List.unmodifiable(_usernames)));
+  }
+
+  List<String> get usernames => List.unmodifiable(_usernames);
+}

lib/cubit/autocomplete_state.dart

@@ -0,0 +1,11 @@
+part of 'autocomplete_cubit.dart';
+
+@immutable
+abstract class AutocompleteState {}
+
+class AutocompleteInitial extends AutocompleteState {}
+
+class AutocompleteUsernamesLoaded extends AutocompleteState {
+  final List<String> usernames;
+  AutocompleteUsernamesLoaded(this.usernames);
+}

lib/cubit/vault_cubit.dart

@@ -27,6 +27,7 @@ import 'package:shared_preferences/shared_preferences.dart';
 import 'package:keevault/generated/l10n.dart';
 
 import 'account_cubit.dart';
+import 'autocomplete_cubit.dart';
 
 part 'vault_state.dart';
 
@@ -37,6 +38,7 @@ class VaultCubit extends Cubit<VaultState> {
   final QuickUnlocker _qu;
   final EntryCubit _entryCubit;
   final GeneratorProfilesCubit _generatorProfilesCubit;
+  final AutocompleteCubit _autocompleteCubit;
   PersistentQueue? _persistentQueueAfAssociations;
   final bool Function() isAutofilling;
   bool autoFillMergeAttemptDue = true;
@@ -51,6 +53,7 @@ class VaultCubit extends Cubit<VaultState> {
     this.isAutofilling,
     this._generatorProfilesCubit,
     this._accountCubit,
+    this._autocompleteCubit,
   ) : super(const VaultInitial());
 
   LocalVaultFile? get currentVaultFile {
@@ -72,6 +75,10 @@ class VaultCubit extends Cubit<VaultState> {
     }
   }
 
+  void _updateAutocompleteUsernames(KdbxFile kdbxFile) {
+    _autocompleteCubit.setUsernames(kdbxFile.allUsernames);
+  }
+
   Future<void> _applyAutofillPersistentQueueItems(List<dynamic> list, LinkedHashMap<String, KdbxEntry> entries) async {
     for (var item in list) {
       final entryUuid = item['entry'];
@@ -285,6 +292,7 @@ class VaultCubit extends Cubit<VaultState> {
     bool immediateRemoteRefresh = true,
     required bool safe,
   }) async {
+    _updateAutocompleteUsernames(vault.files.current);
     if (user?.subscriptionStatus == AccountSubscriptionStatus.expired ||
         user?.subscriptionStatus == AccountSubscriptionStatus.freeTrialAvailable) {
       return;
@@ -1195,6 +1203,8 @@ class VaultCubit extends Cubit<VaultState> {
         vault,
         applyAndConsumePendingAutofillAssociations,
       );
+      // Update autocomplete usernames after save so we remove any stale ones
+      _updateAutocompleteUsernames(mergedOrCurrentVaultFile.files.current);
       //TODO:f: Sync with iOS shared credentials keychain (also in other places like merge from autofill and refresh)
       // if (KeeVaultPlatform.isIOS) {
       //   final entries = mergedOrCurrentVaultFile.files.current.body.rootGroup

lib/extension_methods.dart

@@ -1,6 +1,5 @@
 import 'dart:collection';
 import 'dart:typed_data';
-
 import 'package:collection/collection.dart' show IterableExtension;
 import 'package:dio/dio.dart';
 import 'package:flutter/widgets.dart';
@@ -12,7 +11,6 @@ import 'package:keevault/config/platform.dart';
 import 'package:keevault/kdf_cache.dart';
 import 'package:keevault/vault_backend/exceptions.dart';
 import 'package:argon2_ffi_base/argon2_ffi_base.dart';
-
 import 'colors.dart';
 
 extension StringExt on String {
@@ -27,6 +25,19 @@ extension StringExt on String {
   String prepend(String prefix) => '$prefix$this';
 }
 
+extension KdbxFileUsernames on KdbxFile {
+  /// Returns all unique, non-empty usernames in the database.
+  List<String> get allUsernames {
+    final entries = body.rootGroup.getAllEntriesExceptBin().values;
+    final usernames = entries
+        .map((e) => e.getString(KdbxKeyCommon.USER_NAME)?.getText().trim() ?? '')
+        .where((u) => u.isNotEmpty)
+        .toSet()
+        .toList(growable: false);
+    return usernames;
+  }
+}
+
 extension StringToInt on String {
   int toInt() => int.parse(this);
 }

lib/widgets/autofill_save.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:kdbx/kdbx.dart';
 import 'package:keevault/cubit/account_cubit.dart';
+import 'package:keevault/cubit/autocomplete_cubit.dart';
 import 'package:keevault/cubit/autofill_cubit.dart';
 import 'package:keevault/cubit/entry_cubit.dart';
 import 'package:keevault/cubit/filter_cubit.dart';
@@ -79,6 +80,9 @@ class _AutofillSaveWidgetState extends State<AutofillSaveWidget> with TraceableC
       entryCubit.endEditing(newEntry);
 
       final filterCubit = BlocProvider.of<FilterCubit>(context);
+      final autocompleteCubit = BlocProvider.of<AutocompleteCubit>(context);
+
+      autocompleteCubit.addUsername(newEntry?.getString(KdbxKeyCommon.USER_NAME)?.getText().trim() ?? '');
 
       // We skip remote upload for now because it could take a long time
       // and interrupt the user's priority task for too long.

lib/widgets/entry_field.dart

@@ -8,6 +8,7 @@ import 'package:kdbx/kdbx.dart' hide FieldType;
 import 'package:keevault/cubit/entry_cubit.dart';
 import 'package:keevault/logging/logger.dart';
 import 'package:keevault/model/entry.dart';
+import 'package:keevault/cubit/autocomplete_cubit.dart';
 
 import 'package:clock/clock.dart';
 import 'package:keevault/model/field.dart';
@@ -171,6 +172,17 @@ class _EntryTextFieldState extends _EntryFieldState implements FieldDelegate {
   void initState() {
     super.initState();
     _focusNode.addListener(_focusNodeChanged);
+
+    final isUsernameField = widget.field.key?.key == KdbxKeyCommon.KEY_USER_NAME;
+    if (isUsernameField) {
+      _focusNode.addListener(() {
+        if (_focusNode.hasFocus) {
+          _updateAutocompleteSuggestions(context);
+        } else {
+          _removeAutocompleteOverlay();
+        }
+      });
+    }
     _initController();
   }
 
@@ -184,10 +196,137 @@ class _EntryTextFieldState extends _EntryFieldState implements FieldDelegate {
     _controller = TextEditingController(text: widget.field.textValue);
   }
 
+  OverlayEntry? _autocompleteOverlay;
+  List<String> _filteredUsernames = [];
+  bool _showAutocomplete = false;
+
+  void _showAutocompleteOverlay(BuildContext context) {
+    if (_autocompleteOverlay != null) {
+      _removeAutocompleteOverlay();
+    }
+    final overlay = Overlay.of(context);
+    // Find the RenderBox of the TextFormField
+    final box = _formFieldKey.currentContext?.findRenderObject() as RenderBox?;
+    final offset = box?.localToGlobal(Offset.zero) ?? Offset.zero;
+    final width = box?.size.width ?? 300;
+    _autocompleteOverlay = OverlayEntry(
+      builder: (context) => Positioned(
+        left: offset.dx,
+        top: offset.dy + (box?.size.height ?? 56),
+        width: width,
+        child: Material(
+          elevation: 4.0,
+          color: Theme.of(context).colorScheme.surfaceContainer,
+          child: ConstrainedBox(
+            constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height * 0.4),
+            child: ListView.builder(
+              shrinkWrap: true,
+              padding: EdgeInsets.zero,
+              itemCount: _filteredUsernames.length,
+              itemBuilder: (context, index) {
+                final option = _filteredUsernames[index];
+                return ListTile(
+                  title: Text(option),
+                  onTap: () {
+                    setState(() {
+                      _controller.text = option;
+                      _controller.selection = TextSelection.fromPosition(TextPosition(offset: option.length));
+                      _showAutocomplete = false;
+                      _filteredUsernames = [];
+                      _removeAutocompleteOverlay();
+                      _focusNode.unfocus();
+                      _onUsernameChanged(option);
+                    });
+                  },
+                );
+              },
+            ),
+          ),
+        ),
+      ),
+    );
+    overlay.insert(_autocompleteOverlay!);
+  }
+
+  void _removeAutocompleteOverlay() {
+    _autocompleteOverlay?.remove();
+    _autocompleteOverlay = null;
+  }
+
+  void _updateAutocompleteSuggestions(BuildContext context) {
+    final cubit = BlocProvider.of<AutocompleteCubit>(context, listen: false);
+    final usernamesState = cubit.state;
+    List<String> usernames = [];
+    if (usernamesState is AutocompleteUsernamesLoaded) {
+      usernames = usernamesState.usernames;
+    }
+    final input = _controller.text.trim();
+    if (_focusNode.hasFocus) {
+      if (input.isEmpty) {
+        _filteredUsernames = usernames;
+      } else {
+        final lcInput = input.toLowerCase();
+        _filteredUsernames = usernames.where((u) => u != lcInput && u.toLowerCase().contains(lcInput)).toList();
+      }
+      _showAutocomplete = _filteredUsernames.isNotEmpty;
+    } else {
+      _showAutocomplete = false;
+      _filteredUsernames = [];
+    }
+    if (_showAutocomplete) {
+      WidgetsBinding.instance.addPostFrameCallback((_) => _showAutocompleteOverlay(context));
+    } else {
+      _removeAutocompleteOverlay();
+    }
+  }
+
+  _onUsernameChanged(value) {
+    _updateAutocompleteSuggestions(context);
+    final StringValue? newValue = value == null
+        ? null
+        : _isProtected
+        ? ProtectedValue.fromString(value)
+        : PlainValue(value);
+    final cubit = BlocProvider.of<EntryCubit>(context);
+    if (widget.field.fieldStorage == FieldStorage.JSON) {
+      if (widget.field.browserModel!.value == value) {
+        // Flutter can call onChange when no changes have occurred!
+        return;
+      }
+      cubit.updateField(
+        null,
+        widget.field.browserModel!.name,
+        value: newValue,
+        browserModel: widget.field.browserModel!.copyWith(value: value),
+      );
+    } else {
+      if (widget.field.value.getText() == value) {
+        // Flutter can call onChange when no changes have occurred!
+        return;
+      }
+      cubit.updateField(widget.field.key, null, value: newValue);
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     l.d('building ${widget.key} ($_isValueObscured)');
     final str = S.of(context);
+    final isUsernameField = widget.field.key?.key == KdbxKeyCommon.KEY_USER_NAME;
+    Widget fieldEditor;
+    if (isUsernameField) {
+      fieldEditor = StringEntryFieldEditor(
+        onChange: _onUsernameChanged,
+        fieldKey: widget.field.key,
+        controller: _controller,
+        formFieldKey: _formFieldKey,
+        focusNode: _focusNode,
+        delegate: this,
+        field: widget.field,
+      );
+    } else {
+      fieldEditor = _buildEntryFieldEditor();
+    }
     return Dismissible(
       key: ValueKey(widget.field.key),
       background: Container(
@@ -215,7 +354,7 @@ class _EntryTextFieldState extends _EntryFieldState implements FieldDelegate {
         padding: const EdgeInsets.symmetric(horizontal: 16),
         child: Row(
           children: <Widget>[
-            Expanded(child: _buildEntryFieldEditor()),
+            Expanded(child: fieldEditor),
             Container(
               width: 48,
               height: 48,
@@ -234,6 +373,12 @@ class _EntryTextFieldState extends _EntryFieldState implements FieldDelegate {
   }
 
   void _focusNodeChanged() {
+    // // For username field, trigger loading suggestions when focused
+    // final isUsernameField = widget.field.key?.key == KdbxKeyCommon.KEY_USER_NAME;
+    // if (isUsernameField && _focusNode.hasFocus) {
+    //   final autocompleteCubit = BlocProvider.of<AutocompleteCubit>(context, listen: false);
+    //   autocompleteCubit.loadUsernames();
+    // }
     if (!_isProtected) {
       return;
     }
@@ -464,6 +609,7 @@ class _EntryTextFieldState extends _EntryFieldState implements FieldDelegate {
   @override
   void dispose() {
     l.d('EntryFieldState.dispose() - ${widget.key} (${widget.field.key})');
+    _removeAutocompleteOverlay();
     _controller.dispose();
     _focusNode.dispose();
     super.dispose();

lib/widgets/entry_list.dart

@@ -3,6 +3,7 @@ import 'dart:async';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:kdbx/kdbx.dart';
+import 'package:keevault/cubit/autocomplete_cubit.dart';
 import 'package:keevault/cubit/autofill_cubit.dart';
 import 'package:keevault/cubit/entry_cubit.dart';
 import 'package:keevault/cubit/filter_cubit.dart';
@@ -269,7 +270,9 @@ class EntryListItemWidget extends StatelessWidget {
                       if ((keepChanges == null || keepChanges) && (entryCubit.state as EntryLoaded).entry.isDirty) {
                         entryCubit.endEditing(entry);
                         final filterCubit = BlocProvider.of<FilterCubit>(context);
+                        final autocompleteCubit = BlocProvider.of<AutocompleteCubit>(context);
                         await BlocProvider.of<InteractionCubit>(context).entrySaved();
+                        autocompleteCubit.addUsername(entry.getString(KdbxKeyCommon.USER_NAME)?.getText().trim() ?? '');
                         await iam.showIfAppropriate(InAppMessageTrigger.entryChanged);
                         filterCubit.reFilter(entry.file!.trimmedTags, entry.file!.body.rootGroup);
                         //TODO:f: A separate cubit to track state of ELIVMs might provide better performance and scroll position stability than recreating them all from scratch every time we re-filter?

lib/widgets/kee_vault_app.dart

@@ -27,6 +27,7 @@ import '../vault_backend/user.dart';
 import '../vault_backend/user_service.dart';
 import '../cubit/account_cubit.dart';
 import '../cubit/vault_cubit.dart';
+import '../cubit/autocomplete_cubit.dart';
 import '../generated/l10n.dart';
 import 'package:fluro/fluro.dart';
 import '../config/app.dart';
@@ -55,6 +56,7 @@ class KeeVaultAppState extends State<KeeVaultApp> with WidgetsBindingObserver, T
   final entryCubit = EntryCubit();
   final generatorProfilesCubit = GeneratorProfilesCubit();
   final autofillCubit = AutofillCubit();
+  final autocompleteCubit = AutocompleteCubit();
   late UserRepository userRepo;
   late AccountCubit accountCubit;
 
@@ -154,6 +156,7 @@ class KeeVaultAppState extends State<KeeVaultApp> with WidgetsBindingObserver, T
                   () => autofillCubit.isAutofilling() || autofillCubit.isAutofillSaving(),
                   generatorProfilesCubit,
                   accountCubit,
+                  autocompleteCubit,
                 ),
               ),
               BlocProvider(create: (context) => accountCubit),
@@ -164,6 +167,7 @@ class KeeVaultAppState extends State<KeeVaultApp> with WidgetsBindingObserver, T
               BlocProvider(create: (context) => generatorProfilesCubit),
               BlocProvider(create: (context) => InteractionCubit()),
               BlocProvider(create: (context) => AppRatingCubit()),
+              BlocProvider(create: (context) => autocompleteCubit),
             ],
             child: InAppMessengerWidget(
               appSettingsState: appSettingsState,