Skip to content

Commit ff22988

Browse files
PaulAndersonSPaulAndersonS
authored
Merge pull request #108 from syncfusion/OtpInputControl
Implement OtpInput control in Maui toolkit
2 parents 7ceafea + 3df8be9 commit ff22988

27 files changed

+4933
-11
lines changed

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,15 @@ The Syncfusion® Toolkit is built with community collaboration in mind, aiming t
3838
| Calendars | Calendar | The calendar supports month, year, decade, and century views, multiple selection modes, and customizable appearance. |
3939
| Editors | Numeric Entry | Advanced control for numeric input with support for various formats and validation. |
4040
| | Numeric Up Down | Adjust values with up/down buttons and culture-specific formatting. |
41+
| | OTP Input | Secure input field for one-time passwords with customizable length, masking options, and validation. |
4142
| Navigation | Navigation Drawer | Slide-in menu for navigation, positionable on any side of the app with customizable animations. |
4243
| | Tab View | Organize app content with customizable tabs, enabling easy navigation across sections. |
4344
| | Bottom Sheet | Slides up from the bottom of the screen to display additional content or functionality. |
4445
| Layout | Carousel | Smooth, touch-enabled sliding galleries for showcasing images or featured content. |
4546
| | Text Input Layout | Enhances input fields with floating labels and validation, improving user interaction. |
4647
| | Expander | Allows users to expand or collapse content dynamically, improving space management and user experience. |
4748
| | Accordion | Organizes content into multiple expandable sections, allowing only one section to be open at a time for better navigation and space management.|
49+
| | Popup | Allows users to display an alert message with customizable buttons or load any desired content inside a popup view.|
4850
| | Cards | Create dismissible cards or a stack of cards, and customize their background, borders, and corners. |
4951
| Buttons | Chips | Interactive tags for filtering, labeling, or visual options, perfect for e-commerce or task management. |
5052
| | Segmented Control | Quickly switch between views or categories, ideal for apps with multiple layout options. |

‎maui/samples/Gallery/ControlList.xml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,9 @@
1818
<Assembly Name="BottomSheet" />
1919
<Assembly Name="NumericEntry" />
2020
<Assembly Name="NumericUpDown" />
21-
<Assembly Name="Expander" />
2221
<Assembly Name="Calendar" />
22+
<Assembly Name="OtpInput" />
23+
<Assembly Name="Expander" />
2324
<Assembly Name="Accordion" />
2425
<Assembly Name="Cards" />
2526
<Assembly Name="Popup"/>

‎maui/samples/Gallery/Resources/Images/otpinput.png

1.81 KB
Loading

‎maui/samples/Gallery/Resources/Images/signup.png

92.8 KB
Loading

‎maui/samples/Gallery/Resources/Styles/SampleBrowserStyles.xaml

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
<Color x:Key="TileHeaderBackgroundDark">#2A2831</Color>
4343
<Color x:Key="TextColourAlt1Dark">#CAC4D0</Color>
4444
<Color x:Key="TileTextColourAlt1Dark">#CAC4D0</Color>
45-
<Color x:Key="TileTextColourAlt1">#CAC4D0</Color>
45+
<Color x:Key="TileTextColourAlt1">#CAC4D0</Color>
4646
<Color x:Key="IconColourDark">#CAC4D0</Color>
4747
<Color x:Key="PlaceholderTextColourDark">#CAC4D0</Color>
4848
<Color x:Key="PrimaryBackgroundDark">#D0BCFF</Color>
@@ -114,15 +114,15 @@
114114
<Setter Property="FontAutoScalingEnabled" Value="False"/>
115115
<Setter Property="LineBreakMode" Value="NoWrap" />
116116
</Style>
117-
118-
<Style x:Key="hyperLink" TargetType="Label">
119-
<Setter Property="FontSize" Value="10"></Setter>
120-
<Setter Property="FontAttributes" Value="Italic"></Setter>
121-
<Setter Property="VerticalOptions" Value="Center"></Setter>
122-
<Setter Property="TextColor" Value="{AppThemeBinding Default={StaticResource Blue100Accent}}"></Setter>
123-
</Style>
124117

125-
<Style TargetType="Button">
118+
<Style x:Key="hyperLink" TargetType="Label">
119+
<Setter Property="FontSize" Value="10"></Setter>
120+
<Setter Property="FontAttributes" Value="Italic"></Setter>
121+
<Setter Property="VerticalOptions" Value="Center"></Setter>
122+
<Setter Property="TextColor" Value="{AppThemeBinding Default={StaticResource Blue100Accent}}"></Setter>
123+
</Style>
124+
125+
<Style TargetType="Button">
126126
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource PrimaryForegroundLight}, Dark={StaticResource PrimaryForegroundDark}}" />
127127
<Setter Property="FontFamily" Value="Roboto-Regular" />
128128
<Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource PrimaryBackgroundLight}, Dark={StaticResource PrimaryBackgroundDark}}" />

