@inject HttpClient Client @inject IDialogService DialogService @inject LoginService LoginService @inject NavigationManager NavigationManager @inject IStringUtil StringUtil @page "/Users" <MudText Typo="Typo.h4">@Localizer["users"]</MudText> <MudGrid Class="my-8"> @if (response is null) { @for (uint i = 0; i < 3; i++) { <MudItem xs="12" md="6" lg="4"> <MudCard Outlined="true"> <MudCardContent> <MudSkeleton Width="30%" Height="42px;" Class="mb-5" /> <MudSkeleton Width="80%" /> <MudSkeleton Width="100%" /> </MudCardContent> <MudCardActions> <MudStack Row="true" Style="width:100%" Spacing="4" Justify="Justify.FlexEnd"> <MudSkeleton Width="64px" Height="40px" /> <MudSkeleton Width="64px" Height="40px" /> </MudStack> </MudCardActions> </MudCard> </MudItem> } } else if (response.Users.Count != 0) { if (LoginService.IsAdmin || !LoginService.LoginRequired) // Admin mode, can see all users { @foreach (var user in response.Users) { <MudItem xs="12" md="6" lg="4"> <MudCard Outlined="true"> <MudCardHeader> <CardHeaderContent> <MudText Typo="Typo.h6" Style="font-weight:bold">@Localizer["user"]: @user.Baid</MudText> </CardHeaderContent> <CardHeaderActions> <MudMenu Icon="@Icons.Material.Filled.MoreVert" Dense="true" AnchorOrigin="Origin.BottomLeft" TransformOrigin="Origin.TopLeft" Size="Size.Small"> <MudMenuItem Icon="@Icons.Material.Filled.QrCode" OnClick="@(_ => ShowQrCode(user))" OnTouch="@(_ => ShowQrCode(user))" IconColor="@Color.Primary"> @Localizer["Show QR Code"] </MudMenuItem> <MudDivider /> <MudMenuItem Icon="@Icons.Material.Filled.FeaturedPlayList" Href="@($"Users/{user.Baid}/AccessCode")" IconColor="@Color.Primary"> @Localizer["Manage Access Codes"] </MudMenuItem> <MudDivider /> @if (LoginService.OnlyAdmin || LoginService.LoginRequired) { <MudMenuItem Icon="@Icons.Material.Filled.Lock" Href="@($"Users/ChangePassword")" IconColor="@Color.Primary"> @Localizer["Change Password"] </MudMenuItem> <MudDivider /> <MudMenuItem Icon="@Icons.Material.Filled.LockReset" OnClick="@(_ => ResetPassword(user))" OnTouch="@(_ => ResetPassword(user))" IconColor="@Color.Primary"> @Localizer["Reset Password"] </MudMenuItem> <MudDivider /> } @if (LoginService.AllowUserDelete) { <MudMenuItem Icon="@Icons.Material.Filled.Delete" OnClick="@(_ => DeleteUser(user))" OnTouch="@(_ => DeleteUser(user))" IconColor="@Color.Error"> @Localizer["Delete User"] </MudMenuItem> } </MudMenu> </CardHeaderActions> </MudCardHeader> <MudCardContent> <MudText Style="font-weight:bold">Access Code</MudText> <MudText Style="font-family:monospace;overflow:hidden;overflow-x:scroll"> @foreach (var digitGroup in StringUtil.SplitIntoGroups(user.AccessCodes[0], 4)) { <span class="mr-2">@digitGroup</span> } </MudText> @if (user.AccessCodes.Count > 1) { <MudText Typo="Typo.caption">... and @(user.AccessCodes.Count - 1) other access code(s)</MudText> } </MudCardContent> <MudCardActions> <MudStack Row="true" Style="width:100%" Spacing="4" Justify="Justify.FlexEnd"> <MudButton Href="@($"Users/{user.Baid}/Profile")" Size="Size.Small" Variant="Variant.Text" StartIcon="@Icons.Material.Filled.Edit" Color="Color.Primary"> @Localizer["edit profile"] </MudButton> <MudMenu Size="Size.Small" Dense="true" Color="Color.Primary" Label="@Localizer["view play data"]" StartIcon="@Icons.Material.Filled.FeaturedPlayList" EndIcon="@Icons.Material.Filled.KeyboardArrowDown" FullWidth="true" AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter"> <MudMenuItem Href="@($"Users/{user.Baid}/HighScores")">@Localizer["high scores"]</MudMenuItem> <MudMenuItem Href="@($"Users/{user.Baid}/DaniDojo")">@Localizer["dani dojo"]</MudMenuItem> </MudMenu> </MudStack> </MudCardActions> </MudCard> </MudItem> } } else { @if (!LoginService.IsLoggedIn) // Not logged in, show login form { <MudContainer> <MudGrid Justify="Justify.Center"> <MudItem xs="12" md="6" lg="4" class="mt-8"> <MudCard> <MudCardContent> <MudForm @ref="loginForm"> <MudText Typo="Typo.h4" Align="Align.Center">Login</MudText> <MudTextField @bind-value="inputAccessCode" InputType="InputType.Text" T="string" FullWidth="true" Required="@true" RequiredError="Access code is required" Label="Access code" /> <MudTextField @bind-Value="inputPassword" InputType="InputType.Password" T="string" FullWidth="true" Required="@true" RequiredError="Password is required" Label="Password"> </MudTextField> <MudStack Row="true"> <MudButton OnClick="OnLogin" FullWidth="true" Class="mt-3" StartIcon="@Icons.Material.Filled.Login" Color="Color.Primary" Variant="Variant.Filled">Login</MudButton> @if (!LoginService.OnlyAdmin) { <MudButton Href="@("Users/Register")" FullWidth="true" Class="mt-3" StartIcon="@Icons.Material.Filled.AddCard" Color="Color.Primary" Variant="Variant.Filled">Register</MudButton> } </MudStack> </MudForm> </MudCardContent> </MudCard> </MudItem> </MudGrid> </MudContainer> } else { var user = LoginService.GetLoggedInUser(); // Logged in, show only own user <MudGrid Justify="Justify.Center"> <MudItem xs="12" md="6" lg="4"> <MudCard Outlined="true"> <MudCardHeader> <CardHeaderContent> <MudText Typo="Typo.h6" Style="font-weight:bold">User: @user.Baid</MudText> </CardHeaderContent> <CardHeaderActions> <MudMenu Icon="@Icons.Material.Filled.MoreVert" Dense="true" AnchorOrigin="Origin.BottomLeft" TransformOrigin="Origin.TopLeft" Size="Size.Small"> <MudMenuItem Icon="@Icons.Material.Filled.QrCode" OnClick="@(_ => ShowQrCode(user))" OnTouch="@(_ => ShowQrCode(user))" IconColor="@Color.Primary"> Show QR Code </MudMenuItem> <MudDivider /> <MudMenuItem Icon="@Icons.Material.Filled.FeaturedPlayList" Href="@($"Users/{user.Baid}/AccessCode")" IconColor="@Color.Primary"> Manage Access Codes </MudMenuItem> <MudDivider /> <MudMenuItem Icon="@Icons.Material.Filled.Lock" Href="@($"Users/ChangePassword")" IconColor="@Color.Primary"> Change Password </MudMenuItem> @if (LoginService.AllowUserDelete) { <MudDivider /> <MudMenuItem Icon="@Icons.Material.Filled.Delete" OnClick="@(_ => DeleteUser(user))" OnTouch="@(_ => DeleteUser(user))" IconColor="@Color.Error"> Delete User </MudMenuItem> } </MudMenu> </CardHeaderActions> </MudCardHeader> <MudCardContent> <MudText Style="font-weight:bold">Access Code</MudText> <MudText> @foreach (var digitGroup in StringUtil.SplitIntoGroups(user.AccessCodes[0], 4)) { <span class="mr-2">@digitGroup</span> } </MudText> <MudText Typo="Typo.caption">... and @(user.AccessCodes.Count - 1) other access code(s)</MudText> @if (user.AccessCodes.Count > 1) { <MudText Typo="Typo.caption">... and @(user.AccessCodes.Count - 1) other access code(s)</MudText> } </MudCardContent> <MudCardActions> <MudStack Row="true" Style="width:100%" Spacing="4" Justify="Justify.FlexEnd"> <MudButton Href="@($"Users/{user.Baid}/Profile")" Size="Size.Small" Variant="Variant.Text" StartIcon="@Icons.Material.Filled.Edit" Color="Color.Primary"> Edit Profile </MudButton> <MudMenu Size="Size.Small" Dense="true" Color="Color.Primary" Label="View Play Data" StartIcon="@Icons.Material.Filled.DataExploration" EndIcon="@Icons.Material.Filled.KeyboardArrowDown" FullWidth="true" AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter"> <MudMenuItem Href="@($"Users/{user.Baid}/HighScores")">High Scores</MudMenuItem> <MudMenuItem Href="@($"Users/{user.Baid}/DaniDojo")">Dani Dojo</MudMenuItem> </MudMenu> </MudStack> </MudCardActions> </MudCard> </MudItem> </MudGrid> } } } else { // No users in the database <MudItem xs="12"> <MudText Align="Align.Center" Class="my-8"> @Localizer["No data."] </MudText> </MudItem> } </MudGrid>