[PM-2320] Improve Android block Auto-fill URIs (#2616)

* PM-2320 Added new view for block autofill URIs on Android

* PM-2320 Fix formatting

* PM-2320 Improved validations on block autofill uris

* PM-2320 Improved autofill block uris placeholder colors on different themes

src/Android/Android.csproj

@@ -233,6 +233,18 @@
       <SubType></SubType>
       <Generator></Generator>
     </AndroidResource>
+    <AndroidResource Include="Resources\layout\validatable_input_dialog_layout.xml">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
+    <AndroidResource Include="Resources\drawable\empty_uris_placeholder.xml">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
+    <AndroidResource Include="Resources\drawable\empty_uris_placeholder_dark.xml">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
   </ItemGroup>
   <ItemGroup>
     <AndroidResource Include="Resources\drawable\splash_screen.xml" />

src/Android/Renderers/CustomLabelRenderer.cs

@@ -1,10 +1,10 @@
-using System;
-using Bit.App.Controls;
-using System.ComponentModel;
-using Xamarin.Forms.Platform.Android;
+using System.ComponentModel;
 using Android.Content;
-using Xamarin.Forms;
+using Android.OS;
+using Bit.App.Controls;
 using Bit.Droid.Renderers;
+using Xamarin.Forms;
+using Xamarin.Forms.Platform.Android;
 
 [assembly: ExportRenderer(typeof(CustomLabel), typeof(CustomLabelRenderer))]
 namespace Bit.Droid.Renderers
@@ -15,6 +15,19 @@ namespace Bit.Droid.Renderers
             : base(context)
         { }
 
+        protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
+        {
+            base.OnElementChanged(e);
+
+            if (Control != null && e.NewElement is CustomLabel label)
+            {
+                if (label.FontWeight.HasValue && Build.VERSION.SdkInt >= BuildVersionCodes.P)
+                {
+                    Control.Typeface = Android.Graphics.Typeface.Create(null, label.FontWeight.Value, false);
+                }
+            }
+        }
+
         protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
         {
             var label = sender as CustomLabel;
@@ -28,4 +41,3 @@ namespace Bit.Droid.Renderers
         }
     }
 }
-

src/Android/Resources/drawable/empty_uris_placeholder.xml

@@ -0,0 +1,35 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"
+    android:viewportWidth="129"
+    android:viewportHeight="124"
+    android:width="129dp"
+    android:height="124dp">
+    <path
+        android:pathData="M126.8227 61.9441A59.6843 59.6843 0 0 1 7.4541 61.9441A59.6843 59.6843 0 0 1 126.8227 61.9441Z"
+        android:fillColor="#F0F0F0"
+        android:strokeColor="#89929F"
+        android:strokeWidth="3" />
+    <path
+        android:pathData="M21.6167 100.851C52.597 103.31 79.6937 80.3264 82.1391 49.5156C83.6205 30.8497 76.0789 14.8844 62.7275 3.63385"
+        android:strokeColor="#89929F"
+        android:strokeWidth="1.5"
+        android:strokeLineCap="round" />
+    <path
+        android:pathData="M14.5633 34.2845C12.2035 66.7711 38.5225 96.3429 72.6666 98.8232C74.2596 98.9389 78.629 98.9975 80.1951 99C84.6245 98.8232 97.8063 96.593 106.813 91.8485C113.439 88.3581 119.745 84.6984 124.644 79.1121"
+        android:strokeColor="#89929F"
+        android:strokeWidth="1.5"
+        android:strokeLineCap="round" />
+    <path
+        android:pathData="M124.502 48.5051C106.554 24.3817 68.8237 21.6709 41.4178 42.0617C24.8146 54.4149 14.7327 72.4183 13.9255 90.1427"
+        android:strokeColor="#89929F"
+        android:strokeWidth="1.5"
+        android:strokeLineCap="round" />
+    <path
+        android:pathData="M83.4034 28.3934A5 5 0 0 1 73.4034 28.3934A5 5 0 0 1 83.4034 28.3934Z"
+        android:fillColor="#89929F" />
+    <path
+        android:pathData="M24.7698 66.5518A5 5 0 0 1 14.7698 66.5518A5 5 0 0 1 24.7698 66.5518Z"
+        android:fillColor="#89929F" />
+    <path
+        android:pathData="M57.344 94.4726A5 5 0 0 1 47.344 94.4726A5 5 0 0 1 57.344 94.4726Z"
+        android:fillColor="#89929F" />
+</vector>

src/Android/Resources/drawable/empty_uris_placeholder_dark.xml

@@ -0,0 +1,35 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"
+    android:viewportWidth="129"
+    android:viewportHeight="124"
+    android:width="129dp"
+    android:height="124dp">
+    <path
+        android:pathData="M126.8227 61.9441A59.6843 59.6843 0 0 1 7.4541 61.9441A59.6843 59.6843 0 0 1 126.8227 61.9441Z"
+        android:fillColor="@android:color/transparent"
+        android:strokeColor="#A3A3A3"
+        android:strokeWidth="3" />
+    <path
+        android:pathData="M21.6167 100.851C52.597 103.31 79.6937 80.3264 82.1391 49.5156C83.6205 30.8497 76.0789 14.8844 62.7275 3.63385"
+        android:strokeColor="#A3A3A3"
+        android:strokeWidth="1.5"
+        android:strokeLineCap="round" />
+    <path
+        android:pathData="M14.5633 34.2845C12.2035 66.7711 38.5225 96.3429 72.6666 98.8232C74.2596 98.9389 78.629 98.9975 80.1951 99C84.6245 98.8232 97.8063 96.593 106.813 91.8485C113.439 88.3581 119.745 84.6984 124.644 79.1121"
+        android:strokeColor="#A3A3A3"
+        android:strokeWidth="1.5"
+        android:strokeLineCap="round" />
+    <path
+        android:pathData="M124.502 48.5051C106.554 24.3817 68.8237 21.6709 41.4178 42.0617C24.8146 54.4149 14.7327 72.4183 13.9255 90.1427"
+        android:strokeColor="#A3A3A3"
+        android:strokeWidth="1.5"
+        android:strokeLineCap="round" />
+    <path
+        android:pathData="M83.4034 28.3934A5 5 0 0 1 73.4034 28.3934A5 5 0 0 1 83.4034 28.3934Z"
+        android:fillColor="#A3A3A3" />
+    <path
+        android:pathData="M24.7698 66.5518A5 5 0 0 1 14.7698 66.5518A5 5 0 0 1 24.7698 66.5518Z"
+        android:fillColor="#A3A3A3" />
+    <path
+        android:pathData="M57.344 94.4726A5 5 0 0 1 47.344 94.4726A5 5 0 0 1 57.344 94.4726Z"
+        android:fillColor="#A3A3A3" />
+</vector>

