135 lines
5.0 KiB
Plaintext
135 lines
5.0 KiB
Plaintext
@page "/auth/login/staff"
|
|
@layout AuthLayout
|
|
@using WebClientTpos.Client.Components.Auth
|
|
@using WebClientTpos.Client.Services
|
|
@inherits AuthBase
|
|
|
|
@*
|
|
EN: Staff login page — centered card layout, green CTA, role hints.
|
|
VI: Trang đăng nhập Nhân viên — layout card giữa, CTA xanh lá, gợi ý vai trò.
|
|
Design: pencil-design/src/pages/tPOS/auth/login/staff-desktop.pen
|
|
*@
|
|
|
|
<PageTitle>@L["Auth_Staff_PageTitle"]</PageTitle>
|
|
|
|
<div class="auth-page">
|
|
<AuthCard Title="@L["Auth_Staff_Title"]"
|
|
Subtitle="@L["Auth_Staff_Subtitle"]"
|
|
Icon="user-check"
|
|
IconClass="auth-icon--green"
|
|
RoleBadge="@L["Auth_Staff_RoleBadge"]"
|
|
RoleBadgeClass="auth-role-badge--green"
|
|
Compact="true">
|
|
<ChildContent>
|
|
<div class="auth-form">
|
|
@if (!string.IsNullOrEmpty(_errorMessage))
|
|
{
|
|
<div style="margin-bottom:16px;padding:12px 16px;border-radius:8px;background:rgba(239,68,68,0.12);color:#EF4444;font-size:14px;display:flex;align-items:center;gap:8px;">
|
|
<i data-lucide="alert-circle" style="width:16px;height:16px;flex-shrink:0;"></i>
|
|
<span>@_errorMessage</span>
|
|
</div>
|
|
}
|
|
|
|
<AuthInput Label="@L["Auth_Staff_IdLabel"]"
|
|
InputType="text"
|
|
Placeholder="@L["Auth_Staff_IdPlaceholder"]"
|
|
PrefixIcon="user"
|
|
InputId="staff-id"
|
|
AutoComplete="username"
|
|
Value="@_email"
|
|
ValueChanged="@(e => _email = e.Value?.ToString() ?? "")" />
|
|
|
|
<AuthInput Label="@L["Auth_Staff_PasswordLabel"]"
|
|
InputType="password"
|
|
Placeholder="••••••••"
|
|
PrefixIcon="lock"
|
|
InputId="staff-password"
|
|
AutoComplete="current-password"
|
|
Value="@_password"
|
|
ValueChanged="@(e => _password = e.Value?.ToString() ?? "")" />
|
|
</div>
|
|
|
|
<AuthButton Variant="green" IconName="log-in" Disabled="@_isLoading" Loading="@_isLoading" OnClick="HandleLogin">
|
|
@if (_isLoading)
|
|
{
|
|
<span>Đang xử lý...</span>
|
|
}
|
|
else
|
|
{
|
|
@L["Auth_Staff_Submit"]
|
|
}
|
|
</AuthButton>
|
|
</ChildContent>
|
|
<FooterContent>
|
|
<div class="auth-role-hints">
|
|
<span class="auth-role-hints-title">@L["Auth_Staff_Roles"]</span>
|
|
<div class="auth-role-list">
|
|
<span class="auth-role-item">
|
|
<i data-lucide="monitor"></i> @L["Auth_Staff_RoleCashier"]
|
|
</span>
|
|
<span class="auth-role-item">
|
|
<i data-lucide="coffee"></i> @L["Auth_Staff_RoleBarista"]
|
|
</span>
|
|
<span class="auth-role-item">
|
|
<i data-lucide="clipboard-list"></i> @L["Auth_Staff_RoleWaiter"]
|
|
</span>
|
|
<span class="auth-role-item">
|
|
<i data-lucide="settings"></i> @L["Auth_Staff_RoleManager"]
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<span class="auth-footer-text">
|
|
@L["Auth_Staff_ForgotPwd"] <a href="/forgot-password">@L["Auth_Staff_ContactManager"]</a>
|
|
</span>
|
|
</FooterContent>
|
|
</AuthCard>
|
|
</div>
|
|
|
|
@code {
|
|
[Inject] private AuthService AuthSvc { get; set; } = default!;
|
|
[Inject] private NavigationManager Nav { get; set; } = default!;
|
|
[Inject] private PosDataService DataService { get; set; } = default!;
|
|
|
|
private string _email = "";
|
|
private string _password = "";
|
|
private bool _isLoading = false;
|
|
private string? _errorMessage;
|
|
|
|
private async Task HandleLogin()
|
|
{
|
|
if (_isLoading) return;
|
|
_errorMessage = null;
|
|
|
|
if (string.IsNullOrWhiteSpace(_email))
|
|
{
|
|
_errorMessage = "Vui lòng nhập mã nhân viên";
|
|
return;
|
|
}
|
|
if (string.IsNullOrWhiteSpace(_password))
|
|
{
|
|
_errorMessage = "Vui lòng nhập mật khẩu";
|
|
return;
|
|
}
|
|
|
|
_isLoading = true;
|
|
StateHasChanged();
|
|
|
|
var (ok, error) = await AuthSvc.LoginAsync(_email, _password);
|
|
|
|
if (ok)
|
|
{
|
|
// EN: Route to staff dashboard — StaffLayout will detect role
|
|
// VI: Dieu huong den staff dashboard — StaffLayout se phat hien vai tro
|
|
_isLoading = false;
|
|
StateHasChanged();
|
|
await Task.Delay(500);
|
|
Nav.NavigateTo("/staff/dashboard", forceLoad: true);
|
|
}
|
|
else
|
|
{
|
|
_errorMessage = error ?? "Đăng nhập thất bại";
|
|
_isLoading = false;
|
|
}
|
|
}
|
|
}
|