[Playground] 177 auth UI component

src/AzureOpenAIProxy.PlaygroundApp/Components/Pages/Home.razor

@@ -1,5 +1,4 @@
 @page "/"
-@using AzureOpenAIProxy.PlaygroundApp.Components.UI
 
 <PageTitle>Home</PageTitle>
 

src/AzureOpenAIProxy.PlaygroundApp/Components/Pages/Playground.razor

@@ -8,6 +8,7 @@
 
     <FluentGrid Spacing="3" AdaptiveRendering="true" Justify="JustifyContent.FlexStart">
         <FluentGridItem Class="config-grid" xs="12" sm="12" md="4" lg="4" xl="4" xxl="4">
+            <ApiKeyInputComponent Id="api-key" @rendermode="InteractiveServer" />
             <ConfigTabComponent @rendermode="InteractiveServer"/>
         </FluentGridItem>
 

src/AzureOpenAIProxy.PlaygroundApp/Components/Pages/Tests.razor

@@ -5,12 +5,22 @@
 <DebugTargetComponent Id="debug-target" OnValueChanged="SetInput" />
 <DebugButtonComponent Id="debug-button" Input="@currentValue" />
 
+<ApiKeyInputComponent Id="api-key-input" OnKeyInput="HandleApiKeyInput" />
+<DebugButtonComponent Id="debug-api-key" Input="@apiKey" />
+
+
 @code {
     private object? currentValue;
+    private string? apiKey;
 
     private async Task SetInput(int newValue)
     {
         currentValue = newValue;
         await Task.CompletedTask;
     }
+
+    private void HandleApiKeyInput(string apiKeyValue)
+    {
+        apiKey = apiKeyValue;
+    }
 }

src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ApiKeyInputComponent.razor

@@ -0,0 +1,20 @@
+<FluentTextField Id="@Id" @bind-Value=apiKeyValue TextFieldType="TextFieldType.Password" @onchange="SetApiKey">API key input</FluentTextField>
+
+@code {
+    [Parameter]
+    public string? Id { get; set; }
+
+    private string? apiKeyValue { get; set; }
+
+    [Parameter]
+    public EventCallback<string> OnKeyInput { get; set; }
+
+    private async Task SetApiKey(ChangeEventArgs e)
+    {
+        apiKeyValue = e?.Value?.ToString();
+        if (apiKeyValue != null)
+        {
+            await OnKeyInput.InvokeAsync(apiKeyValue);
+        }
+    }
+}

test/AzureOpenAIProxy.PlaygroundApp.Tests/Pages/PlaygroundPageTests.cs

@@ -98,4 +98,46 @@ string hiddenPanelSelector
         await Expect(selectedPanel).ToBeVisibleAsync();
         await Expect(hiddenPanel).ToBeHiddenAsync();
     }
-}
+
+    [Test]
+    public async Task Given_ApiKeynputField_When_Endpoint_Invoked_Then_It_Should_Be_Show()
+    {
+        // Arrange
+        var id = "api-key";
+        var apiKeyInput = Page.Locator($"fluent-text-field#{id}").Locator("input");
+
+        // Act & Assert
+        await Expect(apiKeyInput).ToBeVisibleAsync();
+    }
+
+   [Test]
+   public async Task Given_ApiKeyInputField_When_Endpoint_Invoked_Then_It_Should_Be_Password_Type()
+    {
+        // Arrange
+        var id = "api-key";
+        var apiKeyInput = Page.Locator($"fluent-text-field#{id}").Locator("input");
+
+        // Act
+        var inputType = await apiKeyInput.GetAttributeAsync("type");
+
+        // Assert
+        inputType.Should().Be("password");
+    }
+
+    [Test]
+    [TestCase("test-api-key-1")]
+    [TestCase("example-key-123")]
+    public async Task Given_ApiKeyInputField_When_Changed_Then_It_Should_Be_Updated(string apiKey)
+    {
+        // Arrange
+        var id = "api-key";
+        var apiKeyInput = Page.Locator($"fluent-text-field#{id}").Locator("input");
+
+        // Act
+        await apiKeyInput.FillAsync(apiKey);
+
+        // Assert
+        await Expect(apiKeyInput).ToHaveValueAsync(apiKey);
+    }
+
+}