[Playground] 177 auth UI component

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

@@ -8,3 +8,4 @@
 Welcome to your new app.
 
 <ChatWindowComponent @rendermode="InteractiveServer"/>
+<ApiKeyInputComponent @rendermode="InteractiveServer" />

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

@@ -4,4 +4,7 @@
 
 <h1>playground page!</h1>
 
-<ConfigTabComponent @rendermode="InteractiveServer"/>
+<ConfigTabComponent @rendermode="InteractiveServer"/>
+<ApiKeyInputComponent @rendermode="InteractiveServer" />
+
+

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

@@ -0,0 +1,19 @@
+@using AzureOpenAIProxy.PlaygroundApp.Clients
+
+<FluentTextField @bind-Value=apiKeyValue TextFieldType="TextFieldType.Password" @oninput="SetApiKey">API key input</FluentTextField>
+
+@code {
+    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

@@ -1,5 +1,6 @@
 using Microsoft.Playwright;
 using Microsoft.Playwright.NUnit;
+using FluentAssertions;
 
 namespace AzureOpenAIProxy.PlaygroundApp.Tests.Pages;
 
@@ -68,4 +69,49 @@ string hiddenPanelSelector
         await Expect(selectedPanel).ToBeVisibleAsync();
         await Expect(hiddenPanel).ToBeHiddenAsync();
     }
+
+   [Test]
+    public async Task Given_ApiKeyInputField_When_FieldIsLoaded_Then_FieldIsMaskedByDefault()
+    {
+        // Arrange
+        var apiKeyInput = Page.Locator("fluent-text-field >> input");
+
+        // Act
+        var inputType = await apiKeyInput.GetAttributeAsync("type");
+
+        // Assert
+        inputType.Should().NotBeNull("API 키 입력 필드의 타입을 가져오는 데 실패했습니다.");
+        inputType.Should().Be("password", "API 키 입력 필드는 기본적으로 마스킹되어 있어야 합니다.");
+    }
+
+    [Test]
+    [TestCase("test-api-key-1")]
+    [TestCase("example-key-123")]
+    public async Task Given_ApiKeyInputField_When_ValuesAreEntered_Then_FieldDisplaysInputValue(string apiKey)
+    {
+        // Arrange
+        var apiKeyInput = Page.Locator("fluent-text-field >> input");
+
+        // Act
+        await apiKeyInput.FillAsync(apiKey);
+
+        // Assert
+        await Expect(apiKeyInput).ToHaveValueAsync(apiKey);
+    }
+
+    [Test]
+    public async Task Given_ApiKeyInputField_When_ValueIsSet_Then_CurrentValueShouldBeCorrect()
+    {
+        // Arrange
+        var apiKeyInput = Page.Locator("fluent-text-field >> input");
+        var apiKey = "test-api-key";
+
+        // Act
+        await apiKeyInput.FillAsync(apiKey);
+        var currentValue = await apiKeyInput.InputValueAsync();
+
+        // Assert
+        currentValue.Should().Be(apiKey, "API 키 입력 필드에 값이 제대로 설정되지 않았습니다.");
+    }
+
 }