-
-
Notifications
You must be signed in to change notification settings - Fork 51
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
PasswordInput component updates (#983)
- Loading branch information
Showing
12 changed files
with
316 additions
and
105 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
51 changes: 51 additions & 0 deletions
51
...orBootstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInputDocumentation.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| @page "/password-input" | ||
|
|
||
| @attribute [Route(pageUrl)] | ||
|
|
||
| <PageMetaTags PageUrl="@pageUrl" | ||
| Title="@metaTitle" | ||
| Description="@metaDescription" | ||
| ImageUrl="@imageUrl" /> | ||
|
|
||
| <PageHero Heading="@pageTitle"> | ||
| <LeadSection>@pageDescription</LeadSection> | ||
| </PageHero> | ||
|
|
||
| <CarbonAds /> | ||
|
|
||
| <Section Size="HeadingSize.H2" Name="Basic usage" PageUrl="@pageUrl" Link="basic-usage"> | ||
| <Demo Type="typeof(PasswordInput_Demo_01_Basic_Usage)" Tabs="true" /> | ||
| </Section> | ||
|
|
||
| <Section Size="HeadingSize.H2" Name="Disable" PageUrl="@pageUrl" Link="disable"> | ||
| <div class="mb-3">Use the <code>Disabled</code> parameter to disable the <code>TextInput</code>.</div> | ||
| <Demo Type="typeof(PasswordInput_Demo_02_Disable_A)" Tabs="false" /> | ||
| <div class="my-3">Also, use <b>Enable()</b> and <b>Disable()</b> methods to enable and disable the <code>TextInput</code>.</div> | ||
| <Callout Color="CalloutColor.Warning" Heading="NOTE"> | ||
| Do not use both the <b>Disabled</b> parameter and <b>Enable()</b> & <b>Disable()</b> methods. | ||
| </Callout> | ||
| <Demo Type="typeof(PasswordInput_Demo_02_Disable_B)" Tabs="false" /> | ||
| </Section> | ||
|
|
||
| <Section Size="HeadingSize.H2" Name="Valdations" PageUrl="@pageUrl" Link="validations"> | ||
| <div class="mb-3"> | ||
| Like any other blazor input component, <code>PasswordInput</code> supports validations. | ||
| Add the DataAnnotations on the <code>PasswordInput</code> component to validate the user input before submitting the form. | ||
| In the below example, we used <b>Required</b> attribute. | ||
| </div> | ||
| <Demo Type="typeof(PasswordInput_Demo_03_Validations)" Tabs="true" /> | ||
| </Section> | ||
|
|
||
| <Section Size="HeadingSize.H2" Name="Events: ValueChanged" PageUrl="@pageUrl" Link="events-value-changed"> | ||
| <div class="mb-3">This event fires when the <code>PasswordInput</code> value changes, but not on every keystroke.</div> | ||
| <Demo Type="typeof(PasswordInput_Demo_04_Events_ValueChanged)" Tabs="true" /> | ||
| </Section> | ||
|
|
||
| @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 | ||
| } |
8 changes: 8 additions & 0 deletions
8
...trap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_01_Basic_Usage.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| <div class="mb-3"> | ||
| <PasswordInput @bind-Value="@enteredPassword" /> | ||
| </div> | ||
| <div class="mb-3">Entered password: @enteredPassword</div> | ||
|
|
||
| @code { | ||
| private string? enteredPassword = null; | ||
| } |
20 changes: 20 additions & 0 deletions
20
...tstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_02_Disable_A.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| <div class="mb-3"> | ||
| <PasswordInput @bind-Value="@enteredPassword" Disabled="@disabled" /> | ||
| </div> | ||
| <div class="mb-3">Entered password: @enteredPassword</div> | ||
|
|
||
| <Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button> | ||
| <Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button> | ||
| <Button Color="ButtonColor.Warning" @onclick="Toggle"> Toggle </Button> | ||
|
|
||
| @code { | ||
| private string? enteredPassword = null; | ||
|
|
||
| private bool disabled = true; | ||
|
|
||
| private void Enable() => disabled = false; | ||
|
|
||
| private void Disable() => disabled = true; | ||
|
|
||
| private void Toggle() => disabled = !disabled; | ||
| } |
17 changes: 17 additions & 0 deletions
17
...tstrap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_02_Disable_B.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| <div class="mb-3"> | ||
| <PasswordInput @ref="passwordInputRef" @bind-Value="@enteredPassword" /> | ||
| </div> | ||
| <div class="mb-3">Entered text: @enteredPassword</div> | ||
|
|
||
| <Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button> | ||
| <Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button> | ||
|
|
||
| @code { | ||
| private PasswordInput? passwordInputRef; | ||
|
|
||
| private string? enteredPassword = null; | ||
|
|
||
| private void Disable() => passwordInputRef.Disable(); | ||
|
|
||
| private void Enable() => passwordInputRef.Enable(); | ||
| } |
80 changes: 80 additions & 0 deletions
80
...trap.Demo.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_03_Validations.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| @using System.ComponentModel.DataAnnotations | ||
|
|
||
| <style> | ||
| .valid.modified:not([type=checkbox]) { | ||
| outline: 1px solid #26b050; | ||
| } | ||
| .invalid { | ||
| outline: 1px solid red; | ||
| } | ||
| .validation-message { | ||
| color: red; | ||
| } | ||
| </style> | ||
|
|
||
| <EditForm EditContext="@editContext" OnValidSubmit="HandleOnValidSubmit"> | ||
| <DataAnnotationsValidator /> | ||
|
|
||
| <div class="form-group row mb-3"> | ||
| <label class="col-md-2 col-form-label">User name: <span class="text-danger">*</span></label> | ||
| <div class="col-md-10"> | ||
| <TextInput @bind-Value="@userLogin.UserName" Placeholder="Enter user name" /> | ||
| <ValidationMessage For="@(() => userLogin.UserName)" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="form-group row mb-3"> | ||
| <label class="col-md-2 col-form-label">Password: <span class="text-danger">*</span></label> | ||
| <div class="col-md-10"> | ||
| <PasswordInput @bind-Value="@userLogin.Password" /> | ||
| <ValidationMessage For="@(() => userLogin.Password)" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="row"> | ||
| <div class="col-md-12 text-right"> | ||
| <Button Type="ButtonType.Button" Color="ButtonColor.Secondary" Class="float-end" @onclick="ResetForm">Reset</Button> | ||
| <Button Type="ButtonType.Submit" Color="ButtonColor.Success" Class="float-end me-2">Login</Button> | ||
| </div> | ||
| </div> | ||
|
|
||
| </EditForm> | ||
|
|
||
| @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; } | ||
| } | ||
| } |
15 changes: 15 additions & 0 deletions
15
...o.RCL/Components/Pages/Form/PasswordInput/PasswordInput_Demo_04_Events_ValueChanged.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| <div class="mb-3"> | ||
| <PasswordInput Value="@enteredPassword" ValueExpression="() => enteredPassword" ValueChanged="(value) => PasswordChanged(value)" /> | ||
| </div> | ||
| <div class="mb-3">Entered password: @enteredPassword</div> | ||
|
|
||
| @code { | ||
| private string? enteredPassword = null; | ||
|
|
||
| private void PasswordChanged(string? value) | ||
| { | ||
| enteredPassword = value; | ||
|
|
||
| // do something | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.