src/Android/Resources/layout/validatable_input_dialog_layout.xml

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:orientation="vertical"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:paddingLeft="30dp"
+    android:paddingRight="30dp">
+    <TextView
+        android:id="@+id/lblHeader"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:textSize="@dimen/dialog_header_text_size"
+        android:layout_marginTop="5dp"
+        android:layout_marginBottom="-3dp"
+        android:labelFor="@+id/txtValue"/>
+    <EditText
+        android:id="@id/txtValue"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:textSize="@dimen/dialog_input_text_size"/>
+    <TextView
+        android:id="@+id/lblValueSubinfo"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:textSize="@dimen/dialog_sub_value_info_text_size"/>
+</LinearLayout>
+

src/Android/Resources/values/dimens.xml

@@ -2,4 +2,7 @@
 <resources xmlns:tools="http://schemas.android.com/tools">
   <dimen name="design_bottom_navigation_text_size" tools:override="true">15sp</dimen>
   <dimen name="design_bottom_navigation_active_text_size" tools:override="true">15sp</dimen>
+  <dimen name="dialog_input_text_size">16sp</dimen>
+  <dimen name="dialog_header_text_size">12sp</dimen>
+  <dimen name="dialog_sub_value_info_text_size">12sp</dimen>
 </resources>

src/Android/Services/DeviceActionService.cs

@@ -3,6 +3,7 @@ using System.Threading.Tasks;
 using Android.App;
 using Android.Content;
 using Android.Content.PM;
+using Android.Media;
 using Android.Nfc;
 using Android.OS;
 using Android.Provider;
@@ -13,11 +14,17 @@ using Android.Views.InputMethods;
 using Android.Widget;
 using Bit.App.Abstractions;
 using Bit.App.Resources;
+using Bit.App.Utilities;
+using Bit.App.Utilities.Prompts;
 using Bit.Core.Abstractions;
 using Bit.Core.Enums;
 using Bit.Core.Utilities;
 using Bit.Droid.Utilities;
 using Plugin.CurrentActivity;
+using Xamarin.Forms.Platform.Android;
+using static Android.Icu.Text.CaseMap;
+using static Android.Renderscripts.ScriptGroup;
+using static Android.Util.EventLogTags;
 using static Bit.App.Pages.SettingsPageViewModel;
 
 namespace Bit.Droid.Services
@@ -209,10 +216,7 @@ namespace Bit.Droid.Services
             }
             if (numericKeyboard)
             {
-                input.InputType = InputTypes.ClassNumber | InputTypes.NumberFlagDecimal | InputTypes.NumberFlagSigned;
-#pragma warning disable CS0618 // Type or member is obsolete
-                input.KeyListener = DigitsKeyListener.GetInstance(false, false);
-#pragma warning restore CS0618 // Type or member is obsolete
+                SetNumericKeyboardTo(input);
             }
             if (password)
             {
@@ -248,6 +252,82 @@ namespace Bit.Droid.Services
             return result.Task;
         }
 
