TourIAm/TIAMSharedUI/Pages/User/CardComponents/UserCardComponent.razor

@using BlazorAnimation
@using TIAM.Core.Enums
@using TIAM.Entities.Transfers
@using TIAM.Entities.Users
@using TIAM.Models.Dtos.Users
@using TIAM.Services
@using TIAMSharedUI.Shared.Components.Cards
@using TIAMWebApp.Shared.Application.Interfaces
@using TIAMWebApp.Shared.Application.Models.ClientSide.UI
@using TIAMWebApp.Shared.Application.Models.PageModels
@using TIAMWebApp.Shared.Application.Services
@inject IServiceProviderDataService ServiceProviderDataService
@inject IUserDataService UserDataService;
@inject AdminSignalRClient AdminSignalRClient;

<div class="e-card cw-480">
    <div class="e-main d-flex align-items-center">
        <div class="flex-shrink-0">
            <img class="e-photo" src="_content/TIAMSharedUI/images/defaultavatar_60.png" alt="" />
        </div>
        <div class="e-info flex-grow-1 ms-3">
            <div class="e-name">@($"{Context.UserDto.Id}")</div>
            <p class="e-title"><i class="fa-solid fa-at"></i> @Context.UserDto.EmailAddress</p>
            <p class="e-title"><i class="fa-solid fa-phone"></i> @Context.UserDto.PhoneNumber</p>
        </div>
    </div>

    <hr class="hr" />

    <div class="row">
        <div class="col-12 col-md-6">
            @RenderDetailsItem("fa-solid fa-key", "Password", Context.UserDto.Password)
        </div>
        
        <div class="col-9 col-md-4">
            <DxTextBox 
                        @bind-Text="@NewPassword"
                        NullText="New password"
                        BindValueMode="BindValueMode.OnDelayedInput"
                        InputDelay="300"
                        Password="true"
                        CssClass="form-field"
                        />
            <DxTextBox @bind-Text="@ConfirmNewPassword"
                        ReadOnly="@PasswordNotSet"
                       NullText="Confirm new password"
                       BindValueMode="BindValueMode.OnDelayedInput"
                       InputDelay="300"
                       Password="true"
                       CssClass="form-field" />
        </div>
        <div class="col-3 col-md-2">
            <DxButton CssClass="btn btn-primary" Click="SetPassword" Enabled="@isSaveActive"> Save</DxButton>
        </div>
        
        <p>@msg</p>
    </div>
</div>

@code {
    [Parameter] public UserModelDtoDetail Context { get; set; }

    [Parameter] public EventCallback<string> DataChanged { get; set; }

    private bool PasswordNotSet = true;
    private bool PasswordNotConfirmed = true;

    private string _newPassword;
    public string NewPassword
    {
        get => _newPassword;
        set
        {
            if (_newPassword != value)
            {
                _newPassword = value;
                OnPasswordSet(value);
            }
        }
    }

    private string? _confirmNewPassword;
    public string? ConfirmNewPassword
    {
        get => _confirmNewPassword;
        set
        {
            if (value != null && _confirmNewPassword != value)
            {
                _confirmNewPassword = value;
                OnPasswordConfirmed(value);
            }
        }
    }

    string msg;
    private bool isSaveActive = false;

    void OnPasswordSet(string password)
    {
        msg = $"Password to set: {NewPassword}";
        PasswordNotSet = false;
        StateHasChanged();
    }

    void OnPasswordConfirmed(string password)
    {
        if(NewPassword == ConfirmNewPassword)
        {            
            PasswordNotConfirmed = false;
            isSaveActive = true;
        }
        else
        {
            isSaveActive = false;
            msg = "Password and confirmation not matching!";
        }
        
    }

    protected async Task SetPassword()
    {

        isSaveActive = false;

        User userToUpdate = new User(Context.Id, Context.UserDto.EmailAddress, NewPassword);
        var result = await AdminSignalRClient.PostDataAsync<User>(SignalRTags.UpdateUser, userToUpdate);
        if (result != null)
        {           
                msg = $"Password saved";
                StateHasChanged();            
        }
        else
        {
            msg = "Some error occured during saving, please try again later";
        }
        await DataChanged.InvokeAsync(msg);
    }



    protected override async Task OnInitializedAsync()
    {


        await base.OnInitializedAsync();
    }

    protected override async Task OnParametersSetAsync()
    {   
      
        await base.OnParametersSetAsync();
    }

    RenderFragment RenderDetailsItem(string iconCssClass, string caption, string value)
    {
        return @<div class="d-flex m-1 align-items-center">
        <div class="icon-container flex-shrink-0">
            <span class="dxbl-image m-1 @iconCssClass"></span>
        </div>
        <div class="text-container m-1 flex-grow-1 ms-2">
            <label>@caption:</label>
            <div>@value</div>
        </div>
    </div>;
    }
}