PinCodes.Authorization.Maui 1.0.1

Creating a Customizable Pin Code Page in .NET MAUI

This library provides developers with an easy way to add a customizable PIN Code page to their .NET MAUI applications. With just a few lines of code, you can create a secure page that requires a PIN Code to access.

Compatibility

Features

• Keyboards: offers a variety of keyboard options to choose from.
• Code viewer: includes several different options for customization.
• Headline: you have the flexibility to fully customize the headline phrases.
• Color customization: giving you complete control over the look and feel of your keyboard and code viewer.
• Customize the length of your code: adjust the amount of digits (default is 4).
• and others.

Getting Started

Installation

To use this package, simply install the NuGet package PinCodes.Authorization.Maui in your .NET MAUI project. In Visual Studio, you can do this by right-clicking on your project and selecting "Manage NuGet Packages". From there, search for "PinCodes.Authorization.Maui" and install the latest version.

dotnet add package PinCodes.Authorization.Maui

Once the package is installed, you can add a PIN Code Page to your application.

Usage

Create a new ContentPage in your .NET MAUI project and add a reference to the CodePage namespace in your file:

xmlns:codePage="clr-namespace:MauiCodes.Views.Pages;assembly=PinCodes.Authorization.Maui"

Now, instead of having a ContentPage in your XAML file, you need to change it to:

<?xml version="1.0" encoding="utf-8" ?>
<codePage:CodePage
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:codePage="clr-namespace:MauiCodes.Views.Pages;assembly=PinCodes.Authorization.Maui"
    x:Class="MAUI.App.Views.MyPinCodePage">
    
</codePage:CodePage>

And the code-behind to:

public partial class MyPinCodePage : MauiCodes.Views.Pages.CodePage
{
   public MyPinCodePage()
   {
      InitializeComponent();
   }
}

Command callback

REMEMBER, be sure to provide a command callback. It will be automatically triggered once the user has provided the entire code. So your XAML file will look like:

<codePage:CodePage
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:codePage="clr-namespace:MauiCodes.Views.Pages;assembly=PinCodes.Authorization.Maui"
    x:Class="MAUI.App.Views.MyPinCodePage"
    CallbackCodeFinished="{Binding UserEndTheCodeCommand}">
    
</codePage:CodePage>

And your ViewModel will look like:

[RelayCommand]
public void UserEndTheCode(string code)
{
    //do something with the code response
}

The equivalent C# code is:

var pinCodePage = new CodePage();

pinCodePage.CallbackCodeFinished = new Command((code) =>
{
    //do something with the code response
});

await Navigation.PushAsync(pinCodePage);

Customizing the Appearance

This package provides several ways to customize the appearance of the PIN Code Page to fit the look and feel of your application. You can customize the colors and the page's elements.

Headline & Image

You have the option to customize the headline, subheadline, and image on your page. However, I understand that not all developers may want to include these properties. That's why these properties can be null or empty. Of course, I encourage you to experiment with different combinations of these properties to create a truly unique and engaging experience for your users.

<?xml version="1.0" encoding="utf-8" ?>
<codePage:CodePage
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:codePage="clr-namespace:MauiCodes.Views.Pages;assembly=PinCodes.Authorization.Maui"
    x:Class="MAUI.App.Views.MyPinCodePage"
    CallbackCodeFinished="{Binding UserEndTheCodeCommand}"
    Headline="YOUR HEADLINE HERE"
    SubHeadline="YOUR SUBHEADLINE HERE">
    
    <codePage:CodePage.Illustration>
        <Image Source="illustration_dog.png" HeightRequest="80"/>
    </codePage:CodePage.Illustration>
    
</codePage:CodePage>

The equivalent C# code is:

var pinCodePage = new CodePage();

pinCodePage.Headline = "YOUR HEADLINE HERE";

pinCodePage.SubHeadline = "YOUR SUBHEADLINE HERE";

pinCodePage.Illustration = new Image { Source = ImageSource.FromFile(path), HeightRequest = 80 };

Code Viewer

You can choose to hide or show the PIN Code, as well as select from a variety of shapes, including circles or squares. It is important for you to make a decision to hide or show the code in order to add the correct namespace on XAML.

If you want to hide it, add:

xmlns:codeViewer="clr-namespace:MauiCodes.Views.Components.CodeViewers.Hide;assembly=PinCodes.Authorization.Maui"

but if you want to show the PIN Code, use:

xmlns:codeViewer="clr-namespace:MauiCodes.Views.Components.CodeViewers.Show;assembly=PinCodes.Authorization.Maui"

Whether you prefer a minimalist or more elaborate design, my library has you covered.

Here's an example showing the PIN Code with a circle shape:

<?xml version="1.0" encoding="utf-8" ?>
<codePage:CodePage
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:codePage="clr-namespace:MauiCodes.Views.Pages;assembly=PinCodes.Authorization.Maui"
    xmlns:codeViewer="clr-namespace:MauiCodes.Views.Components.CodeViewers.Show;assembly=PinCodes.Authorization.Maui"
    x:Class="MAUI.App.Views.MyPinCodePage"
    CallbackCodeFinished="{Binding UserEndTheCodeCommand}">
    
    <codePage:CodePage.CodeViewer>
        <codeViewer:CircleShowingCodeViewer />
    </codePage:CodePage.CodeViewer>
    
    
    
