141 lines
6.3 KiB
Plaintext
141 lines
6.3 KiB
Plaintext
@page "/login"
|
||
@attribute [AllowAnonymous]
|
||
@inject NavigationManager Nav
|
||
|
||
<PageTitle>Anmelden – Timetracker</PageTitle>
|
||
|
||
<MudContainer MaxWidth="MaxWidth.Small" Class="mt-16">
|
||
<MudStack AlignItems="AlignItems.Center" Spacing="4">
|
||
|
||
@* ── Logo / Header ── *@
|
||
<MudStack AlignItems="AlignItems.Center" Spacing="1">
|
||
<MudIcon Icon="@Icons.Material.Filled.AccessTime"
|
||
Style="font-size:4rem; color:#1565C0" />
|
||
<MudText Typo="Typo.h4" Style="font-weight:700; color:#1565C0">Timetracker</MudText>
|
||
</MudStack>
|
||
|
||
<MudPaper Elevation="4" Class="pa-6 rounded-xl" Style="width:100%">
|
||
@* ── Static Tab Navigation ── *@
|
||
<MudStack Row="true" Justify="Justify.Center" Class="mb-4">
|
||
<MudButton Href="/login"
|
||
Variant="@(_activeTab == 0 ? Variant.Filled : Variant.Text)"
|
||
Color="Color.Primary"
|
||
Style="min-width: 120px; border-radius: 20px;">
|
||
Anmelden
|
||
</MudButton>
|
||
<MudButton Href="/login?tab=register"
|
||
Variant="@(_activeTab == 1 ? Variant.Filled : Variant.Text)"
|
||
Color="Color.Primary"
|
||
Style="min-width: 120px; border-radius: 20px;">
|
||
Registrieren
|
||
</MudButton>
|
||
</MudStack>
|
||
|
||
<MudDivider Class="mb-6" />
|
||
|
||
@if (_activeTab == 0)
|
||
{
|
||
@* ── Login Form ── *@
|
||
<MudStack Spacing="3">
|
||
@if (_error != null)
|
||
{
|
||
<MudAlert Severity="Severity.Error" Dense="true">@_error</MudAlert>
|
||
}
|
||
<form action="/auth/login" method="post">
|
||
<MudStack Spacing="3">
|
||
<MudTextField T="string"
|
||
Label="Benutzername"
|
||
Variant="Variant.Outlined"
|
||
Adornment="Adornment.Start"
|
||
AdornmentIcon="@Icons.Material.Filled.Person"
|
||
name="username"
|
||
Required="true"
|
||
AutoFocus="true" />
|
||
<MudTextField T="string"
|
||
Label="Passwort"
|
||
Variant="Variant.Outlined"
|
||
Adornment="Adornment.Start"
|
||
AdornmentIcon="@Icons.Material.Filled.Lock"
|
||
InputType="InputType.Password"
|
||
name="password"
|
||
Required="true" />
|
||
<MudButton ButtonType="ButtonType.Submit"
|
||
Variant="Variant.Filled"
|
||
Color="Color.Primary"
|
||
FullWidth="true"
|
||
Size="Size.Large"
|
||
StartIcon="@Icons.Material.Filled.Login"
|
||
Class="mt-2">
|
||
Anmelden
|
||
</MudButton>
|
||
</MudStack>
|
||
</form>
|
||
</MudStack>
|
||
}
|
||
else
|
||
{
|
||
@* ── Register Form ── *@
|
||
<MudStack Spacing="3">
|
||
@if (_error != null)
|
||
{
|
||
<MudAlert Severity="Severity.Error" Dense="true">@_error</MudAlert>
|
||
}
|
||
<form action="/auth/register" method="post">
|
||
<MudStack Spacing="3">
|
||
<MudTextField T="string"
|
||
Label="Benutzername"
|
||
Variant="Variant.Outlined"
|
||
Adornment="Adornment.Start"
|
||
AdornmentIcon="@Icons.Material.Filled.Person"
|
||
name="username"
|
||
Required="true"
|
||
HelperText="Mindestens 3 Zeichen" />
|
||
<MudTextField T="string"
|
||
Label="Passwort"
|
||
Variant="Variant.Outlined"
|
||
Adornment="Adornment.Start"
|
||
AdornmentIcon="@Icons.Material.Filled.Lock"
|
||
InputType="InputType.Password"
|
||
name="password"
|
||
Required="true"
|
||
HelperText="Mindestens 6 Zeichen" />
|
||
<MudButton ButtonType="ButtonType.Submit"
|
||
Variant="Variant.Filled"
|
||
Color="Color.Secondary"
|
||
FullWidth="true"
|
||
Size="Size.Large"
|
||
StartIcon="@Icons.Material.Filled.PersonAdd"
|
||
Class="mt-2">
|
||
Konto erstellen
|
||
</MudButton>
|
||
</MudStack>
|
||
</form>
|
||
</MudStack>
|
||
}
|
||
</MudPaper>
|
||
</MudStack>
|
||
</MudContainer>
|
||
|
||
@code {
|
||
private int _activeTab = 0;
|
||
private string? _error;
|
||
|
||
[SupplyParameterFromQuery(Name = "error")]
|
||
public string? ErrorParam { get; set; }
|
||
|
||
[SupplyParameterFromQuery(Name = "tab")]
|
||
public string? TabParam { get; set; }
|
||
|
||
protected override void OnParametersSet()
|
||
{
|
||
_error = ErrorParam switch
|
||
{
|
||
"invalid" => "Benutzername oder Passwort falsch.",
|
||
not null => Uri.UnescapeDataString(ErrorParam),
|
||
_ => null
|
||
};
|
||
_activeTab = TabParam == "register" ? 1 : 0;
|
||
}
|
||
}
|
||
|