+        public Task<ValidatablePromptResponse?> DisplayValidatablePromptAsync(ValidatablePromptConfig config)
+        {
+            var activity = (MainActivity)CrossCurrentActivity.Current.Activity;
+            if (activity == null)
+            {
+                return Task.FromResult<ValidatablePromptResponse?>(null);
+            }
+
+            var alertBuilder = new AlertDialog.Builder(activity);
+            alertBuilder.SetTitle(config.Title);
+            var view = activity.LayoutInflater.Inflate(Resource.Layout.validatable_input_dialog_layout, null);
+            alertBuilder.SetView(view);
+            
+            var result = new TaskCompletionSource<ValidatablePromptResponse?>();
+
+            alertBuilder.SetPositiveButton(config.OkButtonText ?? AppResources.Ok, listener: null);
+            alertBuilder.SetNegativeButton(config.CancelButtonText ?? AppResources.Cancel, (sender, args) => result.TrySetResult(null));
+            if (!string.IsNullOrEmpty(config.ThirdButtonText))
+            {
+                alertBuilder.SetNeutralButton(config.ThirdButtonText, (sender, args) => result.TrySetResult(new ValidatablePromptResponse(null, true)));
+            }
+
+            var alert = alertBuilder.Create();
+
+            var input = view.FindViewById<EditText>(Resource.Id.txtValue);
+            var lblHeader = view.FindViewById<TextView>(Resource.Id.lblHeader);
+            var lblValueSubinfo = view.FindViewById<TextView>(Resource.Id.lblValueSubinfo);
+
+            lblHeader.Text = config.Subtitle;
+            lblValueSubinfo.Text = config.ValueSubInfo;
+
+            var defaultSubInfoColor = lblValueSubinfo.TextColors;
+
+            input.InputType = InputTypes.ClassText;
+
+            if (config.NumericKeyboard)
+            {
+                SetNumericKeyboardTo(input);
+            }
+
+            input.ImeOptions = input.ImeOptions | (ImeAction)ImeFlags.NoPersonalizedLearning | (ImeAction)ImeFlags.NoExtractUi;
+            input.Text = config.Text ?? string.Empty;
+            input.SetSelection(config.Text?.Length ?? 0);
+            input.AfterTextChanged += (sender, args) =>
+            {
+                if (lblValueSubinfo.Text != config.ValueSubInfo)
+                {
+                    lblValueSubinfo.Text = config.ValueSubInfo;
+                    lblHeader.SetTextColor(defaultSubInfoColor);
+                    lblValueSubinfo.SetTextColor(defaultSubInfoColor);
+                }
+            };
+
+            alert.Window.SetSoftInputMode(SoftInput.StateVisible);
+            alert.Show();
+
+            var positiveButton = alert.GetButton((int)DialogButtonType.Positive);
+            positiveButton.Click += (sender, args) =>
+            {
+                var error = config.ValidateText(input.Text);
+                if (error != null)
+                {
+                    lblHeader.SetTextColor(ThemeManager.GetResourceColor("DangerColor").ToAndroid());
+                    lblValueSubinfo.SetTextColor(ThemeManager.GetResourceColor("DangerColor").ToAndroid());
+                    lblValueSubinfo.Text = error;
+                    lblValueSubinfo.SendAccessibilityEvent(Android.Views.Accessibility.EventTypes.ViewFocused);
+                    return;
+                }
+
+                result.TrySetResult(new ValidatablePromptResponse(input.Text, false));
+                alert.Dismiss();
+            };
+
+            return result.Task;
+        }
+
         public void RateApp()
         {
             var activity = (MainActivity)CrossCurrentActivity.Current.Activity;
@@ -525,5 +605,13 @@ namespace Bit.Droid.Services
             // only used by iOS
             throw new NotImplementedException();
         }
+
+        private void SetNumericKeyboardTo(EditText editText)
+        {
+            editText.InputType = InputTypes.ClassNumber | InputTypes.NumberFlagDecimal | InputTypes.NumberFlagSigned;
+#pragma warning disable CS0618 // Type or member is obsolete
+            editText.KeyListener = DigitsKeyListener.GetInstance(false, false);
+#pragma warning restore CS0618 // Type or member is obsolete
+        }
     }
 }

src/App/Abstractions/IDeviceActionService.cs

@@ -1,4 +1,5 @@
 using System.Threading.Tasks;
+using Bit.App.Utilities.Prompts;
 using Bit.Core.Enums;
 using Bit.Core.Models;
 
@@ -18,6 +19,7 @@ namespace Bit.App.Abstractions
         Task<string> DisplayPromptAync(string title = null, string description = null, string text = null,
             string okButtonText = null, string cancelButtonText = null, bool numericKeyboard = false,
             bool autofocus = true, bool password = false);
+        Task<ValidatablePromptResponse?> DisplayValidatablePromptAsync(ValidatablePromptConfig config);
         Task<string> DisplayAlertAsync(string title, string message, string cancel, params string[] buttons);
         Task<string> DisplayActionSheetAsync(string title, string cancel, string destruction, params string[] buttons);
 

src/App/App.csproj

@@ -146,6 +146,7 @@
     <Folder Include="Controls\IconLabelButton\" />
     <Folder Include="Controls\PasswordStrengthProgressBar\" />
     <Folder Include="Utilities\Automation\" />
+    <Folder Include="Utilities\Prompts\" />
   </ItemGroup>
 
   <ItemGroup>
@@ -442,5 +443,6 @@
     <None Remove="MessagePack.MSBuild.Tasks" />
     <None Remove="Controls\PasswordStrengthProgressBar\" />
     <None Remove="Utilities\Automation\" />
+    <None Remove="Utilities\Prompts\" />
   </ItemGroup>
 </Project>

src/App/Controls/CustomLabel.cs

@@ -1,5 +1,4 @@
-using System;
-using Xamarin.Forms;
+using Xamarin.Forms;
 
 namespace Bit.App.Controls
 {
@@ -8,6 +7,7 @@ namespace Bit.App.Controls
         public CustomLabel()
         {
         }
+
+        public int? FontWeight { get; set; }
     }
 }
-

src/App/Pages/Settings/BlockAutofillUrisPage.xaml

