PasswordField: ParameterState (#411)

* PasswordField ParameterState

* Remove Unnecessary Code

Author: mckaragoz

CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/PasswordField/Examples/PasswordFieldExample1.razor

@@ -27,7 +27,7 @@
 </MudGrid>
 
 @code{
-    string _password = "asdf";
+    string? _password = "asdf";
     bool _passwordMode;
     bool _adornmentStart;
     bool _disablePaste;

CodeBeam.MudBlazor.Extensions/Components/PasswordField/MudPasswordField.razor

@@ -24,7 +24,7 @@
                     <MudInputExtended T="string"
                                       @ref="InputReference"
                                       @attributes="UserAttributes"
-                                      InputType="@_passwordInput"
+                                      InputType="@GetPasswordInputType()"
                                       Lines="@Lines"
                                       Label="@Label"
                                       Style="@Style"
@@ -64,7 +64,7 @@
                             }
                             else
                             {
-                                <MudIconButton Icon="@_passwordIcon" Color="@AdornmentColor" Size="@IconSize" OnClick="AdornmentClick" tabindex="@(AdornmentTabStop ? 0 : -1)"></MudIconButton>
+                                <MudIconButton Icon="@GetPasswordIcon()" Color="@AdornmentColor" Size="@IconSize" OnClick="AdornmentClick" tabindex="@(AdornmentTabStop ? 0 : -1)"></MudIconButton>
                             }
                         </AdornmentEnd>
                     </MudInputExtended>
@@ -74,7 +74,7 @@
                     <MudInputExtended T="string"
                                       @ref="InputReference"
                                       @attributes="UserAttributes"
-                                      InputType="@_passwordInput"
+                                      InputType="@GetPasswordInputType()"
                                       Lines="@Lines"
                                       Label="@Label"
                                       Style="@Style"
@@ -111,7 +111,7 @@
                             }
                             else
                             {
-                                <MudIconButton Icon="@_passwordIcon" Color="@AdornmentColor" Size="@IconSize" OnClick="AdornmentClick" tabindex="@(AdornmentTabStop ? 0 : -1)"></MudIconButton>
+                                <MudIconButton Icon="@GetPasswordIcon()" Color="@AdornmentColor" Size="@IconSize" OnClick="AdornmentClick" tabindex="@(AdornmentTabStop ? 0 : -1)"></MudIconButton>
                             }
                         </AdornmentEnd>
                     </MudInputExtended>

CodeBeam.MudBlazor.Extensions/Components/PasswordField/MudPasswordField.razor.cs

@@ -1,6 +1,7 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using MudBlazor;
+using MudBlazor.State;
 using MudBlazor.Utilities;
 
 namespace MudExtensions
@@ -11,6 +12,19 @@ namespace MudExtensions
     /// <typeparam name="T"></typeparam>
     public partial class MudPasswordField<T> : MudDebouncedInput<T>
     {
+        /// <summary>
+        /// MudPasswordField constructor.
+        /// </summary>
+        public MudPasswordField()
+        {
+            using var registerScope = CreateRegisterScope();
+            _passwordMode = registerScope.RegisterParameter<bool>(nameof(PasswordMode))
+                .WithParameter(() => PasswordMode)
+                .WithEventCallback(() => PasswordModeChanged);
+        }
+
+        private readonly ParameterState<bool> _passwordMode;
+
         /// <summary>
         /// 
         /// </summary>
@@ -22,10 +36,11 @@ public partial class MudPasswordField<T> : MudDebouncedInput<T>
         /// <summary>
         /// 
         /// </summary>
-        public MudInputExtended<string?> InputReference { get; private set; } = new();
-        InputType _passwordInput = InputType.Password;
-        string? _passwordIcon = Icons.Material.Filled.VisibilityOff;
-        bool _passwordMode = true;
+        public MudInputExtended<string?> InputReference { get; private set; } = null!;
+        private InputType GetPasswordInputType() => _passwordMode.Value ? InputType.Password : InputType.Text;
+        private string? GetPasswordIcon() => _passwordMode.Value ? Icons.Material.Filled.VisibilityOff : Icons.Material.Filled.Visibility;
+        //InputType _passwordInput = InputType.Password;
+        //string? _passwordIcon = Icons.Material.Filled.VisibilityOff;
 
         [CascadingParameter(Name = "Standalone")]
         internal bool StandaloneEx { get; set; } = true;
@@ -152,30 +167,7 @@ private async Task OnMaskedValueChanged(string s)
         /// If true, masks text with password mode.
         /// </summary>
         [Parameter]
-        public bool PasswordMode
-        {
-            get => _passwordMode;
-            set
-            {
-                if (_passwordMode == value)
-                {
-                    return;
-                }
-                _passwordMode = value;
-                if (_passwordMode)
-                {
-                    _passwordInput = InputType.Password;
-                    _passwordIcon = Icons.Material.Filled.VisibilityOff;
-                }
-                else
-                {
-                    _passwordInput = InputType.Text;
-                    _passwordIcon = Icons.Material.Filled.Visibility;
-                }
-
-                PasswordModeChanged.InvokeAsync(value).CatchAndLog();
-            }
-        }
+        public bool PasswordMode { get; set; } = true;
 
         /// <summary>
         /// Fires when password mode changed.
@@ -189,7 +181,7 @@ public bool PasswordMode
         /// <returns></returns>
         protected async Task AdornmentClick()
         {
-            PasswordMode = !PasswordMode;
+            await _passwordMode.SetValueAsync(!_passwordMode.Value);
             await OnAdornmentClick.InvokeAsync();
         }