Spaces:
Running
Running
File size: 5,755 Bytes
3418204 f6d34ff 3418204 f6d34ff 3418204 f6d34ff be17a46 f6d34ff 3418204 f6d34ff 3418204 f6d34ff 3418204 f6d34ff 3418204 f6d34ff 3418204 f6d34ff 3418204 47e77e5 3418204 f6d34ff 3418204 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | @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");
}
}
|