From 8b9fd5c17549e6160abbedc83782370907bfc239 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Wed, 18 Dec 2024 21:47:13 +0530 Subject: [PATCH] PasswordInput component updates --- .../Components/Layout/MainLayout.razor.cs | 1 + .../PasswordInputDocumentation.razor | 51 +++++ .../PasswordInput_Demo_01_Basic_Usage.razor | 8 + .../PasswordInput_Demo_02_Disable_A.razor | 20 ++ .../PasswordInput_Demo_02_Disable_B.razor | 17 ++ .../PasswordInput_Demo_03_Validations.razor | 80 ++++++++ ...ordInput_Demo_04_Events_ValueChanged.razor | 15 ++ .../Components/Pages/Index.razor | 10 + .../Constants/RouteConstants.cs | 1 + .../Form/PasswordInput/PasswordInput.razor | 23 ++- .../Form/PasswordInput/PasswordInput.razor.cs | 192 +++++++++--------- .../Form/RadioInput/RadioInput.razor.cs | 3 +- 12 files changed, 316 insertions(+), 105 deletions(-) create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInputDocumentation.razor create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_01_Basic_Usage.razor create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_02_Disable_A.razor create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_02_Disable_B.razor create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_03_Validations.razor create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_04_Events_ValueChanged.razor diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs index 64f809290..d2f9c7d53 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs @@ -22,6 +22,7 @@ internal override IEnumerable GetNavItems() new (){ Id = "401", Text = "Currency Input", Href = RouteConstants.Demos_CurrencyInput_Documentation, IconName = IconName.CurrencyDollar, ParentId = "4" }, new (){ Id = "402", Text = "Date Input", Href = RouteConstants.Demos_DateInput_Documentation, IconName = IconName.CalendarDate, ParentId = "4" }, new (){ Id = "403", Text = "Number Input", Href = RouteConstants.Demos_NumberInput_Documentation, IconName = IconName.InputCursor, ParentId = "4" }, + new (){ Id = "403", Text = "Password Input", Href = RouteConstants.Demos_PasswordInput_Documentation, IconName = IconName.EyeSlashFill, ParentId = "4" }, new (){ Id = "403", Text = "Radio Input", Href = RouteConstants.Demos_RadioInput_Documentation, IconName = IconName.RecordCircle, ParentId = "4" }, new (){ Id = "404", Text = "Range Input", Href = RouteConstants.Demos_RangeInput_Documentation, IconName = IconName.Sliders, ParentId = "4" }, //new (){ Id = "404", Text = "Select Input", Href = RouteConstants.Demos_SelectInput_Documentation, IconName = IconName.MenuButtonWideFill, ParentId = "4" }, diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInputDocumentation.razor new file mode 100644 index 000000000..d8dcab10c --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInputDocumentation.razor @@ -0,0 +1,51 @@ +@page "/password-input" + +@attribute [Route(pageUrl)] + + + + + @pageDescription + + + + +
+ +
+ +
+
Use the Disabled parameter to disable the TextInput.
+ +
Also, use Enable() and Disable() methods to enable and disable the TextInput.
+ + Do not use both the Disabled parameter and Enable() & Disable() methods. + + +
+ +
+
+ Like any other blazor input component, PasswordInput supports validations. + Add the DataAnnotations on the PasswordInput component to validate the user input before submitting the form. + In the below example, we used Required attribute. +
+ +
+ +
+
This event fires when the PasswordInput value changes, but not on every keystroke.
+ +
+ +@code { + private const string pageUrl = RouteConstants.Demos_PasswordInput_Documentation; + private const string pageTitle = "Blazor PasswordInput"; + private const string pageDescription = "The Blazor Bootstrap PasswordInput component is constructed using an HTML input of type 'password'."; + private const string metaTitle = "Blazor PasswordInput Component"; + private const string metaDescription = "The Blazor Bootstrap PasswordInput component is constructed using an HTML input of type 'password'."; + private const string imageUrl = "https://i.imgur.com/1mVjqQv.png"; // TODO: Update image URL +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_01_Basic_Usage.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_01_Basic_Usage.razor new file mode 100644 index 000000000..4b0c05b09 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_01_Basic_Usage.razor @@ -0,0 +1,8 @@ +
+ +
+
Entered password: @enteredPassword
+ +@code { + private string? enteredPassword = null; +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_02_Disable_A.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_02_Disable_A.razor new file mode 100644 index 000000000..d47989563 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_02_Disable_A.razor @@ -0,0 +1,20 @@ +
+ +
+
Entered password: @enteredPassword
+ + + + + +@code { + private string? enteredPassword = null; + + private bool disabled = true; + + private void Enable() => disabled = false; + + private void Disable() => disabled = true; + + private void Toggle() => disabled = !disabled; +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_02_Disable_B.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_02_Disable_B.razor new file mode 100644 index 000000000..367c8bbc8 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_02_Disable_B.razor @@ -0,0 +1,17 @@ +
+ +
+
Entered text: @enteredPassword
+ + + + +@code { + private PasswordInput? passwordInputRef; + + private string? enteredPassword = null; + + private void Disable() => passwordInputRef.Disable(); + + private void Enable() => passwordInputRef.Enable(); +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_03_Validations.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_03_Validations.razor new file mode 100644 index 000000000..92dd7d08b --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_03_Validations.razor @@ -0,0 +1,80 @@ +@using System.ComponentModel.DataAnnotations + + + + + + +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ +
+
+ + +
+
+ +
+ +@code { + private UserLogin userLogin = new(); + private EditContext? editContext; + + protected override void OnInitialized() + { + editContext = new EditContext(userLogin); + base.OnInitialized(); + } + + public void HandleOnValidSubmit() + { + // additional check + if (editContext.Validate()) + { + // do something + // submit the form + Console.WriteLine("Login successful"); + } + } + + private void ResetForm() + { + userLogin = new(); + editContext = new EditContext(userLogin); + } + + public class UserLogin + { + [Required(ErrorMessage = "User name required.")] + public string? UserName { get; set; } + + [Required(ErrorMessage = "Password required.")] + public string? Password { get; set; } + } +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_04_Events_ValueChanged.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_04_Events_ValueChanged.razor new file mode 100644 index 000000000..1aab225aa --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_04_Events_ValueChanged.razor @@ -0,0 +1,15 @@ +
+ +
+
Entered password: @enteredPassword
+ +@code { + private string? enteredPassword = null; + + private void PasswordChanged(string? value) + { + enteredPassword = value; + + // do something + } +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor index feb8706c4..17dc506dc 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor @@ -150,6 +150,11 @@

Number Input

+ +

Radio Input New

diff --git a/BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs b/BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs index 874eb6775..b6459f054 100644 --- a/BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs +++ b/BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs @@ -26,6 +26,7 @@ public static class RouteConstants public const string Demos_CurrencyInput_Documentation = Demos_Forms_Prefix + "/currency-input"; public const string Demos_DateInput_Documentation = Demos_Forms_Prefix + "/date-input"; public const string Demos_NumberInput_Documentation = Demos_Forms_Prefix + "/number-input"; + public const string Demos_PasswordInput_Documentation = Demos_Forms_Prefix + "/password-input"; public const string Demos_RadioInput_Documentation = Demos_Forms_Prefix + "/radio-input"; public const string Demos_RangeInput_Documentation = Demos_Forms_Prefix + "/range-input"; public const string Demos_SelectInput_Documentation = Demos_Forms_Prefix + "/select-input"; diff --git a/blazorbootstrap/Components/Form/PasswordInput/PasswordInput.razor b/blazorbootstrap/Components/Form/PasswordInput/PasswordInput.razor index 4123d7373..8980ff17c 100644 --- a/blazorbootstrap/Components/Form/PasswordInput/PasswordInput.razor +++ b/blazorbootstrap/Components/Form/PasswordInput/PasswordInput.razor @@ -3,14 +3,17 @@ @preservewhitespace true
- - + + +
diff --git a/blazorbootstrap/Components/Form/PasswordInput/PasswordInput.razor.cs b/blazorbootstrap/Components/Form/PasswordInput/PasswordInput.razor.cs index e69698788..24d050c3d 100644 --- a/blazorbootstrap/Components/Form/PasswordInput/PasswordInput.razor.cs +++ b/blazorbootstrap/Components/Form/PasswordInput/PasswordInput.razor.cs @@ -1,118 +1,124 @@ -using Microsoft.AspNetCore.Components.Forms; -using Microsoft.AspNetCore.Components; -using System.Linq.Expressions; +namespace BlazorBootstrap; -namespace BlazorBootstrap +public partial class PasswordInput : BlazorBootstrapComponentBase { - public partial class PasswordInput - { - #region Fields and Constants - - private FieldIdentifier fieldIdentifier; + #region Fields and Constants - private string? oldValue; + private FieldIdentifier fieldIdentifier; - #endregion + private string? oldValue; - #region Methods + private bool showPassword = false; - protected override async Task OnInitializedAsync() - { - oldValue = Value; + #endregion - AdditionalAttributes ??= new Dictionary(); - - fieldIdentifier = FieldIdentifier.Create(ValueExpression); - - await base.OnInitializedAsync(); - } + #region Methods - protected override async Task OnParametersSetAsync() - { - if (oldValue != Value) - { - await ValueChanged.InvokeAsync(Value); - - EditContext?.NotifyFieldChanged(fieldIdentifier); + protected override async Task OnInitializedAsync() + { + oldValue = Value; - oldValue = Value; - } - } + AdditionalAttributes ??= new Dictionary(); - public string InputTextType = "password"; + fieldIdentifier = FieldIdentifier.Create(ValueExpression); - void OnShowHidePasswordButtonClick() - { - if (this.InputTextType == "password") - this.InputTextType = "text"; - else - this.InputTextType = "password"; - } + await base.OnInitializedAsync(); + } - /// - /// Disables InputPassword. - /// - public void Disable() => Disabled = true; - - /// - /// Enables InputPassword. - /// - public void Enable() => Disabled = false; - - /// - /// This event is triggered only when the user changes the selection from the UI. - /// - /// - private async Task OnChange(ChangeEventArgs args) + protected override async Task OnParametersSetAsync() + { + if (oldValue != Value) { - Value = args.Value?.ToString(); - await ValueChanged.InvokeAsync(Value); EditContext?.NotifyFieldChanged(fieldIdentifier); oldValue = Value; } + } - #endregion - - #region Properties, Indexers - - protected override string? ClassNames => - BuildClassNames(Class, - (BootstrapClass.FormControl, true)); - - /// - /// Gets or sets the disabled state. - /// - /// - /// Default value is false. - /// - [Parameter] - public bool Disabled { get; set; } - - [CascadingParameter] private EditContext EditContext { get; set; } = default!; - - private string fieldCssClasses => EditContext?.FieldCssClass(fieldIdentifier) ?? ""; - - - /// - /// Gets or sets the value. - /// - /// - /// Default value is null. - /// - [Parameter] - public string? Value { get; set; } = default!; + /// + /// Disables InputPassword. + /// + public void Disable() => Disabled = true; + + /// + /// Enables InputPassword. + /// + public void Enable() => Disabled = false; + + /// + /// This event is triggered only when the user changes the selection from the UI. + /// + /// + private async Task OnChange(ChangeEventArgs args) + { + oldValue = Value; - /// - /// This event is fired when the inputpassword value changes. - /// - [Parameter] - public EventCallback ValueChanged { get; set; } = default!; + Value = args.Value?.ToString() ?? string.Empty; // object - [Parameter] public Expression> ValueExpression { get; set; } = default!; + await ValueChanged.InvokeAsync(Value); - #endregion + EditContext?.NotifyFieldChanged(fieldIdentifier); } + + private void ShowHidePassword() => showPassword = !showPassword; + + #endregion + + #region Properties, Indexers + + protected override string? ClassNames => + BuildClassNames( + Class, + (BootstrapClass.FormControl, true), + (EditContext?.FieldCssClass(fieldIdentifier) ?? string.Empty, true) + ); + + /// + /// Gets or sets the disabled state. + /// + /// + /// Default value is false. + /// + [Parameter] + public bool Disabled { get; set; } + + /// + /// Gets the associated . + /// + [CascadingParameter] + private EditContext EditContext { get; set; } = default!; + + private string InputTextType => showPassword ? "text" : "password"; + + /// + /// Gets or sets the show/hide password button CSS class. + /// + /// + /// Default value is `btn btn-primary btn-sm`. + /// + [Parameter] + public string? ShowHidePasswordButtonCssClass { get; set; } = "btn border-top border-end border-bottom border border-start-0"; //""btn btn-light border"; + + private string ShowHidePasswordButtonIcon => showPassword ? "bi bi-eye-fill" : "bi bi-eye-slash-fill"; + + /// + /// Gets or sets the value. + /// + /// + /// Default value is null. + /// + [Parameter] + public string? Value { get; set; } + + /// + /// This event is fired when the PasswordInput value changes. + /// + [Parameter] + public EventCallback ValueChanged { get; set; } + + [Parameter] public Expression> ValueExpression { get; set; } = default!; + + #endregion } diff --git a/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor.cs b/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor.cs index 902ddf906..a5fc7f966 100644 --- a/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor.cs +++ b/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor.cs @@ -32,12 +32,11 @@ protected override void OnInitialized() private async Task OnChange(ChangeEventArgs e) { var oldValue = Value; + var newValue = string.Equals(e.Value?.ToString(), "on"); await ValueChanged.InvokeAsync(newValue); - Console.WriteLine($"Old value: {oldValue}, New value: {e.Value}"); - EditContext?.NotifyFieldChanged(fieldIdentifier); }