Merge pull request #145 from irihitech/verification_code

Verification code

demo/Ursa.Demo/Pages/VerificationCodeDemo.axaml

@@ -0,0 +1,18 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:u="https://irihi.tech/ursa"
+             xmlns:vm="using:Ursa.Demo.ViewModels"
+             xmlns:system="clr-namespace:System;assembly=System.Runtime"
+             x:DataType="vm:VerificationCodeDemoViewModel"
+             x:CompileBindings="True"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Ursa.Demo.Pages.VerificationCodeDemo">
+    <StackPanel>
+        <u:VerificationCode Count="4" Name="v4" CompleteCommand="{Binding CompleteCommand}"/>
+        <u:VerificationCode Count="4" Mode="Digit" DataValidationErrors.Errors="{Binding Error}"/>
+        <u:VerificationCode Count="4" Mode="Letter"/>
+        <u:VerificationCode Count="6" PasswordChar="•" Complete="VerificationCode_OnComplete" />
+    </StackPanel>
+</UserControl>

demo/Ursa.Demo/Pages/VerificationCodeDemo.axaml.cs

@@ -0,0 +1,21 @@
+using System;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+using Ursa.Controls;
+
+namespace Ursa.Demo.Pages;
+
+public partial class VerificationCodeDemo : UserControl
+{
+    public VerificationCodeDemo()
+    {
+        InitializeComponent();
+    }
+
+    private async void VerificationCode_OnComplete(object? sender, VerificationCodeCompleteEventArgs e)
+    {
+        var text = string.Join(string.Empty, e.Code);
+        await MessageBox.ShowOverlayAsync(text);
+    }
+}

demo/Ursa.Demo/ViewModels/MainViewViewModel.cs

@@ -56,6 +56,7 @@ public class MainViewViewModel : ViewModelBase
             MenuKeys.MenuKeyTwoTonePathIcon => new TwoTonePathIconDemoViewModel(),
             MenuKeys.MenuKeyThemeToggler => new ThemeTogglerDemoViewModel(),
             MenuKeys.MenuKeyToolBar => new ToolBarDemoViewModel(),
+            MenuKeys.MenuKeyVerificationCode => new VerificationCodeDemoViewModel(),
         };
     }
 }

demo/Ursa.Demo/ViewModels/MenuViewModel.cs

@@ -42,7 +42,8 @@ public class MenuViewModel: ViewModelBase
             new() { MenuHeader = "Theme Toggler", Key = MenuKeys.MenuKeyThemeToggler, Status = "New" },
             new() { MenuHeader = "Timeline", Key = MenuKeys.MenuKeyTimeline, Status = "WIP" },
             new() { MenuHeader = "TwoTonePathIcon", Key = MenuKeys.MenuKeyTwoTonePathIcon},
-            new() { MenuHeader = "ToolBar", Key = MenuKeys.MenuKeyToolBar, Status = "New" }
+            new() { MenuHeader = "ToolBar", Key = MenuKeys.MenuKeyToolBar, Status = "New" },
+            new() { MenuHeader = "Verification Code", Key = MenuKeys.MenuKeyVerificationCode, Status = "New" },
         };
     }
 }
@@ -81,5 +82,6 @@ public static class MenuKeys
     public const string MenuKeyTwoTonePathIcon = "TwoTonePathIcon";
     public const string MenuKeyThemeToggler = "ThemeToggler";
     public const string MenuKeyToolBar = "ToolBar";
+    public const string MenuKeyVerificationCode = "VerificationCode";
 
 }

demo/Ursa.Demo/ViewModels/VerificationCodeDemoViewModel.cs

@@ -0,0 +1,29 @@
+using System;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+using System.Windows.Input;
+using Avalonia.Collections;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+using Ursa.Controls;
+
+namespace Ursa.Demo.ViewModels;
+
+public partial class VerificationCodeDemoViewModel: ObservableObject
+{
+    public ICommand CompleteCommand { get; set; }
+    [ObservableProperty] private List<Exception>? _error;
+
+    public VerificationCodeDemoViewModel()
+    {
+        CompleteCommand = new AsyncRelayCommand<IList<string>>(OnComplete);
+        Error = [new Exception("Invalid verification code")];
+    }
+
+    private async Task OnComplete(IList<string>? obj)
+    {
+        if (obj is null) return;
+        var code = string.Join("", obj);
+        await MessageBox.ShowOverlayAsync(code);
+    }
+}