@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<pages:BaseContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    x:Class="Bit.App.Pages.BlockAutofillUrisPage"
+    xmlns:pages="clr-namespace:Bit.App.Pages"
+    xmlns:controls="clr-namespace:Bit.App.Controls"
+    xmlns:u="clr-namespace:Bit.App.Utilities"
+    xmlns:core="clr-namespace:Bit.Core;assembly=BitwardenCore"
+    x:DataType="pages:BlockAutofillUrisPageViewModel"
+    Title="{u:I18n BlockAutoFill}">
+    <ContentPage.BindingContext>
+        <pages:BlockAutofillUrisPageViewModel />
+    </ContentPage.BindingContext>
+    <ContentPage.Resources>
+        <ResourceDictionary>
+            <u:InverseBoolConverter x:Key="inverseBool" />
+        </ResourceDictionary>
+    </ContentPage.Resources>
+    <StackLayout Orientation="Vertical">
+        <Image
+            x:Name="_emptyUrisPlaceholder"
+            HorizontalOptions="Center"
+            WidthRequest="120"
+            HeightRequest="120"
+            Margin="0,100,0,0"
+            IsVisible="{Binding ShowList, Converter={StaticResource inverseBool}}"
+            AutomationProperties.IsInAccessibleTree="True"
+            AutomationProperties.Name="{u:I18n ThereAreNoBlockedURIs}" />
+        <controls:CustomLabel
+            StyleClass="box-label-regular"
+            Text="{u:I18n AutoFillWillNotBeOfferedForTheseURIs}"
+            FontWeight="500"
+            HorizontalTextAlignment="Center"
+            Margin="14,10,14,0"/>
+        <controls:ExtendedCollectionView
+            ItemsSource="{Binding BlockedUris}"
+            IsVisible="{Binding ShowList}"
+            VerticalOptions="FillAndExpand"
+            Margin="0,5,0,0"
+            SelectionMode="None"
+            StyleClass="list, list-platform"
+            ExtraDataForLogging="Blocked Autofill Uris"
+            AutomationId="BlockedUrisCellList">
+            <CollectionView.ItemTemplate>
+                <DataTemplate x:DataType="pages:BlockAutofillUriItemViewModel">
+                    <StackLayout
+                        Orientation="Vertical"
+                        AutomationId="BlockedUriCell">
+                        <StackLayout
+                            Orientation="Horizontal">
+                            <controls:CustomLabel
+                                VerticalOptions="Center"
+                                StyleClass="box-label-regular"
+                                Text="{Binding Uri}"
+                                MaxLines="2"
+                                LineBreakMode="TailTruncation"
+                                FontWeight="500"
+                                Margin="15,0,0,0"
+                                HorizontalOptions="StartAndExpand"/>
+                            <controls:IconButton
+                                StyleClass="box-row-button-muted, box-row-button-platform"
+                                Text="{Binding Source={x:Static core:BitwardenIcons.PencilSquare}}"
+                                Command="{Binding EditUriCommand}"
+                                Margin="5,0,15,0"
+                                AutomationProperties.IsInAccessibleTree="True"
+                                AutomationProperties.Name="{u:I18n EditURI}"
+                                AutomationId="EditUriButton" />
+                        </StackLayout>
+                        <BoxView StyleClass="box-row-separator" />
+                    </StackLayout>
+                </DataTemplate>
+            </CollectionView.ItemTemplate>
+        </controls:ExtendedCollectionView>
+        <Button
+            Text="{u:I18n NewBlockedURI}"
+            Command="{Binding AddUriCommand}"
+            VerticalOptions="End"
+            HeightRequest="40"
+            Opacity="0.8"
+            Margin="14,5,14,10"
+            AutomationProperties.IsInAccessibleTree="True"
+            AutomationProperties.Name="{u:I18n NewBlockedURI}"
+            AutomationId="NewBlockedUriButton" />
+    </StackLayout>
+</pages:BaseContentPage>

src/App/Pages/Settings/BlockAutofillUrisPage.xaml.cs

@@ -0,0 +1,44 @@
+using System.Threading.Tasks;
+using Bit.App.Styles;
+using Bit.App.Utilities;
+using Bit.Core.Utilities;
+using Xamarin.Essentials;
+using Xamarin.Forms;
+
+namespace Bit.App.Pages
+{
+    public partial class BlockAutofillUrisPage : BaseContentPage, IThemeDirtablePage
+    {
+        private readonly BlockAutofillUrisPageViewModel _vm;
+
+        public BlockAutofillUrisPage()
+        {
+            InitializeComponent();
+
+            _vm = BindingContext as BlockAutofillUrisPageViewModel;
+            _vm.Page = this;
+        }
+
+        protected override void OnAppearing()
+        {
+            base.OnAppearing();
+
+            _vm.InitAsync().FireAndForget(_ => Navigation.PopAsync());
+
+            UpdatePlaceholder();
+        }
+
+        public override async Task UpdateOnThemeChanged()
+        {
+            await base.UpdateOnThemeChanged();
+
+            UpdatePlaceholder();
+        }
+
+        private void UpdatePlaceholder()
+        {
+            MainThread.BeginInvokeOnMainThread(() =>
+                _emptyUrisPlaceholder.Source = ImageSource.FromFile(ThemeManager.UsingLightTheme ? "empty_uris_placeholder" : "empty_uris_placeholder_dark"));
+        }
+    }
+}

src/App/Pages/Settings/BlockAutofillUrisPageViewModel.cs

