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">

    @{
        if(!IsForgotten)
        {
            <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">
            @{
                if(!IsForgotten)
                {
                    <DxTextBox @bind-Text="@OldPassword"
                               NullText="Old password"
                               Password="true"
                               CssClass="form-field" />
                }
            }
            
            <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<bool> DataChanged { get; set; }

    [Parameter] public bool IsForgotten { get; set; } = false;

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

    private string _newPassword;
    public string NewPassword
    {
        get => _newPassword;
        set
        {
            if (_newPassword == value) return;

            _newPassword = value;
            OnPasswordSet(value);
        }
    }

    public string OldPassword { get; set; }

    private string? _confirmNewPassword;
    public string? ConfirmNewPassword
    {
        get => _confirmNewPassword;
        set
        {
            if (value == null || _confirmNewPassword == value) return;

            _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()
    {
        bool isSuccess;
        isSaveActive = false;

        if (IsForgotten)
        {
            var forgotPasswordDto = new ForgotPasswordDto(Context.UserDto.EmailAddress, NewPassword);
            isSuccess = await AdminSignalRClient.PostDataAsync<ForgotPasswordDto, UserModelDtoDetail>(SignalRTags.UserForgotPassword, forgotPasswordDto) != null;
        }
        else
        {
            var changePasswordDto = new ChangePasswordDto(Context.Id, OldPassword, NewPassword);
            isSuccess = await AdminSignalRClient.PostDataAsync<ChangePasswordDto, UserModelDtoDetail>(SignalRTags.UserChangePassword, changePasswordDto) != null;
        }

        msg = isSuccess ? $"Password saved" : "Some error occured during saving, please try again later";

        StateHasChanged();
        await DataChanged.InvokeAsync(isSuccess);
    }

    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>;
    }
}