pos-system/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Auth/Register.razor

@page "/register"
@using WebClientTpos.Shared.DTOs
@using WebClientTpos.Shared
@inject HttpClient Http
@inject NavigationManager Navigation
@inject IStringLocalizer<Register> L

@* 
    EN: User registration page.
    VI: Trang đăng ký người dùng.
*@

<PageTitle>@L["Auth_Register_Title"]</PageTitle>

<div class="auth-container">
    <section class="auth-card">
        <h1 class="auth-title">@L["Auth_Register_Title"]</h1>
        <p class="auth-subtitle">@L["Auth_Register_Subtitle"]</p>
        
        <EditForm Model="@registerModel" OnValidSubmit="HandleRegister" FormName="RegisterForm">
            <DataAnnotationsValidator />
            
            <div class="form-group">
                <label for="reg-name">@L["Auth_Register_DisplayName"] *</label>
                <InputText id="reg-name" 
                          @bind-Value="registerModel.DisplayName" 
                          class="form-input" 
                          placeholder="John Doe" 
                          autocomplete="name" />
                <ValidationMessage For="() => registerModel.DisplayName" class="validation-message" />
            </div>
            
            <div class="form-group">
                <label for="reg-email">@L["Auth_Register_Email"] *</label>
                <InputText id="reg-email" 
                          @bind-Value="registerModel.Email" 
                          class="form-input" 
                          placeholder="email@example.com" 
                          autocomplete="email" />
                <ValidationMessage For="() => registerModel.Email" class="validation-message" />
            </div>
            
            <div class="form-group">
                <label for="reg-password">@L["Auth_Register_Password"] *</label>
                <InputText id="reg-password" 
                          @bind-Value="registerModel.Password" 
                          type="password" 
                          class="form-input" 
                          placeholder="••••••••"
                          autocomplete="new-password" />
                <small class="form-hint">@L["Auth_Register_PasswordHint"]</small>
                <ValidationMessage For="() => registerModel.Password" class="validation-message" />
            </div>
            
            <div class="form-group">
                <label for="reg-confirm">@L["Auth_Register_ConfirmPassword"] *</label>
                <InputText id="reg-confirm" 
                          @bind-Value="registerModel.ConfirmPassword" 
                          type="password" 
                          class="form-input" 
                          placeholder="••••••••"
                          autocomplete="new-password" />
                <ValidationMessage For="() => registerModel.ConfirmPassword" class="validation-message" />
            </div>
            
            <div class="checkbox-group mb-6">
                <InputCheckbox id="accept-terms" 
                              @bind-Value="registerModel.AcceptTerms" 
                              class="form-checkbox" />
                <label for="accept-terms" class="checkbox-label">@L["Auth_Register_Terms"]</label>
            </div>
            
            <button type="submit" class="btn-primary btn-full" disabled="@isSubmitting">
                @if (isSubmitting)
                {
                    <span class="spinner-small"></span>
                    <span>@L["Common_Loading"]</span>
                }
                else
                {
                    @L["Auth_Register_Submit"]
                }
            </button>
        </EditForm>
        
        @if (!string.IsNullOrEmpty(message))
        {
            <div class="alert @(success ? "alert-success" : "alert-error")">
                @message
            </div>
        }
        
        <div class="auth-footer">
            <span>@L["Auth_Register_HaveAccount"]</span>
            <a href="/auth/login" class="link-primary">@L["Auth_Register_LoginLink"]</a>
        </div>
    </section>
</div>

@code {
    private RegisterDto registerModel = new();
    private bool isSubmitting = false;
    private string message = "";
    private bool success = false;

    /// <summary>
    /// EN: Handle registration form submission.
    /// VI: Xử lý submit form đăng ký.
    /// </summary>
    private async Task HandleRegister()
    {
        isSubmitting = true;
        message = "";

        try
        {
            var response = await Http.PostAsJsonAsync("api/auth/register", registerModel);
            
            if (response.IsSuccessStatusCode)
            {
                var result = await response.Content.ReadFromJsonAsync<ApiResponse<UserProfileDto>>();
                if (result?.Success == true)
                {
                    success = true;
                    message = L["Auth_Register_Success"];
                    
                    // EN: Redirect to login after 2 seconds
                    // VI: Chuyển hướng đến đăng nhập sau 2 giây
                    await Task.Delay(2000);
                    Navigation.NavigateTo("/auth/login");
                }
                else
                {
                    success = false;
                    message = result?.Error ?? L["Auth_Register_Error"];
                }
            }
            else
            {
                success = false;
                var content = await response.Content.ReadAsStringAsync();
                message = $"{L["Auth_Register_Error"]}: {content}";
            }
        }
        catch (Exception ex)
        {
            success = false;
            message = $"{L["Common_Error"]}: {ex.Message}";
        }
        finally
        {
            isSubmitting = false;
        }
    }
}