src/Ursa.Themes.Semi/Controls/VerificationCode.axaml

@@ -0,0 +1,80 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:u="https://irihi.tech/ursa">
+    <Design.PreviewWith>
+        <u:VerificationCode Count="4" />
+    </Design.PreviewWith>
+    <!--  Add Resources Here  -->
+    <ControlTheme x:Key="{x:Type u:VerificationCodeItem}" TargetType="u:VerificationCodeItem">
+        <Setter Property="Margin" Value="8" />
+        <Setter Property="FontSize" Value="20" />
+        <Setter Property="Focusable" Value="True" />
+        <Setter Property="Height" Value="48" />
+        <Setter Property="Width" Value="48" />
+        <Setter Property="CornerRadius" Value="3" />
+        <Setter Property="BorderThickness" Value="1" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border
+                    Name="PART_Background"
+                    HorizontalAlignment="Stretch"
+                    VerticalAlignment="Stretch"
+                    Background="{DynamicResource TextBoxDefaultBackground}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <TextPresenter
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        PasswordChar="{TemplateBinding PasswordChar}"
+                        Text="{TemplateBinding Text}"
+                        TextElement.FontSize="{TemplateBinding FontSize}" />
+                </Border>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:pointerover /template/ Border#PART_Background">
+            <Setter Property="Background" Value="{DynamicResource TextBoxPointeroverBackground}" />
+        </Style>
+        <Style Selector="^:focus /template/ Border#PART_Background">
+            <Setter Property="Background" Value="{DynamicResource TextBoxPointeroverBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource TextBoxFocusBorderBrush}" />
+        </Style>
+        <Style Selector="^:error /template/ Border#PART_Background">
+            <Setter Property="Background" Value="{DynamicResource DataValidationErrorsSelectedBackground}" />
+        </Style>
+        <Style Selector="^:focus:error /template/ Border#PART_Background">
+            <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type u:VerificationCodeCollection}" TargetType="u:VerificationCodeCollection">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="u:VerificationCodeCollection">
+                <ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" />
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type u:VerificationCode}" TargetType="u:VerificationCode">
+        <Setter Property="HorizontalAlignment" Value="Left" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="u:VerificationCode">
+                <DataValidationErrors>
+                    <u:VerificationCodeCollection HorizontalAlignment="Left" Name="{x:Static u:VerificationCode.PART_ItemsControl}" ItemsSource="{TemplateBinding Digits}">
+                        <u:VerificationCodeCollection.ItemsPanel>
+                            <ItemsPanelTemplate>
+                                <UniformGrid Columns="{TemplateBinding Count}" Rows="1" />
+                            </ItemsPanelTemplate>
+                        </u:VerificationCodeCollection.ItemsPanel>
+                        <u:VerificationCodeCollection.ItemContainerTheme>
+                            <ControlTheme BasedOn="{StaticResource {x:Type u:VerificationCodeItem}}" TargetType="u:VerificationCodeItem">
+                                <Setter Property="PasswordChar" Value="{Binding $parent[u:VerificationCode].PasswordChar}" />
+                                <Setter Property="DataValidationErrors.Errors" Value="{Binding $parent[u:VerificationCode].(DataValidationErrors.Errors)}" />
+                            </ControlTheme>
+                        </u:VerificationCodeCollection.ItemContainerTheme>
+                    </u:VerificationCodeCollection>
+                </DataValidationErrors>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

src/Ursa.Themes.Semi/Controls/_index.axaml

@@ -33,5 +33,6 @@
         <ResourceInclude Source="Skeleton.axaml" />
         <ResourceInclude Source="TwoTonePathIcon.axaml" />
         <ResourceInclude Source="ToolBar.axaml" />
+        <ResourceInclude Source="VerificationCode.axaml" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>

src/Ursa/Controls/VerificationCode/VerificationCode.cs

