Skip to content

Commit d7fc0a8

Browse files
gvreddy04gvreddy04
authored
PasswordInput component updates (#983)
1 parent e167097 commit d7fc0a8

12 files changed

+316
-105
lines changed

‎BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ internal override IEnumerable<NavItem> GetNavItems()
2222
new (){ Id = "401", Text = "Currency Input", Href = RouteConstants.Demos_CurrencyInput_Documentation, IconName = IconName.CurrencyDollar, ParentId = "4" },
2323
new (){ Id = "402", Text = "Date Input", Href = RouteConstants.Demos_DateInput_Documentation, IconName = IconName.CalendarDate, ParentId = "4" },
2424
new (){ Id = "403", Text = "Number Input", Href = RouteConstants.Demos_NumberInput_Documentation, IconName = IconName.InputCursor, ParentId = "4" },
25+
new (){ Id = "403", Text = "Password Input", Href = RouteConstants.Demos_PasswordInput_Documentation, IconName = IconName.EyeSlashFill, ParentId = "4" },
2526
new (){ Id = "403", Text = "Radio Input", Href = RouteConstants.Demos_RadioInput_Documentation, IconName = IconName.RecordCircle, ParentId = "4" },
2627
new (){ Id = "404", Text = "Range Input", Href = RouteConstants.Demos_RangeInput_Documentation, IconName = IconName.Sliders, ParentId = "4" },
2728
//new (){ Id = "404", Text = "Select Input", Href = RouteConstants.Demos_SelectInput_Documentation, IconName = IconName.MenuButtonWideFill, ParentId = "4" },

‎BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInputDocumentation.razor

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
@page "/password-input"
2+
3+
@attribute [Route(pageUrl)]
4+
5+
<PageMetaTags PageUrl="@pageUrl"
6+
Title="@metaTitle"
7+
Description="@metaDescription"
8+
ImageUrl="@imageUrl" />
9+
10+
<PageHero Heading="@pageTitle">
11+
<LeadSection>@pageDescription</LeadSection>
12+
</PageHero>
13+
14+
<CarbonAds />
15+
16+
<Section Size="HeadingSize.H2" Name="Basic usage" PageUrl="@pageUrl" Link="basic-usage">
17+
<Demo Type="typeof(PasswordInput_Demo_01_Basic_Usage)" Tabs="true" />
18+
</Section>
19+
20+
<Section Size="HeadingSize.H2" Name="Disable" PageUrl="@pageUrl" Link="disable">
21+
<div class="mb-3">Use the <code>Disabled</code> parameter to disable the <code>TextInput</code>.</div>
22+
<Demo Type="typeof(PasswordInput_Demo_02_Disable_A)" Tabs="false" />
23+
<div class="my-3">Also, use <b>Enable()</b> and <b>Disable()</b> methods to enable and disable the <code>TextInput</code>.</div>
24+
<Callout Color="CalloutColor.Warning" Heading="NOTE">
25+
Do not use both the <b>Disabled</b> parameter and <b>Enable()</b> &amp; <b>Disable()</b> methods.
26+
</Callout>
27+
<Demo Type="typeof(PasswordInput_Demo_02_Disable_B)" Tabs="false" />
28+
</Section>
29+
30+
<Section Size="HeadingSize.H2" Name="Valdations" PageUrl="@pageUrl" Link="validations">
31+
<div class="mb-3">
32+
Like any other blazor input component, <code>PasswordInput</code> supports validations.
33+
Add the DataAnnotations on the <code>PasswordInput</code> component to validate the user input before submitting the form.
34+
In the below example, we used <b>Required</b> attribute.
35+
</div>
36+
<Demo Type="typeof(PasswordInput_Demo_03_Validations)" Tabs="true" />
37+
</Section>
38+
39+
<Section Size="HeadingSize.H2" Name="Events: ValueChanged" PageUrl="@pageUrl" Link="events-value-changed">
40+
<div class="mb-3">This event fires when the <code>PasswordInput</code> value changes, but not on every keystroke.</div>
41+
<Demo Type="typeof(PasswordInput_Demo_04_Events_ValueChanged)" Tabs="true" />
42+
</Section>
43+
44+
@code {
45+
private const string pageUrl = RouteConstants.Demos_PasswordInput_Documentation;
46+
private const string pageTitle = "Blazor PasswordInput";
47+
private const string pageDescription = "The Blazor Bootstrap PasswordInput component is constructed using an HTML input of type 'password'.";
48+
private const string metaTitle = "Blazor PasswordInput Component";
49+
private const string metaDescription = "The Blazor Bootstrap PasswordInput component is constructed using an HTML input of type 'password'.";
50+
private const string imageUrl = "https://i.imgur.com/1mVjqQv.png"; // TODO: Update image URL
51+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_01_Basic_Usage.razor

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div class="mb-3">
2+
<PasswordInput @bind-Value="@enteredPassword" />
3+
</div>
4+
<div class="mb-3">Entered password: @enteredPassword</div>
5+
6+
@code {
7+
private string? enteredPassword = null;
8+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_02_Disable_A.razor

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<div class="mb-3">
2+
<PasswordInput @bind-Value="@enteredPassword" Disabled="@disabled" />
3+
</div>
4+
<div class="mb-3">Entered password: @enteredPassword</div>
5+
6+
<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>
7+
<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
8+
<Button Color="ButtonColor.Warning" @onclick="Toggle"> Toggle </Button>
9+
10+
@code {
11+
private string? enteredPassword = null;
12+
13+
private bool disabled = true;
14+
15+
private void Enable() => disabled = false;
16+
17+
private void Disable() => disabled = true;
18+
19+
private void Toggle() => disabled = !disabled;
20+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_02_Disable_B.razor

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<div class="mb-3">
2+
<PasswordInput @ref="passwordInputRef" @bind-Value="@enteredPassword" />
3+
</div>
4+
<div class="mb-3">Entered text: @enteredPassword</div>
5+
6+
<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
7+
<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>
8+
9+
@code {
10+
private PasswordInput? passwordInputRef;
11+
12+
private string? enteredPassword = null;
13+
14+
private void Disable() => passwordInputRef.Disable();
15+
16+
private void Enable() => passwordInputRef.Enable();
17+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_03_Validations.razor

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
@using System.ComponentModel.DataAnnotations
2+
3+
<style>
4+
.valid.modified:not([type=checkbox]) {
5+
outline: 1px solid #26b050;
6+
}
7+
8+
.invalid {
9+
outline: 1px solid red;
10+
}
11+
12+
.validation-message {
13+
color: red;
14+
}
15+
</style>
16+
17+
<EditForm EditContext="@editContext" OnValidSubmit="HandleOnValidSubmit">
18+
<DataAnnotationsValidator />
19+
20+
<div class="form-group row mb-3">
21+
<label class="col-md-2 col-form-label">User name: <span class="text-danger">*</span></label>
22+
<div class="col-md-10">
23+
<TextInput @bind-Value="@userLogin.UserName" Placeholder="Enter user name" />
24+
<ValidationMessage For="@(() => userLogin.UserName)" />
25+
</div>
26+
</div>
27+
28+
<div class="form-group row mb-3">
29+
<label class="col-md-2 col-form-label">Password: <span class="text-danger">*</span></label>
30+
<div class="col-md-10">
31+
<PasswordInput @bind-Value="@userLogin.Password" />
32+
<ValidationMessage For="@(() => userLogin.Password)" />
33+
</div>
34+
</div>
35+
36+
<div class="row">
37+
<div class="col-md-12 text-right">
38+
<Button Type="ButtonType.Button" Color="ButtonColor.Secondary" Class="float-end" @onclick="ResetForm">Reset</Button>
39+
<Button Type="ButtonType.Submit" Color="ButtonColor.Success" Class="float-end me-2">Login</Button>
40+
</div>
41+
</div>
42+
43+
</EditForm>
44+
45+
@code {
46+
private UserLogin userLogin = new();
47+
private EditContext? editContext;
48+
49+
protected override void OnInitialized()
50+
{
51+
editContext = new EditContext(userLogin);
52+
base.OnInitialized();
53+
}
54+
55+
public void HandleOnValidSubmit()
56+
{
57+
// additional check
58+
if (editContext.Validate())
59+
{
60+
// do something
61+
// submit the form
62+
Console.WriteLine("Login successful");
63+
}
64+
}
65+
66+
private void ResetForm()
67+
{
68+
userLogin = new();
69+
editContext = new EditContext(userLogin);
70+
}
71+
72+
public class UserLogin
73+
{
74+
[Required(ErrorMessage = "User name required.")]
75+
public string? UserName { get; set; }
76+
77+
[Required(ErrorMessage = "Password required.")]
78+
public string? Password { get; set; }
79+
}
80+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_04_Events_ValueChanged.razor

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<div class="mb-3">
2+
<PasswordInput Value="@enteredPassword" ValueExpression="() => enteredPassword" ValueChanged="(value) => PasswordChanged(value)" />
3+
</div>
4+
<div class="mb-3">Entered password: @enteredPassword</div>
5+
6+
@code {
7+
private string? enteredPassword = null;
8+
9+
private void PasswordChanged(string? value)
10+
{
11+
enteredPassword = value;
12+
13+
// do something
14+
}
15+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor

+10
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,11 @@
150150
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.InputCursor" class="me-2" /> Number Input</h4>
151151
</a>
152152
</div>
153+
<div class="col-sm-4 mb-2">
154+
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/form/password-input">
155+
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.EyeSlashFill" class="me-2" /> Password Input <Badge Color="BadgeColor.Danger">New</Badge></h4>
156+
</a>
157+
</div>
153158
<div class="col-sm-4 mb-2">
154159
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/offcanvas">
155160
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.LayoutSidebarReverse" class="me-2" /> Offcanvas</h4>
@@ -299,6 +304,11 @@
299304
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.InputCursor" class="me-2" /> Number Input</h4>
300305
</a>
301306
</div>
307+
<div class="col-sm-4 mb-2">
308+
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/form/password-input">
309+
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.EyeSlashFill" class="me-2" /> Password Input <Badge Color="BadgeColor.Danger">New</Badge></h4>
310+
</a>
311+
</div>
302312
<div class="col-sm-4 mb-2">
303313
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_RadioInput_Documentation">
304314
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.RecordCircle" class="me-2" /> Radio Input <Badge Color="BadgeColor.Danger">New</Badge></h4>

‎BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs

+1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ public static class RouteConstants
2626
public const string Demos_CurrencyInput_Documentation = Demos_Forms_Prefix + "/currency-input";
2727
public const string Demos_DateInput_Documentation = Demos_Forms_Prefix + "/date-input";
2828
public const string Demos_NumberInput_Documentation = Demos_Forms_Prefix + "/number-input";
29+
public const string Demos_PasswordInput_Documentation = Demos_Forms_Prefix + "/password-input";
2930
public const string Demos_RadioInput_Documentation = Demos_Forms_Prefix + "/radio-input";
3031
public const string Demos_RangeInput_Documentation = Demos_Forms_Prefix + "/range-input";
3132
public const string Demos_SelectInput_Documentation = Demos_Forms_Prefix + "/select-input";

‎blazorbootstrap/Components/Form/PasswordInput/PasswordInput.razor

+13-10
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,17 @@
33
@preservewhitespace true
44

55
<div class="input-group mb-3">
6-
<input
7-
@ref="@Element"
8-
type="@InputTextType"
9-
id="@Id"
10-
class="@BootstrapClass.FormControl"
11-
disabled="@Disabled"
12-
value="@Value"
13-
@attributes="@AdditionalAttributes"
14-
@onchange="OnChange">
15-
<button type="button" class="btn btn-primary btn-sm" @onclick="OnShowHidePasswordButtonClick"><i class="bi bi-eye-fill" /></button>
6+
<input @ref="@Element"
7+
type="@InputTextType"
8+
id="@Id"
9+
class="@ClassNames"
10+
style="@StyleNames"
11+
value="@Value"
12+
disabled="@Disabled"
13+
@attributes="@AdditionalAttributes"
14+
@onchange="OnChange">
15+
16+
<button type="button" class="@ShowHidePasswordButtonCssClass" @onclick="ShowHidePassword">
17+
<i class="@ShowHidePasswordButtonIcon"></i>
18+
</button>
1619
</div>

0 commit comments

Comments
 (0)