Spaces:
Sleeping
Sleeping
File size: 5,092 Bytes
6f32ae8 d3d3b46 6f32ae8 | 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 100 101 102 103 104 105 106 107 108 109 110 111 | @page "/register"
@using BlazorWebAssembly.Services
@using LibraryManagement.Shared.Models
@inject AuthService AuthService
@inject NavigationManager Navigation
<div class="min-h-[90vh] flex items-center justify-center py-12 px-6">
<div class="w-full max-w-lg">
<!-- Brand / Header -->
<div class="text-center mb-12">
<h1 class="text-4xl font-black text-main mb-3 tracking-tight">Create Account</h1>
<p class="text-muted text-lg">Join our community and start your reading journey today.</p>
</div>
<!-- Register Form -->
<div class="bg-card p-10 rounded-[2.5rem] border border-border shadow-2xl shadow-primary/5">
<EditForm Model="@_registerModel" OnValidSubmit="HandleRegister" class="space-y-6">
<DataAnnotationsValidator />
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="md:col-span-2">
<label class="block text-xs font-black text-muted uppercase tracking-[0.2em] mb-2">Full Name</label>
<InputText @bind-Value="_registerModel.FullName"
class="w-full bg-body border border-border rounded-xl px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all"
placeholder="John Doe" />
</div>
<div>
<label class="block text-xs font-black text-muted uppercase tracking-[0.2em] mb-2">Email Address</label>
<InputText @bind-Value="_registerModel.Email"
class="w-full bg-body border border-border rounded-xl px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all"
placeholder="john@example.com" />
</div>
<div>
<label class="block text-xs font-black text-muted uppercase tracking-[0.2em] mb-2">Phone Number</label>
<InputText @bind-Value="_registerModel.PhoneNumber"
class="w-full bg-body border border-border rounded-xl px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all"
placeholder="+1 234 567 890" />
</div>
<div class="md:col-span-2">
<label class="block text-xs font-black text-muted uppercase tracking-[0.2em] mb-2">Password</label>
<InputText @bind-Value="_registerModel.Password" type="password"
class="w-full bg-body border border-border rounded-xl px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all"
placeholder="Minimum 6 characters" />
</div>
</div>
@if (!string.IsNullOrEmpty(_errorMessage))
{
<div class="p-4 bg-red-500/10 border border-red-500/20 rounded-xl text-red-500 text-sm font-bold text-center">
@_errorMessage
</div>
}
<button type="submit" disabled="@_isLoading"
class='w-full py-5 mt-4 rounded-xl font-black text-white bg-primary hover:bg-primary-hover transition-all transform hover:scale-[1.01] active:scale-95 shadow-xl shadow-primary/20 flex items-center justify-center gap-3'>
@if (_isLoading)
{
<div class="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
<span>Creating Account...</span>
}
else
{
<span>Get Started</span>
}
</button>
</EditForm>
</div>
<!-- Footer -->
<p class="text-center mt-10 text-muted font-medium">
Already have an account?
<a href="/login" class="text-primary font-bold hover:underline">Sign In</a>
</p>
</div>
</div>
@code {
private RegisterRequest _registerModel = new();
private bool _isLoading = false;
private string? _errorMessage;
private async Task HandleRegister()
{
_isLoading = true;
_errorMessage = null;
try
{
var success = await AuthService.RegisterAsync(_registerModel);
if (success)
{
Navigation.NavigateTo("/");
}
else
{
_errorMessage = "Registration failed. This email may already be in use.";
}
}
catch (Exception ex)
{
_errorMessage = "An unexpected error occurred. Please try again later.";
}
finally
{
_isLoading = false;
}
}
}
|