‎maui/samples/Gallery/SampleList/OtpInputSamplesList.xml

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<SyncfusionControls>
3+
<ControlCategory Name="Editors">
4+
<Control Title="Otp Input" ControlName="OtpInput" Image="otpinput.png" Description="Allows users to enter one-time passwords (OTP) securely and efficiently." StatusTag="New">
5+
<Sample Title="Sign Up" SampleName="SignUpPage" StatusTag="New" SearchTags="otpinput,entry,textbox,signup"/>
6+
<Sample Title="Customization" SampleName="Customization" StatusTag="New" SearchTags="otpinput,entry,textbox" Description="This sample demonstrates how to customize OTP" />
7+
8+
</Control>
9+
</ControlCategory>
10+
11+
</SyncfusionControls>

‎maui/samples/Gallery/Samples/OtpInput/Customization/View/Customization.xaml

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<localcore:SampleView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
x:Class="Syncfusion.Maui.ControlsGallery.OtpInput.OtpInput.Customization"
5+
xmlns:otpInput="clr-namespace:Syncfusion.Maui.Toolkit.OtpInput;assembly=Syncfusion.Maui.Toolkit"
6+
xmlns:local="clr-namespace:Syncfusion.Maui.ControlsGallery.OtpInput.OtpInput"
7+
xmlns:customView="clr-namespace:Syncfusion.Maui.ControlsGallery.CustomView"
8+
xmlns:textInput="clr-namespace:Syncfusion.Maui.Toolkit.TextInputLayout;assembly=Syncfusion.Maui.Toolkit"
9+
xmlns:localcore="clr-namespace:Syncfusion.Maui.ControlsGallery;assembly=Syncfusion.Maui.ControlsGallery"
10+
BackgroundColor="{AppThemeBinding Light={StaticResource BackgroundLight}, Dark={StaticResource BackgroundDark}}">
11+
<localcore:SampleView.BindingContext>
12+
<local:CustomizationViewModel/>
13+
</localcore:SampleView.BindingContext>
14+
15+
<localcore:SampleView.Content>
16+
<VerticalStackLayout Spacing="20" VerticalOptions="Center" HorizontalOptions="Center">
17+
<Grid RowDefinitions="*,*" >
18+
<Label Text="Default (Number) OTP Input" FontAttributes="Bold" FontSize="16" Margin="{OnPlatform Default='14,0,0,0',Android='11,0,0,0',iOS='11,0,0,0'}"/>
19+
<otpInput:SfOtpInput Grid.Row="1"
20+
Value="1234"
21+
Type="Number"
22+
Length="{Binding Length}"
23+
StylingMode="{Binding StylingMode}"
24+
Separator="{Binding Separator}"
25+
InputState="{Binding InputState}"/>
26+
</Grid>
27+
<Grid RowDefinitions="*,*" >
28+
<Label Text="Text OTP Input" FontAttributes="Bold" FontSize="16" Margin="{OnPlatform Default='14,0,0,0',Android='11,0,0,0',iOS='11,0,0,0'}"/>
29+
<otpInput:SfOtpInput Grid.Row="1"
30+
Type="Text"
31+
Value="e3c7"
32+
Length="{Binding Length}"
33+
StylingMode="{Binding StylingMode}"
34+
Separator="{Binding Separator}"
35+
InputState="{Binding InputState}"/>
36+
</Grid>
37+
<Grid RowDefinitions="*,*" >
38+
<Label Text="Password OTP Input" FontAttributes="Bold" FontSize="16" Margin="{OnPlatform Default='14,0,0,0',Android='11,0,0,0',iOS='11,0,0,0'}"/>
39+
<otpInput:SfOtpInput Grid.Row="1"
40+
Value="1234"
41+
Type="Password"
42+
Length="{Binding Length}"
43+
StylingMode="{Binding StylingMode}"
44+
Separator="{Binding Separator}"
45+
InputState="{Binding InputState}"/>
46+
</Grid>
47+
48+
</VerticalStackLayout>
49+
</localcore:SampleView.Content>
50+
51+
<localcore:SampleView.OptionView>
52+
<ScrollView VerticalScrollBarVisibility="Never">
53+
<VerticalStackLayout Spacing="{OnPlatform Default=10,MacCatalyst=20,iOS=20}">
54+
<Grid ColumnDefinitions=".5*,.5*">
55+
<Label Text="Length" Margin="0,-12,0,0" VerticalTextAlignment="Center" />
56+
<textInput:SfTextInputLayout Grid.Column="2" ContainerType="Outlined" OutlineCornerRadius="5" ShowHelperText="False" InputViewPadding="10,0" HeightRequest="60" Stroke="{AppThemeBinding Light={StaticResource BorderLight}, Dark={StaticResource BorderDark}}">
57+
<customView:SfEntry Keyboard="Numeric" VerticalOptions="Center" Text="{Binding Length}" TextColor="{AppThemeBinding Light={StaticResource TextColourLight}, Dark={StaticResource TextColourDark}}" Placeholder="Enter length" PlaceholderColor="{AppThemeBinding Light={StaticResource PlaceholderTextColourLight}, Dark={StaticResource PlaceholderTextColourDark}}"/>
58+
</textInput:SfTextInputLayout>
59+
</Grid>
60+
<Grid Margin="0,-18,0,0" ColumnDefinitions=".5*,.5*">
61+
<Label Text="Separator" Margin="0,-12,0,0" VerticalTextAlignment="Center" />
62+
<textInput:SfTextInputLayout Grid.Column="2" ContainerType="Outlined" OutlineCornerRadius="5" ShowHelperText="False" InputViewPadding="10,0" HeightRequest="60" Stroke="{AppThemeBinding Light={StaticResource BorderLight}, Dark={StaticResource BorderDark}}">
63+
<customView:SfEntry Keyboard="Text" VerticalOptions="Center" Text="{Binding Separator}" TextColor="{AppThemeBinding Light={StaticResource TextColourLight}, Dark={StaticResource TextColourDark}}" Placeholder="Enter separator" PlaceholderColor="{AppThemeBinding Light={StaticResource PlaceholderTextColourLight}, Dark={StaticResource PlaceholderTextColourDark}}"/>
64+
</textInput:SfTextInputLayout>
65+
</Grid>
66+
<Grid Margin="0,-18,0,0" ColumnDefinitions=".5*,.5*">
67+
<Label Text="Styling Mode" VerticalTextAlignment="Center"/>
68+
<Picker Grid.Column="1" ItemsSource="{Binding StylingModeList}" SelectedIndex="{Binding StylingModeIndex}" />
69+
</Grid>
70+
<Grid ColumnDefinitions=".5*,.5*">
71+
<Label Text="InputState" VerticalTextAlignment="Center"/>
72+
<Picker Grid.Column="1" ItemsSource="{Binding InputStateList}" SelectedIndex="{Binding InputStateIndex}" />
73+
</Grid>
74+
75+
</VerticalStackLayout>
76+
</ScrollView>
77+
</localcore:SampleView.OptionView>
78+
79+
</localcore:SampleView>

