TaikoLocalServer/TaikoWebUI/Pages/AccessCode.razor

@page "/Users/{baid:int}/AccessCode"
@inject HttpClient Client
@inject IDialogService DialogService
@inject LoginService LoginService
@inject NavigationManager NavigationManager

<MudBreadcrumbs Items="breadcrumbs" Class="px-0"></MudBreadcrumbs>

<h1>Access Code Management</h1>
<MudText Typo="Typo.caption">User: @Baid</MudText>

@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 ((LoginService.LoginRequired && (!LoginService.IsLoggedIn || (LoginService.GetLoggedInUser().Baid != Baid && !LoginService.IsAdmin))) || User is null)
        {
            <MudItem xs="12" md="6" lg="4">
                <MudText Align="Align.Center" Class="my-8">
                    Please log in by clicking on "Users" tab first.
                </MudText>
            </MudItem>
        }
        else
        {
            <MudGrid Justify="Justify.Center">
                <MudItem xs="12" md="6" lg="4">
                    <MudCard>
                        <MudCardContent>
                            <MudForm @ref="bindAccessCodeForm">
                                <MudText Typo="Typo.h4" Align="Align.Center">Bind New Access Code</MudText>
                                <MudTextField @bind-value="inputAccessCode" InputType="InputType.Text" T="string"
                                              FullWidth="true" Required="@true" RequiredError="Access Code is required"
                                              Label="New Access Code"/>
                                <MudButton OnClick="OnBind" FullWidth="true" Class="mt-3" StartIcon="@Icons.Material.Filled.AddCard" Color="Color.Primary" Variant="Variant.Filled">Bind</MudButton>
                            </MudForm>
                        </MudCardContent>
                    </MudCard>
                </MudItem>
            <MudDivider/>
            @for (var idx = 0; idx < User.AccessCodes.Count; idx++)
            {
                var accessCode = User.AccessCodes[idx];
                var localIdx = idx + 1;
                <MudItem xs="12" md="6" lg="4">
                    <MudCard Outlined="true">
                        <MudCardHeader>
                            <CardHeaderContent>
                                <MudText Typo="Typo.h6" Style="font-weight:bold">User Access Code @localIdx</MudText>
                            </CardHeaderContent>
                        </MudCardHeader>
                        <MudCardContent>
                            <MudText Style="font-weight:bold">@accessCode</MudText>
                        </MudCardContent>
                        <MudCardActions>
                            <MudButton OnClick="@(_ => DeleteAccessCode(accessCode))"
                                       Size="Size.Small" Variant="Variant.Text" StartIcon="@Icons.Material.Filled.Delete"
                                       Color="Color.Primary">
                                Delete Access Code
                            </MudButton>
                        </MudCardActions>
                    </MudCard>
                </MudItem>
                <MudDivider/>
            }
            </MudGrid>
        }
    }