@page "/client"
@inject IStringLocalizer<Client> Localizer

<h3>Get client connection information</h3>

<h4>More for system log tracking</h4>

<DemoBlock Title="Basic usage" Introduction="The injection service displays client information" Name="Normal">
    <p>Introduction to usage</p>
    <div class="mb-3">
        <p>1. The <code>UseBootstrapBlazor</code> middleware in the <b>Startup.cs</b> file that client information collection is performed.</p>
        <Pre>public void Configure(IApplicationBuilder app)
{
    // ...
    // 增加下面这一行
    app.UseBootstrapBlazor();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapDefaultControllerRoute();
        endpoints.MapBlazorHub();
        endpoints.MapFallbackToPage("/_Host");
    });
}</Pre>
    </div>

    <Tips>
        <p><code>app.UseBootstrapBlazor</code> Middleware is located assembly <code>BootstrapBlazor.Middleware</code>, please refer to this package yourself for proper use</p>
    </Tips>

    <div class="mb-3">
        <p>2. The component uses the injection service <code>WebClientService</code> to call the <code>GetClientInfo</code> method.</p>
        <Pre>[Inject]
[NotNull]
private WebClientService? ClientService { get; set; }

private ClientInfo? ClientInfo { get; set; }

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await base.OnAfterRenderAsync(firstRender);

    if (firstRender)
    {
        ClientInfo = await ClientService.GetClientInfo();
        StateHasChanged();
    }
}
</Pre>
    </div>

    <GroupBox Title="Connection information">
        <div class="row g-3 form-inline">
            <div class="col-12 col-sm-6">
                <Display Value="ClientInfo.Id" DisplayText="Connection ID" ShowLabel="true" />
            </div>
            <div class="col-12">
                <Display Value="ClientInfo.RequestUrl" DisplayText="RequestUrl" ShowLabel="true" />
            </div>
            <div class="col-12 col-sm-6">
                <Display Value="ClientInfo.Ip" DisplayText="Ip" ShowLabel="true" />
            </div>
            <div class="col-12 col-sm-6">
                <Display Value="ClientInfo.OS" DisplayText="OS" ShowLabel="true" />
            </div>
            <div class="col-12 col-sm-6">
                <Display Value="ClientInfo.Browser" DisplayText="Browser" ShowLabel="true" />
            </div>
            <div class="col-12 col-sm-6">
                <Display Value="ClientInfo.Engine" DisplayText="Engine" ShowLabel="true" />
            </div>
            <div class="col-12 col-sm-6">
                <Display Value="ClientInfo.Device" DisplayText="Device" ShowLabel="true" />
            </div>
            <div class="col-12 col-sm-6">
                <Display Value="ClientInfo.Language" DisplayText="Language" ShowLabel="true" />
            </div>
            <div class="col-12">
                <BootstrapInput Value="ClientInfo.UserAgent" DisplayText="UserAgent" ShowLabel="true" readonly />
            </div>
        </div>
    </GroupBox>
</DemoBlock>

// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public partial class Client
{
    [Inject]
    [NotNull]
    private WebClientService? ClientService { get; set; }

    private ClientInfo ClientInfo { get; set; } = new ClientInfo();

    /// <summary>
    /// 
    /// </summary>
    /// <param name="firstRender"></param>
    /// <returns></returns>
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);

        if (firstRender)
        {
            ClientInfo = await ClientService.GetClientInfo();
            StateHasChanged();
        }
    }
}