‎maui/samples/Gallery/Samples/OtpInput/Customization/View/Customization.xaml.cs

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
namespace Syncfusion.Maui.ControlsGallery.OtpInput.OtpInput;
2+
3+
public partial class Customization : SampleView
4+
{
5+
public Customization()
6+
{
7+
InitializeComponent();
8+
}
9+
}

‎maui/samples/Gallery/Samples/OtpInput/Customization/ViewModel/CustomizationViewModel.cs

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
using System.ComponentModel;
2+
using Syncfusion.Maui.Toolkit.OtpInput;
3+
4+
namespace Syncfusion.Maui.ControlsGallery.OtpInput.OtpInput
5+
{
6+
public class CustomizationViewModel : INotifyPropertyChanged
7+
{
8+
public string[] StylingModeList { get; set; } = { "Filled", "Outlined", "Underlined" };
9+
10+
public string[] InputStateList { get; set; } = { "Default", "Success", "Error", "Warning" };
11+
12+
13+
#region Fields
14+
15+
double _length = 4;
16+
OtpInputStyle _stylingMode = OtpInputStyle.Underlined;
17+
string _separator = string.Empty;
18+
OtpInputState _inputState = OtpInputState.Default;
19+
int _stylingModeIndex = 1;
20+
int _inputStateIndex = 0;
21+
22+
#endregion
23+
24+
#region Property
25+
26+
public double Length
27+
{
28+
get { return _length; }
29+
set { _length = value; OnPropertyChanged(nameof(Length)); }
30+
}
31+
32+
33+
public OtpInputStyle StylingMode
34+
{
35+
get { return _stylingMode; }
36+
set { _stylingMode = value; OnPropertyChanged(nameof(StylingMode)); }
37+
}
38+
39+
public OtpInputState InputState
40+
{
41+
get { return _inputState; }
42+
set { _inputState = value; OnPropertyChanged(nameof(InputState)); }
43+
}
44+
45+
public string Separator
46+
{
47+
get { return _separator; }
48+
set { _separator = value; OnPropertyChanged(nameof(Separator)); }
49+
}
50+
51+
public int StylingModeIndex
52+
{
53+
get { return _stylingModeIndex; }
54+
set
55+
{
56+
_stylingModeIndex = value;
57+
if (value >= 0)
58+
{
59+
StylingMode = Enum.Parse<OtpInputStyle>(StylingModeList[value]);
60+
}
61+
}
62+
}
63+
64+
public int InputStateIndex
65+
{
66+
get { return _inputStateIndex; }
67+
set
68+
{
69+
_inputStateIndex = value;
70+
if (value >= 0)
71+
{
72+
InputState = Enum.Parse<OtpInputState>(InputStateList[value]);
73+
}
74+
}
75+
}
76+
77+
#endregion
78+
79+
#region OnPropertyChanged
80+
81+
public event PropertyChangedEventHandler? PropertyChanged;
82+
83+
protected void OnPropertyChanged(string propertyName)
84+
{
85+
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
86+
}
87+
88+
#endregion
89+
}
90+
}

0 commit comments

Comments
 (0)