@@ -0,0 +1,186 @@
+using System;
+using System.Linq;
+using System.Threading.Tasks;
+using System.Windows.Input;
+using Bit.App.Abstractions;
+using Bit.App.Resources;
+using Bit.Core;
+using Bit.Core.Abstractions;
+using Bit.Core.Utilities;
+using Xamarin.CommunityToolkit.ObjectModel;
+using Xamarin.Essentials;
+using Xamarin.Forms;
+
+namespace Bit.App.Pages
+{
+    public class BlockAutofillUrisPageViewModel : BaseViewModel
+    {
+        private const char URI_SEPARARTOR = ',';
+        private const string URI_FORMAT = "https://domain.com";
+
+        private readonly IStateService _stateService;
+        private readonly IDeviceActionService _deviceActionService;
+
+        public BlockAutofillUrisPageViewModel()
+        {
+            _stateService = ServiceContainer.Resolve<IStateService>();
+            _deviceActionService = ServiceContainer.Resolve<IDeviceActionService>();
+
+            AddUriCommand = new AsyncCommand(AddUriAsync,
+                onException: ex => HandleException(ex),
+                allowsMultipleExecutions: false);
+
+            EditUriCommand = new AsyncCommand<BlockAutofillUriItemViewModel>(EditUriAsync,
+                onException: ex => HandleException(ex),
+                allowsMultipleExecutions: false);
+        }
+
+        public ObservableRangeCollection<BlockAutofillUriItemViewModel> BlockedUris { get; set; } = new ObservableRangeCollection<BlockAutofillUriItemViewModel>();
+
+        public bool ShowList => BlockedUris.Any();
+
+        public ICommand AddUriCommand { get; }
+
+        public ICommand EditUriCommand { get; }
+
+        public async Task InitAsync()
+        {
+            var blockedUrisList = await _stateService.GetAutofillBlacklistedUrisAsync();
+            if (blockedUrisList?.Any() != true)
+            {
+                return;
+            }
+            await MainThread.InvokeOnMainThreadAsync(() =>
+            {
+                BlockedUris.AddRange(blockedUrisList.OrderBy(uri => uri).Select(u => new BlockAutofillUriItemViewModel(u, EditUriCommand)).ToList());
+                TriggerPropertyChanged(nameof(ShowList));
+            });
+        }
+
+        private async Task AddUriAsync()
+        {
+            var response = await _deviceActionService.DisplayValidatablePromptAsync(new Utilities.Prompts.ValidatablePromptConfig
+            {
+                Title = AppResources.NewUri,
+                Subtitle = AppResources.EnterURI,
+                ValueSubInfo = string.Format(AppResources.FormatXSeparateMultipleURIsWithAComma, URI_FORMAT),
+                OkButtonText = AppResources.Save,
+                ValidateText = text => ValidateUris(text, true)
+            });
+            if (response?.Text is null)
+            {
+                return;
+            }
+
+            await MainThread.InvokeOnMainThreadAsync(() =>
+            {
+                foreach (var uri in response.Value.Text.Split(URI_SEPARARTOR).Where(s => !string.IsNullOrEmpty(s)))
+                {
+                    var cleanedUri = uri.Replace(Environment.NewLine, string.Empty).Trim();
+                    BlockedUris.Add(new BlockAutofillUriItemViewModel(cleanedUri, EditUriCommand));
+                }
+
+                BlockedUris = new ObservableRangeCollection<BlockAutofillUriItemViewModel>(BlockedUris.OrderBy(b => b.Uri));
+                TriggerPropertyChanged(nameof(BlockedUris));
+                TriggerPropertyChanged(nameof(ShowList));
+            });
+            await UpdateAutofillBlacklistedUrisAsync();
+            _deviceActionService.Toast(AppResources.URISaved);
+        }
+
+        private async Task EditUriAsync(BlockAutofillUriItemViewModel uriItemViewModel)
+        {
+            var response = await _deviceActionService.DisplayValidatablePromptAsync(new Utilities.Prompts.ValidatablePromptConfig
+            {
+                Title = AppResources.EditURI,
+                Subtitle = AppResources.EnterURI,
+                Text = uriItemViewModel.Uri,
+                ValueSubInfo = string.Format(AppResources.FormatX, URI_FORMAT),
+                OkButtonText = AppResources.Save,
+                ThirdButtonText = AppResources.Remove,
+                ValidateText = text => ValidateUris(text, false)
+            });
+            if (response is null)
+            {
+                return;
+            }
+
+            if (response.Value.ExecuteThirdAction)
+            {
+                await MainThread.InvokeOnMainThreadAsync(() =>
+                {
+                    BlockedUris.Remove(uriItemViewModel);
+                    TriggerPropertyChanged(nameof(ShowList));
+                });
+                await UpdateAutofillBlacklistedUrisAsync();
+                _deviceActionService.Toast(AppResources.URIRemoved);
+                return;
+            }
+
+            var cleanedUri = response.Value.Text.Replace(Environment.NewLine, string.Empty).Trim();
+            await MainThread.InvokeOnMainThreadAsync(() =>
+            {
+                BlockedUris.Remove(uriItemViewModel);
+                BlockedUris.Add(new BlockAutofillUriItemViewModel(cleanedUri, EditUriCommand));
+                BlockedUris = new ObservableRangeCollection<BlockAutofillUriItemViewModel>(BlockedUris.OrderBy(b => b.Uri));
+                TriggerPropertyChanged(nameof(BlockedUris));
+                TriggerPropertyChanged(nameof(ShowList));
+            });
+            await UpdateAutofillBlacklistedUrisAsync();
+            _deviceActionService.Toast(AppResources.URISaved);
+        }
+
+        private string ValidateUris(string uris, bool allowMultipleUris)
+        {
+            if (string.IsNullOrWhiteSpace(uris))
+            {
+                return string.Format(AppResources.FormatX, URI_FORMAT);
+            }
+
+            if (!allowMultipleUris && uris.Contains(URI_SEPARARTOR))
+            {
+                return AppResources.CannotEditMultipleURIsAtOnce;
+            }
+
+            foreach (var uri in uris.Split(URI_SEPARARTOR).Where(u => !string.IsNullOrWhiteSpace(u)))
+            {
+                var cleanedUri = uri.Replace(Environment.NewLine, string.Empty).Trim();
+                if (!cleanedUri.StartsWith("http://") && !cleanedUri.StartsWith("https://") &&
+                    !cleanedUri.StartsWith(Constants.AndroidAppProtocol))
+                {
+                    return AppResources.InvalidFormatUseHttpsHttpOrAndroidApp;
+                }
+
+                if (!Uri.TryCreate(cleanedUri, UriKind.Absolute, out var _))
+                {
+                    return AppResources.InvalidURI;
+                }
+
+                if (BlockedUris.Any(uriItem => uriItem.Uri == cleanedUri))
+                {
+                    return string.Format(AppResources.TheURIXIsAlreadyBlocked, cleanedUri);
+                }
+            }
+
+            return null;
+        }
+
+        private async Task UpdateAutofillBlacklistedUrisAsync()
+        {
+            await _stateService.SetAutofillBlacklistedUrisAsync(BlockedUris.Any() ? BlockedUris.Select(bu => bu.Uri).ToList() : null);
+        }
+    }
+
+    public class BlockAutofillUriItemViewModel : ExtendedViewModel
+    {
+        public BlockAutofillUriItemViewModel(string uri, ICommand editUriCommand)
+        {
+            Uri = uri;
+            EditUriCommand = new Command(() => editUriCommand.Execute(this));
+        }
+
+        public string Uri { get; }
+
+        public ICommand EditUriCommand { get; }
+    }
+}