</codePage:CodePage>

The equivalent C# code is:

var pinCodePage = new CodePage();

pinCodePage.CodeViewer = new CircleHidingCodeViewer();

Customizable properties

• CodeLength: allows you to set the desired length (amount of digits) of your PIN Code.
• Color: allows you to set the color of the PIN Code shape.
• Size: allows you to set the size of the PIN Code shape.

If you choose to show the PIN Code, you can use the following properties too:

• FontSize: allows you to set the font size for the numbers.
• TextColor: allows you to set the text color for the numbers.
• FontFamily: allows you to set the font family for the numbers.

<codePage:CodePage.CodeViewer>
    <codeViewer:CircleShowingCodeViewer
        Size="40"
        TextColor="{AppThemeBinding Light=White, Dark=Black}"
        Color="{AppThemeBinding Light=Black,Dark=White}"
        FontSize="25"
        FontFamily="RalewayBlack"
        CodeLength="6"
        Margin="0,0,0,40"/>
</codePage:CodePage.CodeViewer>

Keyboard

You can select from a keyboard a circle shape, a keyboard without shape, or a square shape, depending on the look and feel you want to achieve. Don't forget to add the namespace on your XAML file:

xmlns:keyboard="clr-namespace:MauiCodes.Views.Components.Keyboards;assembly=PinCodes.Authorization.Maui"

Here's an example:

<?xml version="1.0" encoding="utf-8" ?>
<codePage:CodePage
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:codePage="clr-namespace:MauiCodes.Views.Pages;assembly=PinCodes.Authorization.Maui"
    xmlns:keyboard="clr-namespace:MauiCodes.Views.Components.Keyboards;assembly=PinCodes.Authorization.Maui"
    x:Class="MAUI.App.Views.MyPinCodePage"
    CallbackCodeFinished="{Binding UserEndTheCodeCommand}">
    
    <codePage:CodePage.KeyboardViewer>
        <keyboard:KeyboardSquare />
    </codePage:CodePage.KeyboardViewer>
    
</codePage:CodePage>

The equivalent C# code is:

var pinCodePage = new CodePage();

pinCodePage.KeyboardViewer = new KeyboardSquare();

Customizable properties

• Size: allows you to set the size of the PIN Code shape.
• FontSize: allows you to set the font size for the numbers.
• CancelTextFontSize: allows you to set the font size for the text "Cancel".
• TextColor: allows you to set the text color for the numbers.
• CancelTextColor: allows you to set the text color for the text "Cancel".
• CancelText: allows you to set the string to show if the user wants to cancel the operation. This is useful for translation, for example.
• BackspaceColor: allows you to set the color of backspace button.

If you choose the keyboard with a shape (circle or square), you can use the following property too:

• ShapeColor: allows you to set the color for the shape.

<codePage:CodePage.KeyboardViewer>
    <keyboard:KeyboardCircle
        ShapeColor="{AppThemeBinding Light=Black, Dark=White}"
        CancelTextColor="{AppThemeBinding Light=Black, Dark=White}"
        FontSize="25"
        Size="70"
        CancelTextFontSize="18"
        CancelText="CANCEL"
        TextColor="{AppThemeBinding Light=Black, Dark=White}"/>
</codePage:CodePage.CodeViewer>

Full code

<?xml version="1.0" encoding="utf-8" ?>
<codePage:CodePage
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:codePage="clr-namespace:MauiCodes.Views.Pages;assembly=PinCodes.Authorization.Maui"
    xmlns:codeViewer="clr-namespace:MauiCodes.Views.Components.CodeViewers.Show;assembly=PinCodes.Authorization.Maui"
    xmlns:keyboard="clr-namespace:MauiCodes.Views.Components.Keyboards;assembly=PinCodes.Authorization.Maui"
    x:Class="MAUI.App.Views.MyPinCodePage"
    CallbackCodeFinished="{Binding UserEndTheCodeCommand}"
    Headline="YOUR HEADLINE HERE"
    SubHeadline="YOUR SUBHEADLINE HERE">
    
    <codePage:CodePage.Illustration>
        <Image Source="illustration_dog.png" HeightRequest="80"/>
    </codePage:CodePage.Illustration>
    
    <codePage:CodePage.CodeViewer>
        <codeViewer:CircleShowingCodeViewer
            Size="40"
            TextColor="{AppThemeBinding Light=White, Dark=Black}"
            Color="{AppThemeBinding Light=Black,Dark=White}"
            FontSize="25"
            FontFamily="RalewayBlack"
            CodeLength="6"
            Margin="0,0,0,40"/>
    </codePage:CodePage.CodeViewer>
  
  <codePage:CodePage.KeyboardViewer>
      <keyboard:KeyboardCircle
          ShapeColor="{AppThemeBinding Light=Black, Dark=White}"
          CancelTextColor="{AppThemeBinding Light=Black, Dark=White}"
          FontSize="25"
          Size="70"
          CancelTextFontSize="18"
          CancelText="CANCEL"
          TextColor="{AppThemeBinding Light=Black, Dark=White}"/>
  </codePage:CodePage.CodeViewer>
    
</codePage:CodePage>

License

MauiCodes is released under the MIT License. See LICENSE.txt for details.