Skip to content

Commit b776b39

Browse files
gvreddy04gvreddy04
authored
OTP Input (#21)
* OTP Input - New component
1 parent 65df5b1 commit b776b39

14 files changed

Lines changed: 360 additions & 23 deletions

File tree

‎BlazorExpress.Bulma.Demo.RCL/Constants/RouteConstants.cs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ public static class RouteConstants
3535
public const string Docs_Form_CurrencyInput_Documentation = Docs_Form_Prefix + "/currency-input";
3636
public const string Docs_Form_DateInput_Documentation = Docs_Form_Prefix + "/date-input";
3737
public const string Docs_Form_NumberInput_Documentation = Docs_Form_Prefix + "/number-input";
38+
public const string Docs_Form_OTPInput_Documentation = Docs_Form_Prefix + "/otp-input";
3839
public const string Docs_Form_PasswordInput_Documentation = Docs_Form_Prefix + "/password-input";
3940
public const string Docs_Form_RadioInput_Documentation = Docs_Form_Prefix + "/radio-input";
4041
public const string Docs_Form_RangeInput_Documentation = Docs_Form_Prefix + "/range-input";
@@ -112,6 +113,7 @@ public static class RouteConstants
112113
public const string Demos_Form_CurrencyInput_Documentation = Demos_Form_Prefix + "/currency-input";
113114
public const string Demos_Form_DateInput_Documentation = Demos_Form_Prefix + "/date-input";
114115
public const string Demos_Form_NumberInput_Documentation = Demos_Form_Prefix + "/number-input";
116+
public const string Demos_Form_OTPInput_Documentation = Demos_Form_Prefix + "/otp-input";
115117
public const string Demos_Form_PasswordInput_Documentation = Demos_Form_Prefix + "/password-input";
116118
public const string Demos_Form_RadioInput_Documentation = Demos_Form_Prefix + "/radio-input";
117119
public const string Demos_Form_RangeInput_Documentation = Demos_Form_Prefix + "/range-input";

‎BlazorExpress.Bulma.Demo.RCL/Layout/DemosMainLayout.razor.cs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ private HashSet<LinkGroup> GetLinkGroups()
8787
CssClass = "is-size-7 has-text-weight-bold has-text-primary",
8888
Links = [
8989
new Link { Href = RouteConstants.Demos_Form_DateInput_Documentation , Text = "Date Input" },
90+
new Link { Href = RouteConstants.Demos_Form_OTPInput_Documentation , Text = "OTP Input" },
9091
new Link { Href = RouteConstants.Demos_Form_TextInput_Documentation , Text = "Text Input" },
9192
]
9293
});

‎BlazorExpress.Bulma.Demo.RCL/Layout/DocsMainLayout.razor.cs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ private HashSet<LinkGroup> GetLinkGroups()
7777
CssClass = "is-size-7 has-text-weight-bold has-text-primary",
7878
Links = [
7979
new Link { Href = RouteConstants.Docs_Form_DateInput_Documentation , Text = "Date Input" },
80+
new Link { Href = RouteConstants.Docs_Form_OTPInput_Documentation , Text = "OTP Input" },
8081
new Link { Href = RouteConstants.Docs_Form_TextInput_Documentation , Text = "Text Input" },
8182
]
8283
});

‎BlazorExpress.Bulma.Demo.RCL/Layout/MainLayout.razor.cs‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,8 @@ private HashSet<LinkGroup> GetLinkGroups()
8686
Name = "FORM",
8787
CssClass = "is-size-7 has-text-weight-bold has-text-primary",
8888
Links = [
89+
new Link { Href = RouteConstants.Demos_Form_DateInput_Documentation , Text = "Date Input" },
90+
new Link { Href = RouteConstants.Demos_Form_OTPInput_Documentation , Text = "OTP Input" },
8991
new Link { Href = RouteConstants.Demos_Form_TextInput_Documentation , Text = "Text Input" },
9092
]
9193
});
@@ -120,18 +122,6 @@ private HashSet<LinkGroup> GetLinkGroups()
120122
return groups;
121123
}
122124

