insight/src/Web/Insight.Web/Pages/Account/ProfilePasswordDialog.razor
2023-09-21 18:58:32 +02:00

55 lines
No EOL
3 KiB
Text

@using Insight.Web.Models.Account;
<MudDrawer @bind-Open="_visible" Anchor="Anchor.End" Elevation="0" Variant="@DrawerVariant.Temporary" ClipMode="DrawerClipMode.Always" Width="400px" Style="max-width:auto;">
<MudDrawerHeader>
<MudText Typo="Typo.h6">
Password
</MudText>
</MudDrawerHeader>
<MudStack Justify="Justify.Center" Class="px-6">
<EditForm Model="@_model" OnValidSubmit="()=>Submit(_model)">
<DataAnnotationsValidator />
<MudStack Justify="Justify.Center" Spacing="5">
<MudItem>
<MudTextField Label="Current" Variant="Variant.Text" @bind-Value="_model.OldPassword" For="()=>_model.OldPassword"
Margin="Margin.Dense" InputType="@(_passwordCurrentVisible ? InputType.Text : InputType.Password)"
Adornment="Adornment.End" AdornmentIcon="@(_passwordCurrentVisible ? Icons.Material.Filled.VisibilityOff : Icons.Material.Filled.Visibility)"
OnAdornmentClick="()=>_passwordCurrentVisible = !_passwordCurrentVisible" />
</MudItem>
<MudItem>
<MudTextField Label="New" Variant="Variant.Text" @bind-Value="_model.NewPassword" For="()=>_model.NewPassword"
Margin="Margin.Dense" InputType="@(_passwordNewVisible ? InputType.Text : InputType.Password)"
Adornment="Adornment.End" AdornmentIcon="@(_passwordNewVisible ? Icons.Material.Filled.VisibilityOff : Icons.Material.Filled.Visibility)"
OnAdornmentClick="()=>_passwordNewVisible = !_passwordNewVisible" />
</MudItem>
<MudItem>
<MudTextField Label="Confirm New" Variant="Variant.Text" @bind-Value="_model.ConfirmNewPassword" For="()=>_model.ConfirmNewPassword"
Margin="Margin.Dense" InputType="@(_passwordCofirmVisible ? InputType.Text : InputType.Password)"
Adornment="Adornment.End" AdornmentIcon="@(_passwordCofirmVisible ? Icons.Material.Filled.VisibilityOff : Icons.Material.Filled.Visibility)"
OnAdornmentClick="()=>_passwordCofirmVisible = !_passwordCofirmVisible" />
</MudItem>
<MudItem Class="d-flex justify-center mt-7">
<MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Secondary" Size="Size.Large" DisableElevation Style="width: 100%;">
Change Password
</MudButton>
</MudItem>
</MudStack>
</EditForm>
</MudStack>
</MudDrawer>
@code{
private bool _visible;
private bool _passwordCurrentVisible;
private bool _passwordNewVisible;
private bool _passwordCofirmVisible;
private ChangePasswordModel _model = new();
public void Toggle()
{
_visible = !_visible;
StateHasChanged();
}
}