TaskTrackingSystem.WebApp/Components/Pages/Features/Auth/Register.razor

@page "/register"
@using TaskTrackingSystem.WebApp.Components.Partial
@layout Layout.EmptyLayout
@rendermode @(new InteractiveServerRenderMode(prerender: false))
@attribute [Microsoft.AspNetCore.Authorization.AllowAnonymous]
@inject IJSRuntime JS

<PageTitle>Register - Taskify</PageTitle>

<div class="flex min-h-screen items-center justify-center bg-slate-50 px-4 py-10 sm:px-6 lg:px-8">
    <div class="w-full max-w-md space-y-7 rounded-xl border border-slate-200 bg-white p-8 shadow-sm">
        <div>
            <div class="flex justify-center">
                <span class="flex h-12 w-12 items-center justify-center rounded-xl bg-violet-600 text-white shadow-sm">
                    <i data-lucide="clipboard-check" class="h-6 w-6"></i>
                </span>
            </div>
            <h2 class="mt-5 text-center text-2xl font-bold text-slate-900">Create your Taskify account</h2>
            <p class="mt-2 text-center text-sm text-slate-600">
                Already have access?
                <a href="/login" class="font-semibold text-violet-600 hover:underline">Sign in</a>
            </p>
        </div>

        <form method="post" action="/account/register" class="space-y-5">
            <AntiforgeryToken />

            <div class="space-y-4">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label for="firstName" class="block text-sm font-medium text-slate-700 mb-1">First Name</label>
                        <input id="firstName" name="FirstName" required placeholder="First name"
                               class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-900 focus:border-transparent transition-all" />
                    </div>
                    <div>
                        <label for="lastName" class="block text-sm font-medium text-slate-700 mb-1">Last Name</label>
                        <input id="lastName" name="LastName" required placeholder="Last name"
                               class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-900 focus:border-transparent transition-all" />
                    </div>
                </div>
                <div>
                    <label for="username" class="block text-sm font-medium text-slate-700 mb-1">Username</label>
                    <input id="username" name="Username" required placeholder="username"
                           class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-900 focus:border-transparent transition-all" />
                </div>
                <div>
                    <label for="email" class="block text-sm font-medium text-slate-700 mb-1">Email</label>
                    <input id="email" name="Email" type="email" required placeholder="user@example.com"
                           class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-900 focus:border-transparent transition-all" />
                </div>
                <div>
                    <label for="phone" class="block text-sm font-medium text-slate-700 mb-1">Phone (Optional)</label>
                    <input id="phone" name="Phone" placeholder="Phone number"
                           class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-900 focus:border-transparent transition-all" />
                </div>
                <div class="relative">
                    <label for="password" class="block text-sm font-medium text-slate-700 mb-1">Password</label>
                    <input id="password" name="Password" type="@(showPassword ? "text" : "password")" required placeholder="Password"
                           class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-900 focus:border-transparent transition-all pr-10" />
                    <button type="button" @onclick="TogglePassword" class="absolute right-3 top-[28px] text-slate-400 hover:text-slate-600 focus:outline-none">
                        <i data-lucide="@(showPassword ? "eye-off" : "eye")" class="h-5 w-5"></i>
                    </button>
                </div>
            </div>

            @if (!string.IsNullOrEmpty(Error))
            {
                <div class="p-3 rounded-lg border" style="background-color: var(--status-warning-bg); border-color: rgba(153, 27, 27, 0.2);">
                    <p class="text-sm text-center" style="color: var(--text-primary); font-weight: 500;">@Error</p>
                </div>
            }

            <div>
                <button type="submit" class="group relative flex w-full justify-center rounded-lg bg-violet-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-violet-700">
                    Register
                </button>
            </div>
        </form>
    </div>
</div>

@code {
    [SupplyParameterFromQuery(Name = "error")]
    private string? Error { get; set; }

    private bool showPassword = false;

    private async Task TogglePassword()
    {
        showPassword = !showPassword;
        await JS.InvokeVoidAsync("initIcons");
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await JS.InvokeVoidAsync("initIcons");
    }
}