d87315ba49
- Create Layout/AuthLayout.razor with nav bar for auth pages - Replace Pages/Home.razor with branded landing page (hero + 4 feature cards) - Create Pages/Auth/LoginSelect.razor with 4 role-based login cards - Add Spa & Beauty store type to OnboardingStore.razor onboarding flow Co-authored-by: Velik <hongochai10@users.noreply.github.com>
58 lines
3.1 KiB
Plaintext
58 lines
3.1 KiB
Plaintext
@page "/auth/login"
|
|
@layout AuthLayout
|
|
@inject NavigationManager Navigation
|
|
@inject IJSRuntime JS
|
|
|
|
<PageTitle>Chọn loại tài khoản — GoodGo POS</PageTitle>
|
|
|
|
<div style="min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 24px 60px;">
|
|
|
|
<h1 style="font-size:28px;font-weight:800;color:var(--pos-text-primary, #FFFFFF);margin:0 0 8px;text-align:center;">
|
|
Chọn loại tài khoản
|
|
</h1>
|
|
<p style="font-size:15px;color:var(--pos-text-tertiary, #ADADB0);margin:0 0 40px;text-align:center;">
|
|
Đăng nhập với vai trò phù hợp
|
|
</p>
|
|
|
|
<div style="display:grid;grid-template-columns:repeat(2, 1fr);gap:16px;max-width:560px;width:100%;">
|
|
@foreach (var role in _roles)
|
|
{
|
|
<div @onclick="() => Navigation.NavigateTo(role.Href)"
|
|
style="background:var(--pos-bg-elevated, #18181B);border:2px solid var(--pos-border-default, #2A2A2E);border-radius:var(--pos-radius, 12px);padding:28px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;cursor:pointer;transition:border-color 0.2s, transform 0.15s;"
|
|
onmouseover="this.style.borderColor='@role.Color';this.style.transform='translateY(-2px)';"
|
|
onmouseout="this.style.borderColor='var(--pos-border-default, #2A2A2E)';this.style.transform='none';">
|
|
<div style="width:48px;height:48px;border-radius:12px;background:@(role.Color)18;display:flex;align-items:center;justify-content:center;">
|
|
<i data-lucide="@role.Icon" style="width:24px;height:24px;color:@role.Color;"></i>
|
|
</div>
|
|
<h3 style="font-size:15px;font-weight:700;color:var(--pos-text-primary, #FFFFFF);margin:0;">@role.Title</h3>
|
|
<p style="font-size:12px;color:var(--pos-text-tertiary, #ADADB0);margin:0;line-height:1.4;">@role.Description</p>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<p style="margin-top:32px;font-size:14px;color:var(--pos-text-tertiary, #ADADB0);">
|
|
Chưa có tài khoản?
|
|
<a href="/register" style="color:var(--pos-orange-primary, #FF5C00);text-decoration:none;font-weight:600;">Đăng ký ngay</a>
|
|
</p>
|
|
</div>
|
|
|
|
@code {
|
|
protected override async Task OnAfterRenderAsync(bool firstRender)
|
|
{
|
|
if (firstRender)
|
|
{
|
|
try { await JS.InvokeVoidAsync("lucide.createIcons"); } catch { }
|
|
}
|
|
}
|
|
|
|
private record RoleCard(string Title, string Href, string Icon, string Color, string Description);
|
|
|
|
private readonly RoleCard[] _roles =
|
|
[
|
|
new("Chủ doanh nghiệp", "/auth/login/admin", "building", "#3B82F6", "Quản lý toàn bộ hệ thống, cửa hàng, nhân viên"),
|
|
new("Quản lý chi nhánh", "/auth/login/branch", "store", "#8B5CF6", "Quản lý chi nhánh, ca làm việc, báo cáo"),
|
|
new("Nhân viên", "/auth/login/staff", "user-check", "#22C55E", "Thu ngân, barista, phục vụ, bếp"),
|
|
new("Khách hàng", "/auth/login/customer", "heart", "#EC4899", "Tích điểm, ưu đãi, lịch sử mua hàng"),
|
|
];
|
|
}
|