blazor-saas-hrm/Features/Account/Register/Components/RegisterPage.razor

@page "/account/register"
@layout AuthenticationLayout

@using Indotalent.Shared.Consts
@using Microsoft.JSInterop
@inject IJSRuntime JSRuntime
@inject ISnackbar Snackbar
@inject NavigationManager Navigation
@inject IConfiguration Configuration

<PageTitle>Sign Up - @GlobalConsts.AppInitial</PageTitle>

<style>
    .page-header {
        text-align: center;
        margin-bottom: 1.5rem;
    }
    .page-header h2 {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1e293b;
        margin: 0 0 0.25rem 0;
    }
    .page-header p {
        font-size: 0.875rem;
        color: #64748b;
        margin: 0;
    }
    .form-label {
        font-size: 0.8125rem;
        font-weight: 600;
        color: #475569;
        margin-bottom: 0.375rem;
        margin-left: 0.25rem;
    }
    .auth-link {
        color: #594AE2;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
    }
    .auth-link:hover {
        color: #4235B8;
        text-decoration: underline;
    }
    .btn-submit {
        text-transform: none;
        border-radius: 0.5rem;
        height: 48px;
        font-weight: 600;
        font-size: 0.875rem;
        letter-spacing: 0;
    }
</style>

<div class="page-header">
    <h2>Sign Up</h2>
    <p>Create your account to get started</p>
</div>

<MudForm @ref="form" @bind-IsValid="@success" Validation="@(new Func<EditContext, Task<bool>>(ValidateForm))">

    <div class="mb-3">
        <div class="form-label">Full Name</div>
        <MudTextField T="string"
                      @bind-Value="model.FullName"
                      Variant="Variant.Outlined"
                      Placeholder="Enter your full name"
                      Margin="Margin.Dense"
                      Adornment="Adornment.Start"
                      AdornmentIcon="@Icons.Material.Filled.Person"
                      Required="true"
                      For="@(() => model.FullName)"
                      Style="border-radius: 0.5rem;" />
    </div>

    <div class="mb-3">
        <div class="form-label">Email Address</div>
        <MudTextField T="string"
                      @bind-Value="model.Email"
                      Variant="Variant.Outlined"
                      Placeholder="you@company.com"
                      Margin="Margin.Dense"
                      Adornment="Adornment.Start"
                      AdornmentIcon="@Icons.Material.Filled.Email"
                      Required="true"
                      For="@(() => model.Email)"
                      Style="border-radius: 0.5rem;" />
    </div>

    <div class="mb-4">
        <div class="form-label">Password</div>
        <MudTextField T="string"
                      @bind-Value="model.Password"
                      Variant="Variant.Outlined"
                      Placeholder="Create a password"
                      Margin="Margin.Dense"
                      InputType="@(showPassword ? InputType.Text : InputType.Password)"
                      Adornment="Adornment.Start"
                      AdornmentIcon="@Icons.Material.Filled.Lock"
                      AdornmentEndIcon="@(showPassword? Icons.Material.Filled.Visibility : Icons.Material.Filled.VisibilityOff)"
                      OnAdornmentEndClick="() => showPassword = !showPassword"
                      Required="true"
                      For="@(() => model.Password)"
                      Style="border-radius: 0.5rem;" />
    </div>

    <MudButton Variant="Variant.Filled"
               Color="Color.Primary"
               Size="Size.Large"
               FullWidth="true"
               Disabled="!success || isProcessing"
               OnClick="HandleRegister"
               Class="btn-submit">
        @if (isProcessing)
        {
            <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
            <span class="ms-2">Creating account...</span>
        }
        else
        {
            <span>Create Account</span>
        }
    </MudButton>
</MudForm>

<div style="text-align: center; margin-top: 1.5rem;">
    <MudText Typo="Typo.body2">
        Already have an account?
        <a class="auth-link ms-1" href="/account/login">Sign In</a>
    </MudText>
</div>

@code {
    private MudForm form = default!;
    private bool success;
    private bool isProcessing;
    private bool showPassword;

    private RegisterModel model = new();

    private class RegisterModel
    {
        public string FullName { get; set; } = "";
        public string Email { get; set; } = "";
        public string Password { get; set; } = "";
    }

    private async Task<bool> ValidateForm(EditContext context)
    {
        return await Task.FromResult(true);
    }

    private async Task HandleRegister()
    {
        await form.Validate();

        if (!success) return;

        isProcessing = true;
        StateHasChanged();

        var result = await JSRuntime.InvokeAsync<ApiJSRuntimeResponse>("apiAccountRegister", model.FullName, model.Email, model.Password);

        if (result.Status == 200)
        {
            var requireConfirmation = Configuration.GetValue<bool>("IdentitySettings:SignIn:RequireConfirmedAccount");

            if (requireConfirmation)
            {
                Snackbar.Add("Registration successful! Please check your email to confirm your account.", Severity.Info);
            }
            else
            {
                Snackbar.Add("Registration successful! You can now sign in.", Severity.Success);
            }

            await Task.Delay(500);
            Navigation.NavigateTo("/account/login");
        }
        else
        {
            Snackbar.Add(result.Title ?? "Registration failed", Severity.Error);
        }

        isProcessing = false;
        StateHasChanged();
    }

    private class ApiJSRuntimeResponse
    {
        public int? Status { get; set; }
        public string? Title { get; set; }
    }
}

<script>
    window.apiAccountRegister = async (fullName, email, password) => {
        try {
            const response = await fetch('/api/account/signup', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ fullName, email, password })
            });

            const data = await response.json();

            if (response.ok) {
                return { status: 200, title: 'Success account registration' };
            } else {
                let errorMessage = data.title || data.message || 'Registration failed';

                if (data.errors) {
                    if (Array.isArray(data.errors) && data.errors.length > 0) {
                        errorMessage = data.errors[0];
                    } else if (typeof data.errors === 'object') {
                        const firstKey = Object.keys(data.errors)[0];
                        if (firstKey) {
                            errorMessage = data.errors[firstKey][0];
                        }
                    }
                }

                return { status: response.status, title: errorMessage };
            }
        } catch (error) {
            return { status: 500, title: 'Server / Network error' };
        }
    };
</script>