@@ -0,0 +1,175 @@
+using System.Windows.Input;
+using Avalonia;
+using Avalonia.Collections;
+using Avalonia.Controls;
+using Avalonia.Controls.Metadata;
+using Avalonia.Controls.Presenters;
+using Avalonia.Controls.Primitives;
+using Avalonia.Input;
+using Avalonia.Interactivity;
+using Avalonia.LogicalTree;
+using Avalonia.Utilities;
+using Irihi.Avalonia.Shared.Helpers;
+
+namespace Ursa.Controls;
+
+[TemplatePart(PART_ItemsControl, typeof(ItemsControl))]
+public class VerificationCode: TemplatedControl
+{
+    public const string PART_ItemsControl = "PART_ItemsControl";
+    private ItemsControl? _itemsControl;
+    private int _currentIndex = 0;
+    
+    public static readonly StyledProperty<ICommand?> CompleteCommandProperty = AvaloniaProperty.Register<VerificationCode, ICommand?>(
+        nameof(CompleteCommand));
+
+    public ICommand? CompleteCommand
+    {
+        get => GetValue(CompleteCommandProperty);
+        set => SetValue(CompleteCommandProperty, value);
+    }
+
+    public static readonly StyledProperty<int> CountProperty = AvaloniaProperty.Register<VerificationCode, int>(
+        nameof(Count));
+
+    public int Count
+    {
+        get => GetValue(CountProperty);
+        set => SetValue(CountProperty, value);
+    }
+
+    public static readonly StyledProperty<char> PasswordCharProperty =
+        AvaloniaProperty.Register<VerificationCode, char>(
+            nameof(PasswordChar));
+
+    public char PasswordChar
+    {
+        get => GetValue(PasswordCharProperty);
+        set => SetValue(PasswordCharProperty, value);
+    }
+
+    public static readonly StyledProperty<VerificationCodeMode> ModeProperty =
+        AvaloniaProperty.Register<VerificationCode, VerificationCodeMode>(
+            nameof(Mode), defaultValue: VerificationCodeMode.Digit | VerificationCodeMode.Letter);
+
+    public VerificationCodeMode Mode
+    {
+        get => GetValue(ModeProperty);
+        set => SetValue(ModeProperty, value);
+    }
+
+    public static readonly DirectProperty<VerificationCode, IList<string>> DigitsProperty = AvaloniaProperty.RegisterDirect<VerificationCode, IList<string>>(
+        nameof(Digits), o => o.Digits, (o, v) => o.Digits = v);
+    
+    private IList<string> _digits = [];
+    internal IList<string> Digits
+    {
+        get => _digits;
+        set => SetAndRaise(DigitsProperty, ref _digits, value);
+    }
+    
+    public static readonly RoutedEvent<VerificationCodeCompleteEventArgs> CompleteEvent =
+        RoutedEvent.Register<VerificationCode, VerificationCodeCompleteEventArgs>(
+            nameof(Complete), RoutingStrategies.Bubble);
+    
+    public event EventHandler<VerificationCodeCompleteEventArgs> Complete
+    {
+        add => AddHandler(CompleteEvent, value);
+        remove => RemoveHandler(CompleteEvent, value);
+    }
+
+    static VerificationCode()
+    {
+        CountProperty.Changed.AddClassHandler<VerificationCode, int>((code, args) => code.OnCountOfDigitChanged(args));
+        FocusableProperty.OverrideDefaultValue<VerificationCode>(true);
+    }
+
+    public VerificationCode()
+    {
+        InputMethod.SetIsInputMethodEnabled(this, false);
+    }
+
+    private void OnCountOfDigitChanged(AvaloniaPropertyChangedEventArgs<int> args)
+    {
+        var newValue = args.NewValue.Value;
+        if (newValue > 0)
+        {
+            Digits = new List<string>(Enumerable.Repeat(string.Empty, newValue));
+        }
+    }
+
+    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
+    {
+        base.OnApplyTemplate(e);
+        _itemsControl = e.NameScope.Get<ItemsControl>(PART_ItemsControl);
+        PointerPressedEvent.AddHandler(OnControlPressed, RoutingStrategies.Tunnel, false, this);
+    }
+
+    private void OnControlPressed(object sender, PointerPressedEventArgs e)
+    {
+        if (e.Source is Control t)
+        {
+            /*
+            var item = t.FindLogicalAncestorOfType<VerificationCodeItem>();
+            if (item != null)
+            {
+                item.Focus();
+                _currentIndex = _itemsControl?.IndexFromContainer(item) ?? 0;
+            }
+            */
+            _currentIndex = MathUtilities.Clamp(_currentIndex, 0, Count - 1);
+            _itemsControl?.ContainerFromIndex(_currentIndex)?.Focus();
+        }
+        e.Handled = true;
+    }
+
+    protected override void OnTextInput(TextInputEventArgs e)
+    {
+        base.OnTextInput(e);
+        if (e.Text?.Length == 1 && _currentIndex < Count)
+        {
+            var presenter = _itemsControl?.ContainerFromIndex(_currentIndex) as VerificationCodeItem;
+            if (presenter is null) return;
+            char c = e.Text[0];
+            if (!Valid(c, this.Mode)) return;
+            presenter.Text = e.Text;
+            Digits[_currentIndex] = e.Text;
+            _currentIndex++;
+            _itemsControl?.ContainerFromIndex(_currentIndex)?.Focus();
+            if (_currentIndex == Count)
+            {
+                CompleteCommand?.Execute(Digits);
+                RaiseEvent(new VerificationCodeCompleteEventArgs(Digits, CompleteEvent));
+            }
+        }
+    }
+
+    private bool Valid(char c, VerificationCodeMode mode)
+    {
+        bool isDigit = char.IsDigit(c);
+        bool isLetter = char.IsLetter(c);
+        return mode switch
+        {
+            VerificationCodeMode.Digit => isDigit,
+            VerificationCodeMode.Letter => isLetter,
+            VerificationCodeMode.Digit | VerificationCodeMode.Letter => isDigit || isLetter,
+            _ => true
+        };
+    }
+
+    protected override void OnKeyDown(KeyEventArgs e)
+    {
+        base.OnKeyDown(e);
+        if (e.Key == Key.Back && _currentIndex >= 0)
+        {
+            _currentIndex = MathUtilities.Clamp(_currentIndex, 0, Count - 1);
+            var presenter = _itemsControl?.ContainerFromIndex(_currentIndex) as VerificationCodeItem;
+            if (presenter is null) return;
+            Digits[_currentIndex] = string.Empty;
+            presenter.Text = string.Empty;
+            if (_currentIndex == 0) return;
+            _currentIndex--;
+            _itemsControl?.ContainerFromIndex(_currentIndex)?.Focus();
+        }
+    }
+}