src/App/Pages/Settings/OptionsPage.xaml

@@ -153,22 +153,14 @@
                     StyleClass="box-footer-label, box-footer-label-switch" />
             </StackLayout>
             <StackLayout StyleClass="box" IsVisible="{Binding ShowAndroidAutofillSettings}">
-                <StackLayout StyleClass="box-row, box-row-input">
-                    <Label
-                        Text="{u:I18n AutofillBlockedUris}"
-                        StyleClass="box-label" />
-                    <Editor
-                        x:Name="_autofillBlockedUrisEditor"
-                        Text="{Binding AutofillBlockedUris}"
-                        StyleClass="box-value"
-                        AutoSize="TextChanges"
-                        IsSpellCheckEnabled="False"
-                        IsTextPredictionEnabled="False"
-                        Keyboard="Url"
-                        Unfocused="AutofillBlockedUrisEditor_Unfocused" />
-                </StackLayout>
+                <StackLayout.GestureRecognizers>
+                    <TapGestureRecognizer Command="{Binding GoToBlockAutofillUrisCommand}" />
+                </StackLayout.GestureRecognizers>
                 <Label
-                    Text="{u:I18n AutofillBlockedUrisDescription}"
+                    Text="{u:I18n BlockAutoFill}"
+                    StyleClass="box-label-regular" />
+                <Label
+                    Text="{u:I18n AutoFillWillNotBeOfferedForTheseURIs}"
                     StyleClass="box-footer-label" />
             </StackLayout>
         </StackLayout>

src/App/Pages/Settings/OptionsPage.xaml.cs

@@ -1,6 +1,4 @@
-using Bit.App.Abstractions;
-using Bit.App.Resources;
-using Bit.Core.Abstractions;
+using Bit.Core.Abstractions;
 using Bit.Core.Utilities;
 using Xamarin.Forms;
 using Xamarin.Forms.PlatformConfiguration;
@@ -44,17 +42,6 @@ namespace Bit.App.Pages
             await _vm.InitAsync();
         }
 
-        protected async override void OnDisappearing()
-        {
-            base.OnDisappearing();
-            await _vm.UpdateAutofillBlockedUris();
-        }
-
-        private async void AutofillBlockedUrisEditor_Unfocused(object sender, FocusEventArgs e)
-        {
-            await _vm.UpdateAutofillBlockedUris();
-        }
-
         private async void Close_Clicked(object sender, System.EventArgs e)
         {
             if (DoOnce())

src/App/Pages/Settings/OptionsPageViewModel.cs

@@ -1,12 +1,13 @@
 using System.Collections.Generic;
 using System.Linq;
 using System.Threading.Tasks;
+using System.Windows.Input;
 using Bit.App.Resources;
 using Bit.App.Utilities;
-using Bit.Core;
 using Bit.Core.Abstractions;
 using Bit.Core.Enums;
 using Bit.Core.Utilities;
+using Xamarin.CommunityToolkit.ObjectModel;
 using Xamarin.Forms;
 
 namespace Bit.App.Pages
@@ -19,7 +20,6 @@ namespace Bit.App.Pages
         private readonly IPlatformUtilsService _platformUtilsService;
 
         private bool _autofillSavePrompt;
-        private string _autofillBlockedUris;
         private bool _favicon;
         private bool _autoTotpCopy;
         private int _clearClipboardSelectedIndex;
@@ -84,6 +84,10 @@ namespace Bit.App.Pages
                 new KeyValuePair<string, string>(null, AppResources.DefaultSystem)
             };
             LocalesOptions.AddRange(_i18nService.LocaleNames.ToList());
+
+            GoToBlockAutofillUrisCommand = new AsyncCommand(() => Page.Navigation.PushAsync(new BlockAutofillUrisPage()),
+                onException: ex => HandleException(ex),
+                allowsMultipleExecutions: false);
         }
 
         public List<KeyValuePair<int?, string>> ClearClipboardOptions { get; set; }
@@ -192,25 +196,18 @@ namespace Bit.App.Pages
             }
         }
 
-        public string AutofillBlockedUris
-        {
-            get => _autofillBlockedUris;
-            set => SetProperty(ref _autofillBlockedUris, value);
-        }
-
         public bool ShowAndroidAutofillSettings
         {
             get => _showAndroidAutofillSettings;
             set => SetProperty(ref _showAndroidAutofillSettings, value);
         }
 
+        public ICommand GoToBlockAutofillUrisCommand { get; }
+
         public async Task InitAsync()
         {
             AutofillSavePrompt = !(await _stateService.GetAutofillDisableSavePromptAsync()).GetValueOrDefault();
 
-            var blockedUrisList = await _stateService.GetAutofillBlacklistedUrisAsync();
-            AutofillBlockedUris = blockedUrisList != null ? string.Join(", ", blockedUrisList) : null;
-
             AutoTotpCopy = !(await _stateService.GetDisableAutoTotpCopyAsync() ?? false);
 
             Favicon = !(await _stateService.GetDisableFaviconAsync()).GetValueOrDefault();
@@ -288,41 +285,6 @@ namespace Bit.App.Pages
             }
         }
 
