76b828395d
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>
199 lines
7.4 KiB
Plaintext
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; }
|
|
}
|
|
}
|