src/Ursa/Controls/VerificationCode/VerificationCodeCollection.cs

@@ -0,0 +1,24 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Presenters;
+using Avalonia.Data;
+using Avalonia.Input;
+using Avalonia.Media;
+
+namespace Ursa.Controls;
+
+public class VerificationCodeCollection: ItemsControl
+{
+    protected override bool NeedsContainerOverride(object? item, int index, out object? recycleKey)
+    {
+        return NeedsContainer<VerificationCodeItem>(item, out recycleKey);
+    }
+
+    protected override Control CreateContainerForItemOverride(object? item, int index, object? recycleKey)
+    {
+        return new VerificationCodeItem()
+        {
+            [InputMethod.IsInputMethodEnabledProperty] = false,
+        };
+    }
+}

src/Ursa/Controls/VerificationCode/VerificationCodeCompleteEventArgs.cs

@@ -0,0 +1,9 @@
+using Avalonia.Collections;
+using Avalonia.Interactivity;
+
+namespace Ursa.Controls;
+
+public class VerificationCodeCompleteEventArgs(IList<string> code, RoutedEvent? @event) : RoutedEventArgs(@event)
+{
+    public IList<string> Code { get; } = code;
+}

src/Ursa/Controls/VerificationCode/VerificationCodeItem.cs

@@ -0,0 +1,26 @@
+using Avalonia;
+using Avalonia.Controls.Primitives;
+using Avalonia.Data;
+
+namespace Ursa.Controls;
+
+public class VerificationCodeItem: TemplatedControl
+{
+    public static readonly StyledProperty<string> TextProperty = AvaloniaProperty.Register<VerificationCodeItem, string>(
+        nameof(Text), defaultBindingMode: BindingMode.TwoWay);
+
+    public string Text
+    {
+        get => GetValue(TextProperty);
+        set => SetValue(TextProperty, value);
+    }
+
+    public static readonly StyledProperty<char> PasswordCharProperty = AvaloniaProperty.Register<VerificationCodeItem, char>(
+        nameof(PasswordChar), defaultBindingMode: BindingMode.TwoWay);
+
+    public char PasswordChar
+    {
+        get => GetValue(PasswordCharProperty);
+        set => SetValue(PasswordCharProperty, value);
+    }
+}

src/Ursa/Controls/VerificationCode/VerificationCodeMode.cs

@@ -0,0 +1,8 @@
+namespace Ursa.Controls;
+
+[Flags]
+public enum VerificationCodeMode
+{
+    Letter = 1,
+    Digit = 2,
+}