-        public async Task UpdateAutofillBlockedUris()
-        {
-            if (_inited)
-            {
-                if (string.IsNullOrWhiteSpace(AutofillBlockedUris))
-                {
-                    await _stateService.SetAutofillBlacklistedUrisAsync(null);
-                    AutofillBlockedUris = null;
-                    return;
-                }
-                try
-                {
-                    var csv = AutofillBlockedUris;
-                    var urisList = new List<string>();
-                    foreach (var uri in csv.Split(','))
-                    {
-                        if (string.IsNullOrWhiteSpace(uri))
-                        {
-                            continue;
-                        }
-                        var cleanedUri = uri.Replace(System.Environment.NewLine, string.Empty).Trim();
-                        if (!cleanedUri.StartsWith("http://") && !cleanedUri.StartsWith("https://") &&
-                            !cleanedUri.StartsWith(Constants.AndroidAppProtocol))
-                        {
-                            continue;
-                        }
-                        urisList.Add(cleanedUri);
-                    }
-                    await _stateService.SetAutofillBlacklistedUrisAsync(urisList);
-                    AutofillBlockedUris = string.Join(", ", urisList);
-                }
-                catch { }
-            }
-        }
-
         private async Task UpdateCurrentLocaleAsync()
         {
             if (!_inited)

src/App/Resources/AppResources.Designer.cs

@@ -796,15 +796,6 @@ namespace Bit.App.Resources {
             }
         }
         
-        /// <summary>
-        ///   Looks up a localized string similar to Auto-fill will not be offered for blocked URIs. Separate multiple URIs with a comma. For example: &quot;https://twitter.com, androidapp://com.twitter.android&quot;..
-        /// </summary>
-        public static string AutofillBlockedUrisDescription {
-            get {
-                return ResourceManager.GetString("AutofillBlockedUrisDescription", resourceCulture);
-            }
-        }
-        
         /// <summary>
         ///   Looks up a localized string similar to Do you want to auto-fill or view this item?.
         /// </summary>
