NameInputModal.razor

@inject AuthService AuthService

<Modal IsOpen="IsOpen" OnClose="@(() => {})">
    <div class="text-center mb-6">
        <h2 class="text-xl font-bold text-gray-900 mb-2">Welcome to Contoso Outdoor Social</h2>
        <p class="text-gray-600">Please enter your name to continue</p>
    </div>
    
    <div class="w-full mb-4">
        <input @bind="username" @onkeypress="HandleKeyPress"
               placeholder="Enter your name"
               disabled="@isLoading"
               class="w-full p-4 text-base text-gray-900 bg-gray-100 rounded-md focus-outline-none focus-ring-2"
               maxlength="50"
               autocomplete="off" />
    </div>
    
    @if (!string.IsNullOrEmpty(error))
    {
        <p class="text-red-500 text-sm mb-4 text-center">@error</p>
    }
    
    <div class="flex justify-center gap-4">
        <button @onclick="HandleSubmit"
                disabled="@(isLoading || string.IsNullOrWhiteSpace(username))"
                class="btn btn-primary">
            @(isLoading ? "Processing..." : "Continue")
        </button>
    </div>
</Modal>

@code {
    [Parameter] public bool IsOpen { get; set; }
    [Parameter] public EventCallback OnClose { get; set; }

    private string username = "";
    private bool isLoading = false;
    private string error = "";

    private async Task HandleKeyPress(KeyboardEventArgs e)
    {
        if (e.Key == "Enter" && !string.IsNullOrWhiteSpace(username) && !isLoading)
        {
            await HandleSubmit();
        }
    }

    private async Task HandleSubmit()
    {
        var trimmedUsername = username.Trim();
        
        if (string.IsNullOrEmpty(trimmedUsername))
        {
            error = "Please enter your name.";
            return;
        }

        if (trimmedUsername.Length < 2)
        {
            error = "Name must be at least 2 characters long.";
            return;
        }

        isLoading = true;
        error = "";
        StateHasChanged();

        try
        {
            await AuthService.LoginAsync(trimmedUsername);
            username = "";
            await OnClose.InvokeAsync();
        }
        catch (Exception ex)
        {
            error = "An error occurred. Please try again.";
            Console.WriteLine($"Error during login: {ex.Message}");
        }
        finally
        {
            isLoading = false;
            StateHasChanged();
        }
    }
}