PinCodes.Authorization.Maui 1.0.1

Additional Details

The new version offers you more options to customize the code page

There is a newer version of this package available.
See the version list below for details.
dotnet add package PinCodes.Authorization.Maui --version 1.0.1                
NuGet\Install-Package PinCodes.Authorization.Maui -Version 1.0.1                
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="PinCodes.Authorization.Maui" Version="1.0.1" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add PinCodes.Authorization.Maui --version 1.0.1                
#r "nuget: PinCodes.Authorization.Maui, 1.0.1"                
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install PinCodes.Authorization.Maui as a Cake Addin
#addin nuget:?package=PinCodes.Authorization.Maui&version=1.0.1

// Install PinCodes.Authorization.Maui as a Cake Tool
#tool nuget:?package=PinCodes.Authorization.Maui&version=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.

PinCode Page Screenshot

Compatibility

Platform Version Availability
iOS 14.0 and higher
Android 5.0 and higher
Windows 10.0.17763.0 and higher
macOS 10.15 and higher

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

Code Viewers Availables

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

Keyboard Availables

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.

Product Compatible and additional computed target framework versions.
.NET net7.0 is compatible.  net7.0-android was computed.  net7.0-android33.0 is compatible.  net7.0-ios was computed.  net7.0-ios16.1 is compatible.  net7.0-maccatalyst was computed.  net7.0-maccatalyst16.1 is compatible.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net7.0-windows10.0.19041 is compatible.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.
  • net7.0

    • No dependencies.
  • net7.0-android33.0

    • No dependencies.
  • net7.0-ios16.1

    • No dependencies.
  • net7.0-maccatalyst16.1

    • No dependencies.
  • net7.0-windows10.0.19041

    • No dependencies.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.