Files
Nexus.Reader/src/NexusReader.UI.Shared/Pages/Account/Login.razor
T
Antigravity 76b828395d feat: Mobile-First Layout Redesign & D3.js Graph Stabilization (#58)
This PR implements a comprehensive mobile-first design overhaul for the Reader, Dashboard, and Navigation layouts.

### Key Accomplishments
1. **Dynamic Viewport Synchronization**: Installed robust `ResizeObserver` listener on the client side with automatic reactive toggling of `platform-mobile`/`platform-desktop` CSS classes.
2. **Tab Controller & Visibility Fixes**: Refactored visibility constraints in `ReaderLayout.razor.css` to prevent layout clipping and DOM bloat. Standardized the mobile tab content selectors to ensure active views display perfectly.
3. **D3.js Graph Stabilization**:
   * Added checks to bypass resize callbacks when the graph container is hidden (`clientWidth <= 0` or `clientHeight <= 0`).
   * Guarded coordination ticks, node focus transformations, and zoom transitions against `NaN` parameters.
4. **Interactive Mobile UX Enhancements**: Optimized touch target sizing (44px target bounds) and interactive transitions for a state-of-the-art visual presentation.

This has been successfully compiled and verified against the standard .NET 10 compilation gates.

---------

Co-authored-by: Marek Jasiński <jasins.marek@gmail.com>
Reviewed-on: #58
Co-authored-by: Antigravity <antigravity@google.com>
Co-committed-by: Antigravity <antigravity@google.com>
2026-05-27 09:56:09 +00:00

199 lines
7.4 KiB
Plaintext

@page "/account/login"
@layout AuthLayout
@attribute [AllowAnonymous]
@using Microsoft.AspNetCore.Components.Forms
@using NexusReader.UI.Shared.Services
@using NexusReader.UI.Shared.Components.Atoms
@inject IIdentityService IdentityService
@inject NavigationManager NavigationManager
@inject IJSRuntime JS
@inject IConfiguration Configuration
<div class="login-page-container">
<div class="mesh-bg"></div>
<div class="auth-card">
<div class="auth-header">
<div class="logo-box">
<NexusIcon Name="robot" Size="48" />
</div>
<h1 class="app-name">E-Czytnik <span>AI</span></h1>
<p class="auth-subtitle">Zaloguj się do E-Czytnika AI</p>
</div>
<div class="social-auth">
<button type="button" class="btn-google-auth" @onclick="HandleGoogleLogin">
<img src="https://www.gstatic.com/images/branding/product/1x/gsa_512dp.png" alt="Google"
style="width: 20px !important; height: 20px !important; flex-shrink: 0;" />
<span>Zaloguj się przez Google</span>
</button>
</div>
<div class="auth-divider">
<span>lub</span>
</div>
<EditForm Model="@_loginModel" OnValidSubmit="HandleLogin" class="auth-form">
<DataAnnotationsValidator />
<div class="field-group">
<div class="field-icon">
<NexusIcon Name="mail" Size="18" />
</div>
<InputText id="email" @bind-Value="_loginModel.Email" placeholder="E-mail" class="field-input" />
</div>
<ValidationMessage For="@(() => _loginModel.Email)" class="auth-validation" />
<div class="field-group">
<div class="field-icon">
<NexusIcon Name="lock" Size="18" />
</div>
<InputText id="password" type="@(_showPassword ? "text" : "password")"
@bind-Value="_loginModel.Password" placeholder="Hasło" class="field-input" />
<button type="button" class="toggle-visibility" @onclick="TogglePassword">
<NexusIcon Name="@(_showPassword ? "eye-off" : "eye")" Size="18" />
</button>
</div>
<ValidationMessage For="@(() => _loginModel.Password)" class="auth-validation" />
@if (!string.IsNullOrEmpty(_errorMessage))
{
<div class="auth-error">@_errorMessage</div>
}
<div class="auth-options">
<label class="remember-me">
<InputCheckbox @bind-Value="_loginModel.RememberMe" />
<span>Zapamiętaj mnie</span>
</label>
</div>
<button type="submit" class="btn-submit-auth" disabled="@_isSubmitting">
@if (_isSubmitting)
{
<div class="auth-loader"></div>
}
else
{
<span>Zaloguj się</span>
}
</button>
</EditForm>
<div class="auth-footer">
@if (_allowPasswordReset)
{
<a href="/account/forgot-password" class="auth-link">Zapomniałem hasła?</a>
}
@if (_allowRegistration)
{
<p class="auth-switch">Nie masz konta? <a href="/account/register">Zarejestruj się</a></p>
}
</div>
<div class="auth-legal">
Korzystając z usługi, akceptujesz <a href="/terms">Regulamin</a> i <a href="/privacy">Politykę
Prywatności</a>
</div>
</div>
</div>
<form id="nexusLoginForm" method="post" action="/account/login-form" style="display:none">
<input type="hidden" name="email" value="@_loginModel.Email" />
<input type="hidden" name="password" value="@_loginModel.Password" />
<input type="hidden" name="rememberMe" value="@(_loginModel.RememberMe ? "true" : "false")" />
<input type="hidden" name="returnUrl" value="@ReturnUrl" />
</form>
@code {
[CascadingParameter]
private Task<AuthenticationState>? AuthStateTask { get; set; }
[Parameter]
[SupplyParameterFromQuery(Name = "error")]
public string? ErrorCode { get; set; }
[Parameter]
[SupplyParameterFromQuery(Name = "returnUrl")]
public string? ReturnUrl { get; set; }
private LoginModel _loginModel = new();
private string? _errorMessage;
private bool _isSubmitting;
private bool _showPassword;
private bool _allowRegistration;
private bool _allowPasswordReset;
protected override async Task OnInitializedAsync()
{
_allowRegistration = Configuration.GetValue<bool?>("Features:AllowRegistration") ?? true;
_allowPasswordReset = Configuration.GetValue<bool?>("Features:AllowPasswordReset") ?? true;
if (!string.IsNullOrEmpty(ErrorCode))
{
_errorMessage = ErrorCode switch
{
"ExternalLoginFailed" => "Nie udało się zalogować przez Google. Spróbuj ponownie.",
"ProvisioningFailed" => "Wystąpił błąd podczas przygotowywania Twojego konta.",
"UserAlreadyExists" => "Użytkownik o tym adresie e-mail już istnieje. Zaloguj się tradycyjnie hasłem.",
"LockedOut" => "Twoje konto zostało zablokowane. Spróbuj ponownie później.",
"InvalidCredentials" => "Nieprawidłowy e-mail lub hasło.",
"RegistrationDisabled" => "Rejestracja jest wyłączona w tym środowisku.",
_ => "Wystąpił nieoczekiwany błąd podczas logowania."
};
}
if (AuthStateTask != null)
{
var authState = await AuthStateTask;
if (authState.User.Identity?.IsAuthenticated == true)
{
NavigationManager.NavigateTo(string.IsNullOrEmpty(ReturnUrl) ? "/" : ReturnUrl);
}
}
}
private async Task HandleLogin()
{
_isSubmitting = true;
_errorMessage = null;
try
{
var result = await IdentityService.LoginAsync(_loginModel.Email, _loginModel.Password, _loginModel.RememberMe);
if (result.IsSuccess)
{
// Trigger hidden form submission via robust JS helper to perform cookie-based sign-in
await JS.InvokeVoidAsync("nexusAuth.submitLoginForm", "nexusLoginForm", _loginModel.Email, _loginModel.Password, _loginModel.RememberMe);
}
else
{
_errorMessage = result.Errors.FirstOrDefault()?.Message ?? "Nieprawidłowy e-mail lub hasło.";
}
}
catch (Exception ex)
{
_errorMessage = $"Wystąpił błąd logowania: {ex.Message}.";
}
finally
{
_isSubmitting = false;
}
}
private void HandleGoogleLogin() => NavigationManager.NavigateTo("identity/login/google", forceLoad: true);
private void TogglePassword() => _showPassword = !_showPassword;
public class LoginModel
{
[System.ComponentModel.DataAnnotations.Required]
[System.ComponentModel.DataAnnotations.EmailAddress]
public string Email { get; set; } = string.Empty;
[System.ComponentModel.DataAnnotations.Required]
public string Password { get; set; } = string.Empty;
public bool RememberMe { get; set; }
}
}