TaikoLocalServer/TaikoWebUI/Pages/AccessCode.razor

@page "/Users/{baid:int}/AccessCode"
@inject HttpClient Client
@inject IDialogService DialogService
@inject AuthService AuthService
@inject NavigationManager NavigationManager
@inject BreadcrumbsStateContainer BreadcrumbsStateContainer
@inject Utilities.StringUtil StringUtil;

@if (AuthService.LoginRequired && (!AuthService.IsLoggedIn || (AuthService.GetLoggedInBaid() != Baid && !AuthService.IsAdmin))) {
    NavigationManager.NavigateTo(!AuthService.IsLoggedIn ? "/Login" : "/");
} else if (User is null) {
    // Loading ...
    <MudContainer Style="display:flex;margin:50px 0;align-items:center;justify-content:center;">
        <MudProgressCircular Indeterminate="true" Size="Size.Large" Color="Color.Primary" />
    </MudContainer>
} else {
    <MudGrid Class="my-4 pb-10">
        <MudItem xs="12">
            <MudCard Outlined="true" Class="mb-6">
                <MudCardContent>
                    <MudGrid Spacing="3">
                        <MudItem xs="12">
                            <MudText Typo="Typo.h6">@Localizer["Add Access Code"]</MudText>
                            <MudForm @ref="bindAccessCodeForm">
                                <MudGrid Spacing="2" Class="mt-4">
                                    <MudItem xs="12" md="10">
                                        <MudTextField @bind-value="inputAccessCode" InputType="InputType.Text" T="string"
                                                      FullWidth="true" Required="@true" RequiredError="Access Code is required" Variant="Variant.Outlined" Margin="Margin.Dense"
                                                      Label=@Localizer["New Access Code"] />
                                    </MudItem>
                                    <MudItem xs="12" md="2">
                                        <MudButton OnClick="OnBind" FullWidth="true" StartIcon="@Icons.Material.Filled.AddCard" Color="Color.Primary" Variant="Variant.Filled" Class="mt-1">@Localizer["Add"]</MudButton>
                                    </MudItem>
                                </MudGrid>
                            </MudForm>
                        </MudItem>
                    </MudGrid>
                </MudCardContent>
            </MudCard>

            <MudCard Outlined="true">
                <MudCardContent>
                    <MudGrid Spacing="3" Class="pb-2">
                        <MudItem xs="12">
                            <MudText Typo="Typo.h6">@Localizer["Access Code"]</MudText>
                        </MudItem>
                        @for (var idx = 0; idx < User.AccessCodes.Count; idx++)
                        {
                            var accessCode = User.AccessCodes[idx];
                            var localIdx = idx + 1;
                            <MudItem xs="12" Class="py-0">
                                <div Style="border-bottom:1px solid #eee; padding: 5px 0;">
                                    <MudGrid Spacing="2" Class="d-flex align-center">
                                        <MudItem xs="12" md="8" Class="d-flex align-center">
                                            <pre class="mb-0" style="font-size:16px">
                                                @if (accessCode.Length % 4 == 0 && StringUtil.OnlyHexInString(accessCode))
                                                {
                                                    foreach (var digitGroup in StringUtil.SplitIntoGroups(accessCode, 4))
                                                    {
                                                        <span class="mr-2">@digitGroup</span>
                                                    }
                                                }
                                                else
                                                {
                                                    <span class="mr-2">@accessCode</span>
                                                }
                                            </pre>
                                        </MudItem>
                                        <MudItem xs="12" md="4" Class="d-flex justify-end">
                                            <MudButton OnClick="@(_ => DeleteAccessCode(accessCode))"
                                                       Size="Size.Small" Variant="Variant.Text" StartIcon="@Icons.Material.Filled.Delete"
                                                       Color="Color.Error">
                                                @Localizer["Delete"]
                                            </MudButton>
                                        </MudItem>
                                    </MudGrid>
                                </div>
                            </MudItem>
                        }
                    </MudGrid>
                </MudCardContent>
            </MudCard>
        </MudItem>    
    </MudGrid>
}