validate password from pinview by lassana/XamarinFormsPinView

I want example validation password from pinview by lassana/XamarinFormsPinView.

Best Answer

  • ColeXColeX Xamurai
    Accepted Answer

    Initialize iOS and Android renderers:

     // iOS:
     public override bool FinishedLaunching(UIApplication app, NSDictionary options)
     {
         ...
         global::Xamarin.Forms.Forms.Init();
         PinItemViewRenderer.Init();
     }
    
     // Android:
     protected override void OnCreate(Bundle bundle)
     {
         ...
         global::Xamarin.Forms.Forms.Init(this, bundle);
         PinItemViewRenderer.Init();
     }
    

    Add PinView to your page:

     ...
     xmlns:local="clr-namespace:FormsPinView.Core;assembly=FormsPinView.Core"
     ...
         <local:PinView
             HorizontalOptions="CenterAndExpand"
             VerticalOptions="CenterAndExpand"
             TargetPinLength="4"
             Validator="{Binding ValidatorFunc}"
             Success="Handle_Success" />
    

    Code hehind

    public class ModelBase : INotifyPropertyChanged
        {
            public event PropertyChangedEventHandler PropertyChanged;
    
            protected void RaisePropertyChanged([CallerMemberName] string key = null)
            {
                var propertyChanged = PropertyChanged;
                if (propertyChanged != null)
                {
                    propertyChanged(this, new PropertyChangedEventArgs(key));
                }
            }
    
            protected void RaisePropertiesChanged(params string[] keys)
            {
                if (keys != null)
                {
                    foreach (string key in keys)
                    {
                        var propertyChanged = PropertyChanged;
                        if (propertyChanged != null)
                        {
                            propertyChanged(this, new PropertyChangedEventArgs(key));
                        }
                    }
                }
            }
        }
    
        public class ViewModelBase : ModelBase { }
    
        public class PinAuthViewModel : ViewModelBase
        {
            public Func<IList<char>, bool> ValidatorFunc { get; }
    
            private int _pinLength;
            public int PinLength
            {
                get => _pinLength;
                private set
                {
                    _pinLength = value;
                    RaisePropertyChanged(nameof(PinLength));
                }
            }
    
            public ICommand SwitchPinLengthCommand { get; }
    
            public ICommand ErrorCommand { get; }
    
            public ICommand SuccessCommand { get; }
    
            public PinAuthViewModel()
            {
                ValidatorFunc = (arg) =>
                {
                    for (int i = 0; i < arg.Count; ++i)
                    {
                        if (arg[i] != ('1' + i))
                        {
                            return false;
                        }
                    }
                    return true;  //password is 1234
                };
    
                PinLength = 4;
    
                SwitchPinLengthCommand = new Command(() =>
                {
                    PinLength = PinLength == 4 ? 6 : 4;
                });
    
                ErrorCommand = new Command(() =>
                {
                    Debug.WriteLine("Entered PIN is wrong");
                });
    
                SuccessCommand = new Command(() =>
                {
                    Debug.WriteLine("Entered PIN is correct");
                });
            }
        }
    
        [XamlCompilation(XamlCompilationOptions.Compile)]
        public partial class Page2 : ContentPage
        {
    
            public Page2()
            {
                InitializeComponent();
                var viewModel = new PinAuthViewModel();
                BindingContext = viewModel;
            }
    
            private void PinView_Success(object sender, EventArgs e)
            {
                this.DisplayAlert("", "success", "OK");
            }
        }
    

    Test on my side

    Refer https://github.com/lassana/XamarinFormsPinView#usage

Answers

  • ColeXColeX Member, Xamarin Team Xamurai
    Accepted Answer

    Initialize iOS and Android renderers:

     // iOS:
     public override bool FinishedLaunching(UIApplication app, NSDictionary options)
     {
         ...
         global::Xamarin.Forms.Forms.Init();
         PinItemViewRenderer.Init();
     }
    
     // Android:
     protected override void OnCreate(Bundle bundle)
     {
         ...
         global::Xamarin.Forms.Forms.Init(this, bundle);
         PinItemViewRenderer.Init();
     }
    

    Add PinView to your page:

     ...
     xmlns:local="clr-namespace:FormsPinView.Core;assembly=FormsPinView.Core"
     ...
         <local:PinView
             HorizontalOptions="CenterAndExpand"
             VerticalOptions="CenterAndExpand"
             TargetPinLength="4"
             Validator="{Binding ValidatorFunc}"
             Success="Handle_Success" />
    

    Code hehind

    public class ModelBase : INotifyPropertyChanged
        {
            public event PropertyChangedEventHandler PropertyChanged;
    
            protected void RaisePropertyChanged([CallerMemberName] string key = null)
            {
                var propertyChanged = PropertyChanged;
                if (propertyChanged != null)
                {
                    propertyChanged(this, new PropertyChangedEventArgs(key));
                }
            }
    
            protected void RaisePropertiesChanged(params string[] keys)
            {
                if (keys != null)
                {
                    foreach (string key in keys)
                    {
                        var propertyChanged = PropertyChanged;
                        if (propertyChanged != null)
                        {
                            propertyChanged(this, new PropertyChangedEventArgs(key));
                        }
                    }
                }
            }
        }
    
        public class ViewModelBase : ModelBase { }
    
        public class PinAuthViewModel : ViewModelBase
        {
            public Func<IList<char>, bool> ValidatorFunc { get; }
    
            private int _pinLength;
            public int PinLength
            {
                get => _pinLength;
                private set
                {
                    _pinLength = value;
                    RaisePropertyChanged(nameof(PinLength));
                }
            }
    
            public ICommand SwitchPinLengthCommand { get; }
    
            public ICommand ErrorCommand { get; }
    
            public ICommand SuccessCommand { get; }
    
            public PinAuthViewModel()
            {
                ValidatorFunc = (arg) =>
                {
                    for (int i = 0; i < arg.Count; ++i)
                    {
                        if (arg[i] != ('1' + i))
                        {
                            return false;
                        }
                    }
                    return true;  //password is 1234
                };
    
                PinLength = 4;
    
                SwitchPinLengthCommand = new Command(() =>
                {
                    PinLength = PinLength == 4 ? 6 : 4;
                });
    
                ErrorCommand = new Command(() =>
                {
                    Debug.WriteLine("Entered PIN is wrong");
                });
    
                SuccessCommand = new Command(() =>
                {
                    Debug.WriteLine("Entered PIN is correct");
                });
            }
        }
    
        [XamlCompilation(XamlCompilationOptions.Compile)]
        public partial class Page2 : ContentPage
        {
    
            public Page2()
            {
                InitializeComponent();
                var viewModel = new PinAuthViewModel();
                BindingContext = viewModel;
            }
    
            private void PinView_Success(object sender, EventArgs e)
            {
                this.DisplayAlert("", "success", "OK");
            }
        }
    

    Test on my side

    Refer https://github.com/lassana/XamarinFormsPinView#usage

Sign In or Register to comment.