123-
private Task SetAutoTheme() => SetTheme("system");
124-
125-
private Task SetDarkTheme() => SetTheme("dark");
126-
127-
private Task SetLightTheme() => SetTheme("light");
128-
129-
private async Task SetTheme(string themeName) => await JS.InvokeVoidAsync("setTheme", themeName);
130-
131-
private void ToggleSidebarSection()
132-
{
133-
@menuRef.Toggle();
134-
}
135125

136126
#endregion
137127
}

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Form/OTPInput/OTPInputDocumentation.razor‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@attribute [Route(pageUrl)]
2+
@layout DemosMainLayout
3+
4+
<PageMetaTags PageUrl="@pageUrl" Title="@metaTitle" Description="@metaDescription" ImageUrl="@imageUrl" />
5+
6+
<PageHero Title="@pageTitle">
7+
<SubTitleTemplate>
8+
@((MarkupString)pageDescription)
9+
</SubTitleTemplate>
10+
</PageHero>
11+
12+
<DocsLink Href="@RouteConstants.Docs_Form_OTPInput_Documentation" />
13+
14+
<Section Class="p-0" Size="HeadingSize.H3" Name="Example" PageUrl="@pageUrl" Link="example">
15+
<Demo Type="typeof(OTPInput_Demo_01_How_it_works)" Tabs="true"/>
16+
</Section>
17+
18+
<Section Class="p-0" Size="HeadingSize.H3" Name="Length" PageUrl="@pageUrl" Link="length">
19+
<Block>
20+
To change the length of the OTP input, you can use the <code>Length</code> parameter. This allows you to specify how many characters the OTP input should accept.
21+
For example, if you want to create a 5-digit OTP input, you can set the <code>Length</code> parameter to 5.
22+
</Block>
23+
<Demo Type="typeof(OTPInput_Demo_02_Length)" Tabs="true" />
24+
</Section>
25+
26+
@code {
27+
private const string pageUrl = RouteConstants.Demos_Form_OTPInput_Documentation;
28+
private const string pageTitle = "OTPInput";
29+
private const string pageDescription = "The <code>OTPInput</code> component allows users to enter a one-time password (OTP) in a secure and user-friendly manner. The component is designed to enhance the user experience by providing a visually appealing and functional input field for OTP entry.";
30+
private const string metaTitle = "Blazor OTPInput Component";
31+
private const string metaDescription = "The OTPInput component allows users to enter a one-time password (OTP) in a secure and user-friendly manner. The component is designed to enhance the user experience by providing a visually appealing and functional input field for OTP entry.";
32+
private const string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; // TODO: update
33+
}

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Form/OTPInput/OTPInput_Demo_01_How_it_works.razor‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<OTPInput OnOTPChanged="HandleOtpChanged"
2+
OnOTPCompleted="HandleOtpCompleted" />
3+
4+
<div class="mt-3">Entered OTP: @enteredOTP</div>
5+
6+
@code {
7+
private string? enteredOTP = null;
8+
9+
private void HandleOtpChanged(string otp)
10+
{
11+
enteredOTP = otp;
12+
}
13+
14+
private void HandleOtpCompleted(string otp)
15+
{
16+
Console.WriteLine($"OTP Completed: {otp}");
17+
enteredOTP = otp;
18+
}
19+
}

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Form/OTPInput/OTPInput_Demo_02_Length.razor‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<OTPInput Length="5"
2+
OnOTPChanged="HandleOtpChanged"
3+
OnOTPCompleted="HandleOtpCompleted" />
4+
5+
<div class="mt-3">Entered OTP: @enteredOTP</div>
6+
7+
@code {
8+
private string? enteredOTP = null;
9+
10+
private void HandleOtpChanged(string otp)
11+
{
12+
enteredOTP = otp;
13+
}
14+
15+
private void HandleOtpCompleted(string otp)
16+
{
17+
Console.WriteLine($"OTP Completed: {otp}");
18+
enteredOTP = otp;
19+
}
20+
}