@@ -940,6 +931,15 @@ namespace Bit.App.Resources {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Auto-fill will not be offered for these URIs..
+        /// </summary>
+        public static string AutoFillWillNotBeOfferedForTheseURIs {
+            get {
+                return ResourceManager.GetString("AutoFillWillNotBeOfferedForTheseURIs", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Auto-fill with Bitwarden.
         /// </summary>
@@ -1228,6 +1228,15 @@ namespace Bit.App.Resources {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Block auto-fill.
+        /// </summary>
+        public static string BlockAutoFill {
+            get {
+                return ResourceManager.GetString("BlockAutoFill", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Brand.
         /// </summary>
@@ -1264,6 +1273,15 @@ namespace Bit.App.Resources {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Cannot edit multiple URIs at once.
+        /// </summary>
+        public static string CannotEditMultipleURIsAtOnce {
+            get {
+                return ResourceManager.GetString("CannotEditMultipleURIsAtOnce", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Cannot open the app &quot;{0}&quot;..
         /// </summary>
@@ -2146,6 +2164,15 @@ namespace Bit.App.Resources {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Edit URI.
+        /// </summary>
+        public static string EditURI {
+            get {
+                return ResourceManager.GetString("EditURI", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Email.
         /// </summary>
@@ -2299,6 +2326,15 @@ namespace Bit.App.Resources {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Enter URI.
+        /// </summary>
+        public static string EnterURI {
+            get {
+                return ResourceManager.GetString("EnterURI", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Enter the 6 digit verification code from your authenticator app..
         /// </summary>
@@ -2947,6 +2983,24 @@ namespace Bit.App.Resources {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Format: {0}.
+        /// </summary>
+        public static string FormatX {
+            get {
+                return ResourceManager.GetString("FormatX", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Format: {0}. Separate multiple URIs with a comma..
+        /// </summary>
+        public static string FormatXSeparateMultipleURIsWithAComma {
+            get {
+                return ResourceManager.GetString("FormatXSeparateMultipleURIsWithAComma", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Forwarded email alias.
         /// </summary>
@@ -3289,6 +3343,15 @@ namespace Bit.App.Resources {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Invalid format. Use https://, http://, or androidapp://.
+        /// </summary>
+        public static string InvalidFormatUseHttpsHttpOrAndroidApp {
+            get {
+                return ResourceManager.GetString("InvalidFormatUseHttpsHttpOrAndroidApp", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Invalid master password. Try again..
         /// </summary>
@@ -3307,6 +3370,15 @@ namespace Bit.App.Resources {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Invalid URI.
+        /// </summary>
+        public static string InvalidURI {
+            get {
+                return ResourceManager.GetString("InvalidURI", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Invalid verification code.
         /// </summary>
@@ -4218,6 +4290,15 @@ namespace Bit.App.Resources {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to New blocked URI.
+        /// </summary>
+        public static string NewBlockedURI {
+            get {
+                return ResourceManager.GetString("NewBlockedURI", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to New custom field.
         /// </summary>
@@ -6119,6 +6200,15 @@ namespace Bit.App.Resources {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to There are no blocked URIs.
+        /// </summary>
+        public static string ThereAreNoBlockedURIs {
+            get {
+                return ResourceManager.GetString("ThereAreNoBlockedURIs", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to There are no items in your vault that match &quot;{0}&quot;.
         /// </summary>
@@ -6137,6 +6227,15 @@ namespace Bit.App.Resources {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to The URI {0} is already blocked.
+        /// </summary>
+        public static string TheURIXIsAlreadyBlocked {
+            get {
+                return ResourceManager.GetString("TheURIXIsAlreadyBlocked", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to 30 days.
         /// </summary>
@@ -6587,6 +6686,15 @@ namespace Bit.App.Resources {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to URI removed.
+        /// </summary>
+        public static string URIRemoved {
+            get {
+                return ResourceManager.GetString("URIRemoved", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to URIs.
         /// </summary>
@@ -6596,6 +6704,15 @@ namespace Bit.App.Resources {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to URI saved.
+        /// </summary>
+        public static string URISaved {
+            get {
+                return ResourceManager.GetString("URISaved", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to US.
         /// </summary>

src/App/Resources/AppResources.resx

@@ -1585,9 +1585,6 @@ Scanning will happen automatically.</value>
   <data name="AutofillBlockedUris" xml:space="preserve">
     <value>Auto-fill blocked URIs</value>
   </data>
-  <data name="AutofillBlockedUrisDescription" xml:space="preserve">
-    <value>Auto-fill will not be offered for blocked URIs. Separate multiple URIs with a comma. For example: "https://twitter.com, androidapp://com.twitter.android".</value>
-  </data>
   <data name="AskToAddLogin" xml:space="preserve">
     <value>Ask to add login</value>
   </data>
@@ -2643,4 +2640,50 @@ Do you want to switch to this account?</value>
   <data name="InvalidAPIToken" xml:space="preserve">
     <value>Invalid API token</value>
   </data>
+  <data name="BlockAutoFill" xml:space="preserve">
+    <value>Block auto-fill</value>
+  </data>
+  <data name="AutoFillWillNotBeOfferedForTheseURIs" xml:space="preserve">
+    <value>Auto-fill will not be offered for these URIs.</value>
+  </data>
+  <data name="NewBlockedURI" xml:space="preserve">
+    <value>New blocked URI</value>
+  </data>
+  <data name="URISaved" xml:space="preserve">
+    <value>URI saved</value>
+  </data>
+  <data name="InvalidFormatUseHttpsHttpOrAndroidApp" xml:space="preserve">
+    <value>Invalid format. Use https://, http://, or androidapp://</value>
+    <comment>https://, http://, androidapp:// should not be translated</comment>
+  </data>
+  <data name="EditURI" xml:space="preserve">
+    <value>Edit URI</value>
+  </data>
+  <data name="EnterURI" xml:space="preserve">
+    <value>Enter URI</value>
+  </data>
+  <data name="FormatXSeparateMultipleURIsWithAComma" xml:space="preserve">
+    <value>Format: {0}. Separate multiple URIs with a comma.</value>
+  </data>
+  <data name="FormatX" xml:space="preserve">
+    <value>Format: {0}</value>
+  </data>
+  <data name="InvalidURI" xml:space="preserve">
+    <value>Invalid URI</value>
+  </data>
+  <data name="URISaved" xml:space="preserve">
+    <value>URI saved</value>
+  </data>
+  <data name="URIRemoved" xml:space="preserve">
+    <value>URI removed</value>
+  </data>
+  <data name="ThereAreNoBlockedURIs" xml:space="preserve">
+    <value>There are no blocked URIs</value>
+  </data>
+  <data name="TheURIXIsAlreadyBlocked" xml:space="preserve">
+    <value>The URI {0} is already blocked</value>
+  </data>
+  <data name="CannotEditMultipleURIsAtOnce" xml:space="preserve">
+    <value>Cannot edit multiple URIs at once</value>
+  </data>
 </root>

src/App/Styles/Base.xaml

@@ -428,6 +428,22 @@
         <Setter Property="VerticalOptions"
                 Value="CenterAndExpand" />
     </Style>
+    <Style TargetType="Button"
+           ApplyToDerivedTypes="True"
+           Class="box-row-button-muted">
+        <Setter Property="BackgroundColor"
+                Value="Transparent" />
+        <Setter Property="BorderWidth"
+                Value="0" />
+        <Setter Property="Padding"
+                Value="0" />
+        <Setter Property="TextColor"
+                Value="{DynamicResource MutedColor}" />
+        <Setter Property="HorizontalOptions"
+                Value="End" />
+        <Setter Property="VerticalOptions"
+                Value="CenterAndExpand" />
+    </Style>
     <Style TargetType="Button"
            ApplyToDerivedTypes="True"
            Class="box-overlay">

src/App/Utilities/Prompts/ValidatablePromptConfig.cs

@@ -0,0 +1,29 @@
+using System;
+
+namespace Bit.App.Utilities.Prompts
+{
+    public class ValidatablePromptConfig
+    {
+        public string Title { get; set; }
+        public string Subtitle { get; set; }
+        public string Text { get; set; }
+        public Func<string, string> ValidateText { get; set; }
+        public string ValueSubInfo { get; set; }
+        public string OkButtonText { get; set; }
+        public string CancelButtonText { get; set; }
+        public string ThirdButtonText { get; set; }
+        public bool NumericKeyboard { get; set; }
+    }
+
+    public struct ValidatablePromptResponse
+    {
+        public ValidatablePromptResponse(string text, bool executeThirdAction)
+        {
+            Text = text;
+            ExecuteThirdAction = executeThirdAction;
+        }
+
+        public string Text { get; set; }
+        public bool ExecuteThirdAction { get; set; }
+    }
+}

src/iOS.Core/Services/DeviceActionService.cs

@@ -3,6 +3,7 @@ using System.Linq;
 using System.Threading.Tasks;
 using Bit.App.Abstractions;
 using Bit.App.Resources;
+using Bit.App.Utilities.Prompts;
 using Bit.Core.Enums;
 using Bit.iOS.Core.Utilities;
 using Bit.iOS.Core.Views;
@@ -147,6 +148,11 @@ namespace Bit.iOS.Core.Services
             return result.Task;
         }
 
+        public Task<ValidatablePromptResponse?> DisplayValidatablePromptAsync(ValidatablePromptConfig config)
+        {
+            throw new NotImplementedException();
+        }
+
         public void RateApp()
         {
             string uri = null;