‎BlazorExpress.Bulma.Demo.RCL/Pages/Docs/Form/OTPInput/OTPInput_Doc_01_Documentation.razor‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
@attribute [Route(pageUrl)]
2+
@layout DocsMainLayout
3+
4+
<PageMetaTags PageUrl="@pageUrl" Title="@metaTitle" Description="@metaDescription" ImageUrl="@imageUrl" />
5+
6+
<PageHero Title="@pageTitle">
7+
<SubTitleTemplate>
8+
@((MarkupString)pageDescription)
9+
</SubTitleTemplate>
10+
</PageHero>
11+
12+
@* <img src="https://i.imgur.com/IX3bajc.png" class="img-fluid" alt="Blazor Bar Chart - API Documentation" /> *@
13+
14+
<DemoLink Href="@RouteConstants.Demos_Form_OTPInput_Documentation" />
15+
16+
<Section Class="p-0" Size="HeadingSize.H4" Name="Parameters" PageUrl="@pageUrl" Link="parameters">
17+
<DocxTable TItem="OTPInput" DocType="DocType.Parameters" />
18+
</Section>
19+
20+
<Section Class="p-0" Size="HeadingSize.H4" Name="Methods" PageUrl="@pageUrl" Link="methods">
21+
<DocxTable TItem="OTPInput" DocType="DocType.Methods" />
22+
</Section>
23+
24+
<Section Class="p-0" Size="HeadingSize.H4" Name="Events" PageUrl="@pageUrl" Link="events">
25+
<DocxTable TItem="OTPInput" DocType="DocType.Events" />
26+
</Section>
27+
28+
@code {
29+
private const string pageUrl = RouteConstants.Docs_Form_OTPInput_Documentation;
30+
private const string pageTitle = "OTPInput";
31+
private const string pageDescription = "This documentation provides a comprehensive reference for the <code>OTPInput</code> component, guiding you through its configuration options.";
32+
private const string metaTitle = "Blazor OTPInput Component";
33+
private const string metaDescription = "This documentation provides a comprehensive reference for the OTPInput component, guiding you through its configuration options.";
34+
private const string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; // TODO: update
35+
}

‎BlazorExpress.Bulma.Demo.RCL/Utils/PageLinkUtil.cs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,9 @@ public static HashSet<PageLink> GetDemosLinks()
9797
index += 1;
9898
links.Add(new PageLink { Id = index, IconName = BootstrapIconName.None, Href = RouteConstants.Demos_Form_NumberInput_Documentation, Text = "Number Input", Categories = new() { PageLinkCategory.All, PageLinkCategory.Form }, Status = PageLinkStatus.None, IsActive = false });
9999

100+
index += 1;
101+
links.Add(new PageLink { Id = index, IconName = BootstrapIconName.Asterisk, Href = RouteConstants.Demos_Form_OTPInput_Documentation, Text = "OTP Input", Categories = new() { PageLinkCategory.All, PageLinkCategory.Form }, Status = PageLinkStatus.None, IsActive = true });
102+
100103
index += 1;
101104
links.Add(new PageLink { Id = index, IconName = BootstrapIconName.ThreeDots, Href = RouteConstants.Demos_Pagination_Documentation, Text = "Pagination", Categories = new() { PageLinkCategory.All, PageLinkCategory.Components }, Status = PageLinkStatus.None, IsActive = true });
102105

‎BlazorExpress.Bulma/Components/Form/OTPInput/OTPInput.razor‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
@namespace BlazorExpress.Bulma
2+
@inherits BulmaComponentBase
3+
4+
<div @ref="@Element" id="@Id" class="@ContainerClassNames" style="@ContainerStyleNames">
5+
@for (int i = 0; i < Length; i++)
6+
{
7+
var index = i;
8+
var inputId = GetInputId(index);
9+
10+
<input type="text"
11+
id="@inputId"
12+
class="@ClassNames"
13+
style="@StyleNames"
14+
maxlength="1"
15+
inputmode="numeric"
16+
value="@otpValues[index]"
17+
@oninput="(e) => OnInput(e, index)"
18+
@onkeyup="(e) => OnKeyUp(e, index)" />
19+
}
20+
</div>

0 commit comments

Comments
 (0)